Vue3 migration (#4198)

* docs(migration): Phase 1 inventory — Vue 2 / AD-Vue 1 surface area Captures the breakage surface for the Vue 3 + Ant Design Vue 4 + Vite migration: 17,650 lines across 69 templates, 3,145 a-* component instances across 63 files, with per-pattern counts and file lists. Key findings: - No Vue filters anywhere — dodges a major Vue 3 breaking change - 358 v-model uses; AD-Vue 4 absorbs most, custom components don't - 233 <template slot="X"> usages must become <template #X> - 49 scopedSlots: { ... } column defs need new slots: { ... } shape - a-icon is removed in AD-Vue 4 — every icon must be imported Establishes the 8-phase order; Phase 2 (Vite toolchain) is next. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * build(frontend): Phase 2 — scaffold Vite + Vue 3 + AD-Vue 4 Adds a frontend/ directory that lives alongside the legacy web/html/ Vue 2 templates during the migration. Vite builds into ../web/dist/ so the Go binary will be able to embed the result via embed.FS once Phase 4 starts moving real pages over. - package.json pins Vue 3.5, Ant Design Vue 4.2, Vite 6, vue-i18n 10 - vite.config.js: dev server on :5173 with API proxy to the Go panel on :2053; build output to ../web/dist/ - src/App.vue is currently a smoke-test placeholder — delete once the first real page (login) lands in Phase 4 - node_modules and dist are already ignored at repo root To verify locally: cd frontend && npm install && npm run dev Pages will be migrated one at a time on the vue3-migration branch. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(frontend): Phase 3 — port utils, models, axios, websocket as ES modules Ports the framework-agnostic JS from web/assets/js/ into frontend/src/ so Vue 3 pages can import what they need without relying on script-tag globals. - web/assets/js/util/index.js (927 lines, 21 classes) → frontend/src/utils/legacy.js + a barrel at utils/index.js. All classes are now named exports. - Vue.prototype.$message in HttpUtil → direct import of `message` from ant-design-vue (Vue 3 has no Vue.prototype). - RandomUtil.randomShadowsocksPassword previously defaulted to SSMethods.BLAKE3_AES_256_GCM from inbound.js, creating a circular import. Replaced with the literal string default. - MediaQueryMixin (Vue 2 mixin) removed. Replaced by composables/useMediaQuery.js — Vue 3 composable returning reactive `isMobile`. - axios-init.js wrapped as setupAxios(); Qs global → npm `qs`. - websocket.js exported as WebSocketClient class; the implicit window.wsClient global is gone — pages instantiate it themselves. - model/{inbound,outbound,dbinbound,setting,reality_targets}.js copied with `export` added on every top-level declaration. Imports between models and utils are wired up explicitly. - subscription.js deferred to Phase 5 (it's a Vue 2 mount, not a util). - App.vue smoke test exercises SizeFormatter / RandomUtil / Wireguard / useMediaQuery so the user can verify Phase 3 with `npm run dev`. Run `cd frontend && npm install && npm run dev` — qs was added so a fresh install is required. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 4 — port login.html to Vue 3 + AD-Vue 4 + Vite 8 First real page in the new toolchain. Multi-page Vite: each migrated page is its own entry. login.html now lives at frontend/login.html with a thin entrypoint at frontend/src/login.js mounting LoginPage.vue. Vite 6 → Vite 8.0.11 (per user request). Requires Node 20.19+ or 22.12+. @vitejs/plugin-vue bumped to ^6.0.6 (peers vite ^8). Ant Design Vue stays on 4.2.6 — there is no AD-Vue 6. Vue 2 → Vue 3 / AD-Vue 1 → AD-Vue 4 syntax changes hit on this page: - new Vue({ el, delimiters, data, methods }) → createApp + <script setup> - mounted() → onMounted() - <template slot="X"> → <template #X> - <a-icon slot="prefix" type="user"> → <template #prefix><UserOutlined /> </template> with explicit @ant-design/icons-vue imports - v-model.trim → v-model:value (AD-Vue 4 uses named v-model on inputs) Three legacy features deferred so Phase 4 stays small: - i18n (Phase 7 wires up vue-i18n) - theme switcher (custom component pending Phase 5) - headline word-cycle animation (purely aesthetic) Run `cd frontend && npm install && npm run dev`, open http://localhost:5173/login.html. With Go panel running on :2053 the form submits real credentials via the configured proxy. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5a — theme system + Vite 8 + vue-i18n 11 Bumps Vite to 8.0.11 (npm install picked up 6.4.2 from the stale lockfile; clean install resolves the new constraint). Bumps vue-i18n to 11.1.4 since v10 was just EOL'd. Migrates aThemeSwitch.html — the two-flavor theme picker + global themeSwitcher object — into: - composables/useTheme.js: single reactive `theme` state with toggleTheme / toggleUltra. Boot side-effect applies the stored theme to <body>/<html> before Vue renders; watchEffect persists changes back to localStorage. - components/ThemeSwitch.vue: full menu version for the main panel. - components/ThemeSwitchLogin.vue: login-popover version. AD-Vue 1 → 4 changes hit on this component: - <a-icon type="bulb" :theme="filled|outlined"> dropped — replaced by explicit BulbFilled / BulbOutlined imports from @ant-design/icons-vue, swapped via <component :is="BulbIcon"> - Vue.component('a-theme-switch', { ... }) global registration → SFC + per-page import - this.$message.config(...) (Vue 2 instance method) → message.config(...) imported from ant-design-vue, called once in login.js at boot Login page now surfaces a settings button → popover → theme picker. Known gap: web/assets/css/custom.min.css isn't yet imported into the new bundle, so toggling dark mode currently only re-themes AD-Vue's own components, not the panel chrome. The body class is still toggled so behavior is correct; visual fidelity returns when custom.css is ported or directly imported. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5b — port four shared components to Vue 3 CustomStatistic.vue and SettingListItem.vue are mechanical Vue.component → SFC ports. AppSidebar.vue: AD-Vue 4 dropped <a-icon :type="dynamic">, so the five sidebar icons (dashboard/user/setting/tool/logout) live in a name→component map and render via <component :is>. The legacy <a-drawer slot="handle"> hack is replaced with a sibling fixed- position toggle button. Tab paths take basePath/requestUri as props instead of pulling them from Go template scope. TableSortable.vue: the biggest Vue 3 rewrite of this phase. - $listeners is gone — replaced by inheritAttrs: false + explicit attrs forwarding - scopedSlots: this.$scopedSlots collapsed into Vue 3's unified slots object — just iterate Object.keys(this.slots) and forward - Vue 2 h(tag, { props, on, scopedSlots }, children) → Vue 3 h(tag, { ...props, ...on }, slotsObject) - 'a-table' string → resolveComponent('a-table') so app.use(Antd) registration is honored - inject: ['sortable'] (Options API) → inject('sortable', null) (Composition API) inside the trigger child - beforeDestroy → beforeUnmount - customRow's return shape flattened (no nested props/on/class) Two intentional skips, documented in the migration doc: - aClientTable.html — slot fragments, not a component. Migrates inline with inbounds.html (new Phase 5f). - aPersianDatepicker.html — wraps a Persian-only third-party lib; defer until settings.html lands. Build verified with vite 8.0.11. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): anchor Vite dev proxy so /login.html isn't forwarded The /login proxy entry was matching any path starting with /login — including /login.html, which Vite is supposed to serve itself. Without the Go backend running, this caused ECONNREFUSED noise on every page load. Switched to regex patterns anchored with ^...$ so only the bare backend paths (/login, /logout, /getTwoFactorEnable) and explicit sub-routes (/panel/*, /server/*) get proxied. Static .html files Vite serves directly are no longer matched. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): real dark mode + silence dev proxy ECONNREFUSED noise Two issues from running login.html against no Go backend: 1. Dark mode toggled the body class but didn't actually re-theme any AD-Vue components. The legacy panel relied on custom.min.css which we haven't ported. AD-Vue 4 ships its own dark algorithm — wrap LoginPage in <a-config-provider :theme="{ algorithm }"> driven by our useTheme state, and AD-Vue restyles every component for free. Page chrome (background, card, title) gets explicit .is-dark CSS since the algorithm only covers AD-Vue components. 2. Vite logged every failed proxy attempt loudly. When the Go panel isn't running locally that's pure noise. Added a configure() callback that swallows ECONNREFUSED specifically; real errors (timeouts, 5xx, anything else) still surface. Both fixes are dev-experience only — production build is unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): use legacy panel palette for login page dark mode Earlier dark mode used invented colors (#141a26 page bg, #1f2937 card) that didn't match the rest of the panel. Replaced with the actual values from web/assets/css/custom.min.css: light dark ultra-dark bg #c7ebe2 bg #222d42 bg #0f2d32 card #fff card #151f31 card #0c0e12 title #008771 title #fff/.92 title #fff/.92 Drove everything off CSS custom properties on .login-app so the .is-dark / .is-ultra class swap is a few var overrides instead of duplicating selectors. Also restored the legacy card metrics (2rem radius, 4rem 3rem padding, 2rem title) so the new page matches the old panel's geometry, not just its colors. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): match legacy wave layout + recolor for dark mode The wave SVG had inline fill="#c7ebe2" (mint) on the bottom wave, so in dark/ultra-dark mode it rendered as a pale-white blob against the dark page. Stripped the inline fills, drove them off CSS variables that swap with .is-dark / .is-ultra: light: green tints + #c7ebe2 (mint) on the bottom wave dark: #222d42 across all four waves ultra-dark: #0f2d32 The wave was also positioned wrong — anchored to the top 200px of the viewport with absolute positioning. Restored the legacy layout: - .waves-header is fixed to the top of the viewport with z-index -1 so the form floats over it - .waves-inner-header pushes the wave SVG down to ~50vh with a 50vh-tall solid block of the page color - .waves SVG itself is 15vh tall, sitting at the bottom of that block Net effect: top half is solid-colored, then a wavy edge transitions into the rest of the page, with the form centered on top — matching the legacy panel exactly. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): bring wave-header to front so the wave actually shows Two layering bugs were hiding the wave entirely: 1. .ant-layout-content had background: var(--bg-page) which painted an opaque rectangle covering the full content area — including the fixed wave-header behind it. Made the layout/content transparent and moved the bg paint up to .login-app (the outer ant-layout). 2. .waves-header had z-index: -1 which on its own was fine, but with .ant-layout-content opaque on top it was doubly buried. Promoted the wave-header to z-index: 0 and gave the form .login-row z-index: 1, so the form sits above the wave and the wave sits above the page-bg. Also set --bg-page to the legacy mint (#c7ebe2) for light mode so the bottom half of the page below the wave matches the legacy panel (was white). Dark mode stays at the surface-100/login-wave palette. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): match legacy wave animation timings + dark page bg Two reasons the bottom wave looked static in dark/ultra-dark: 1. Animation durations were 7s/10s/13s/20s. Legacy uses 4s/7s/10s/13s. The 20s on the bottom wave was so slow that against the low dark- mode contrast it read as motionless. Restored the legacy timings. 2. --bg-page in dark mode was #151f31 (card color / surface-100), but the legacy .under uses surface-200 (#222d42) — that's the color of the bottom half of the page, the same as the wave fill, so the wave appears to flow into the page rather than meeting a hard edge. Now it does. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): restore Hello/Welcome headline cycle on login Earlier I deferred the legacy headline word-cycling animation as "purely aesthetic". Restored it: the title now alternates between 'Hello' and 'Welcome' every 2 seconds, matching the legacy panel. The legacy implementation toggled .is-visible / .is-hidden classes on two <b> elements via setTimeout chains and DOM querying. Replaced with a reactive ref + Vue 3 <Transition mode="out-in"> so the fade between words is declarative — no manual DOM manipulation, and the interval is properly cleaned up in onBeforeUnmount. The earlier "Welcome to 3x-ui" string was wrong on two counts: it should be just "Welcome", and it should be one of two cycling words with "Hello" preceding it. Ultra-dark palette already matched legacy after the prior wave timing fix; no additional changes needed there beyond the animation speeds that now also apply to ultra-dark via the shared CSS rules. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): correct dark login bg + give ultra-dark wave real contrast Two related fixes: 1. Default-dark wave-header bg was wrong. I had #0a2227, but that's the *ultra-dark* override; default dark uses --dark-color-background = #0a1222. Now the dark-mode top half is the legacy purple-blue instead of teal. 2. Ultra-dark wave fill is intentionally near-identical to its bg in the legacy palette (#0f2d32 vs #0a2227, ~5/11/11 RGB delta), which makes the wave look static even though the animation is running. Bumped --wave-fill / --wave-fill-bottom to #1f4d52 in ultra-dark only — far enough above the bg that the motion reads, while staying within the same teal hue family. Also corrected ultra-dark --bg-page back to #0f2d32 (was briefly #0c0e12, which is the card color, not the page color). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): drop ultra-dark bottom-wave seam line Last fix made the wave fill #1f4d52 in ultra-dark for both top-three waves and the bottom wave, which gave visible motion but exposed a hard horizontal line where the bottom wave's flat lower edge met the page bg (#0f2d32). The user noticed it as "the wave at the bottom not moving its like a line" — they were seeing the SVG's clipped bottom edge, not the wave itself. Solution: only the top three waves get the brighter fill (those carry the visible motion). The bottom wave reverts to #0f2d32 = --bg-page, so its flat bottom edge merges seamlessly into the page below. Net effect: motion is still visible (from waves 2 and 3), and there's no seam line at the bottom of the SVG. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-i — index.html dashboard shell Replaces the smoke-test App.vue with a real IndexPage shell so the /index.html route now boots the actual dashboard layout in Vue 3: - a-config-provider drives AD-Vue 4's dark algorithm from useTheme (same pattern as LoginPage) - AppSidebar (Phase 5b component) is wired in with basePath + requestUri props - a-spin loading state with placeholder card while we build out the rest of the page - Page palette mirrors the legacy: light #f0f2f5, dark #0a1222 (--dark-color-background), ultra-dark #21242a The 1,805-line legacy index.html is too big for one commit. Split into five sub-phases on the todo list: ii) status cards + /server/status polling, iii) xray status card, iv) logs/backup/panel-update modals, v) custom-geo section. frontend/src/App.vue and frontend/src/main.js (smoke-test scaffold) are removed — both purposes now served by IndexPage and index.js. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-ii — live status cards on the dashboard Adds the CPU / memory / swap / disk dashboard cards to IndexPage, backed by a useStatus() composable that polls /panel/api/server/status every 2 s and a Status / CurTotal model ported from the legacy inline classes in index.html. - models/status.js — Status & CurTotal classes (CurTotal exposes reactive .percent and .color computed-style getters; Status maps the API payload + xray state to color/message strings) - composables/useStatus.js — 2s polling with shallowRef so each fetch swaps the whole Status object atomically. WebSocket integration intentionally deferred — the legacy panel falls back to this same 2s polling when its websocket drops, so we ship the proven path first and add WS on top in a later sub-phase. - pages/index/StatusCard.vue — four a-progress dashboard widgets in a 2x2 grid (mobile collapses to a 1x4). CPU widget exposes a history button; the modal it opens is part of 5c-iv. - IndexPage now consumes both, plus useMediaQuery so the layout responds to viewport changes. AD-Vue 4 changes: <a-icon type="area-chart"|"history"> dropped in favor of explicit AreaChartOutlined / HistoryOutlined imports. <a-tooltip slot="title"> → <template #title>. i18n strings still hardcoded English (Phase 7 wires up vue-i18n). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-iii — xray status card + stop/restart controls XrayStatusCard.vue renders the right-hand card on the dashboard: - Title with mobile-only version tag (matches the legacy collapse) - Animated badge for the running/stop/error states. The pulsing dot comes from xray-pulse keyframes (renamed from runningAnimation in legacy custom.min.css). Color rings on the badge use the legacy's per-state border-color overrides on .ant-badge-status-processing. - Error state replaces the badge with a popover that surfaces the multi-line errorMsg + a logs shortcut. - Action row at the bottom: optional logs (when ipLimitEnable), stop, restart, and version switch. IndexPage now wires: - POST /panel/api/server/stopXrayService and /restartXrayService, followed by a refresh() so the status card reflects the new state without waiting for the next poll tick - POST /panel/setting/defaultSettings to read ipLimitEnable - Stub handlers for the panel-logs / xray-logs / version-switch / cpu-history modals — those land in 5c-iv AD-Vue 4 changes hit on this card: - <a-icon type="bars|poweroff|reload|tool"> → explicit BarsOutlined / PoweroffOutlined / ReloadOutlined / ToolOutlined - <span slot="title|content"> → <template #title|#content> - The .xray-*-animation classes ship as global <style> (not scoped) so they pierce AD-Vue's internal .ant-badge-status-* DOM. i18n still hardcoded English; Phase 7 wires vue-i18n. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-iv (a) — panel update / logs / backup modals Adds three of the six dashboard modals plus a Quick Actions card that surfaces them. The remaining three (xray logs, version picker, CPU history sparkline) ship in 5c-iv-b. - PanelUpdateModal.vue — current vs latest version, "update now" button. Confirm dialog → POST /panel/api/server/updatePanel, then poll /server/status for up to 90s until the new panel answers, then reload. - LogModal.vue — panel logs viewer. Filters: rows (10-500), level (debug/info/notice/warning/error), syslog toggle. Auto-fetches on open and on every filter change. Color-coded timestamps and levels via inline span styles. Download button writes the raw log to x-ui.log via FileManager.downloadTextFile. - BackupModal.vue — db export (window.location to /getDb) and import (FormData upload to /importDB, then panel restart + reload). - Quick Actions card surfaces Logs / Backup / Update buttons and shows an orange update badge (extra slot) when an update is available. Modal-busy pattern: long-running operations (update, import) emit a `busy` event with a tip; IndexPage flips its a-spin overlay so the user sees a loading message while the panel is restarting. AD-Vue 4 changes: - v-model on <a-modal> renamed to v-model:open - v-model on <a-input>/<a-select>/<a-checkbox> uses the named v-model:value / v-model:checked pattern - <a-icon type="..."> dropped — explicit Ant icon imports (BarsOutlined, CloudServerOutlined, CloudDownloadOutlined, DownloadOutlined, UploadOutlined, SyncOutlined) - Modal.confirm() replaces this.$confirm() since setup() has no `this` Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-iv (b) — cpu-history / xray-logs / xray-version modals Wires up the three remaining dashboard buttons that were stubbed in 5c-iv (a): the CPU history button on StatusCard, the xray-logs button in XrayStatusCard's error popover and ipLimitEnable action, and the "Switch xray" button in XrayStatusCard's action footer. - Sparkline.vue: shared SVG line chart (composition-API port of the inline Vue 2 component). Per-instance gradient id avoids defs collisions between sparklines on the same page. - CpuHistoryModal.vue: bucket dropdown (2m/30m/1h/2h/3h/5h) drives GET /panel/api/server/cpuHistory/{bucket}; renders via Sparkline. - XrayLogModal.vue: rows + filter + direct/blocked/proxy checkboxes; POST /panel/api/server/xraylogs/{rows} returns access-log entries rendered as a colored HTML table; download button serializes to text. - VersionModal.vue: collapse with Xray panel (radio list of versions from getXrayVersion, install via installXray/{version}) and Geofiles panel (per-file reload + Update all). CustomGeo collapse panel is Phase 5c-v. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5c-v — custom-geo section in VersionModal Adds the third collapse panel ("Custom geo") that lets users register external geosite/geoip files referenced by routing rules via ext:<filename>:tag. Backend endpoints are unchanged. - CustomGeoSection.vue: bordered table over /panel/api/custom-geo/list with per-row edit, download (refetch), and delete actions, plus an Add button and Update-all. Lazy-loads the list when the parent collapse opens this panel — closed panels don't fetch. - CustomGeoFormModal.vue: shared add/edit form with the same alias regex (^[a-z0-9_-]+$) and URL validation as legacy. Type and alias are immutable when editing — backend rejects changes anyway. - ext:<filename>:tag value is click-to-copy via ClipboardManager. - Relative time is computed inline (no moment dep); tooltip shows the absolute timestamp. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-i — settings page shell + dirty tracking Adds the settings entry as a new Vite multi-page input. Lays down the shared page chrome (sidebar, save bar, restart, security alert) and the AllSetting fetch/dirty-poll lifecycle so 5d-ii through 5d-vi can drop in tab partials without re-implementing it. - settings.html + src/settings.js: third Vite entry; mounts SettingsPage. - SettingsPage.vue: page chrome with the legacy two-button save/restart bar, conf-alerts banner, and 5 a-tabs (4 always-visible + the formats tab gated on subJsonEnable || subClashEnable). Each tab body is an a-empty placeholder until 5d-ii…vi fill them in. - useAllSetting.js composable: POST /panel/setting/all on mount, mirrors the legacy 1s busy-loop dirty check via setInterval, and exposes fetchAll/saveAll. saveDisabled flips off as soon as the user diverges from the server snapshot. - restartPanel rebuilds the URL (host/port/scheme/base path) from the saved settings so users land on the new endpoint after a port or cert change. - models/setting.js: adopts the @/utils alias and a leading file-level doc — semantics unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-ii — settings General tab Ports the panel/general partial (the largest single tab) — six collapse panels: General, Notifications, Certificates, External traffic webhook, Date and time, LDAP. - GeneralTab.vue receives the reactive AllSetting via props and binds fields directly with v-model:value; SettingsPage stays the sole fetch/save owner. - remarkModel/remarkSeparator surfaced as computed v-models that read+write the underlying single-string field (legacy stores them packed as <separator><orderedKeys>, e.g. "-ieo"). - LDAP inbound-tags select binds to a CSV ↔ array computed; inbound options come from /panel/api/inbounds/list on mount. - Language select stays cookie-based via LanguageManager and reloads on change — same UX as legacy. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-iii — settings Security tab + 2FA modal Ports the panel/security partial: change-credentials form and 2FA toggle. The 2FA modal is a new shared component since enabling 2FA, disabling 2FA, and changing credentials all funnel through it with slightly different copy. - TwoFactorModal.vue: 'set' flow renders a QR code + manual key + a 6-digit verifier; 'confirm' flow renders just the verifier. The parent passes a confirm(success) callback that fires only when the entered code matches the live TOTP value (otpauth lib). - SecurityTab.vue: holds the local user form (oldUsername/oldPassword/ new*), POSTs /panel/setting/updateUser, and on success force-redirects to logout. When 2FA is on, the credentials change goes through the confirm-modal first. - toggleTwoFactor leaves the switch read-only (the v-bound :checked matches AllSetting) and only flips after the modal succeeds, so cancelling out leaves state unchanged. - Adds otpauth ^9.5.1 dep (qrious was already present). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-iv — settings Telegram tab Ports the panel/telegram partial: bot enable/token/chatId/lang in the General panel, schedule/backup/login/CPU-threshold in Notifications, and proxy/API-server overrides in the third panel. All bindings live on the shared AllSetting reactive — no fetch/save logic in this tab. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-v — settings Subscription general tab Ports the subscription/general partial — four collapse panels covering the master enable switches, presentation/template fields, certs, and update interval. - Sub path goes through a strip-on-input + normalize-on-blur computed: legacy stripped `:` and `*` and ensured the value starts and ends with a single `/` — same here. - Both `subEnableRouting` and the announce/profile/title/support URLs are bound directly on AllSetting. - The "Subscription URI override" placeholder mirrors the legacy pattern for the manual full-URL form. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5d-vi — settings Subscription formats tab Ports the subscription/json partial — paths/URIs for the JSON and Clash formats plus the four packed-JSON sub-fields: fragment, noises, mux, and direct routing rules. - subJsonFragment / subJsonMux / subJsonNoises / subJsonRules are each a JSON string on the wire; the tab exposes their fields as computed v-models that read+write the underlying JSON. Toggling a top-level switch off resets the field to "" (matches legacy semantics). - Direct routing rules surface the IP and domain entries of the seed rule array as multi-select tag inputs; setting/removing tags edits the rules array in place rather than rebuilding it from scratch, so manually-added rules are preserved. - Tab is gated on subJsonEnable || subClashEnable in the parent (only rendered when the user actually opted into one of those formats). This closes Phase 5d — full settings page parity with the legacy panel across all five tabs. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): route /panel/<route> to migrated pages in dev The sidebar links to production-style URLs like /panel/settings, but in dev that gets proxied to the legacy Go template — which fails because we haven't loaded the legacy asset chain. Add a proxy bypass so /panel and /panel/settings are served from index.html / settings.html on the Vite dev server itself. Unmigrated routes (inbounds, xray) still proxy to Go. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(csrf): expose token endpoint for SPA pages and fetch it from axios The legacy panel pages got their CSRF token from a <meta name="csrf-token"> tag rendered by Go. SPA pages built by Vite don't have that, so every unsafe (POST/PUT/DELETE) request from them was hitting CSRFMiddleware with no token and getting 403 — visible as the settings page being stuck on "Loading…" because POST /panel/setting/all failed. - web/controller/xui.go: GET /panel/csrf-token returns the session token. Lives under the xui group so checkLogin still gates it; the CSRFMiddleware on the same group is a no-op for GET. - frontend/src/api/axios-init.js: cache the token at module scope and lazy-fetch it when a non-safe request needs one. Seed from the meta tag first when present (legacy compat). On a 403 response, drop the cache and retry once — handles the case where a server restart rotated the token after the SPA loaded. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): keep sidebar links absolute when basePath is empty The dashboard sidebar built tab keys as basePath + 'panel/...'. In dev the window-injected basePath is '' so the resulting key was a relative path like 'panel/settings'. When the browser resolved that against the current /panel/settings URL it produced /panel/panel/settings — visible as broken navigation between Dashboard and Settings. Force a leading slash so the keys are always absolute regardless of whether the host injected a basePath. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-i — inbounds page shell + list fetch Adds the inbounds entry as a fourth Vite multi-page input and wires /panel/inbounds through the dev proxy bypass. Lays down the page chrome (sidebar, summary statistics card, refresh button) and the fetch lifecycle composable so 5f-ii onward can drop in the table columns and the modals without re-implementing it. - inbounds.html + src/inbounds.js: fourth Vite entry; mounts InboundsPage. - InboundsPage.vue: sidebar + summary card (totals over up/down, all-time, inbound count, client tags) + a basic table with enable/ remark/port/protocol/traffic/expiry columns. Row actions, popovers, search/filter, auto-refresh, and the WebSocket delta path are all deferred to subsequent 5f subphases. - useInbounds.js composable: GET /panel/api/inbounds/list + POST /panel/api/inbounds/onlines + POST /panel/api/inbounds/lastOnline + POST /panel/setting/defaultSettings, then computes the per-inbound clientCount roll-ups (active/deactive/depleted/expiring/ online/comments) the table popovers consume. - models/dbinbound.js + models/inbound.js: switched the legacy-utils import to the @/utils alias for consistency with the rest of the app. Semantics unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-ii — inbound list table + search/filter + auto-refresh Fleshes out the inbound list with the full column set, search & filter toolbar, row enable toggle wired to /panel/api/inbounds/setEnable/:id, and a per-row action dropdown that emits events the parent will route to modals as those land in 5f-iii through 5f-vii. - InboundList.vue (new): toolbar (Add inbound + General actions dropdown + Refresh + auto-refresh popover), search-or-filter switch with the legacy radio buttons (Active/Disabled/Depleted/Depleting/ Online), and a a-table with desktop and mobile column variants. Cells use AD-Vue 4's #bodyCell slot — protocol/clients/traffic/ allTime/expiry/info cells render the same popovers and tags as legacy. Row enable switch is optimistic with rollback on POST failure. - visibleInbounds computed mirrors the legacy search and filter projection: deep search through dbInbound + clients, or filter reduces inbound.settings.clients to the selected bucket so the table only shows matching client rows. - Auto-refresh interval is read/written to localStorage with the same keys (`isRefreshEnabled`, `refreshInterval`) as the legacy panel. WebSocket delta updates are still deferred. - Action menu emits event payloads {key, dbInbound}; the parent currently shows a "coming in later 5f subphase" toast for each. Modals (edit/qr/clone/delete/reset/info/clients) land in 5f-iii through 5f-vii. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(inbounds): wrap popover-table rows in <tbody> Vue's template compiler warned that <tr> can't be a direct child of <table> per the HTML spec; the browser silently inserts a <tbody> wrapper but Vue's SSR/hydration path doesn't, which can cause hydration mismatches. Add explicit <tbody> in both popover tables (traffic + mobile-info). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-iii — inbound add/edit modal + delete/clone/reset Wires up the inbound CRUD flows. The protocol-specific and transport- specific forms are still ahead in 5f-iii-b — for now the modal exposes those as JSON textareas so users can both edit existing inbounds without losing settings and create new ones from default templates. - InboundFormModal.vue: tabbed modal with a full Basics tab (enable, remark, protocol, listen, port, total GB, traffic reset, expiry date) and three JSON-edit tabs (Settings, Stream, Sniffing). Add mode stamps a fresh template per protocol via Inbound.Settings.getSettings(protocol); changing the protocol in add mode restamps the JSON. Edit mode pretty-prints the existing JSON so the user sees the same fields they save back. - POST /panel/api/inbounds/add or /panel/api/inbounds/update/:id on submit; on success the parent refreshes the list and the modal closes. Malformed JSON in any of the three textareas surfaces a message.error and aborts the save without losing user input. - InboundsPage.vue: wires the row action menu to real handlers — edit (opens the modal in edit mode), delete, reset-traffic, clone, reset-clients, del-depleted-clients all go through Modal.confirm and refresh on success. General actions menu wires reset-inbounds / reset-clients / del-depleted-clients the same way. Remaining actions (qrcode/info/import/export/copyClients) still toast as "coming soon" — those land in 5f-iv and 5f-v. - Adds dayjs ^1.11.20 dep for the a-date-picker v-model interop. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-iv — client add/edit + bulk-add modals Wires per-inbound client management. Both flows go through the same addClient/updateClient endpoints as legacy; the modals just funnel the form state into the right shape (`{id, settings: '{"clients": [...]}'}`). - ClientFormModal.vue: protocol-aware single-client editor — email/ password/id/auth/security/flow/subId/tgId/comment/ipLimit/totalGB/ expiry/renewal fields are shown/hidden per protocol like legacy. Edit mode displays the per-client traffic stats with a reset button; IP-limit log is read on click and clearable. Random helpers (sync icon next to each label) regenerate UUID/email/ password/sub-id values. - ClientBulkModal.vue: 1–500 clients in one POST, with the legacy five email-generation modes (Random / +Prefix / +Num / +Postfix / Pure-Prefix-Num-Postfix). Builds clients via the protocol-aware factory and concatenates their toString() output into a single settings.clients JSON array. - InboundsPage.vue: opens both modals from the row action menu (`addClient` / `addBulkClient`). They both refresh the inbound list on success. - Outstanding row actions still toast as "coming soon": qrcode, showInfo, copyClients, clipboard. Those land in 5f-v / 5f-vi. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-v — inbound info + QR-code modals Wires the row "info" and "qrcode" actions and ports the legacy inbound_info_modal end-to-end. The info modal handles every protocol the legacy panel did: • multi-user (VMess/VLess/Trojan/SS-multi/Hysteria) — per-client table + share links + per-link QR; • SS single-user — share link + QR; • WireGuard — full peer table with downloadable peer-N.conf and a wg:// share link per peer; • Mixed/HTTP/Tunnel — connection-detail tables. - QrPanel.vue: shared link card (header tag, copy button, optional download button, optional QR canvas, monospace footer with the raw value). Per-instance QRious instances are repainted on value/size change. - InboundInfoModal.vue: full info modal. Subscription URL block keys off subSettings.subURI/subJsonURI; IP-log lazy-loads on open and surfaces refresh + clear; tg-id, last-online, depleted/enabled tags all match legacy. - QrCodeModal.vue: lighter modal used for the row "qrcode" action on SS-single and WireGuard inbounds (just the QRs, no info table). - InboundsPage.vue: wires both flows. checkFallback() reproduces the legacy logic — when an inbound listens on a unix-socket fallback (`@<name>`), the link generator is pointed at the root inbound that owns the listen address so QRs/links carry the public host:port + the right TLS state. Multi-client navigation (focusing a specific client's links) is deferred to 5f-vi where the per-inbound expand- row table will pass the email through. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-vi — per-inbound client expand-row table Each multi-user inbound row in the list now expands to show its client roster, mirroring the legacy aClientTable component. - ClientRowTable.vue: inner a-table with full desktop column set (action icons / enable / online / client-with-status-dot / traffic with progress bar / all-time / expiry with reset cycle) and a collapsed mobile variant (single dropdown menu + popover info). Self-contained: stats are looked up via a per-inbound email->stats Map; per-client confirms (reset/delete) live on the row. - The component emits typed events (edit/qrcode/info/reset-traffic/ delete/toggle-enable) — InboundsPage routes them back to the existing client and info modals (with `findClientIndex` so the modal opens focused on the right client). - InboundList.vue: hooks ClientRowTable into the a-table's expandedRowRender slot; row-class-name `hide-expand-icon` and a scoped CSS rule hide the chevron for non-multi-user inbounds (HTTP/Mixed/Tunnel/WireGuard/SS-single) so they keep looking flat. - toggle-enable-client routes through updateClient with the same `{id, settings: '{"clients": [...]}'}` shape as the other modals, so backend parsing stays single-pathed. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-iii-b — replace inbound modal JSON textareas with structured forms Rewrites InboundFormModal to look like the legacy panel: structured forms for the common case, with a compact "Advanced (JSON)" fallback for the rare bits we don't yet have UI for. Tabs: • Basics — enable/remark/protocol/listen/port/total/trafficReset/expiry • Protocol — protocol-aware: VMess/VLess/Trojan/SS-multi/Hysteria in add mode embed an inline first-client form (email + ID/password/auth, security, flow, subId, comment, total GB, expiry); edit mode shows a clients-count summary table; VLess: decryption/encryption inputs; SS: method dropdown that re-randomizes password and propagates method change to the multi-user array (matches legacy SSMethodChange); HTTP/Mixed: accounts table with add/remove rows + Mixed auth/udp/ip toggles; Tunnel: address/port/network/followRedirect; WireGuard: secretKey/pubKey (regen via Wireguard.generateKeypair) + per-peer fields with PSK regen + allowedIPs add/remove + keepAlive. • Stream — only when canEnableStream(); transport selector with structured forms for TCP (proxy-protocol, http camouflage), WS (host/path/heartbeat/headers), gRPC (serviceName, multiMode), HTTPUpgrade (host/path). KCP/XHTTP fall back to the Advanced tab with an alert banner. Security selector with TLS (sni/alpn/ fingerprint) and Reality (target/serverNames/keypair-gen via /panel/api/server/getNewX25519Cert / shortIds / fingerprint). • Sniffing — enabled/destOverride/metadataOnly/routeOnly/ ipsExcluded/domainsExcluded as structured fields. • Advanced (JSON) — raw streamSettings + sniffing JSON for users reaching KCP/XHTTP/sockopt/finalmask/full TLS cert arrays. The stream JSON is auto-synced from the live model whenever the structured fields change. State source of truth is a deeply-reactive Inbound + DBInbound pair cloned on open; submit serializes via inbound.settings.toString() + inbound.stream.toString() so the wire shape matches the legacy panel byte-for-byte. streamNetworkChange semantics (clear flow when TLS/Reality unavailable, reset finalmask.udp when not KCP) are preserved. Vision Seed for VLess + finer-grained TCP HTTP camouflage + the full TLS cert/ECH editor will land in 5f-iii-c. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 5f-vii — shared text/prompt modals + remaining export/import wiring Wires up the last batch of inbound row + general actions that were toasting "coming soon": export-inbound-links, export-subs (per-inbound and global), export-all-links, import-inbound, and the clipboard JSON peek. Two small shared components back them — both can be reused by the xray page later. - TextModal.vue (shared): read-only multi-line viewer with a copy button and an optional download button when fileName is set. Replaces the legacy txtModal which the inbounds page used for every link export. - PromptModal.vue (shared): generic title + input/textarea + confirm callback, with the legacy keybindings (Enter submits in single-line mode; Ctrl+S submits in textarea mode). Used here for import-inbound but also by xray-config edits in Phase 6. - InboundsPage.vue: drops the toast stubs for `import`/`export`/`subs` on the general-actions menu and `export`/`subs`/`clipboard` on the per-row menu, routing each through openText / openPrompt + the appropriate model helper (genInboundLinks, etc.). The copyClients cross-inbound modal stays toast-stubbed — that's its own dedicated legacy modal worth its own commit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-i — xray page scaffold + Advanced JSON tab The fifth and last legacy page comes online. Tabs are scaffolded with a-empty placeholders for the structured editors (Basics / Routing / Outbounds / Balancers / DNS) so navigation is stable; the Advanced (JSON) tab is fully functional and lets power users edit the raw xraySetting tree exactly like the legacy CodeMirror pane. - xray.html + src/xray.js: fifth Vite multi-page entry, mounted as XrayPage; vite.config.js routes /panel/xray and /panel/xray/ to it through the dev proxy bypass alongside the other pages. - XrayPage.vue: page chrome with the Save / Restart-xray bar, restart- output popover (surfaces /panel/xray/getXrayResult content when startup fails), 6 a-tabs, and a textarea-backed Advanced JSON editor. CodeMirror is intentionally not pulled in — the textarea works for every modern browser and keeps the bundle slim while structured editors land in 6-ii through 6-v. - useXraySetting.js composable: POST /panel/xray/ on mount, mirrors the settings-page 1s busy-loop dirty check for both xraySetting and outboundTestUrl, and exposes saveAll + restartXray. The dirty flag relies on string equality of the pretty-printed JSON, so reformat-only edits don't enable Save. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-ii — xray Basics tab structured editor Replaces the placeholder on the Basics tab with a structured form for the most-touched fields of the xray template — outbound + routing strategy, log levels, traffic stat counters, and the "basic routing" shortcuts (block torrent / IPs / domains, direct IPs / domains, IPv4 forced, WARP / NordVPN routing). - useXraySetting.js: hoists a parsed `templateSettings` reactive alongside the JSON string, with two cooperating watches that keep them in sync. Editing structured fields stringifies into xraySetting for the dirty-poll + Advanced JSON tab; editing the JSON re-parses into templateSettings only when valid, so structured tabs stay readable mid-edit. - BasicsTab.vue: collapse panels mirror the legacy partial — General, Statistics, Logs, Basic routing. Every input is a computed v-model reading/writing into templateSettings; the routing-rule shortcuts funnel through ruleGetter/ruleSetter which match the legacy templateRuleGetter/templateRuleSetter behavior (replace-first, drop-duplicates, pop-the-rule-when-empty). Direct/IPv4 setters also call syncOutbound() to provision/prune the matching outbound. - XrayPage.vue: imports BasicsTab + derives `warpExist`/`nordExist` from the parsed templateSettings. WARP/NordVPN provisioning modals are still placeholders that toast — those land in 6-v with the routing/outbound editors. Default tab flips back to Basics so users land on the structured editor. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-iii — xray Routing tab + rule modal Replaces the Routing tab placeholder with a full editor for templateSettings.routing.rules: - RoutingTab.vue: a-table over the parsed rules with the legacy six- column layout (action / source / network / destination / inbound / outbound) and the same "lead value + N more" pill renderer for multi-value criteria. Mobile drops source/network/destination for readability. Per-row dropdown handles edit / move-up / move-down / delete; the array-mutation reordering replaces the legacy jQuery Sortable drag handle without pulling in a sortable lib. - RuleFormModal.vue: full form mirroring xray_rule_modal.html — CSV inputs for sourceIP/sourcePort/vlessRoute/ip/domain/user/port, Network select, Protocol multi-select, Attrs key/value pairs, inbound-tag multi-select sourced from templateSettings.inbounds + parent inboundTags + dnsTag, outbound-tag single-select sourced from templateSettings.outbounds + clientReverseTags, and balancerTag from templateSettings.routing.balancers. Submit serializes via the same shape the legacy `getResult` produces (CSV → array, drop empty fields). - XrayPage.vue: imports RoutingTab and exposes inboundTags + clientReverseTags from useXraySetting so the modal can populate its tag pools. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-iv — xray Outbounds tab + outbound modal Replaces the Outbounds tab placeholder with a full table + add/edit flow. The 1.3k-line legacy outbound modal is condensed to a tabbed modal with structured Basics fields (tag/protocol/sendThrough/domain strategy) and JSON tabs for the protocol-specific settings + stream trees — same approach the Inbound modal uses, and a power user can still edit the same trees via the page-level Advanced (JSON) tab. - useXraySetting.js: adds fetchOutboundsTraffic + resetOutboundsTraffic + testOutbound. Test states are tracked per outbound index so the row's Test button can show loading + the Test-result column can render the response delay / status / error. - OutboundsTab.vue: full table (action / identity / address / traffic / test result / test) plus a card-list mobile variant with the same row dropdown (set-first / edit / move up/down / reset traffic / delete). outboundAddresses() reproduces the legacy findOutboundAddress logic so each protocol's host:port list is rendered consistently. Add/edit go through OutboundFormModal, delete goes through Modal.confirm, reset traffic posts to /panel/xray/resetOutboundsTraffic with the row's tag (or "-alltags-" from the toolbar). - OutboundFormModal.vue: tag/protocol/sendThrough/domainStrategy on the Basics tab; settings + streamSettings as raw JSON on their respective tabs. Tag-collision check happens client-side before emitting; malformed JSON aborts the save with a message.error. - XrayPage.vue: imports OutboundsTab and wires the test action to the composable's testOutbound helper. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-v — xray Balancers tab + DNS placeholder Brings Balancers to full parity with the legacy panel and adds a DNS tab placeholder that exposes the full dns/fakedns trees as JSON so users can edit them without falling through to Advanced. - BalancerFormModal.vue: tag (with duplicate-tag warning across other balancers), strategy (random/roundRobin/leastLoad/leastPing), selector tag-mode multi-select sourced from existing outbound tags + free-form additions, fallback. Disable-on-invalid is driven by the duplicateTag + emptySelector computed flags. - BalancersTab.vue: empty state with a single "Add balancer" CTA; populated state shows the legacy 4-column table (action / tag / strategy / selector / fallback) with per-row edit + delete in a dropdown. On submit the wire shape preserves the `strategy: { type }` nesting only when the strategy is non-default, matching the legacy emit. Tag renames also chase across routing.rules.balancerTag references so existing rules don't dangle. - DnsTab.vue: master enable switch + raw JSON for `dns` and `fakedns`. Legacy had a dedicated server-by-server editor + a fakedns row editor; both are big enough to deserve their own commits, and the JSON path supports every field today. WARP / NordVPN provisioning modals still toast as "coming soon" — those are third-party API integrations worth their own commits. The xray page now has structured editors for Basics / Routing / Outbounds / Balancers and JSON editors for DNS / Advanced — every xray tab the legacy panel offered is functional. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(server): Phase 8 — cut HTML routes over to web/dist/ Production cutover. Every user-facing HTML route now serves the Vue-3-built bundle from web/dist/ instead of rendering the legacy Go template; the long-hashed Vite assets are served at /assets/ from the same embedded filesystem. The legacy templates in web/html/ and the legacy static tree in web/assets/ are kept on disk for now in case a quick revert is needed, but nothing the binary serves references them. What changed: - web.go: a new //go:embed dist/* feeds the controller package via a SetDistFS hand-off before controller construction. The static /assets/ route is rebound: in dev to web/dist/assets/ on disk so Vite's incremental rebuilds show up live; in prod to the embedded dist via wrapDistFS (rooted one level deeper than wrapAssetsFS). - controller/dist.go: serveDistPage helper used by every HTML handler. Reads dist/<name> from the embedded FS and applies two transforms before sending: 1. injects <script>window.__X_UI_BASE_PATH__="..."</script> just before </head> so AppSidebar links resolve under the panel's basePath. 2. when basePath != "/", rewrites Vite's absolute /assets/ URLs to <basePath>assets/ so installs running under a custom URL prefix load the bundle where the static handler lives. HTML responses go out with no-cache so panel upgrades reach users on the next refresh; hashed JS/CSS stays cacheable. - controller/index.go: IndexController.index now serves dist/login.html for logged-out callers (the redirect for logged-in users is unchanged). - controller/xui.go: XUIController.{index,inbounds,settings,xraySettings} each become a one-line wrapper around serveDistPage. Smoke checklist for the maintainer: - run `cd frontend && npm run build` to refresh web/dist/ before building the Go binary (the embed snapshot is taken at compile time); - visit /panel/, /panel/inbounds, /panel/settings, /panel/xray and confirm each loads its Vue page; - log out and log back in to verify the login flow; - confirm the sidebar links navigate correctly under your install's basePath; - POST flows (e.g. saving settings) still need the CSRF token — that endpoint (/panel/csrf-token, added earlier) is unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 6-vi — WARP + NordVPN provisioning modals Replaces the toast stubs on the Basics tab and Outbounds toolbar with the legacy WARP + NordVPN provisioning flows. Both modals now stage their wireguard outbounds back into templateSettings.outbounds through the same event channels OutboundsTab uses, so the existing add / reset / delete / refresh-traffic surface keeps working. - WarpModal.vue: empty state shows a single Create button that generates a wireguard keypair locally (Wireguard.generateKeypair) and posts it to /panel/xray/warp/reg; populated state surfaces the access_token / device_id / license_key / private_key, lets the user upgrade to WARP+ via /panel/xray/warp/license, refreshes the account info from /panel/xray/warp/config (plan / quota / usage in human-readable bytes), and stages a wireguard outbound with the WARP-specific reserved-byte encoding pulled from client_id. Add / Reset / Delete go through events the parent routes back to templateSettings.outbounds. - NordModal.vue: dual-tab login (NordVPN access token → /panel/xray/nord/reg, or paste a NordLynx private key → /panel/xray/nord/setKey). Once authenticated, country / city / server selectors fetch from /panel/xray/nord/{countries,servers}, servers sort by load ascending, the lowest-load server in the current city auto-selects. Reset emits oldTag/newTag so the parent renames matching routing rules in place; logout emits a remove-routing-rules event with prefix `nord-` to purge any dangling references. - XrayPage.vue: holds warpOpen / nordOpen flags, ensures the outbounds array exists before mutating it, and wires the modal events (add-outbound / reset-outbound / remove-outbound / remove-routing-rules) to in-place edits of templateSettings. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): Phase 7 — vue-i18n wired up + login page translated Sets up vue-i18n on top of the panel's existing TOML translation files. The Go side stays the source of truth — translators continue to edit web/translation/*.toml; a sync script snapshots those files into per-locale JSON the Vue bundle imports. The login page is translated end-to-end as a worked example; remaining pages can be converted incrementally without infrastructure churn. What's in the box: - scripts/sync-locales.mjs: small TOML→JSON converter that walks web/translation/*.toml and writes frontend/src/locales/<code>.json. Handles the narrow subset of TOML the panel uses (flat key/value pairs + dotted [section.subsection] heads). Wired as a `prebuild` + `predev` script so production builds always include the latest strings without a manual step. - src/i18n/index.js: createI18n() in composition mode with all 13 locales emitted as their own Vite chunks. The active locale (read from the same `lang` cookie LanguageManager has always managed) plus the en-US fallback are eagerly loaded; the rest are dynamically importable via a loadLocale(code) helper. This keeps the per-page bundle the user actually downloads small — only ~30 KB of strings end up in the initial payload, vs ~220 KB if all 13 were eager. - All five page entries (index/login/settings/inbounds/xray) wire the i18n plugin into createApp via .use(i18n). - LoginPage.vue: t(...) replaces hardcoded English on the username / password / 2FA placeholders, the submit button label, and the Settings popover title. The Hello/Welcome headline cycle stays hardcoded — those are stylistic, not labels. The 'Hello'/'Welcome' cycle stays in English deliberately; the rest of the migration's components still ship hardcoded English and will be converted page by page in follow-up commits. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * i18n(frontend): translate page chrome — sidebar, save bars, tabs, summary cards Replaces hardcoded English with t() calls in the components every user sees on every page load. The translations themselves come from the existing TOML files via the sync script — no new strings, no new locale keys. Per component: - AppSidebar.vue: 5 menu titles (dashboard / inbounds / settings / xray / logout). Computed so the sidebar re-renders when the cookie-driven locale flips on reload. - IndexPage.vue: Quick actions card title + Logs / Backup / Up-to- date / Update buttons. - StatusCard.vue: CPU / Memory / Swap / Storage labels + logical-processors / frequency tooltips. - XrayStatusCard.vue: card title + error popover header + Stop / Restart / Switch xray action labels (kept the v-prefix version string as-is — it's content, not a label). - SettingsPage.vue: 5 tab titles + Save / Restart-panel buttons + unsaved-changes warning. - XrayPage.vue: 6 tab titles + Save / Restart-xray buttons + unsaved-changes warning. - InboundsPage.vue: 5 summary-stat card titles. - InboundList.vue: 10 column titles (computed for live locale), Add inbound / General actions buttons + every dropdown menu item, search placeholder, filter radio labels, popover titles (disabled / depleted / depleting / online), traffic + info popover row labels. Total: ~75 strings localised across 8 files. The remaining English labels live in the per-tab settings forms, the form modals (Inbound / Client / Outbound / Rule / Balancer / WARP / Nord), and the per-row table cell helpers — all incremental work that doesn't touch infrastructure. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * i18n(frontend): translate every remaining English string on the index page Closes the index page's i18n coverage. Combined with the page-chrome commit, every label users see on the dashboard is now sourced from the TOML translation files. Per file: - IndexPage.vue: loading-spinner tip (initial + dynamic). - BackupModal.vue: modal title, both list-item titles + descriptions ("Back up" / "Restore"), in-flight busy tips ("Importing database…" / "Restarting panel…"). - PanelUpdateModal.vue: modal title, update-available alert, current/latest version row labels, "Up to date" tag + label, primary action button. Modal.confirm now uses the translated panelUpdateDialog / panelUpdateDialogDesc with #version# substitution; success toast uses panelUpdateStartedPopover. - LogModal.vue: title slot ("Logs"). The Debug/Info/Notice/Warning/ Error log-level options stay literal — they're xray's wire values, not user-facing labels (matches the existing settings-page choice). - XrayLogModal.vue: title + Filter label. Direct/Blocked/Proxy stay literal for the same reason. - VersionModal.vue: modal title + xray-switch alert + per-file tooltip + "Update all" button + custom-geo collapse header. The Modal.confirm flows for switchXrayVersion + updateGeofile use translated dialog/desc with #version# / #filename# substitution. - CpuHistoryModal.vue: title slot. - CustomGeoSection.vue: routing-hint alert, Add / Update-all buttons, every column title (computed for live locale), copy/edit/download/ delete tooltips, copy toast, delete-confirm modal, empty-state text. - CustomGeoFormModal.vue: add/edit titles, OK/cancel labels, Type/ Alias/URL field labels, alias placeholder, all three validation toasts. Total: ~50 strings localised across 8 index-page files. The Hello / Welcome login headline cycle and a handful of literal xray wire values (Direct/Blocked/Proxy/log levels) are intentionally kept hardcoded. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * i18n(frontend): Phase 7-c — translate settings, inbounds modals, xray tabs Continues the page-by-page translation pass started in cb37dd55 — runs every user-visible string on settings (General/Security/Telegram/Sub), inbounds (Client/QR/Info modals), and xray (Routing/Balancer/Rule/Warp/ Nord/Basics/Outbounds tabs) through useI18n. Updates the TOML→JSON sync script to escape `@` (vue-i18n parses it as a linked-format prefix) and refreshes all 13 locale files. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): Phase 9 — restore index dashboard, fix login/CSRF, port legacy styles - Index dashboard regains the 8 cards that were lost in the SPA port (3X-UI panel info, Operation Hours, System Load, Usage, Overall Speed, Total Data, IP Addresses, Connection Stats), plus a Config button that shows the live xray config.json. Version display falls back through panelUpdateInfo → window.__X_UI_CUR_VER__ → '?' so dev mode isn't blank. - Xray config no longer hangs on load: useXraySetting surfaces failures instead of leaving a perpetual spinner, and the Vite dev proxy stops hijacking POST requests to migrated routes (only GETs get bypassed). - Inbound page no longer throws __asyncLoader/emitsOptions errors — inbound.js was missing imports (NumberFormatter, SizeFormatter, Wireguard) and InboundList kept emitting after unmount. - Login round-trip works after logout: a public /csrf-token endpoint bootstraps the SPA before authentication, axios caches the token module-level, and the dev 401 handler navigates to /login.html instead of reloading the dashboard into a redirect loop. - legacy.css mirrors the legacy panel's surface/text variables so dark and ultra-dark themes match main; every SPA entry imports it. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): rebuild xray DNS section to match main branch DnsTab now exposes every field the legacy panel did — top-level toggles (tag, hosts, queryStrategy, disableCache/queryConcurrency, fallback strategy, client subnet), the servers table with per-row strategy and domain/expectIP/unexpectedIP overrides, and the Fake DNS pool. The new DnsServerModal covers the full add/edit flow and collapses to a bare string when the user only sets an address — matching the wire shape the legacy form emits for plain DNS entries like "8.8.8.8". Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): rebuild xray outbound modal with structured per-protocol forms Replaces the JSON textareas with the same shape the legacy panel uses: all 11 outbound protocols (vmess/vless/trojan/shadowsocks/socks/http/ mixed/wireguard/tun/dns/loopback/blackhole/freedom) get dedicated fields, every transport (TCP/KCP/WS/gRPC/HTTPUpgrade/XHTTP) gets its own panel, and TLS/Reality/sockopt/Mux are configured through the same controls as the inbound side. Brings the SPA outbound editor to parity with main so users no longer have to drop into raw JSON. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): bring inbound modal to full parity with main branch Switches the default protocol on add to VLESS, fixes a crash when adding a Mixed account (the constructor is SocksAccount, not MixedAccount), and fills in the fields the SPA was previously delegating to the Advanced JSON tab: - TLS: cipher suites, min/max version, reject SNI / disable system root / session resumption switches, the certificate array with per-row Path-or-Content toggle (Set Default pulls from /panel/setting/ defaultSettings), One Time Loading, Usage / Build Chain, plus ECH key/config with a Get New ECH Cert button. - Reality: xver, target/SNI sync icons (uses getRandomRealityTarget), max time diff, min/max client version, short IDs randomizer, SpiderX, mldsa65 seed/verify with Get New Seed. - Stream: full structured forms for every transport — TCP HTTP camouflage gets its request/response editor, mKCP gets MTU/TTI/uplink/ downlink/CWND/maxSendingWindow, WebSocket / gRPC (now with Authority) / HTTPUpgrade get headers + proxy-protocol toggles, XHTTP gets the full SplitHTTPConfig surface (mode-aware fields, padding obfs, session/sequence placement, uplink data, no-SSE). - New External Proxy section and a structured Sockopt block (mark, TCP keepalive/timeout/clamp, fast open, MPTCP, penetrate, V6Only, domain strategy, congestion, TProxy, dialer/interface, trusted XFF). - VLESS gets the legacy X25519 / ML-KEM-768 buttons that fetch fresh decryption/encryption blocks via /panel/api/server/getNewVlessEnc. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * 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> * fix(frontend): remove duplicate Outbound test URL from xray Advanced tab The Basics tab already exposes this field through BasicsTab — duplicating it on the Advanced tab let two inputs race the same ref and only added clutter. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): unify theming on vanilla AD-Vue light/dark/ultra-dark The legacy panel CSS (custom.min.css ported as legacy.css) tinted every non-primary button teal-green via .dark .ant-btn:not(.ant-btn-primary) overrides while AD-Vue 4's darkAlgorithm kept primary buttons blue — producing the mixed blue/green button look on dark mode. Drop legacy.css entirely and let AD-Vue 4's algorithms own the palette. Centralize antdThemeConfig in useTheme.js so every page resolves to the same source of truth (light = defaultAlgorithm, dark = darkAlgorithm, ultra-dark = darkAlgorithm + deeper colorBgBase/Layout/Container/ Elevated tokens). Each page's <a-config-provider> now imports the shared computed instead of defining its own copy. Drops the 67 KB legacy CSS chunk; per-page CSS bundles fall to ≤5.9 KB. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): restore computed import in Settings + Xray pages When 5f1aba28 dropped the local antdThemeConfig computed (now shared from useTheme), it also stripped `computed` from the import list — but both pages still call computed() elsewhere (confAlerts, advanced-tab helpers). Re-adds it. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): retheme dashboard gauges to AD-Vue blue and shrink them - StatusCard's CPU/RAM/Swap/Storage dashboards rendered at AD-Vue's default 120px width which made the percent text balloon to ~36px. Drop to 90px (70px on mobile) so the gauge fits the rest of the card. - The CurTotal.color thresholds still hardcoded the legacy teal/orange palette (#008771 / #f37b24 / #cf3c3c). Switch to AD-Vue's primary / warning / danger tokens (#1677ff / #faad14 / #ff4d4f) so the gauges match the rest of the panel under both light and dark themes. - XrayStatusCard's running-animation badge ring also still pointed at the deleted --color-primary-100 var; hardcode the new primary blue. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * i18n: shorten backupTitle to "Backup & Restore" across all 13 locales The backup modal header was the second-longest title in the dashboard on every locale ("Database Backup & Restore" / "Резервне копіювання та відновлення бази даних" / etc). Drop the "Database / Veritabanı / 数据库" qualifier — the modal already lives under the "Database" column, so the shorter form reads cleaner on narrow viewports. Updated both the .toml source-of-truth files and the synced .json locales (re-running scripts/sync-locales.mjs). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * i18n: collapse two translation databases into a single web/translation/<lang>.json set The Vue SPA had been reading from frontend/src/locales/*.json while the Go binary still loaded web/translation/translate.*.toml — and a sync-locales.mjs pre-build step kept the two in lockstep, with TOML as the source of truth. Now that go-i18n v2.6.1 already flattens nested JSON via recGetMessages/addChildMessages, both runtimes can share one file per locale. - Move the 13 nested-JSON locale files to web/translation/<lang>.json so they live alongside the Go //go:embed translation/* directive. - Switch web/locale/locale.go from toml.Unmarshal to json.Unmarshal (and drop the pelletier/go-toml import — it's now indirect-only). Confirmed via a smoke test that pages.index.cpu, subscription.title, tgbot.commands.help, and menu.settings all resolve in en-US, fa-IR, ru-RU, and zh-CN. - Repoint Vue's i18n loader at the new path (../../../web/translation/ *.json glob) and drop the moved-here pathDelimiter comment that no longer applies. - Delete the 13 legacy translate.*.toml files and the sync-locales.mjs script + its npm pre-script hooks (predev/prebuild/i18n:sync). The Telegram bot and subscription page still get their messages because they were reading the same MessageIDs the JSON files now produce. - Update copilot-instructions.md so the next contributor knows where the canonical translation files live. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): redesign expand-row + retheme client visuals When you expanded an inbound row, the nested <a-table> inside ClientRowTable burst out of the parent's scroll-x box — its .ant-spin-container ended up wider than the parent's narrow .ant-table-cell, so the child looked oversized while the parent looked squeezed. Replace the nested table with a CSS-grid layout that owns its sizing, sits flush inside the expanded cell, and collapses to a 3-column layout on mobile (action menu, client identity, info popover). While in there, fix three other client-row visuals: - The Unicode infinity glyph (U+221E) renders as an "m"-shaped character in some system fonts (Windows Segoe UI in particular). Add a shared <InfinityIcon /> SVG component (legacy panel's path) and use it in ClientRowTable, InboundList, and InboundInfoModal — desktop and mobile cells. - The "unlimited quota" traffic bar passed :percent="100" with no stroke-color, so AD-Vue auto-coloured it success-green. Pin it to the AD-Vue purple token (#722ed1) so it reads as the no-limit sentinel rather than another usage state. - ColorUtils + the in-row statsExpColor still hardcoded the legacy teal/orange/red/purple palette (#008771 / #f37b24 / #cf3c3c / #7a316f). Map them onto AD-Vue 4's success/warning/danger/purple tokens (#52c41a / #faad14 / #ff4d4f / #722ed1) so badges, tags, and progress bars all match the rest of the panel. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): darken light-theme page bg so cards stand out The light-theme --bg-page was #f0f2f5 — close enough to AD-Vue's #fff card background that the cards faded into the page. Bump it to #e6e8ec (a more visibly distinct gray) so cards lift cleanly off the surface. Dark and ultra-dark stay where they were. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): shrink dashboard percent text and surface the unfinished arc Two follow-up tweaks to the dashboard gauges: - AD-Vue scales the percent text from the SVG, not from :width, so the 90px gauges still rendered the number at ~27px. Pin .ant-progress-text to 14px via :deep() and trim the gauge to 70px (60px on mobile) so the whole card stays compact. - The default trail (rgba(0,0,0,0.06) / rgba(255,255,255,0.08)) was invisible on the light-theme card. Pass an explicit rgba(128,128,128,0.25) trail-color so the unfinished portion is visible under both light and dark themes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): migrate subpage.html to Vue 3 SPA The subscription info page was the last page still rendered by Go templates. Move it to the Vite multi-page setup so the whole panel loads through one toolchain. Frontend: SubPage.vue mounts at /sub/<id>?html=1 and reads window.__SUB_PAGE_DATA__ for the parsed view-model (traffic / quota / expiry + rendered share links). Fix descriptions borders against the light-theme card by painting the row divider on each cell's bottom edge — AD-Vue's <tr> border doesn't render reliably under border-collapse:collapse. Backend: serveSubPage reads dist/subpage.html, injects window.__X_UI_BASE_PATH__ + window.__SUB_PAGE_DATA__ before </head>, and rewrites Vite's absolute /assets/ URLs when the panel runs under a URL prefix. Drop the legacy template-FuncMap wiring and switch the sub server's static mount from web/assets to web/dist/assets. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): inbound modal QR + tabs + restored TLS fallbacks Per-client QR action: the qr icon on the expand-row table opened the big info modal instead of the QR modal. Route it to QrCodeModal and extend that modal with a `client` prop so genAllLinks() produces the per-client share URLs (and per-peer remarks for WireGuard). Inbound's Data redesign: split the dense single-page view into three tabs — Inbound, Client, Subscription. Drop every QR rendering from this modal (QrCodeModal is the QR home now). Each row in the Inbound tab is one label/value pair instead of the legacy 2-column grid, and long values like the VLESS encryption blob render as a wrapping code block with a copy button so they can't blow out the dialog. The Subscription tab renders sub URL + JSON URL as clickable anchors that open in a new tab. Restored TLS fallbacks UI: the model already exposed VLESSSettings.Fallback / TrojanSettings.Fallback with addFallback / delFallback / fallbackToJson, but the form modal never surfaced them during the Vue 3 migration. Re-add the legacy form (SNI, ALPN, Path, Destination, PROXY) on the protocol tab, gated on TCP transport plus (for VLESS) encryption=none — same conditions as main. Column widths: Protocol 70→130 and All-time Traffic 60→95 in the inbound list; All-time Traffic 90→130 in the client expand-row, so the header text fits and tags don't get squeezed. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): navy dark theme + rounded inbound/client corners Dark theme picks up a refined navy palette (page #0a1426, cards #142340, sider #0d1d33) so the sidebar blends with the rest of the surface; ultra-dark stays neutral black. Resolves the previous mismatch where AD-Vue 4 hardcoded #001529 / #002140 for the sider, trigger and dark Menu items via Layout.colorBgHeader / colorBgTrigger and Menu's colorItemBg — overrides go through the component-token map now. Round the inbound table's outer corners (header start/end + last row end) and wrap the client expand-row grid in a 1px / 8px-radius border so the list reads as a contained block instead of a flush rectangle. Linter-driven whitespace cleanup across inbounds/*.vue rolled into the same commit since it can't be split out cleanly. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): xray tab fixes — modal close, tag validation, full XHTTP, reset to default Modal close: BalancersTab / OutboundsTab / RoutingTab confirmDelete used arrow expressions that returned splice's removed-items array. AD-Vue 4 treats truthy non-thenables from onOk as "still pending" and never closes the dialog (see ActionButton.js:103-106), so the confirm modal stayed open. Wrap the body so onOk returns undefined and AD-Vue auto-closes. Tag validation: outbound + balancer modals only flipped between warning/success on duplicate, leaving the empty case as a green ✓. Split into a 3-state computed — error (empty) / warning (duplicate) / success — and wire a help message so the input clearly explains why the OK button is disabled. Reset to default: re-add the legacy "Reset to Default" panel at the bottom of BasicsTab. Calls /panel/setting/getDefaultJsonConfig and overwrites templateSettings; the existing watch re-stringifies so the JSON tab + dirty-poll see the new state. Restored Basics option lists from main: IPs (4→10, +Vietnam/Spain/ Indonesia/Ukraine/Türkiye/Brazil), DomainsOptions (4→10, +regex entries), BlockDomainsOptions (5→17, +Malware/Phishing/Adult/regex), ServicesOptions (Reddit/Speedtest in, off-template Microsoft out). Outbound form parity with main: • Reverse Sniffing UI for VLESS — toggle + destOverride checkboxes (HTTP/TLS/QUIC/FAKEDNS) + Metadata/Route Only + IPs/Domains excluded multi-selects, gated on reverseTag being set. • Full XHTTP transport — request headers list, Max Upload Size / Min Upload Interval (packet-up), Padding Obfs Mode + sub-fields, Uplink HTTP Method, Session/Sequence/UplinkData placement + keys, No gRPC Header (stream-up/stream-one), expanded XMUX with Max Concurrency/Connections/Reuse/Request/Reusable/Keep-alive. Strip a-divider from the outbound form per request — replaced with plain section/item heading divs so the labels and per-row delete icons stay but the horizontal rule is gone. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): xray Advanced tab parity + finalmask gating Advanced tab was a single textarea bound to the full xraySetting blob. Restore the legacy 4-way view: a radio group toggles between All / Inbounds / Outbounds / Routing Rules, and the textarea reads/writes the matching slice through templateSettings. Added the legacy header ("Advanced Xray Configuration Template" + description) so the page introduces itself like main. Outbound finalmask leaked into protocols that don't have a stream (Freedom / Blackhole / DNS / Socks / HTTP / Wireguard) because the v-if only checked outbound.stream. Gate the whole FinalMaskForm on outbound.canEnableStream() to match main. Drop the leading divider inside FinalMaskForm — its parent already provides separation, so the rule above "TCP Masks" was redundant. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): inbound Advanced tab live mirror + QR exact-fit sizing Advanced tab in the inbound modal showed stale state. The watch only refreshed advancedJson.stream, so toggling the Sniffing switch in the Sniffing tab left the Advanced JSON showing the prior value. And encryption — stored on inbound.settings.encryption, not on stream — never appeared at all because Advanced only exposed stream + sniffing. Split the watch into three (stream / sniffing / settings) and add a settings textarea so encryption / clients / fallbacks live alongside the existing two views. The submit() path now reads settings from the JSON tab too (falling back to inbound.settings.toString()) so power-user edits in Advanced override the structured form on save. QR canvas: when a longer share-URL bumps the QR matrix size, QRious falls back to floor(canvasSize / matrixWidth) and centers the pattern, leaving a white margin (e.g. matrix=41, size=180 → 8px gap). Pre-pick the QR version from the URL byte length and set canvas size to a multiple of matrixWidth × pixelSize so the pattern always fills it edge-to-edge — no white margin even after toggling encryption on. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): inbound stream tidy-up + QR sizing + dev proxy Stream tab clean-up: drop the seven a-divider rules in the inbound form's Stream tab — replace the labelled ones (Request / Response / Security) with a section-heading div that matches the outbound modal, delete the empty rules above TLS sub-blocks / External Proxy / Sockopt. Empty header-list form-items also leaked margin space below each "Add header" button across TCP / WS / HTTPUpgrade / XHTTP — gate each on headers.length > 0 so they vanish until the user adds one. QR panel: drop the link text under the canvas (the user already has a copy button on the header). Pin the canvas display size to a fixed 240px square via :style + image-rendering: pixelated/crisp-edges so a dense WireGuard config QR and its sparser link share the same on-screen footprint without blurring. Dev proxy: Node's AggregateError wraps connection failures whenever DNS returns more than one address (::1 + 127.0.0.1) and the code lands on the inner errors, not the outer. The existing handler only checked err.code so the ECONNREFUSED stack still spammed the log when the Go backend was down. Walk err.errors too, print one friendly line ("backend not reachable — start the Go server"), then stay quiet for the rest of the session. Vendor splitting + chunk-size warning: split node_modules into stable vendor-* chunks so each page only ships the deps it uses and the browser caches them across versions. ant-design-vue stays as a single chunk because its components share internals; raise the chunk-size warning to 1500kB so the build stays quiet (its 1.4MB minified gzips to ~410kB on the wire). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): info-modal cleanup + 2FA QR + outbound link import - 2FA QR: matrix-snap canvas + opaque background to drop white margin - Inbound info modal: stack Mixed/HTTP/Tunnel as info-rows, hide tab strip when only the Inbound tab applies - Add inline VLESS Reverse tag input on first-client form - Hide Protocol tab for TUN (no form yet) - Outbound link converter: route through Outbound.fromLink so vless/trojan/ss/hysteria(2) imports work alongside vmess; fix stray implicit global in fromLink Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): jalali calendar + drop legacy moment-jalali - Wire Calendar Type setting to a real Jalali datepicker via vue3-persian-datetime-picker, gated by useDatepicker composable - DateTimePicker wrapper swaps between AD-Vue and Persian picker; keeps dayjs v-model contract so existing forms/setters work unchanged - Theme picker popup explicitly per body.dark / data-theme=ultra-dark (AD-Vue 4 doesn't expose CSS vars, so var() fallbacks defaulted to white); fix invisible disabled days, SVG arrow fills, popup clipping via append-to="body" - Replace stray moment() calls in dbinbound/inbound models with dayjs; the legacy global was undefined under ESM and broke the inbounds list whenever any inbound had expiryTime > 0 - Remove legacy moment-jalali / persian-datepicker / aPersianDatepicker assets — replaced by the Vue 3 picker Note: dark/ultra background of the date popup still renders white in some cases — pending follow-up. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): jalali popup theming + full-month layout - Re-prefix popup selectors with .vpd-wrapper (popup root that travels with appendTo='body'), not .vpd-main (which stays at the input); paints the popup's dark/ultra background again - Drop the 1px border on .vpd-content — with box-sizing: border-box it ate 2px from the day-row width, wrapping the 7th cell of every row and hiding days 18-31 of months that needed a 5th week Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat: render dates in Jalali when Calendar Type is jalalian - IntlUtil.formatDate accepts an optional calendar arg; appends the BCP-47 -u-ca-persian extension so Intl renders Jalali across all UI languages, not just fa-IR - Plumb the panel's datepicker setting into the SubPage via the Go injection (window.__SUB_PAGE_DATA__.datepicker) - Panel pages (inbound list/info, client row, xray log) read the same setting through the useDatepicker composable so the whole panel stays consistent Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(frontend): ultra-dark page tint + mobile-friendly inbound view - Drop --bg-page from #21242a (lighter than the cards) to #050505 in ultra-dark across index/sub/settings/inbounds/xray, so cards consistently elevate over the page - Hide the inline sider's children + collapse-trigger and zero its width below 768px; the floating drawer-handle remains the menu trigger - Inbounds page mobile pass: tighten content-area + card padding; flex-wrap the filter bar instead of stacking; shrink table cell padding so all 4 mobile columns fit; bump expand / action / info icon hit targets - Per-client expand row on mobile: soft-tinted rounded cards instead of hairline borders, larger action / info touch targets, more legible email typography, bigger status badge dot Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * chore: remove legacy template + asset trees and dead Go template engine - Delete web/html/ entirely (page templates, form/, modals/, component/, common/, settings/) — every route is served from web/dist/ now via serveDistPage; nothing in the binary referenced these - Delete web/assets/ entirely (jQuery-era ant-design-vue, axios, moment, codemirror, qrcode/qs/uri/vue/otpauth, custom CSS, Vazirmatn font); Vite bundles all of this into web/dist/assets - Drop the Gin HTML template wiring: remove //go:embed assets + //go:embed html/*, the assetsFS/htmlFS vars, the wrapAssetsFS adapter, EmbeddedHTML / EmbeddedAssets exports, getHtmlFiles / getHtmlTemplate, the i18nWebFunc/funcMap and SetFuncMap call, and the dev/prod template-engine branch — only StaticFS for /assets/ is needed now - Remove dead html()/getContext() helpers and unused imports from web/controller/util.go (no c.HTML(...) callers remain) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(frontend): inbound expand chevron position + cpu history layout - Push the inbound table's expand chevron away from the left edge with margin-inline + cell padding so it isn't flush against the corner - Move "Timeframe: …" caption above the chart (was below); restore the line that the previous edit removed - Fix x-axis time labels being clipped at the bottom of the cpu chart — the offset (paddingTop+drawHeight+22 = 222) exceeded the SVG viewBox height (220); dropped to +14 so labels sit at y=214 with room for descenders - Move the SVG axis text colors out of <style scoped> into a global block — Vue's scoped CSS doesn't always hash-attribute SVG <text> descendants, so the dark-mode overrides via :global() weren't matching; bumped opacity 0.55 → 0.85 for legibility on navy/black Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(login): language picker in settings popover + fluid card sizing - Add language select alongside the theme switch (mirrors SubPage) - Bind headline to pages.login.hello / pages.login.title so the "Hello / Welcome" cycle re-translates with the active locale - Replace AD-Vue 5-breakpoint grid with clamp() sizing so the card scales smoothly instead of jumping ~33% at each breakpoint - Pin horizontal padding so input width stays stable on large viewports Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(frontend): organize entry HTML + bootstrap JS into folders - Move entry HTML files: frontend/*.html -> frontend/html/*.html - Move per-page bootstrap modules: src/{index,login,settings,inbounds,xray,subpage}.js -> src/entries/ - Update vite.config rollup inputs and dev-mode MIGRATED_ROUTES to /html/<page>.html - Build output now lands at web/dist/html/<page>.html - serveDistPage and subController updated to read from dist/html/ Cleans up the flat frontend/ root which previously interleaved 6 HTML files with package.json, README, src/, etc. The src/ root similarly gets rid of 6 entry .js files mixed in alongside api/, components/, models/, etc. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * chore: remove obsolete vue3 phase1 inventory doc The migration is well past phase 1 — the inventory doc has rotted and the live state lives in the codebase plus the plan files. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(frontend): merge utils/legacy.js into utils/index.js The barrel was a placeholder for an eventual split that hasn't happened. Collapsing the two files removes one layer of indirection and the misleading "legacy" name (the contents are still actively used by the migrated SPA). - Move all 930 lines from utils/legacy.js into utils/index.js - Delete utils/legacy.js - Update direct import in models/outbound.js to '@/utils' - Drop a stale legacy.js reference in InboundFormModal comment Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * revert(frontend): keep entry HTML files at frontend/ root The earlier move to frontend/html/ made dev-mode URLs ugly (http://localhost:5173/html/index.html instead of plain /). The folder didn't add real value — it just hid 6 files behind a non-conventional layout. Reverting that piece while keeping src/entries/ (which is a genuine separation between page bootstrap and the rest of src/). - HTML files back at frontend/<page>.html - Vite rollupOptions.input + MIGRATED_ROUTES restored to flat paths - Build output is web/dist/<page>.html again - web/controller/dist.go and sub/subController.go read from dist/<name> Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * build(frontend): bump eslint to 10 + add flat config + clean lint warnings - Upgrade eslint 9.39 -> 10.3 and eslint-plugin-vue 9.33 -> 10.9 - Add eslint.config.js (flat config required by ESLint 10) with vue3-recommended rules, sensible defaults, and exemptions for the project's existing formatting style - Drop --ext from the lint script (removed in ESLint 10) - vue/no-mutating-props is left off because the form-modal pattern ports straight from Vue 2 (parent passes a reactive object, child mutates it); a real fix is an architectural rewire, separate task Lint warning cleanup: - utils/index.js: var -> let/const in the X25519 routines, replace obj.hasOwnProperty(...) with Object.prototype.hasOwnProperty.call(...) - Remove unused imports (reactive, ref, Inbound) in ClientFormModal, InboundInfoModal, QrCodeModal, DnsServerModal, OutboundFormModal, SubPage; remove unused locals (isClientOnline, ONLINE_GRACE_MS, fetchAll, isSocks, isHTTP, _antdAlgorithm) - XrayStatusCard: declare 'open-logs' on defineEmits (was emitted but not declared) - RuleFormModal: rename v-for var t -> tag (shadowed useI18n's t) - Drop stale eslint-disable directives (no-new, no-unused-vars) - OutboundsTab/InboundList: drop redundant initial null assigns - InboundInfoModal/OutboundFormModal: explicit eslint-disable for the intentional local-ref-shadows-prop pattern in modal drafts `npm run lint` now passes with 0 errors and 0 warnings. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(inbounds): one client identity across multiple inbounds via subId Lets the operator add the same email under the same subId to several inbounds. Xray reports traffic per email, so a single client_traffics row acts as the shared accumulator — no aggregation overhead, quota and expiry stay consistent. - Email validation allows duplicates only when subId matches - AddClientStat upserts via OnConflict DoNothing (idempotent on rerun) - Stat/IP rows survive client deletion when a sibling inbound still references the email - enrichClientStats tops up GORM-preloaded stats with rows whose inbound_id points at a sibling, so every panel view sees usage - disableInvalidClients cascades enable=false and syncs the row's total/expiry into every sibling JSON when the shared identity expires - DelDepletedClients removes the depleted client from all referencing inbounds, batched - Subscription services dedupe traffic by email so shared quota is counted once Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs(frontend): rewrite README for multi-page Vue 3 layout Reflects the current state — embedded build, per-route HTML entries, ESLint 10 flat config, src/ layout, and the steps to add a new page. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * build(frontend): drop deprecated rimraf/glob/inflight transitive deps vue3-persian-datetime-picker pinned moment-jalaali to ^0.9.4, which pulled rimraf@3 → glob@7 → inflight@1. inflight in particular leaks memory and is unmaintained. Override moment-jalaali to ^0.10.4 (same runtime API, dropped the legacy build deps) so npm install no longer warns and the dep tree is 12 packages lighter. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(nodes): multi-node panel orchestration (CRUD, deployment, traffic sync, sub per-node) - Node model + service + controller (/panel/api/nodes/*) with bearer-token apiToken auth - Heartbeat job @every 10s; status/latency/xrayVersion surfaced in Nodes UI - Runtime abstraction (Local + Remote) so inbound/client mutations target the inbound's owning node instead of always hitting the local xray - Inbounds gain optional NodeID; tag-based correlation with remote panel (no RemoteInboundID column needed) - NodeTrafficSyncJob @every 10s pulls absolute counters + online/lastOnline from each enabled+online node and writes them into central DB; 30s reset grace window prevents post-reset overwrite - Reset propagation to nodes (best-effort) on client/inbound/all reset paths - Subscription server uses node.Address for inbounds with NodeID, falling back to existing host resolution for local inbounds - Frontend: Nodes page, "Deploy to" select in inbound form, Node column on inbound list, hostOverride threaded through genAllLinks/QR/Info modals Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(stats): system history modal + per-node CPU/Mem trends across all locales Backend - web/service/metric_history.go: generic in-memory ring buffer with two singletons — system-wide (cpu/mem/netUp/netDown/online/load1/5/15) and per-node (cpu/mem) keyed by node id - ServerService.AppendStatusSample writes all 8 metrics every 2s on the same tick; AppendCpuSample/AggregateCpuHistory kept for back-compat - NodeService.UpdateHeartbeat appends cpu/mem only on online ticks so offline gaps render as missing data, not phantom dips - New routes: GET /panel/api/server/history/:metric/:bucket and GET /panel/api/nodes/history/:id/:metric/:bucket, both whitelisted Frontend - Sparkline component generalized: arbitrary value range (auto-scale when valueMax=null), pluggable yFormatter/tooltipFormatter for B/s, client counts, load averages - SystemHistoryModal replaces CpuHistoryModal with tabs for every metric; opened from a tag on the 3X-UI card next to Documentation - NodeHistoryPanel: expandable row on the Nodes table showing per-node CPU and Mem trends, refreshed every 15s Localization - Backfill systemHistoryTitle / trendLast2Min / pages.inbounds.{node, deployTo, localPanel} and the entire pages.nodes block (51 keys including statusValues + toasts) into all 11 non-en/fa locales: ar-EG, es-ES, id-ID, ja-JP, pt-BR, ru-RU, tr-TR, uk-UA, vi-VN, zh-CN, zh-TW Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(embed): include underscore-prefixed Vite chunks in dist FS go:embed silently excludes files whose names start with `_` or `.`, so the `_plugin-vue_export-helper-<hash>.js` chunk that Vite/rolldown emits for @vitejs/plugin-vue was missing from the production binary. First import at runtime hit a 404 and the SPA failed to mount — blank page on every page load, no error in the server logs because the asset 404 was just a static-handler miss. Switched the directive to `//go:embed all:dist` which keeps the same root layout but disables the underscore/dot exclusion rule. Dev mode was unaffected (it serves dist/assets/ from disk, not the embedded FS). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * ci: build frontend bundle before Go compile in release.yml + Dockerfile Phase 8 cut all panel HTML routes over to web/dist/ and embedded the Vite bundle into the Go binary via //go:embed all:dist. web/dist/ is .gitignored, so on a fresh CI checkout it doesn't exist — every Go build since Phase 8 has been failing with "pattern dist: no matching files found" or producing a binary that 404s on first asset request. release.yml: add a setup-node@v4 + npm ci + npm run build trio before the existing go build step in both the Linux matrix job (7 arches) and the Windows job. npm cache is keyed on frontend/package-lock.json. Dockerfile: add a node:22-alpine frontend stage that runs npm ci + npm run build and emits to /src/web/dist (via vite.config.js's outDir). The golang builder stage then COPY --from=frontend /src/web/dist into ./web/dist before the go build, so embed.FS sees the bundle. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(ws): live updates on inbounds/xray/nodes pages, drop polling + manual refresh Replaces the legacy polling + manual-refresh model with WebSocket pushes across the three live-data pages. The hub already broadcast traffic / client_stats / outbounds; this wires the frontend to consume them and adds a new `nodes` channel for the heartbeat job's snapshot. Frontend - new useWebSocket composable: page-scoped singleton WebSocketClient, lifecycle-managed on/off, leaves disconnect to page-unload - inbounds: useInbounds gains applyTrafficEvent / applyClientStatsEvent / applyInvalidate that merge counters and online/lastOnline in place; InboundsPage subscribes; InboundList drops the auto-refresh popover, the refresh button, and the now-unused refreshing prop - xray outbounds: useXraySetting gains applyOutboundsEvent; XrayPage subscribes; OutboundsTab drops the refresh button + emit - nodes: useNodes gains applyNodesEvent and stops the 5s setInterval/visibilitychange polling; NodesPage subscribes; NodeList drops the refresh button and ReloadOutlined import Backend - web/websocket: new MessageTypeNodes + BroadcastNodes notifier - node_heartbeat_job: after wg.Wait(), reload the table once and BroadcastNodes(updated). Gated on websocket.HasClients() so a panel with no open browser doesn't spend the DB read Bug fixes spotted in this pass - websocket.js #buildUrl defaulted basePath to '' when the global was missing (dev mode), producing `ws://host:portws` and a SyntaxError on the WebSocket constructor. Fall back to '/' and ensure leading slash. - vite.config.js: forward /ws to ws://localhost:2053 with ws:true so dev (5173) reaches the Go backend's WebSocket - NodeFormModal: a-input-password's visibilityToggle is Boolean in AntD Vue 4; the v3-era object form (`{ visible, 'onUpdate:visible' }`) triggered a Vue prop-type warning. Drop the override (default true shows the eye icon and toggles internally) and remove the orphaned tokenVisible ref Translations - pages.inbounds.autoRefresh / autoRefreshInterval: removed from all 13 locales (UI gone) - pages.nodes.refresh: removed from all 13 locales (UI gone) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(inbounds): hide Node column when no nodes are defined Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-08-14 23:31:00 +00:00 · 2026-05-09 17:38:48 +02:00
parent 12c10dbd98
commit bc00d37ad8
265 changed files with 38516 additions and 64503 deletions
@@ -1,119 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-function bracketFolding(pairs) {
-  return function(cm, start) {
-    var line = start.line, lineText = cm.getLine(line);
-
-    function findOpening(pair) {
-      var tokenType;
-      for (var at = start.ch, pass = 0;;) {
-        var found = at <= 0 ? -1 : lineText.lastIndexOf(pair[0], at - 1);
-        if (found == -1) {
-          if (pass == 1) break;
-          pass = 1;
-          at = lineText.length;
-          continue;
-        }
-        if (pass == 1 && found < start.ch) break;
-        tokenType = cm.getTokenTypeAt(CodeMirror.Pos(line, found + 1));
-        if (!/^(comment|string)/.test(tokenType)) return {ch: found + 1, tokenType: tokenType, pair: pair};
-        at = found - 1;
-      }
-    }
-
-    function findRange(found) {
-      var count = 1, lastLine = cm.lastLine(), end, startCh = found.ch, endCh
-      outer: for (var i = line; i <= lastLine; ++i) {
-        var text = cm.getLine(i), pos = i == line ? startCh : 0;
-        for (;;) {
-          var nextOpen = text.indexOf(found.pair[0], pos), nextClose = text.indexOf(found.pair[1], pos);
-          if (nextOpen < 0) nextOpen = text.length;
-          if (nextClose < 0) nextClose = text.length;
-          pos = Math.min(nextOpen, nextClose);
-          if (pos == text.length) break;
-          if (cm.getTokenTypeAt(CodeMirror.Pos(i, pos + 1)) == found.tokenType) {
-            if (pos == nextOpen) ++count;
-            else if (!--count) { end = i; endCh = pos; break outer; }
-          }
-          ++pos;
-        }
-      }
-
-      if (end == null || line == end) return null
-      return {from: CodeMirror.Pos(line, startCh),
-              to: CodeMirror.Pos(end, endCh)};
-    }
-
-    var found = []
-    for (var i = 0; i < pairs.length; i++) {
-      var open = findOpening(pairs[i])
-      if (open) found.push(open)
-    }
-    found.sort(function(a, b) { return a.ch - b.ch })
-    for (var i = 0; i < found.length; i++) {
-      var range = findRange(found[i])
-      if (range) return range
-    }
-    return null
-  }
-}
-
-CodeMirror.registerHelper("fold", "brace", bracketFolding([["{", "}"], ["[", "]"]]));
-
-CodeMirror.registerHelper("fold", "brace-paren", bracketFolding([["{", "}"], ["[", "]"], ["(", ")"]]));
-
-CodeMirror.registerHelper("fold", "import", function(cm, start) {
-  function hasImport(line) {
-    if (line < cm.firstLine() || line > cm.lastLine()) return null;
-    var start = cm.getTokenAt(CodeMirror.Pos(line, 1));
-    if (!/\S/.test(start.string)) start = cm.getTokenAt(CodeMirror.Pos(line, start.end + 1));
-    if (start.type != "keyword" || start.string != "import") return null;
-    // Now find closing semicolon, return its position
-    for (var i = line, e = Math.min(cm.lastLine(), line + 10); i <= e; ++i) {
-      var text = cm.getLine(i), semi = text.indexOf(";");
-      if (semi != -1) return {startCh: start.end, end: CodeMirror.Pos(i, semi)};
-    }
-  }
-
-  var startLine = start.line, has = hasImport(startLine), prev;
-  if (!has || hasImport(startLine - 1) || ((prev = hasImport(startLine - 2)) && prev.end.line == startLine - 1))
-    return null;
-  for (var end = has.end;;) {
-    var next = hasImport(end.line + 1);
-    if (next == null) break;
-    end = next.end;
-  }
-  return {from: cm.clipPos(CodeMirror.Pos(startLine, has.startCh + 1)), to: end};
-});
-
-CodeMirror.registerHelper("fold", "include", function(cm, start) {
-  function hasInclude(line) {
-    if (line < cm.firstLine() || line > cm.lastLine()) return null;
-    var start = cm.getTokenAt(CodeMirror.Pos(line, 1));
-    if (!/\S/.test(start.string)) start = cm.getTokenAt(CodeMirror.Pos(line, start.end + 1));
-    if (start.type == "meta" && start.string.slice(0, 8) == "#include") return start.start + 8;
-  }
-
-  var startLine = start.line, has = hasInclude(startLine);
-  if (has == null || hasInclude(startLine - 1) != null) return null;
-  for (var end = startLine;;) {
-    var next = hasInclude(end + 1);
-    if (next == null) break;
-    ++end;
-  }
-  return {from: CodeMirror.Pos(startLine, has + 1),
-          to: cm.clipPos(CodeMirror.Pos(end))};
-});
-
-});
@@ -1,159 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-
-  function doFold(cm, pos, options, force) {
-    if (options && options.call) {
-      var finder = options;
-      options = null;
-    } else {
-      var finder = getOption(cm, options, "rangeFinder");
-    }
-    if (typeof pos == "number") pos = CodeMirror.Pos(pos, 0);
-    var minSize = getOption(cm, options, "minFoldSize");
-
-    function getRange(allowFolded) {
-      var range = finder(cm, pos);
-      if (!range || range.to.line - range.from.line < minSize) return null;
-      if (force === "fold") return range;
-
-      var marks = cm.findMarksAt(range.from);
-      for (var i = 0; i < marks.length; ++i) {
-        if (marks[i].__isFold) {
-          if (!allowFolded) return null;
-          range.cleared = true;
-          marks[i].clear();
-        }
-      }
-      return range;
-    }
-
-    var range = getRange(true);
-    if (getOption(cm, options, "scanUp")) while (!range && pos.line > cm.firstLine()) {
-      pos = CodeMirror.Pos(pos.line - 1, 0);
-      range = getRange(false);
-    }
-    if (!range || range.cleared || force === "unfold") return;
-
-    var myWidget = makeWidget(cm, options, range);
-    CodeMirror.on(myWidget, "mousedown", function(e) {
-      myRange.clear();
-      CodeMirror.e_preventDefault(e);
-    });
-    var myRange = cm.markText(range.from, range.to, {
-      replacedWith: myWidget,
-      clearOnEnter: getOption(cm, options, "clearOnEnter"),
-      __isFold: true
-    });
-    myRange.on("clear", function(from, to) {
-      CodeMirror.signal(cm, "unfold", cm, from, to);
-    });
-    CodeMirror.signal(cm, "fold", cm, range.from, range.to);
-  }
-
-  function makeWidget(cm, options, range) {
-    var widget = getOption(cm, options, "widget");
-
-    if (typeof widget == "function") {
-      widget = widget(range.from, range.to);
-    }
-
-    if (typeof widget == "string") {
-      var text = document.createTextNode(widget);
-      widget = document.createElement("span");
-      widget.appendChild(text);
-      widget.className = "CodeMirror-foldmarker";
-    } else if (widget) {
-      widget = widget.cloneNode(true)
-    }
-    return widget;
-  }
-
-  // Clumsy backwards-compatible interface
-  CodeMirror.newFoldFunction = function(rangeFinder, widget) {
-    return function(cm, pos) { doFold(cm, pos, {rangeFinder: rangeFinder, widget: widget}); };
-  };
-
-  // New-style interface
-  CodeMirror.defineExtension("foldCode", function(pos, options, force) {
-    doFold(this, pos, options, force);
-  });
-
-  CodeMirror.defineExtension("isFolded", function(pos) {
-    var marks = this.findMarksAt(pos);
-    for (var i = 0; i < marks.length; ++i)
-      if (marks[i].__isFold) return true;
-  });
-
-  CodeMirror.commands.toggleFold = function(cm) {
-    cm.foldCode(cm.getCursor());
-  };
-  CodeMirror.commands.fold = function(cm) {
-    cm.foldCode(cm.getCursor(), null, "fold");
-  };
-  CodeMirror.commands.unfold = function(cm) {
-    cm.foldCode(cm.getCursor(), { scanUp: false }, "unfold");
-  };
-  CodeMirror.commands.foldAll = function(cm) {
-    cm.operation(function() {
-      for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
-        cm.foldCode(CodeMirror.Pos(i, 0), { scanUp: false }, "fold");
-    });
-  };
-  CodeMirror.commands.unfoldAll = function(cm) {
-    cm.operation(function() {
-      for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
-        cm.foldCode(CodeMirror.Pos(i, 0), { scanUp: false }, "unfold");
-    });
-  };
-
-  CodeMirror.registerHelper("fold", "combine", function() {
-    var funcs = Array.prototype.slice.call(arguments, 0);
-    return function(cm, start) {
-      for (var i = 0; i < funcs.length; ++i) {
-        var found = funcs[i](cm, start);
-        if (found) return found;
-      }
-    };
-  });
-
-  CodeMirror.registerHelper("fold", "auto", function(cm, start) {
-    var helpers = cm.getHelpers(start, "fold");
-    for (var i = 0; i < helpers.length; i++) {
-      var cur = helpers[i](cm, start);
-      if (cur) return cur;
-    }
-  });
-
-  var defaultOptions = {
-    rangeFinder: CodeMirror.fold.auto,
-    widget: "\u2194",
-    minFoldSize: 0,
-    scanUp: false,
-    clearOnEnter: true
-  };
-
-  CodeMirror.defineOption("foldOptions", null);
-
-  function getOption(cm, options, name) {
-    if (options && options[name] !== undefined)
-      return options[name];
-    var editorOptions = cm.options.foldOptions;
-    if (editorOptions && editorOptions[name] !== undefined)
-      return editorOptions[name];
-    return defaultOptions[name];
-  }
-
-  CodeMirror.defineExtension("foldOption", function(options, name) {
-    return getOption(this, options, name);
-  });
-});
@@ -1,20 +0,0 @@
-.CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: arial;
-  line-height: .3;
-  cursor: pointer;
-}
-.CodeMirror-foldgutter {
-  width: .7em;
-}
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
-.CodeMirror-foldgutter-open:after {
-  content: "\25BE";
-}
-.CodeMirror-foldgutter-folded:after {
-  content: "\25B8";
-}
@@ -1,169 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"), require("./foldcode"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror", "./foldcode"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-
-  CodeMirror.defineOption("foldGutter", false, function(cm, val, old) {
-    if (old && old != CodeMirror.Init) {
-      cm.clearGutter(cm.state.foldGutter.options.gutter);
-      cm.state.foldGutter = null;
-      cm.off("gutterClick", onGutterClick);
-      cm.off("changes", onChange);
-      cm.off("viewportChange", onViewportChange);
-      cm.off("fold", onFold);
-      cm.off("unfold", onFold);
-      cm.off("swapDoc", onChange);
-      cm.off("optionChange", optionChange);
-    }
-    if (val) {
-      cm.state.foldGutter = new State(parseOptions(val));
-      updateInViewport(cm);
-      cm.on("gutterClick", onGutterClick);
-      cm.on("changes", onChange);
-      cm.on("viewportChange", onViewportChange);
-      cm.on("fold", onFold);
-      cm.on("unfold", onFold);
-      cm.on("swapDoc", onChange);
-      cm.on("optionChange", optionChange);
-    }
-  });
-
-  var Pos = CodeMirror.Pos;
-
-  function State(options) {
-    this.options = options;
-    this.from = this.to = 0;
-  }
-
-  function parseOptions(opts) {
-    if (opts === true) opts = {};
-    if (opts.gutter == null) opts.gutter = "CodeMirror-foldgutter";
-    if (opts.indicatorOpen == null) opts.indicatorOpen = "CodeMirror-foldgutter-open";
-    if (opts.indicatorFolded == null) opts.indicatorFolded = "CodeMirror-foldgutter-folded";
-    return opts;
-  }
-
-  function isFolded(cm, line) {
-    var marks = cm.findMarks(Pos(line, 0), Pos(line + 1, 0));
-    for (var i = 0; i < marks.length; ++i) {
-      if (marks[i].__isFold) {
-        var fromPos = marks[i].find(-1);
-        if (fromPos && fromPos.line === line)
-          return marks[i];
-      }
-    }
-  }
-
-  function marker(spec) {
-    if (typeof spec == "string") {
-      var elt = document.createElement("div");
-      elt.className = spec + " CodeMirror-guttermarker-subtle";
-      return elt;
-    } else {
-      return spec.cloneNode(true);
-    }
-  }
-
-  function updateFoldInfo(cm, from, to) {
-    var opts = cm.state.foldGutter.options, cur = from - 1;
-    var minSize = cm.foldOption(opts, "minFoldSize");
-    var func = cm.foldOption(opts, "rangeFinder");
-    // we can reuse the built-in indicator element if its className matches the new state
-    var clsFolded = typeof opts.indicatorFolded == "string" && classTest(opts.indicatorFolded);
-    var clsOpen = typeof opts.indicatorOpen == "string" && classTest(opts.indicatorOpen);
-    cm.eachLine(from, to, function(line) {
-      ++cur;
-      var mark = null;
-      var old = line.gutterMarkers;
-      if (old) old = old[opts.gutter];
-      if (isFolded(cm, cur)) {
-        if (clsFolded && old && clsFolded.test(old.className)) return;
-        mark = marker(opts.indicatorFolded);
-      } else {
-        var pos = Pos(cur, 0);
-        var range = func && func(cm, pos);
-        if (range && range.to.line - range.from.line >= minSize) {
-          if (clsOpen && old && clsOpen.test(old.className)) return;
-          mark = marker(opts.indicatorOpen);
-        }
-      }
-      if (!mark && !old) return;
-      cm.setGutterMarker(line, opts.gutter, mark);
-    });
-  }
-
-  // copied from CodeMirror/src/util/dom.js
-  function classTest(cls) { return new RegExp("(^|\\s)" + cls + "(?:$|\\s)\\s*") }
-
-  function updateInViewport(cm) {
-    var vp = cm.getViewport(), state = cm.state.foldGutter;
-    if (!state) return;
-    cm.operation(function() {
-      updateFoldInfo(cm, vp.from, vp.to);
-    });
-    state.from = vp.from; state.to = vp.to;
-  }
-
-  function onGutterClick(cm, line, gutter) {
-    var state = cm.state.foldGutter;
-    if (!state) return;
-    var opts = state.options;
-    if (gutter != opts.gutter) return;
-    var folded = isFolded(cm, line);
-    if (folded) folded.clear();
-    else cm.foldCode(Pos(line, 0), opts);
-  }
-
-  function optionChange(cm, option) {
-    if (option == "mode") onChange(cm)
-  }
-
-  function onChange(cm) {
-    var state = cm.state.foldGutter;
-    if (!state) return;
-    var opts = state.options;
-    state.from = state.to = 0;
-    clearTimeout(state.changeUpdate);
-    state.changeUpdate = setTimeout(function() { updateInViewport(cm); }, opts.foldOnChangeTimeSpan || 600);
-  }
-
-  function onViewportChange(cm) {
-    var state = cm.state.foldGutter;
-    if (!state) return;
-    var opts = state.options;
-    clearTimeout(state.changeUpdate);
-    state.changeUpdate = setTimeout(function() {
-      var vp = cm.getViewport();
-      if (state.from == state.to || vp.from - state.to > 20 || state.from - vp.to > 20) {
-        updateInViewport(cm);
-      } else {
-        cm.operation(function() {
-          if (vp.from < state.from) {
-            updateFoldInfo(cm, vp.from, state.from);
-            state.from = vp.from;
-          }
-          if (vp.to > state.to) {
-            updateFoldInfo(cm, state.to, vp.to);
-            state.to = vp.to;
-          }
-        });
-      }
-    }, opts.updateViewportTimeSpan || 400);
-  }
-
-  function onFold(cm, from) {
-    var state = cm.state.foldGutter;
-    if (!state) return;
-    var line = from.line;
-    if (line >= state.from && line < state.to)
-      updateFoldInfo(cm, line, line + 1);
-  }
-});
@@ -1,162 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  var Pos = CodeMirror.Pos;
-
-  function forEach(arr, f) {
-    for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
-  }
-
-  function arrayContains(arr, item) {
-    if (!Array.prototype.indexOf) {
-      var i = arr.length;
-      while (i--) {
-        if (arr[i] === item) {
-          return true;
-        }
-      }
-      return false;
-    }
-    return arr.indexOf(item) != -1;
-  }
-
-  function scriptHint(editor, keywords, getToken, options) {
-    // Find the token at the cursor
-    var cur = editor.getCursor(), token = getToken(editor, cur);
-    if (/\b(?:string|comment)\b/.test(token.type)) return;
-    var innerMode = CodeMirror.innerMode(editor.getMode(), token.state);
-    if (innerMode.mode.helperType === "json") return;
-    token.state = innerMode.state;
-
-    // If it's not a 'word-style' token, ignore the token.
-    if (!/^[\w$_]*$/.test(token.string)) {
-      token = {start: cur.ch, end: cur.ch, string: "", state: token.state,
-               type: token.string == "." ? "property" : null};
-    } else if (token.end > cur.ch) {
-      token.end = cur.ch;
-      token.string = token.string.slice(0, cur.ch - token.start);
-    }
-
-    var tprop = token;
-    // If it is a property, find out what it is a property of.
-    while (tprop.type == "property") {
-      tprop = getToken(editor, Pos(cur.line, tprop.start));
-      if (tprop.string != ".") return;
-      tprop = getToken(editor, Pos(cur.line, tprop.start));
-      if (!context) var context = [];
-      context.push(tprop);
-    }
-    return {list: getCompletions(token, context, keywords, options),
-            from: Pos(cur.line, token.start),
-            to: Pos(cur.line, token.end)};
-  }
-
-  function javascriptHint(editor, options) {
-    return scriptHint(editor, javascriptKeywords,
-                      function (e, cur) {return e.getTokenAt(cur);},
-                      options);
-  }
-  CodeMirror.registerHelper("hint", "javascript", javascriptHint);
-
-  function getCoffeeScriptToken(editor, cur) {
-  // This getToken, it is for coffeescript, imitates the behavior of
-  // getTokenAt method in javascript.js, that is, returning "property"
-  // type and treat "." as independent token.
-    var token = editor.getTokenAt(cur);
-    if (cur.ch == token.start + 1 && token.string.charAt(0) == '.') {
-      token.end = token.start;
-      token.string = '.';
-      token.type = "property";
-    }
-    else if (/^\.[\w$_]*$/.test(token.string)) {
-      token.type = "property";
-      token.start++;
-      token.string = token.string.replace(/\./, '');
-    }
-    return token;
-  }
-
-  function coffeescriptHint(editor, options) {
-    return scriptHint(editor, coffeescriptKeywords, getCoffeeScriptToken, options);
-  }
-  CodeMirror.registerHelper("hint", "coffeescript", coffeescriptHint);
-
-  var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
-                     "toUpperCase toLowerCase split concat match replace search").split(" ");
-  var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
-                    "lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
-  var funcProps = "prototype apply call bind".split(" ");
-  var javascriptKeywords = ("break case catch class const continue debugger default delete do else export extends false finally for function " +
-                  "if in import instanceof new null return super switch this throw true try typeof var void while with yield").split(" ");
-  var coffeescriptKeywords = ("and break catch class continue delete do else extends false finally for " +
-                  "if in instanceof isnt new no not null of off on or return switch then throw true try typeof until void while with yes").split(" ");
-
-  function forAllProps(obj, callback) {
-    if (!Object.getOwnPropertyNames || !Object.getPrototypeOf) {
-      for (var name in obj) callback(name)
-    } else {
-      for (var o = obj; o; o = Object.getPrototypeOf(o))
-        Object.getOwnPropertyNames(o).forEach(callback)
-    }
-  }
-
-  function getCompletions(token, context, keywords, options) {
-    var found = [], start = token.string, global = options && options.globalScope || window;
-    function maybeAdd(str) {
-      if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
-    }
-    function gatherCompletions(obj) {
-      if (typeof obj == "string") forEach(stringProps, maybeAdd);
-      else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
-      else if (obj instanceof Function) forEach(funcProps, maybeAdd);
-      forAllProps(obj, maybeAdd)
-    }
-
-    if (context && context.length) {
-      // If this is a property, see if it belongs to some object we can
-      // find in the current environment.
-      var obj = context.pop(), base;
-      if (obj.type && obj.type.indexOf("variable") === 0) {
-        if (options && options.additionalContext)
-          base = options.additionalContext[obj.string];
-        if (!options || options.useGlobalScope !== false)
-          base = base || global[obj.string];
-      } else if (obj.type == "string") {
-        base = "";
-      } else if (obj.type == "atom") {
-        base = 1;
-      } else if (obj.type == "function") {
-        if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
-            (typeof global.jQuery == 'function'))
-          base = global.jQuery();
-        else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
-          base = global._();
-      }
-      while (base != null && context.length)
-        base = base[context.pop().string];
-      if (base != null) gatherCompletions(base);
-    } else {
-      // If not, just look in the global object, any local scope, and optional additional-context
-      // (reading into JS mode internals to get at the local and global variables)
-      for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
-      for (var c = token.state.context; c; c = c.prev)
-        for (var v = c.vars; v; v = v.next) maybeAdd(v.name)
-      for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
-      if (options && options.additionalContext != null)
-        for (var key in options.additionalContext)
-          maybeAdd(key);
-      if (!options || options.useGlobalScope !== false)
-        gatherCompletions(global);
-      forEach(keywords, maybeAdd);
-    }
-    return found;
-  }
-});
@@ -1,960 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.defineMode("javascript", function(config, parserConfig) {
-  var indentUnit = config.indentUnit;
-  var statementIndent = parserConfig.statementIndent;
-  var jsonldMode = parserConfig.jsonld;
-  var jsonMode = parserConfig.json || jsonldMode;
-  var trackScope = parserConfig.trackScope !== false
-  var isTS = parserConfig.typescript;
-  var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
-
-  // Tokenizer
-
-  var keywords = function(){
-    function kw(type) {return {type: type, style: "keyword"};}
-    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c"), D = kw("keyword d");
-    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
-
-    return {
-      "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
-      "return": D, "break": D, "continue": D, "new": kw("new"), "delete": C, "void": C, "throw": C,
-      "debugger": kw("debugger"), "var": kw("var"), "const": kw("var"), "let": kw("var"),
-      "function": kw("function"), "catch": kw("catch"),
-      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
-      "in": operator, "typeof": operator, "instanceof": operator,
-      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
-      "this": kw("this"), "class": kw("class"), "super": kw("atom"),
-      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C,
-      "await": C
-    };
-  }();
-
-  var isOperatorChar = /[+\-*&%=<>!?|~^@]/;
-  var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
-
-  function readRegexp(stream) {
-    var escaped = false, next, inSet = false;
-    while ((next = stream.next()) != null) {
-      if (!escaped) {
-        if (next == "/" && !inSet) return;
-        if (next == "[") inSet = true;
-        else if (inSet && next == "]") inSet = false;
-      }
-      escaped = !escaped && next == "\\";
-    }
-  }
-
-  // Used as scratch variables to communicate multiple values without
-  // consing up tons of objects.
-  var type, content;
-  function ret(tp, style, cont) {
-    type = tp; content = cont;
-    return style;
-  }
-  function tokenBase(stream, state) {
-    var ch = stream.next();
-    if (ch == '"' || ch == "'") {
-      state.tokenize = tokenString(ch);
-      return state.tokenize(stream, state);
-    } else if (ch == "." && stream.match(/^\d[\d_]*(?:[eE][+\-]?[\d_]+)?/)) {
-      return ret("number", "number");
-    } else if (ch == "." && stream.match("..")) {
-      return ret("spread", "meta");
-    } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
-      return ret(ch);
-    } else if (ch == "=" && stream.eat(">")) {
-      return ret("=>", "operator");
-    } else if (ch == "0" && stream.match(/^(?:x[\dA-Fa-f_]+|o[0-7_]+|b[01_]+)n?/)) {
-      return ret("number", "number");
-    } else if (/\d/.test(ch)) {
-      stream.match(/^[\d_]*(?:n|(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)?/);
-      return ret("number", "number");
-    } else if (ch == "/") {
-      if (stream.eat("*")) {
-        state.tokenize = tokenComment;
-        return tokenComment(stream, state);
-      } else if (stream.eat("/")) {
-        stream.skipToEnd();
-        return ret("comment", "comment");
-      } else if (expressionAllowed(stream, state, 1)) {
-        readRegexp(stream);
-        stream.match(/^\b(([gimyus])(?![gimyus]*\2))+\b/);
-        return ret("regexp", "string-2");
-      } else {
-        stream.eat("=");
-        return ret("operator", "operator", stream.current());
-      }
-    } else if (ch == "`") {
-      state.tokenize = tokenQuasi;
-      return tokenQuasi(stream, state);
-    } else if (ch == "#" && stream.peek() == "!") {
-      stream.skipToEnd();
-      return ret("meta", "meta");
-    } else if (ch == "#" && stream.eatWhile(wordRE)) {
-      return ret("variable", "property")
-    } else if (ch == "<" && stream.match("!--") ||
-               (ch == "-" && stream.match("->") && !/\S/.test(stream.string.slice(0, stream.start)))) {
-      stream.skipToEnd()
-      return ret("comment", "comment")
-    } else if (isOperatorChar.test(ch)) {
-      if (ch != ">" || !state.lexical || state.lexical.type != ">") {
-        if (stream.eat("=")) {
-          if (ch == "!" || ch == "=") stream.eat("=")
-        } else if (/[<>*+\-|&?]/.test(ch)) {
-          stream.eat(ch)
-          if (ch == ">") stream.eat(ch)
-        }
-      }
-      if (ch == "?" && stream.eat(".")) return ret(".")
-      return ret("operator", "operator", stream.current());
-    } else if (wordRE.test(ch)) {
-      stream.eatWhile(wordRE);
-      var word = stream.current()
-      if (state.lastType != ".") {
-        if (keywords.propertyIsEnumerable(word)) {
-          var kw = keywords[word]
-          return ret(kw.type, kw.style, word)
-        }
-        if (word == "async" && stream.match(/^(\s|\/\*([^*]|\*(?!\/))*?\*\/)*[\[\(\w]/, false))
-          return ret("async", "keyword", word)
-      }
-      return ret("variable", "variable", word)
-    }
-  }
-
-  function tokenString(quote) {
-    return function(stream, state) {
-      var escaped = false, next;
-      if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
-        state.tokenize = tokenBase;
-        return ret("jsonld-keyword", "meta");
-      }
-      while ((next = stream.next()) != null) {
-        if (next == quote && !escaped) break;
-        escaped = !escaped && next == "\\";
-      }
-      if (!escaped) state.tokenize = tokenBase;
-      return ret("string", "string");
-    };
-  }
-
-  function tokenComment(stream, state) {
-    var maybeEnd = false, ch;
-    while (ch = stream.next()) {
-      if (ch == "/" && maybeEnd) {
-        state.tokenize = tokenBase;
-        break;
-      }
-      maybeEnd = (ch == "*");
-    }
-    return ret("comment", "comment");
-  }
-
-  function tokenQuasi(stream, state) {
-    var escaped = false, next;
-    while ((next = stream.next()) != null) {
-      if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
-        state.tokenize = tokenBase;
-        break;
-      }
-      escaped = !escaped && next == "\\";
-    }
-    return ret("quasi", "string-2", stream.current());
-  }
-
-  var brackets = "([{}])";
-  // This is a crude lookahead trick to try and notice that we're
-  // parsing the argument patterns for a fat-arrow function before we
-  // actually hit the arrow token. It only works if the arrow is on
-  // the same line as the arguments and there's no strange noise
-  // (comments) in between. Fallback is to only notice when we hit the
-  // arrow, and not declare the arguments as locals for the arrow
-  // body.
-  function findFatArrow(stream, state) {
-    if (state.fatArrowAt) state.fatArrowAt = null;
-    var arrow = stream.string.indexOf("=>", stream.start);
-    if (arrow < 0) return;
-
-    if (isTS) { // Try to skip TypeScript return type declarations after the arguments
-      var m = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(stream.string.slice(stream.start, arrow))
-      if (m) arrow = m.index
-    }
-
-    var depth = 0, sawSomething = false;
-    for (var pos = arrow - 1; pos >= 0; --pos) {
-      var ch = stream.string.charAt(pos);
-      var bracket = brackets.indexOf(ch);
-      if (bracket >= 0 && bracket < 3) {
-        if (!depth) { ++pos; break; }
-        if (--depth == 0) { if (ch == "(") sawSomething = true; break; }
-      } else if (bracket >= 3 && bracket < 6) {
-        ++depth;
-      } else if (wordRE.test(ch)) {
-        sawSomething = true;
-      } else if (/["'\/`]/.test(ch)) {
-        for (;; --pos) {
-          if (pos == 0) return
-          var next = stream.string.charAt(pos - 1)
-          if (next == ch && stream.string.charAt(pos - 2) != "\\") { pos--; break }
-        }
-      } else if (sawSomething && !depth) {
-        ++pos;
-        break;
-      }
-    }
-    if (sawSomething && !depth) state.fatArrowAt = pos;
-  }
-
-  // Parser
-
-  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true,
-                     "regexp": true, "this": true, "import": true, "jsonld-keyword": true};
-
-  function JSLexical(indented, column, type, align, prev, info) {
-    this.indented = indented;
-    this.column = column;
-    this.type = type;
-    this.prev = prev;
-    this.info = info;
-    if (align != null) this.align = align;
-  }
-
-  function inScope(state, varname) {
-    if (!trackScope) return false
-    for (var v = state.localVars; v; v = v.next)
-      if (v.name == varname) return true;
-    for (var cx = state.context; cx; cx = cx.prev) {
-      for (var v = cx.vars; v; v = v.next)
-        if (v.name == varname) return true;
-    }
-  }
-
-  function parseJS(state, style, type, content, stream) {
-    var cc = state.cc;
-    // Communicate our context to the combinators.
-    // (Less wasteful than consing up a hundred closures on every call.)
-    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
-
-    if (!state.lexical.hasOwnProperty("align"))
-      state.lexical.align = true;
-
-    while(true) {
-      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
-      if (combinator(type, content)) {
-        while(cc.length && cc[cc.length - 1].lex)
-          cc.pop()();
-        if (cx.marked) return cx.marked;
-        if (type == "variable" && inScope(state, content)) return "variable-2";
-        return style;
-      }
-    }
-  }
-
-  // Combinator utils
-
-  var cx = {state: null, column: null, marked: null, cc: null};
-  function pass() {
-    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
-  }
-  function cont() {
-    pass.apply(null, arguments);
-    return true;
-  }
-  function inList(name, list) {
-    for (var v = list; v; v = v.next) if (v.name == name) return true
-    return false;
-  }
-  function register(varname) {
-    var state = cx.state;
-    cx.marked = "def";
-    if (!trackScope) return
-    if (state.context) {
-      if (state.lexical.info == "var" && state.context && state.context.block) {
-        // FIXME function decls are also not block scoped
-        var newContext = registerVarScoped(varname, state.context)
-        if (newContext != null) {
-          state.context = newContext
-          return
-        }
-      } else if (!inList(varname, state.localVars)) {
-        state.localVars = new Var(varname, state.localVars)
-        return
-      }
-    }
-    // Fall through means this is global
-    if (parserConfig.globalVars && !inList(varname, state.globalVars))
-      state.globalVars = new Var(varname, state.globalVars)
-  }
-  function registerVarScoped(varname, context) {
-    if (!context) {
-      return null
-    } else if (context.block) {
-      var inner = registerVarScoped(varname, context.prev)
-      if (!inner) return null
-      if (inner == context.prev) return context
-      return new Context(inner, context.vars, true)
-    } else if (inList(varname, context.vars)) {
-      return context
-    } else {
-      return new Context(context.prev, new Var(varname, context.vars), false)
-    }
-  }
-
-  function isModifier(name) {
-    return name == "public" || name == "private" || name == "protected" || name == "abstract" || name == "readonly"
-  }
-
-  // Combinators
-
-  function Context(prev, vars, block) { this.prev = prev; this.vars = vars; this.block = block }
-  function Var(name, next) { this.name = name; this.next = next }
-
-  var defaultVars = new Var("this", new Var("arguments", null))
-  function pushcontext() {
-    cx.state.context = new Context(cx.state.context, cx.state.localVars, false)
-    cx.state.localVars = defaultVars
-  }
-  function pushblockcontext() {
-    cx.state.context = new Context(cx.state.context, cx.state.localVars, true)
-    cx.state.localVars = null
-  }
-  pushcontext.lex = pushblockcontext.lex = true
-  function popcontext() {
-    cx.state.localVars = cx.state.context.vars
-    cx.state.context = cx.state.context.prev
-  }
-  popcontext.lex = true
-  function pushlex(type, info) {
-    var result = function() {
-      var state = cx.state, indent = state.indented;
-      if (state.lexical.type == "stat") indent = state.lexical.indented;
-      else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
-        indent = outer.indented;
-      state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
-    };
-    result.lex = true;
-    return result;
-  }
-  function poplex() {
-    var state = cx.state;
-    if (state.lexical.prev) {
-      if (state.lexical.type == ")")
-        state.indented = state.lexical.indented;
-      state.lexical = state.lexical.prev;
-    }
-  }
-  poplex.lex = true;
-
-  function expect(wanted) {
-    function exp(type) {
-      if (type == wanted) return cont();
-      else if (wanted == ";" || type == "}" || type == ")" || type == "]") return pass();
-      else return cont(exp);
-    }
-    return exp;
-  }
-
-  function statement(type, value) {
-    if (type == "var") return cont(pushlex("vardef", value), vardef, expect(";"), poplex);
-    if (type == "keyword a") return cont(pushlex("form"), parenExpr, statement, poplex);
-    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
-    if (type == "keyword d") return cx.stream.match(/^\s*$/, false) ? cont() : cont(pushlex("stat"), maybeexpression, expect(";"), poplex);
-    if (type == "debugger") return cont(expect(";"));
-    if (type == "{") return cont(pushlex("}"), pushblockcontext, block, poplex, popcontext);
-    if (type == ";") return cont();
-    if (type == "if") {
-      if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
-        cx.state.cc.pop()();
-      return cont(pushlex("form"), parenExpr, statement, poplex, maybeelse);
-    }
-    if (type == "function") return cont(functiondef);
-    if (type == "for") return cont(pushlex("form"), pushblockcontext, forspec, statement, popcontext, poplex);
-    if (type == "class" || (isTS && value == "interface")) {
-      cx.marked = "keyword"
-      return cont(pushlex("form", type == "class" ? type : value), className, poplex)
-    }
-    if (type == "variable") {
-      if (isTS && value == "declare") {
-        cx.marked = "keyword"
-        return cont(statement)
-      } else if (isTS && (value == "module" || value == "enum" || value == "type") && cx.stream.match(/^\s*\w/, false)) {
-        cx.marked = "keyword"
-        if (value == "enum") return cont(enumdef);
-        else if (value == "type") return cont(typename, expect("operator"), typeexpr, expect(";"));
-        else return cont(pushlex("form"), pattern, expect("{"), pushlex("}"), block, poplex, poplex)
-      } else if (isTS && value == "namespace") {
-        cx.marked = "keyword"
-        return cont(pushlex("form"), expression, statement, poplex)
-      } else if (isTS && value == "abstract") {
-        cx.marked = "keyword"
-        return cont(statement)
-      } else {
-        return cont(pushlex("stat"), maybelabel);
-      }
-    }
-    if (type == "switch") return cont(pushlex("form"), parenExpr, expect("{"), pushlex("}", "switch"), pushblockcontext,
-                                      block, poplex, poplex, popcontext);
-    if (type == "case") return cont(expression, expect(":"));
-    if (type == "default") return cont(expect(":"));
-    if (type == "catch") return cont(pushlex("form"), pushcontext, maybeCatchBinding, statement, poplex, popcontext);
-    if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
-    if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
-    if (type == "async") return cont(statement)
-    if (value == "@") return cont(expression, statement)
-    return pass(pushlex("stat"), expression, expect(";"), poplex);
-  }
-  function maybeCatchBinding(type) {
-    if (type == "(") return cont(funarg, expect(")"))
-  }
-  function expression(type, value) {
-    return expressionInner(type, value, false);
-  }
-  function expressionNoComma(type, value) {
-    return expressionInner(type, value, true);
-  }
-  function parenExpr(type) {
-    if (type != "(") return pass()
-    return cont(pushlex(")"), maybeexpression, expect(")"), poplex)
-  }
-  function expressionInner(type, value, noComma) {
-    if (cx.state.fatArrowAt == cx.stream.start) {
-      var body = noComma ? arrowBodyNoComma : arrowBody;
-      if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, expect("=>"), body, popcontext);
-      else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
-    }
-
-    var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
-    if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
-    if (type == "function") return cont(functiondef, maybeop);
-    if (type == "class" || (isTS && value == "interface")) { cx.marked = "keyword"; return cont(pushlex("form"), classExpression, poplex); }
-    if (type == "keyword c" || type == "async") return cont(noComma ? expressionNoComma : expression);
-    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
-    if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
-    if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
-    if (type == "{") return contCommasep(objprop, "}", null, maybeop);
-    if (type == "quasi") return pass(quasi, maybeop);
-    if (type == "new") return cont(maybeTarget(noComma));
-    return cont();
-  }
-  function maybeexpression(type) {
-    if (type.match(/[;\}\)\],]/)) return pass();
-    return pass(expression);
-  }
-
-  function maybeoperatorComma(type, value) {
-    if (type == ",") return cont(maybeexpression);
-    return maybeoperatorNoComma(type, value, false);
-  }
-  function maybeoperatorNoComma(type, value, noComma) {
-    var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
-    var expr = noComma == false ? expression : expressionNoComma;
-    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
-    if (type == "operator") {
-      if (/\+\+|--/.test(value) || isTS && value == "!") return cont(me);
-      if (isTS && value == "<" && cx.stream.match(/^([^<>]|<[^<>]*>)*>\s*\(/, false))
-        return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, me);
-      if (value == "?") return cont(expression, expect(":"), expr);
-      return cont(expr);
-    }
-    if (type == "quasi") { return pass(quasi, me); }
-    if (type == ";") return;
-    if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
-    if (type == ".") return cont(property, me);
-    if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
-    if (isTS && value == "as") { cx.marked = "keyword"; return cont(typeexpr, me) }
-    if (type == "regexp") {
-      cx.state.lastType = cx.marked = "operator"
-      cx.stream.backUp(cx.stream.pos - cx.stream.start - 1)
-      return cont(expr)
-    }
-  }
-  function quasi(type, value) {
-    if (type != "quasi") return pass();
-    if (value.slice(value.length - 2) != "${") return cont(quasi);
-    return cont(maybeexpression, continueQuasi);
-  }
-  function continueQuasi(type) {
-    if (type == "}") {
-      cx.marked = "string-2";
-      cx.state.tokenize = tokenQuasi;
-      return cont(quasi);
-    }
-  }
-  function arrowBody(type) {
-    findFatArrow(cx.stream, cx.state);
-    return pass(type == "{" ? statement : expression);
-  }
-  function arrowBodyNoComma(type) {
-    findFatArrow(cx.stream, cx.state);
-    return pass(type == "{" ? statement : expressionNoComma);
-  }
-  function maybeTarget(noComma) {
-    return function(type) {
-      if (type == ".") return cont(noComma ? targetNoComma : target);
-      else if (type == "variable" && isTS) return cont(maybeTypeArgs, noComma ? maybeoperatorNoComma : maybeoperatorComma)
-      else return pass(noComma ? expressionNoComma : expression);
-    };
-  }
-  function target(_, value) {
-    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
-  }
-  function targetNoComma(_, value) {
-    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
-  }
-  function maybelabel(type) {
-    if (type == ":") return cont(poplex, statement);
-    return pass(maybeoperatorComma, expect(";"), poplex);
-  }
-  function property(type) {
-    if (type == "variable") {cx.marked = "property"; return cont();}
-  }
-  function objprop(type, value) {
-    if (type == "async") {
-      cx.marked = "property";
-      return cont(objprop);
-    } else if (type == "variable" || cx.style == "keyword") {
-      cx.marked = "property";
-      if (value == "get" || value == "set") return cont(getterSetter);
-      var m // Work around fat-arrow-detection complication for detecting typescript typed arrow params
-      if (isTS && cx.state.fatArrowAt == cx.stream.start && (m = cx.stream.match(/^\s*:\s*/, false)))
-        cx.state.fatArrowAt = cx.stream.pos + m[0].length
-      return cont(afterprop);
-    } else if (type == "number" || type == "string") {
-      cx.marked = jsonldMode ? "property" : (cx.style + " property");
-      return cont(afterprop);
-    } else if (type == "jsonld-keyword") {
-      return cont(afterprop);
-    } else if (isTS && isModifier(value)) {
-      cx.marked = "keyword"
-      return cont(objprop)
-    } else if (type == "[") {
-      return cont(expression, maybetype, expect("]"), afterprop);
-    } else if (type == "spread") {
-      return cont(expressionNoComma, afterprop);
-    } else if (value == "*") {
-      cx.marked = "keyword";
-      return cont(objprop);
-    } else if (type == ":") {
-      return pass(afterprop)
-    }
-  }
-  function getterSetter(type) {
-    if (type != "variable") return pass(afterprop);
-    cx.marked = "property";
-    return cont(functiondef);
-  }
-  function afterprop(type) {
-    if (type == ":") return cont(expressionNoComma);
-    if (type == "(") return pass(functiondef);
-  }
-  function commasep(what, end, sep) {
-    function proceed(type, value) {
-      if (sep ? sep.indexOf(type) > -1 : type == ",") {
-        var lex = cx.state.lexical;
-        if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
-        return cont(function(type, value) {
-          if (type == end || value == end) return pass()
-          return pass(what)
-        }, proceed);
-      }
-      if (type == end || value == end) return cont();
-      if (sep && sep.indexOf(";") > -1) return pass(what)
-      return cont(expect(end));
-    }
-    return function(type, value) {
-      if (type == end || value == end) return cont();
-      return pass(what, proceed);
-    };
-  }
-  function contCommasep(what, end, info) {
-    for (var i = 3; i < arguments.length; i++)
-      cx.cc.push(arguments[i]);
-    return cont(pushlex(end, info), commasep(what, end), poplex);
-  }
-  function block(type) {
-    if (type == "}") return cont();
-    return pass(statement, block);
-  }
-  function maybetype(type, value) {
-    if (isTS) {
-      if (type == ":") return cont(typeexpr);
-      if (value == "?") return cont(maybetype);
-    }
-  }
-  function maybetypeOrIn(type, value) {
-    if (isTS && (type == ":" || value == "in")) return cont(typeexpr)
-  }
-  function mayberettype(type) {
-    if (isTS && type == ":") {
-      if (cx.stream.match(/^\s*\w+\s+is\b/, false)) return cont(expression, isKW, typeexpr)
-      else return cont(typeexpr)
-    }
-  }
-  function isKW(_, value) {
-    if (value == "is") {
-      cx.marked = "keyword"
-      return cont()
-    }
-  }
-  function typeexpr(type, value) {
-    if (value == "keyof" || value == "typeof" || value == "infer" || value == "readonly") {
-      cx.marked = "keyword"
-      return cont(value == "typeof" ? expressionNoComma : typeexpr)
-    }
-    if (type == "variable" || value == "void") {
-      cx.marked = "type"
-      return cont(afterType)
-    }
-    if (value == "|" || value == "&") return cont(typeexpr)
-    if (type == "string" || type == "number" || type == "atom") return cont(afterType);
-    if (type == "[") return cont(pushlex("]"), commasep(typeexpr, "]", ","), poplex, afterType)
-    if (type == "{") return cont(pushlex("}"), typeprops, poplex, afterType)
-    if (type == "(") return cont(commasep(typearg, ")"), maybeReturnType, afterType)
-    if (type == "<") return cont(commasep(typeexpr, ">"), typeexpr)
-    if (type == "quasi") { return pass(quasiType, afterType); }
-  }
-  function maybeReturnType(type) {
-    if (type == "=>") return cont(typeexpr)
-  }
-  function typeprops(type) {
-    if (type.match(/[\}\)\]]/)) return cont()
-    if (type == "," || type == ";") return cont(typeprops)
-    return pass(typeprop, typeprops)
-  }
-  function typeprop(type, value) {
-    if (type == "variable" || cx.style == "keyword") {
-      cx.marked = "property"
-      return cont(typeprop)
-    } else if (value == "?" || type == "number" || type == "string") {
-      return cont(typeprop)
-    } else if (type == ":") {
-      return cont(typeexpr)
-    } else if (type == "[") {
-      return cont(expect("variable"), maybetypeOrIn, expect("]"), typeprop)
-    } else if (type == "(") {
-      return pass(functiondecl, typeprop)
-    } else if (!type.match(/[;\}\)\],]/)) {
-      return cont()
-    }
-  }
-  function quasiType(type, value) {
-    if (type != "quasi") return pass();
-    if (value.slice(value.length - 2) != "${") return cont(quasiType);
-    return cont(typeexpr, continueQuasiType);
-  }
-  function continueQuasiType(type) {
-    if (type == "}") {
-      cx.marked = "string-2";
-      cx.state.tokenize = tokenQuasi;
-      return cont(quasiType);
-    }
-  }
-  function typearg(type, value) {
-    if (type == "variable" && cx.stream.match(/^\s*[?:]/, false) || value == "?") return cont(typearg)
-    if (type == ":") return cont(typeexpr)
-    if (type == "spread") return cont(typearg)
-    return pass(typeexpr)
-  }
-  function afterType(type, value) {
-    if (value == "<") return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, afterType)
-    if (value == "|" || type == "." || value == "&") return cont(typeexpr)
-    if (type == "[") return cont(typeexpr, expect("]"), afterType)
-    if (value == "extends" || value == "implements") { cx.marked = "keyword"; return cont(typeexpr) }
-    if (value == "?") return cont(typeexpr, expect(":"), typeexpr)
-  }
-  function maybeTypeArgs(_, value) {
-    if (value == "<") return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, afterType)
-  }
-  function typeparam() {
-    return pass(typeexpr, maybeTypeDefault)
-  }
-  function maybeTypeDefault(_, value) {
-    if (value == "=") return cont(typeexpr)
-  }
-  function vardef(_, value) {
-    if (value == "enum") {cx.marked = "keyword"; return cont(enumdef)}
-    return pass(pattern, maybetype, maybeAssign, vardefCont);
-  }
-  function pattern(type, value) {
-    if (isTS && isModifier(value)) { cx.marked = "keyword"; return cont(pattern) }
-    if (type == "variable") { register(value); return cont(); }
-    if (type == "spread") return cont(pattern);
-    if (type == "[") return contCommasep(eltpattern, "]");
-    if (type == "{") return contCommasep(proppattern, "}");
-  }
-  function proppattern(type, value) {
-    if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
-      register(value);
-      return cont(maybeAssign);
-    }
-    if (type == "variable") cx.marked = "property";
-    if (type == "spread") return cont(pattern);
-    if (type == "}") return pass();
-    if (type == "[") return cont(expression, expect(']'), expect(':'), proppattern);
-    return cont(expect(":"), pattern, maybeAssign);
-  }
-  function eltpattern() {
-    return pass(pattern, maybeAssign)
-  }
-  function maybeAssign(_type, value) {
-    if (value == "=") return cont(expressionNoComma);
-  }
-  function vardefCont(type) {
-    if (type == ",") return cont(vardef);
-  }
-  function maybeelse(type, value) {
-    if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
-  }
-  function forspec(type, value) {
-    if (value == "await") return cont(forspec);
-    if (type == "(") return cont(pushlex(")"), forspec1, poplex);
-  }
-  function forspec1(type) {
-    if (type == "var") return cont(vardef, forspec2);
-    if (type == "variable") return cont(forspec2);
-    return pass(forspec2)
-  }
-  function forspec2(type, value) {
-    if (type == ")") return cont()
-    if (type == ";") return cont(forspec2)
-    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression, forspec2) }
-    return pass(expression, forspec2)
-  }
-  function functiondef(type, value) {
-    if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
-    if (type == "variable") {register(value); return cont(functiondef);}
-    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, mayberettype, statement, popcontext);
-    if (isTS && value == "<") return cont(pushlex(">"), commasep(typeparam, ">"), poplex, functiondef)
-  }
-  function functiondecl(type, value) {
-    if (value == "*") {cx.marked = "keyword"; return cont(functiondecl);}
-    if (type == "variable") {register(value); return cont(functiondecl);}
-    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, mayberettype, popcontext);
-    if (isTS && value == "<") return cont(pushlex(">"), commasep(typeparam, ">"), poplex, functiondecl)
-  }
-  function typename(type, value) {
-    if (type == "keyword" || type == "variable") {
-      cx.marked = "type"
-      return cont(typename)
-    } else if (value == "<") {
-      return cont(pushlex(">"), commasep(typeparam, ">"), poplex)
-    }
-  }
-  function funarg(type, value) {
-    if (value == "@") cont(expression, funarg)
-    if (type == "spread") return cont(funarg);
-    if (isTS && isModifier(value)) { cx.marked = "keyword"; return cont(funarg); }
-    if (isTS && type == "this") return cont(maybetype, maybeAssign)
-    return pass(pattern, maybetype, maybeAssign);
-  }
-  function classExpression(type, value) {
-    // Class expressions may have an optional name.
-    if (type == "variable") return className(type, value);
-    return classNameAfter(type, value);
-  }
-  function className(type, value) {
-    if (type == "variable") {register(value); return cont(classNameAfter);}
-  }
-  function classNameAfter(type, value) {
-    if (value == "<") return cont(pushlex(">"), commasep(typeparam, ">"), poplex, classNameAfter)
-    if (value == "extends" || value == "implements" || (isTS && type == ",")) {
-      if (value == "implements") cx.marked = "keyword";
-      return cont(isTS ? typeexpr : expression, classNameAfter);
-    }
-    if (type == "{") return cont(pushlex("}"), classBody, poplex);
-  }
-  function classBody(type, value) {
-    if (type == "async" ||
-        (type == "variable" &&
-         (value == "static" || value == "get" || value == "set" || (isTS && isModifier(value))) &&
-         cx.stream.match(/^\s+#?[\w$\xa1-\uffff]/, false))) {
-      cx.marked = "keyword";
-      return cont(classBody);
-    }
-    if (type == "variable" || cx.style == "keyword") {
-      cx.marked = "property";
-      return cont(classfield, classBody);
-    }
-    if (type == "number" || type == "string") return cont(classfield, classBody);
-    if (type == "[")
-      return cont(expression, maybetype, expect("]"), classfield, classBody)
-    if (value == "*") {
-      cx.marked = "keyword";
-      return cont(classBody);
-    }
-    if (isTS && type == "(") return pass(functiondecl, classBody)
-    if (type == ";" || type == ",") return cont(classBody);
-    if (type == "}") return cont();
-    if (value == "@") return cont(expression, classBody)
-  }
-  function classfield(type, value) {
-    if (value == "!") return cont(classfield)
-    if (value == "?") return cont(classfield)
-    if (type == ":") return cont(typeexpr, maybeAssign)
-    if (value == "=") return cont(expressionNoComma)
-    var context = cx.state.lexical.prev, isInterface = context && context.info == "interface"
-    return pass(isInterface ? functiondecl : functiondef)
-  }
-  function afterExport(type, value) {
-    if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
-    if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
-    if (type == "{") return cont(commasep(exportField, "}"), maybeFrom, expect(";"));
-    return pass(statement);
-  }
-  function exportField(type, value) {
-    if (value == "as") { cx.marked = "keyword"; return cont(expect("variable")); }
-    if (type == "variable") return pass(expressionNoComma, exportField);
-  }
-  function afterImport(type) {
-    if (type == "string") return cont();
-    if (type == "(") return pass(expression);
-    if (type == ".") return pass(maybeoperatorComma);
-    return pass(importSpec, maybeMoreImports, maybeFrom);
-  }
-  function importSpec(type, value) {
-    if (type == "{") return contCommasep(importSpec, "}");
-    if (type == "variable") register(value);
-    if (value == "*") cx.marked = "keyword";
-    return cont(maybeAs);
-  }
-  function maybeMoreImports(type) {
-    if (type == ",") return cont(importSpec, maybeMoreImports)
-  }
-  function maybeAs(_type, value) {
-    if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
-  }
-  function maybeFrom(_type, value) {
-    if (value == "from") { cx.marked = "keyword"; return cont(expression); }
-  }
-  function arrayLiteral(type) {
-    if (type == "]") return cont();
-    return pass(commasep(expressionNoComma, "]"));
-  }
-  function enumdef() {
-    return pass(pushlex("form"), pattern, expect("{"), pushlex("}"), commasep(enummember, "}"), poplex, poplex)
-  }
-  function enummember() {
-    return pass(pattern, maybeAssign);
-  }
-
-  function isContinuedStatement(state, textAfter) {
-    return state.lastType == "operator" || state.lastType == "," ||
-      isOperatorChar.test(textAfter.charAt(0)) ||
-      /[,.]/.test(textAfter.charAt(0));
-  }
-
-  function expressionAllowed(stream, state, backUp) {
-    return state.tokenize == tokenBase &&
-      /^(?:operator|sof|keyword [bcd]|case|new|export|default|spread|[\[{}\(,;:]|=>)$/.test(state.lastType) ||
-      (state.lastType == "quasi" && /\{\s*$/.test(stream.string.slice(0, stream.pos - (backUp || 0))))
-  }
-
-  // Interface
-
-  return {
-    startState: function(basecolumn) {
-      var state = {
-        tokenize: tokenBase,
-        lastType: "sof",
-        cc: [],
-        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
-        localVars: parserConfig.localVars,
-        context: parserConfig.localVars && new Context(null, null, false),
-        indented: basecolumn || 0
-      };
-      if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
-        state.globalVars = parserConfig.globalVars;
-      return state;
-    },
-
-    token: function(stream, state) {
-      if (stream.sol()) {
-        if (!state.lexical.hasOwnProperty("align"))
-          state.lexical.align = false;
-        state.indented = stream.indentation();
-        findFatArrow(stream, state);
-      }
-      if (state.tokenize != tokenComment && stream.eatSpace()) return null;
-      var style = state.tokenize(stream, state);
-      if (type == "comment") return style;
-      state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
-      return parseJS(state, style, type, content, stream);
-    },
-
-    indent: function(state, textAfter) {
-      if (state.tokenize == tokenComment || state.tokenize == tokenQuasi) return CodeMirror.Pass;
-      if (state.tokenize != tokenBase) return 0;
-      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical, top
-      // Kludge to prevent 'maybelse' from blocking lexical scope pops
-      if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
-        var c = state.cc[i];
-        if (c == poplex) lexical = lexical.prev;
-        else if (c != maybeelse && c != popcontext) break;
-      }
-      while ((lexical.type == "stat" || lexical.type == "form") &&
-             (firstChar == "}" || ((top = state.cc[state.cc.length - 1]) &&
-                                   (top == maybeoperatorComma || top == maybeoperatorNoComma) &&
-                                   !/^[,\.=+\-*:?[\(]/.test(textAfter))))
-        lexical = lexical.prev;
-      if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
-        lexical = lexical.prev;
-      var type = lexical.type, closing = firstChar == type;
-
-      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info.length + 1 : 0);
-      else if (type == "form" && firstChar == "{") return lexical.indented;
-      else if (type == "form") return lexical.indented + indentUnit;
-      else if (type == "stat")
-        return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
-      else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
-        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
-      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
-      else return lexical.indented + (closing ? 0 : indentUnit);
-    },
-
-    electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
-    blockCommentStart: jsonMode ? null : "/*",
-    blockCommentEnd: jsonMode ? null : "*/",
-    blockCommentContinue: jsonMode ? null : " * ",
-    lineComment: jsonMode ? null : "//",
-    fold: "brace",
-    closeBrackets: "()[]{}''\"\"``",
-
-    helperType: jsonMode ? "json" : "javascript",
-    jsonldMode: jsonldMode,
-    jsonMode: jsonMode,
-
-    expressionAllowed: expressionAllowed,
-
-    skipExpression: function(state) {
-      parseJS(state, "atom", "atom", "true", new CodeMirror.StringStream("", 2, null))
-    }
-  };
-});
-
-CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
-
-CodeMirror.defineMIME("text/javascript", "javascript");
-CodeMirror.defineMIME("text/ecmascript", "javascript");
-CodeMirror.defineMIME("application/javascript", "javascript");
-CodeMirror.defineMIME("application/x-javascript", "javascript");
-CodeMirror.defineMIME("application/ecmascript", "javascript");
-CodeMirror.defineMIME("application/json", { name: "javascript", json: true });
-CodeMirror.defineMIME("application/x-json", { name: "javascript", json: true });
-CodeMirror.defineMIME("application/manifest+json", { name: "javascript", json: true })
-CodeMirror.defineMIME("application/ld+json", { name: "javascript", jsonld: true });
-CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
-CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
-
-});
@@ -1,65 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-// Depends on jshint.js from https://github.com/jshint/jshint
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-  // declare global: JSHINT
-
-  function validator(text, options) {
-    if (!window.JSHINT) {
-      if (window.console) {
-        window.console.error("Error: window.JSHINT not defined, CodeMirror JavaScript linting cannot run.");
-      }
-      return [];
-    }
-    if (!options.indent) // JSHint error.character actually is a column index, this fixes underlining on lines using tabs for indentation
-      options.indent = 1; // JSHint default value is 4
-    JSHINT(text, options, options.globals);
-    var errors = JSHINT.data().errors, result = [];
-    if (errors) parseErrors(errors, result);
-    return result;
-  }
-
-  CodeMirror.registerHelper("lint", "javascript", validator);
-
-  function parseErrors(errors, output) {
-    for ( var i = 0; i < errors.length; i++) {
-      var error = errors[i];
-      if (error) {
-        if (error.line <= 0) {
-          if (window.console) {
-            window.console.warn("Cannot display JSHint error (invalid line " + error.line + ")", error);
-          }
-          continue;
-        }
-
-        var start = error.character - 1, end = start + 1;
-        if (error.evidence) {
-          var index = error.evidence.substring(start).search(/.\b/);
-          if (index > -1) {
-            end += index;
-          }
-        }
-
-        // Convert to format expected by validation service
-        var hint = {
-          message: error.reason,
-          severity: error.code ? (error.code.startsWith('W') ? "warning" : "error") : "error",
-          from: CodeMirror.Pos(error.line - 1, start),
-          to: CodeMirror.Pos(error.line - 1, end)
-        };
-
-        output.push(hint);
-      }
-    }
-  }
-});
@@ -1,79 +0,0 @@
-/* The lint marker gutter */
-.CodeMirror-lint-markers {
-  width: 16px;
-}
-
-.CodeMirror-lint-tooltip {
-  background-color: #ffd;
-  border: 1px solid black;
-  border-radius: 4px;
-  color: black;
-  font-family: monospace;
-  font-size: 10pt;
-  overflow: hidden;
-  padding: 2px 5px;
-  position: fixed;
-  white-space: pre;
-  white-space: pre-wrap;
-  z-index: 100;
-  max-width: 600px;
-  opacity: 0;
-  transition: opacity .4s;
-  -moz-transition: opacity .4s;
-  -webkit-transition: opacity .4s;
-  -o-transition: opacity .4s;
-  -ms-transition: opacity .4s;
-}
-
-.CodeMirror-lint-mark {
-  background-position: left bottom;
-  background-repeat: repeat-x;
-}
-
-.CodeMirror-lint-mark-warning {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-mark-error {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
-}
-
-.CodeMirror-lint-marker {
-  background-position: center center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: middle;
-  position: relative;
-}
-
-.CodeMirror-lint-message {
-  padding-left: 18px;
-  background-position: top left;
-  background-repeat: no-repeat;
-}
-
-.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
-}
-
-.CodeMirror-lint-marker-multiple {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  width: 100%; height: 100%;
-}
-
-.CodeMirror-lint-line-error {
-  background-color: rgba(183, 76, 81, 0.08);
-}
-
-.CodeMirror-lint-line-warning {
-  background-color: rgba(255, 211, 0, 0.1);
-}
@@ -1,288 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-  var GUTTER_ID = "CodeMirror-lint-markers";
-  var LINT_LINE_ID = "CodeMirror-lint-line-";
-
-  function showTooltip(cm, e, content) {
-    var tt = document.createElement("div");
-    tt.className = "CodeMirror-lint-tooltip cm-s-" + cm.options.theme;
-    tt.appendChild(content.cloneNode(true));
-    if (cm.state.lint.options.selfContain)
-      cm.getWrapperElement().appendChild(tt);
-    else
-      document.body.appendChild(tt);
-
-    function position(e) {
-      if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
-      var top = Math.max(0, e.clientY - tt.offsetHeight - 5);
-      var left = Math.max(0, Math.min(e.clientX + 5, tt.ownerDocument.defaultView.innerWidth - tt.offsetWidth));
-      tt.style.top = top + "px"
-      tt.style.left = left + "px";
-    }
-    CodeMirror.on(document, "mousemove", position);
-    position(e);
-    if (tt.style.opacity != null) tt.style.opacity = 1;
-    return tt;
-  }
-  function rm(elt) {
-    if (elt.parentNode) elt.parentNode.removeChild(elt);
-  }
-  function hideTooltip(tt) {
-    if (!tt.parentNode) return;
-    if (tt.style.opacity == null) rm(tt);
-    tt.style.opacity = 0;
-    setTimeout(function() { rm(tt); }, 600);
-  }
-
-  function showTooltipFor(cm, e, content, node) {
-    var tooltip = showTooltip(cm, e, content);
-    function hide() {
-      CodeMirror.off(node, "mouseout", hide);
-      if (tooltip) { hideTooltip(tooltip); tooltip = null; }
-    }
-    var poll = setInterval(function() {
-      if (tooltip) for (var n = node;; n = n.parentNode) {
-        if (n && n.nodeType == 11) n = n.host;
-        if (n == document.body) return;
-        if (!n) { hide(); break; }
-      }
-      if (!tooltip) return clearInterval(poll);
-    }, 400);
-    CodeMirror.on(node, "mouseout", hide);
-  }
-
-  function LintState(cm, conf, hasGutter) {
-    this.marked = [];
-    if (conf instanceof Function) conf = {getAnnotations: conf};
-    if (!conf || conf === true) conf = {};
-    this.options = {};
-    this.linterOptions = conf.options || {};
-    for (var prop in defaults) this.options[prop] = defaults[prop];
-    for (var prop in conf) {
-      if (defaults.hasOwnProperty(prop)) {
-        if (conf[prop] != null) this.options[prop] = conf[prop];
-      } else if (!conf.options) {
-        this.linterOptions[prop] = conf[prop];
-      }
-    }
-    this.timeout = null;
-    this.hasGutter = hasGutter;
-    this.onMouseOver = function(e) { onMouseOver(cm, e); };
-    this.waitingFor = 0
-  }
-
-  var defaults = {
-    highlightLines: false,
-    tooltips: true,
-    delay: 500,
-    lintOnChange: true,
-    getAnnotations: null,
-    async: false,
-    selfContain: null,
-    formatAnnotation: null,
-    onUpdateLinting: null
-  }
-
-  function clearMarks(cm) {
-    var state = cm.state.lint;
-    if (state.hasGutter) cm.clearGutter(GUTTER_ID);
-    if (state.options.highlightLines) clearErrorLines(cm);
-    for (var i = 0; i < state.marked.length; ++i)
-      state.marked[i].clear();
-    state.marked.length = 0;
-  }
-
-  function clearErrorLines(cm) {
-    cm.eachLine(function(line) {
-      var has = line.wrapClass && /\bCodeMirror-lint-line-\w+\b/.exec(line.wrapClass);
-      if (has) cm.removeLineClass(line, "wrap", has[0]);
-    })
-  }
-
-  function makeMarker(cm, labels, severity, multiple, tooltips) {
-    var marker = document.createElement("div"), inner = marker;
-    marker.className = "CodeMirror-lint-marker CodeMirror-lint-marker-" + severity;
-    if (multiple) {
-      inner = marker.appendChild(document.createElement("div"));
-      inner.className = "CodeMirror-lint-marker CodeMirror-lint-marker-multiple";
-    }
-
-    if (tooltips != false) CodeMirror.on(inner, "mouseover", function(e) {
-      showTooltipFor(cm, e, labels, inner);
-    });
-
-    return marker;
-  }
-
-  function getMaxSeverity(a, b) {
-    if (a == "error") return a;
-    else return b;
-  }
-
-  function groupByLine(annotations) {
-    var lines = [];
-    for (var i = 0; i < annotations.length; ++i) {
-      var ann = annotations[i], line = ann.from.line;
-      (lines[line] || (lines[line] = [])).push(ann);
-    }
-    return lines;
-  }
-
-  function annotationTooltip(ann) {
-    var severity = ann.severity;
-    if (!severity) severity = "error";
-    var tip = document.createElement("div");
-    tip.className = "CodeMirror-lint-message CodeMirror-lint-message-" + severity;
-    if (typeof ann.messageHTML != 'undefined') {
-      tip.innerHTML = ann.messageHTML;
-    } else {
-      tip.appendChild(document.createTextNode(ann.message));
-    }
-    return tip;
-  }
-
-  function lintAsync(cm, getAnnotations) {
-    var state = cm.state.lint
-    var id = ++state.waitingFor
-    function abort() {
-      id = -1
-      cm.off("change", abort)
-    }
-    cm.on("change", abort)
-    getAnnotations(cm.getValue(), function(annotations, arg2) {
-      cm.off("change", abort)
-      if (state.waitingFor != id) return
-      if (arg2 && annotations instanceof CodeMirror) annotations = arg2
-      cm.operation(function() {updateLinting(cm, annotations)})
-    }, state.linterOptions, cm);
-  }
-
-  function startLinting(cm) {
-    var state = cm.state.lint;
-    if (!state) return;
-    var options = state.options;
-    /*
-     * Passing rules in `options` property prevents JSHint (and other linters) from complaining
-     * about unrecognized rules like `onUpdateLinting`, `delay`, `lintOnChange`, etc.
-     */
-    var getAnnotations = options.getAnnotations || cm.getHelper(CodeMirror.Pos(0, 0), "lint");
-    if (!getAnnotations) return;
-    if (options.async || getAnnotations.async) {
-      lintAsync(cm, getAnnotations)
-    } else {
-      var annotations = getAnnotations(cm.getValue(), state.linterOptions, cm);
-      if (!annotations) return;
-      if (annotations.then) annotations.then(function(issues) {
-        cm.operation(function() {updateLinting(cm, issues)})
-      });
-      else cm.operation(function() {updateLinting(cm, annotations)})
-    }
-  }
-
-  function updateLinting(cm, annotationsNotSorted) {
-    var state = cm.state.lint;
-    if (!state) return;
-    var options = state.options;
-    clearMarks(cm);
-
-    var annotations = groupByLine(annotationsNotSorted);
-
-    for (var line = 0; line < annotations.length; ++line) {
-      var anns = annotations[line];
-      if (!anns) continue;
-
-      var maxSeverity = null;
-      var tipLabel = state.hasGutter && document.createDocumentFragment();
-
-      for (var i = 0; i < anns.length; ++i) {
-        var ann = anns[i];
-        var severity = ann.severity;
-        if (!severity) severity = "error";
-        maxSeverity = getMaxSeverity(maxSeverity, severity);
-
-        if (options.formatAnnotation) ann = options.formatAnnotation(ann);
-        if (state.hasGutter) tipLabel.appendChild(annotationTooltip(ann));
-
-        if (ann.to) state.marked.push(cm.markText(ann.from, ann.to, {
-          className: "CodeMirror-lint-mark CodeMirror-lint-mark-" + severity,
-          __annotation: ann
-        }));
-      }
-      if (state.hasGutter)
-        cm.setGutterMarker(line, GUTTER_ID, makeMarker(cm, tipLabel, maxSeverity, anns.length > 1,
-                                                       options.tooltips));
-
-      if (options.highlightLines)
-        cm.addLineClass(line, "wrap", LINT_LINE_ID + maxSeverity);
-    }
-    if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);
-  }
-
-  function onChange(cm) {
-    var state = cm.state.lint;
-    if (!state) return;
-    clearTimeout(state.timeout);
-    state.timeout = setTimeout(function(){startLinting(cm);}, state.options.delay);
-  }
-
-  function popupTooltips(cm, annotations, e) {
-    var target = e.target || e.srcElement;
-    var tooltip = document.createDocumentFragment();
-    for (var i = 0; i < annotations.length; i++) {
-      var ann = annotations[i];
-      tooltip.appendChild(annotationTooltip(ann));
-    }
-    showTooltipFor(cm, e, tooltip, target);
-  }
-
-  function onMouseOver(cm, e) {
-    var target = e.target || e.srcElement;
-    if (!/\bCodeMirror-lint-mark-/.test(target.className)) return;
-    var box = target.getBoundingClientRect(), x = (box.left + box.right) / 2, y = (box.top + box.bottom) / 2;
-    var spans = cm.findMarksAt(cm.coordsChar({left: x, top: y}, "client"));
-
-    var annotations = [];
-    for (var i = 0; i < spans.length; ++i) {
-      var ann = spans[i].__annotation;
-      if (ann) annotations.push(ann);
-    }
-    if (annotations.length) popupTooltips(cm, annotations, e);
-  }
-
-  CodeMirror.defineOption("lint", false, function(cm, val, old) {
-    if (old && old != CodeMirror.Init) {
-      clearMarks(cm);
-      if (cm.state.lint.options.lintOnChange !== false)
-        cm.off("change", onChange);
-      CodeMirror.off(cm.getWrapperElement(), "mouseover", cm.state.lint.onMouseOver);
-      clearTimeout(cm.state.lint.timeout);
-      delete cm.state.lint;
-    }
-
-    if (val) {
-      var gutters = cm.getOption("gutters"), hasLintGutter = false;
-      for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
-      var state = cm.state.lint = new LintState(cm, val, hasLintGutter);
-      if (state.options.lintOnChange)
-        cm.on("change", onChange);
-      if (state.options.tooltips != false && state.options.tooltips != "gutter")
-        CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
-
-      startLinting(cm);
-    }
-  });
-
-  CodeMirror.defineExtension("performLint", function() {
-    startLinting(this);
-  });
-});
@@ -1 +0,0 @@
-.CodeMirror{background-color:#f6fbfa;border:1px solid #d9d9d9}.cm-s-xq.CodeMirror{border-radius:1.5rem;height:auto;transition:background-color .3s,border-color 0.3s}.cm-s-xq.CodeMirror:hover{background-color:#e8f4f2;border-color:#18947b}.cm-s-xq div.CodeMirror-selected{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::selection,.cm-s-xq .CodeMirror-line>span::selection,.cm-s-xq .CodeMirror-line>span>span::selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::-moz-selection,.cm-s-xq .CodeMirror-line>span::-moz-selection,.cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-gutters{border-right:1px solid #ddd;background-color:rgb(221 221 221 / 20%);white-space:nowrap}.cm-s-xq span.cm-keyword{line-height:1em;font-weight:700;color:#5A5CAD}.cm-s-xq span.cm-atom{color:#7A316F;font-weight:700}.cm-s-xq span.cm-number{color:#e36209}.cm-s-xq span.cm-def{text-decoration:underline}.cm-s-xq span.cm-variable{color:#000}.cm-s-xq span.cm-variable-2{color:#000}.cm-s-xq span.cm-variable-3,.cm-s-xq span.cm-type{color:#000}.cm-s-xq span.cm-property{color:#008771}.cm-s-xq span.cm-comment{color:#bbb;font-style:italic}.cm-s-xq span.cm-meta{color:#ff0}.cm-s-xq span.cm-qualifier{color:grey}.cm-s-xq span.cm-builtin{color:#7EA656}.cm-s-xq span.cm-bracket{color:#cc7}.cm-s-xq span.cm-tag{color:#3F7F7F}.cm-s-xq span.cm-attribute{color:#7F007F}.cm-s-xq span.cm-error{color:#e04141}.cm-s-xq .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:black!important;background:#ff0}.dark .CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300)}.dark .cm-s-xq.CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300);color:rgb(255 255 255 / 65%)}.dark .cm-s-xq.CodeMirror:hover{background-color:rgb(0 50 42 / 30%);border-color:#008771}.dark .cm-s-xq div.CodeMirror-selected{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::selection,.dark .cm-s-xq .CodeMirror-line>span::selection,.dark .cm-s-xq .CodeMirror-line>span>span::selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-gutters{background:rgb(0 0 0 / 30%);border-right:1px solid var(--dark-color-surface-300)}.dark .cm-s-xq .CodeMirror-guttermarker{color:#FFBD40}.dark .cm-s-xq .CodeMirror-guttermarker-subtle{color:rgb(255 255 255 / 70%)}.dark .cm-s-xq .CodeMirror-linenumber{color:rgb(255 255 255 / 50%)}.dark .cm-s-xq .CodeMirror-cursor{border-left:1px solid #fff}.dark .cm-s-xq span.cm-keyword{color:#FFBD40}.dark .cm-s-xq span.cm-atom{color:#c099ff}.dark .cm-s-xq span.cm-number{color:#9ccfd8}.dark .cm-s-xq span.cm-def{color:#FFF;text-decoration:underline}.dark .cm-s-xq span.cm-variable{color:#FFF}.dark .cm-s-xq span.cm-variable-2{color:#EEE}.dark .cm-s-xq span.cm-variable-3,.dark .cm-s-xq span.cm-type{color:#DDD}.dark .cm-s-xq span.cm-property{color:#f6c177}.dark .cm-s-xq span.cm-comment{color:gray}.dark .cm-s-xq span.cm-meta{color:#ff0}.dark .cm-s-xq span.cm-qualifier{color:#FFF700}.dark .cm-s-xq span.cm-builtin{color:#30a}.dark .cm-s-xq span.cm-bracket{color:#cc7}.dark .cm-s-xq span.cm-tag{color:#FFBD40}.dark .cm-s-xq span.cm-attribute{color:#FFF700}.dark .cm-s-xq span.cm-error{color:#e04141}.dark .cm-s-xq .CodeMirror-activeline-background{background:#27282E}.dark .cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:white!important}.Line-Hover{transition:all .2s}.CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:rgb(0 102 85 / .05)}.dark .CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:var(--dark-color-codemirror-line-hover)}.CodeMirror-foldmarker{color:#fc8800;text-shadow:#ffd8aa 1px 1px 2px,#ffd8aa -1px -1px 2px,#ffd8aa 1px -1px 2px,#ffd8aa -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.dark .CodeMirror-foldmarker{color:#fff;text-shadow:#bbb 1px 1px 2px,#bbb -1px -1px 2px,#bbb 1px -1px 2px,#bbb -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}
@@ -1,36 +0,0 @@
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
-axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-axios.interceptors.request.use(
-    (config) => {
-        config.headers = config.headers || {};
-        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
-        const method = (config.method || 'get').toUpperCase();
-        if (csrfToken && !['GET', 'HEAD', 'OPTIONS', 'TRACE'].includes(method)) {
-            config.headers['X-CSRF-Token'] = csrfToken;
-        }
-        if (config.data instanceof FormData) {
-            config.headers['Content-Type'] = 'multipart/form-data';
-        } else {
-            config.data = Qs.stringify(config.data, {
-                arrayFormat: 'repeat',
-            });
-        }
-        return config;
-    },
-    (error) => Promise.reject(error),
-);
-
-axios.interceptors.response.use(
-    (response) => response,
-    (error) => {
-        if (error.response) {
-            const statusCode = error.response.status;
-            // Check the status code
-            if (statusCode === 401) { // Unauthorized
-                return window.location.reload();
-            }
-        }
-        return Promise.reject(error);
-    }
-);
@@ -1,176 +0,0 @@
-class DBInbound {
-
-    constructor(data) {
-        this.id = 0;
-        this.userId = 0;
-        this.up = 0;
-        this.down = 0;
-        this.total = 0;
-        this.allTime = 0;
-        this.remark = "";
-        this.enable = true;
-        this.expiryTime = 0;
-        this.trafficReset = "never";
-        this.lastTrafficResetTime = 0;
-
-        this.listen = "";
-        this.port = 0;
-        this.protocol = "";
-        this.settings = "";
-        this.streamSettings = "";
-        this.tag = "";
-        this.sniffing = "";
-        this.clientStats = ""
-        if (data == null) {
-            return;
-        }
-        ObjectUtil.cloneProps(this, data);
-    }
-
-    get totalGB() {
-        return NumberFormatter.toFixed(this.total / SizeFormatter.ONE_GB, 2);
-    }
-
-    set totalGB(gb) {
-        this.total = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
-    }
-
-    get isVMess() {
-        return this.protocol === Protocols.VMESS;
-    }
-
-    get isVLess() {
-        return this.protocol === Protocols.VLESS;
-    }
-
-    get isTrojan() {
-        return this.protocol === Protocols.TROJAN;
-    }
-
-    get isSS() {
-        return this.protocol === Protocols.SHADOWSOCKS;
-    }
-
-    get isMixed() {
-        return this.protocol === Protocols.MIXED;
-    }
-
-    get isHTTP() {
-        return this.protocol === Protocols.HTTP;
-    }
-
-    get isWireguard() {
-        return this.protocol === Protocols.WIREGUARD;
-    }
-
-    get address() {
-        let address = location.hostname;
-        if (!ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0") {
-            address = this.listen;
-        }
-        return address;
-    }
-
-    get _expiryTime() {
-        if (this.expiryTime === 0) {
-            return null;
-        }
-        return moment(this.expiryTime);
-    }
-
-    set _expiryTime(t) {
-        if (t == null) {
-            this.expiryTime = 0;
-        } else {
-            this.expiryTime = t.valueOf();
-        }
-    }
-
-    get isExpiry() {
-        return this.expiryTime < new Date().getTime();
-    }
-
-    invalidateCache() {
-        this._cachedInbound = null;
-        this._clientStatsMap = null;
-    }
-
-    toInbound() {
-        if (this._cachedInbound) {
-            return this._cachedInbound;
-        }
-
-        let settings = {};
-        if (!ObjectUtil.isEmpty(this.settings)) {
-            settings = JSON.parse(this.settings);
-        }
-
-        let streamSettings = {};
-        if (!ObjectUtil.isEmpty(this.streamSettings)) {
-            streamSettings = JSON.parse(this.streamSettings);
-        }
-
-        let sniffing = {};
-        if (!ObjectUtil.isEmpty(this.sniffing)) {
-            sniffing = JSON.parse(this.sniffing);
-        }
-
-        const config = {
-            port: this.port,
-            listen: this.listen,
-            protocol: this.protocol,
-            settings: settings,
-            streamSettings: streamSettings,
-            tag: this.tag,
-            sniffing: sniffing,
-            clientStats: this.clientStats,
-        };
-
-        this._cachedInbound = Inbound.fromJson(config);
-        return this._cachedInbound;
-    }
-
-    getClientStats(email) {
-        if (!this._clientStatsMap) {
-            this._clientStatsMap = new Map();
-            if (this.clientStats && Array.isArray(this.clientStats)) {
-                for (const stats of this.clientStats) {
-                    this._clientStatsMap.set(stats.email, stats);
-                }
-            }
-        }
-        return this._clientStatsMap.get(email);
-    }
-
-    isMultiUser() {
-        switch (this.protocol) {
-            case Protocols.VMESS:
-            case Protocols.VLESS:
-            case Protocols.TROJAN:
-            case Protocols.HYSTERIA:
-                return true;
-            case Protocols.SHADOWSOCKS:
-                return this.toInbound().isSSMultiUser;
-            default:
-                return false;
-        }
-    }
-
-    hasLink() {
-        switch (this.protocol) {
-            case Protocols.VMESS:
-            case Protocols.VLESS:
-            case Protocols.TROJAN:
-            case Protocols.SHADOWSOCKS:
-            case Protocols.HYSTERIA:
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    genInboundLinks(remarkModel) {
-        const inbound = this.toInbound();
-        return inbound.genInboundLinks(this.remark, remarkModel);
-    }
-}
@@ -1,24 +0,0 @@
-// List of popular services for VLESS Reality Target/SNI randomization
-const REALITY_TARGETS = [
-    { target: 'www.amazon.com:443', sni: 'www.amazon.com' },
-    { target: 'aws.amazon.com:443', sni: 'aws.amazon.com' },
-    { target: 'www.oracle.com:443', sni: 'www.oracle.com' },
-    { target: 'www.nvidia.com:443', sni: 'www.nvidia.com' },
-    { target: 'www.amd.com:443', sni: 'www.amd.com' },
-    { target: 'www.intel.com:443', sni: 'www.intel.com' },
-    { target: 'www.sony.com:443', sni: 'www.sony.com' }
-];
-
-/**
- * Returns a random Reality target configuration from the predefined list
- * @returns {Object} Object with target and sni properties
- */
-function getRandomRealityTarget() {
-    const randomIndex = Math.floor(Math.random() * REALITY_TARGETS.length);
-    const selected = REALITY_TARGETS[randomIndex];
-    // Return a copy to avoid reference issues
-    return {
-        target: selected.target,
-        sni: selected.sni
-    };
-}
@@ -1,93 +0,0 @@
-class AllSetting {
-
-    constructor(data) {
-        this.webListen = "";
-        this.webDomain = "";
-        this.webPort = 2053;
-        this.webCertFile = "";
-        this.webKeyFile = "";
-        this.webBasePath = "/";
-        this.sessionMaxAge = 360;
-        this.pageSize = 25;
-        this.expireDiff = 0;
-        this.trafficDiff = 0;
-        this.remarkModel = "-ieo";
-        this.datepicker = "gregorian";
-        this.tgBotEnable = false;
-        this.tgBotToken = "";
-        this.tgBotProxy = "";
-        this.tgBotAPIServer = "";
-        this.tgBotChatId = "";
-        this.tgRunTime = "@daily";
-        this.tgBotBackup = false;
-        this.tgBotLoginNotify = true;
-        this.tgCpu = 80;
-        this.tgLang = "en-US";
-        this.twoFactorEnable = false;
-        this.twoFactorToken = "";
-        this.xrayTemplateConfig = "";
-        this.subEnable = true;
-        this.subJsonEnable = false;
-        this.subTitle = "";
-        this.subSupportUrl = "";
-        this.subProfileUrl = "";
-        this.subAnnounce = "";
-        this.subEnableRouting = true;
-        this.subRoutingRules = "";
-        this.subListen = "";
-        this.subPort = 2096;
-        this.subPath = "/sub/";
-        this.subJsonPath = "/json/";
-        this.subClashEnable = true;
-        this.subClashPath = "/clash/";
-        this.subDomain = "";
-        this.externalTrafficInformEnable = false;
-        this.externalTrafficInformURI = "";
-        this.restartXrayOnClientDisable = true;
-        this.subCertFile = "";
-        this.subKeyFile = "";
-        this.subUpdates = 12;
-        this.subEncrypt = true;
-        this.subShowInfo = true;
-        this.subURI = "";
-        this.subJsonURI = "";
-        this.subClashURI = "";
-        this.subJsonFragment = "";
-        this.subJsonNoises = "";
-        this.subJsonMux = "";
-        this.subJsonRules = "";
-
-        this.timeLocation = "Local";
-
-        // LDAP settings
-        this.ldapEnable = false;
-        this.ldapHost = "";
-        this.ldapPort = 389;
-        this.ldapUseTLS = false;
-        this.ldapBindDN = "";
-        this.ldapPassword = "";
-        this.ldapBaseDN = "";
-        this.ldapUserFilter = "(objectClass=person)";
-        this.ldapUserAttr = "mail";
-        this.ldapVlessField = "vless_enabled";
-        this.ldapSyncCron = "@every 1m";
-        this.ldapFlagField = "";
-        this.ldapTruthyValues = "true,1,yes,on";
-        this.ldapInvertFlag = false;
-        this.ldapInboundTags = "";
-        this.ldapAutoCreate = false;
-        this.ldapAutoDelete = false;
-        this.ldapDefaultTotalGB = 0;
-        this.ldapDefaultExpiryDays = 0;
-        this.ldapDefaultLimitIP = 0;
-
-        if (data == null) {
-            return
-        }
-        ObjectUtil.cloneProps(this, data);
-    }
-
-    equals(other) {
-        return ObjectUtil.equals(this, other);
-    }
-}
@@ -1,170 +0,0 @@
-(function () {
-  // Vue app for Subscription page
-  const el = document.getElementById('subscription-data');
-  if (!el) return;
-  const textarea = document.getElementById('subscription-links');
-  const rawLinks = (textarea?.value || '').split('\n').filter(Boolean);
-
-  const data = {
-    sId: el.getAttribute('data-sid') || '',
-    enabled: (el.getAttribute('data-enabled') || '').toLowerCase() === 'true',
-    subUrl: el.getAttribute('data-sub-url') || '',
-    subJsonUrl: el.getAttribute('data-subjson-url') || '',
-    subClashUrl: el.getAttribute('data-subclash-url') || '',
-    download: el.getAttribute('data-download') || '',
-    upload: el.getAttribute('data-upload') || '',
-    used: el.getAttribute('data-used') || '',
-    total: el.getAttribute('data-total') || '',
-    remained: el.getAttribute('data-remained') || '',
-    expireMs: (parseInt(el.getAttribute('data-expire') || '0', 10) || 0) * 1000,
-    lastOnlineMs: (parseInt(el.getAttribute('data-lastonline') || '0', 10) || 0),
-    downloadByte: parseInt(el.getAttribute('data-downloadbyte') || '0', 10) || 0,
-    uploadByte: parseInt(el.getAttribute('data-uploadbyte') || '0', 10) || 0,
-    totalByte: parseInt(el.getAttribute('data-totalbyte') || '0', 10) || 0,
-    datepicker: el.getAttribute('data-datepicker') || 'gregorian',
-  };
-
-  // Normalize lastOnline to milliseconds if it looks like seconds
-  if (data.lastOnlineMs && data.lastOnlineMs < 10_000_000_000) {
-    data.lastOnlineMs *= 1000;
-  }
-
-  function renderLink(item) {
-    return (
-      Vue.h('a-list-item', {}, [
-        Vue.h('a-space', { props: { size: 'small' } }, [
-          Vue.h('a-button', { props: { size: 'small' }, on: { click: () => copy(item) } }, [Vue.h('a-icon', { props: { type: 'copy' } })]),
-          Vue.h('span', { class: 'break-all' }, item)
-        ])
-      ])
-    );
-  }
-
-  function copy(text) {
-    ClipboardManager.copyText(text).then(ok => {
-      const messageType = ok ? 'success' : 'error';
-      Vue.prototype.$message[messageType](ok ? 'Copied' : 'Copy failed');
-    });
-  }
-
-  function open(url) {
-    window.location.href = url;
-  }
-
-  function drawQR(value) {
-    try {
-      new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
-    } catch (e) {
-      console.warn(e);
-    }
-  }
-
-  // Try to extract a human label (email/ps) from different link types
-  function linkName(link, idx) {
-    try {
-      if (link.startsWith('vmess://')) {
-        const json = JSON.parse(atob(link.replace('vmess://', '')));
-        if (json.ps) return json.ps;
-        if (json.add && json.id) return json.add; // fallback host
-      } else if (link.startsWith('vless://') || link.startsWith('trojan://')) {
-        const hashIdx = link.indexOf('#');
-        if (hashIdx !== -1) return decodeURIComponent(link.substring(hashIdx + 1));
-        const qIdx = link.indexOf('?');
-        if (qIdx !== -1) {
-          const qs = new URL('http://x/?' + link.substring(qIdx + 1, hashIdx !== -1 ? hashIdx : undefined)).searchParams;
-          if (qs.get('remark')) return qs.get('remark');
-          if (qs.get('email')) return qs.get('email');
-        }
-        const at = link.indexOf('@');
-        const protSep = link.indexOf('://');
-        if (at !== -1 && protSep !== -1) return link.substring(protSep + 3, at);
-      } else if (link.startsWith('ss://')) {
-        const hashIdx = link.indexOf('#');
-        if (hashIdx !== -1) return decodeURIComponent(link.substring(hashIdx + 1));
-      }
-    } catch (e) { /* ignore and fallback */ }
-    return 'Link ' + (idx + 1);
-  }
-
-  const app = new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#app',
-    data: {
-      themeSwitcher,
-      app: data,
-      links: rawLinks,
-      lang: '',
-      viewportWidth: (typeof window !== 'undefined' ? window.innerWidth : 1024),
-    },
-    async mounted() {
-      this.lang = LanguageManager.getLanguage();
-      const tpl = document.getElementById('subscription-data');
-      const sj = tpl ? tpl.getAttribute('data-subjson-url') : '';
-      const sc = tpl ? tpl.getAttribute('data-subclash-url') : '';
-      if (sj) this.app.subJsonUrl = sj;
-      if (sc) this.app.subClashUrl = sc;
-      drawQR(this.app.subUrl);
-      try {
-        const elJson = document.getElementById('qrcode-subjson');
-        if (elJson && this.app.subJsonUrl) {
-          new QRious({ element: elJson, value: this.app.subJsonUrl, size: 220 });
-        }
-        const elClash = document.getElementById('qrcode-subclash');
-        if (elClash && this.app.subClashUrl) {
-          new QRious({ element: elClash, value: this.app.subClashUrl, size: 220 });
-        }
-      } catch (e) { /* ignore */ }
-      this._onResize = () => { this.viewportWidth = window.innerWidth; };
-      window.addEventListener('resize', this._onResize);
-    },
-    beforeDestroy() {
-      if (this._onResize) window.removeEventListener('resize', this._onResize);
-    },
-    computed: {
-      isMobile() {
-        return this.viewportWidth < 576;
-      },
-      isUnlimited() {
-        return !this.app.totalByte;
-      },
-      isActive() {
-        const now = Date.now();
-        const enabledOk = this.app.enabled;
-        const expiryOk = !this.app.expireMs || this.app.expireMs >= now;
-        const trafficOk = !this.app.totalByte || (this.app.uploadByte + this.app.downloadByte) <= this.app.totalByte;
-        return enabledOk && expiryOk && trafficOk;
-      },
-      shadowrocketUrl() {
-        const separator = this.app.subUrl.includes('?') ? '&' : '?';
-        const rawUrl = this.app.subUrl + separator + 'flag=shadowrocket';
-        const base64Url = encodeURIComponent(btoa(rawUrl));
-        const remark = encodeURIComponent(this.app.sId || 'Subscription');
-        return `shadowrocket://add/sub/${base64Url}?remark=${remark}`;
-      },
-      v2boxUrl() {
-        return `v2box://install-sub?url=${encodeURIComponent(this.app.subUrl)}&name=${encodeURIComponent(this.app.sId)}`;
-      },
-      streisandUrl() {
-        return `streisand://import/${encodeURIComponent(this.app.subUrl)}`;
-      },
-      v2raytunUrl() {
-        return this.app.subUrl;
-      },
-      npvtunUrl() {
-        return this.app.subUrl;
-      },
-      happUrl() {
-        return `happ://add/${this.app.subUrl}`;
-      }
-    },
-    methods: {
-      renderLink,
-      copy,
-      open,
-      linkName,
-      i18nLabel(key) {
-        return '{{ i18n "' + key + '" }}';
-      },
-    },
-  });
-})();
@@ -1,928 +0,0 @@
-class Msg {
-    constructor(success = false, msg = "", obj = null) {
-        this.success = success;
-        this.msg = msg;
-        this.obj = obj;
-    }
-}
-
-class HttpUtil {
-    static _handleMsg(msg) {
-        if (!(msg instanceof Msg) || msg.msg === "") {
-            return;
-        }
-        const messageType = msg.success ? 'success' : 'error';
-        Vue.prototype.$message[messageType](msg.msg);
-    }
-
-    static _respToMsg(resp) {
-        if (!resp || !resp.data) {
-            return new Msg(false, 'No response data');
-        }
-        const { data } = resp;
-        if (data == null) {
-            return new Msg(true);
-        }
-        if (typeof data === 'object' && 'success' in data) {
-            return new Msg(data.success, data.msg, data.obj);
-        }
-        return typeof data === 'object' ? data : new Msg(false, 'unknown data:', data);
-    }
-
-    static async get(url, params, options = {}) {
-        try {
-            const resp = await axios.get(url, { params, ...options });
-            const msg = this._respToMsg(resp);
-            this._handleMsg(msg);
-            return msg;
-        } catch (error) {
-            console.error('GET request failed:', error);
-            const errorMsg = new Msg(false, error.response?.data?.message || error.message || 'Request failed');
-            this._handleMsg(errorMsg);
-            return errorMsg;
-        }
-    }
-
-    static async post(url, data, options = {}) {
-        try {
-            const resp = await axios.post(url, data, options);
-            const msg = this._respToMsg(resp);
-            this._handleMsg(msg);
-            return msg;
-        } catch (error) {
-            console.error('POST request failed:', error);
-            const errorMsg = new Msg(false, error.response?.data?.message || error.message || 'Request failed');
-            this._handleMsg(errorMsg);
-            return errorMsg;
-        }
-    }
-
-    static async postWithModal(url, data, modal) {
-        if (modal) {
-            modal.loading(true);
-        }
-        const msg = await this.post(url, data);
-        if (modal) {
-            modal.loading(false);
-            if (msg instanceof Msg && msg.success) {
-                modal.close();
-            }
-        }
-        return msg;
-    }
-}
-
-class PromiseUtil {
-    static async sleep(timeout) {
-        await new Promise(resolve => {
-            setTimeout(resolve, timeout)
-        });
-    }
-}
-
-class RandomUtil {
-    static getSeq({ type = "default", hasNumbers = true, hasLowercase = true, hasUppercase = true } = {}) {
-        let seq = '';
-
-        switch (type) {
-            case "hex":
-                seq += "0123456789abcdef";
-                break;
-            default:
-                if (hasNumbers) seq += "0123456789";
-                if (hasLowercase) seq += "abcdefghijklmnopqrstuvwxyz";
-                if (hasUppercase) seq += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-                break;
-        }
-
-        return seq;
-    }
-
-    static randomInteger(min, max) {
-        const range = max - min + 1;
-        const randomBuffer = new Uint32Array(1);
-        window.crypto.getRandomValues(randomBuffer);
-        return Math.floor((randomBuffer[0] / (0xFFFFFFFF + 1)) * range) + min;
-    }
-
-    static randomSeq(count, options = {}) {
-        const seq = this.getSeq(options);
-        const seqLength = seq.length;
-        const randomValues = new Uint32Array(count);
-        window.crypto.getRandomValues(randomValues);
-        return Array.from(randomValues, v => seq[v % seqLength]).join('');
-    }
-
-    static randomShortIds() {
-        const lengths = [2, 4, 6, 8, 10, 12, 14, 16].sort(() => Math.random() - 0.5);
-
-        return lengths.map(len => this.randomSeq(len, { type: "hex" })).join(',');
-    }
-
-    static randomLowerAndNum(len) {
-        return this.randomSeq(len, { hasUppercase: false });
-    }
-
-    static randomUUID() {
-        if (window.location.protocol === "https:") {
-            return window.crypto.randomUUID();
-        } else {
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
-                .replace(/[xy]/g, function (c) {
-                    const randomValues = new Uint8Array(1);
-                    window.crypto.getRandomValues(randomValues);
-                    let randomValue = randomValues[0] % 16;
-                    let calculatedValue = (c === 'x') ? randomValue : (randomValue & 0x3 | 0x8);
-                    return calculatedValue.toString(16);
-                });
-        }
-    }
-
-    static randomShadowsocksPassword(method = SSMethods.BLAKE3_AES_256_GCM) {
-        let length = 32;
-
-        if ([SSMethods.BLAKE3_AES_128_GCM].includes(method)) {
-            length = 16;
-        }
-
-        const array = new Uint8Array(length);
-
-        window.crypto.getRandomValues(array);
-
-        return Base64.alternativeEncode(String.fromCharCode(...array));
-    }
-
-    static randomBase64(length = 16) {
-        const array = new Uint8Array(length);
-        window.crypto.getRandomValues(array);
-        return Base64.alternativeEncode(String.fromCharCode(...array));
-    }
-
-    static randomBase32String(length = 16) {
-        const array = new Uint8Array(length);
-
-        window.crypto.getRandomValues(array);
-
-        const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
-        let result = '';
-        let bits = 0;
-        let buffer = 0;
-
-        for (let i = 0; i < array.length; i++) {
-            buffer = (buffer << 8) | array[i];
-            bits += 8;
-
-            while (bits >= 5) {
-                bits -= 5;
-                result += base32Chars[(buffer >>> bits) & 0x1F];
-            }
-        }
-
-        if (bits > 0) {
-            result += base32Chars[(buffer << (5 - bits)) & 0x1F];
-        }
-
-        return result;
-    }
-}
-
-class ObjectUtil {
-    static getPropIgnoreCase(obj, prop) {
-        for (const name in obj) {
-            if (!obj.hasOwnProperty(name)) {
-                continue;
-            }
-            if (name.toLowerCase() === prop.toLowerCase()) {
-                return obj[name];
-            }
-        }
-        return undefined;
-    }
-
-    static deepSearch(obj, key) {
-        if (obj instanceof Array) {
-            for (let i = 0; i < obj.length; ++i) {
-                if (this.deepSearch(obj[i], key)) {
-                    return true;
-                }
-            }
-        } else if (obj instanceof Object) {
-            for (let name in obj) {
-                if (!obj.hasOwnProperty(name)) {
-                    continue;
-                }
-                if (this.deepSearch(obj[name], key)) {
-                    return true;
-                }
-            }
-        } else {
-            return this.isEmpty(obj) ? false : obj.toString().toLowerCase().indexOf(key.toLowerCase()) >= 0;
-        }
-        return false;
-    }
-
-    static isEmpty(obj) {
-        return obj === null || obj === undefined || obj === '';
-    }
-
-    static isArrEmpty(arr) {
-        return !this.isEmpty(arr) && arr.length === 0;
-    }
-
-    static copyArr(dest, src) {
-        dest.splice(0);
-        for (const item of src) {
-            dest.push(item);
-        }
-    }
-
-    static clone(obj) {
-        let newObj;
-        if (obj instanceof Array) {
-            newObj = [];
-            this.copyArr(newObj, obj);
-        } else if (obj instanceof Object) {
-            newObj = {};
-            for (const key of Object.keys(obj)) {
-                newObj[key] = obj[key];
-            }
-        } else {
-            newObj = obj;
-        }
-        return newObj;
-    }
-
-    static deepClone(obj) {
-        let newObj;
-        if (obj instanceof Array) {
-            newObj = [];
-            for (const item of obj) {
-                newObj.push(this.deepClone(item));
-            }
-        } else if (obj instanceof Object) {
-            newObj = {};
-            for (const key of Object.keys(obj)) {
-                newObj[key] = this.deepClone(obj[key]);
-            }
-        } else {
-            newObj = obj;
-        }
-        return newObj;
-    }
-
-    static cloneProps(dest, src, ...ignoreProps) {
-        if (dest == null || src == null) {
-            return;
-        }
-        const ignoreEmpty = this.isArrEmpty(ignoreProps);
-        for (const key of Object.keys(src)) {
-            if (!src.hasOwnProperty(key)) {
-                continue;
-            } else if (!dest.hasOwnProperty(key)) {
-                continue;
-            } else if (src[key] === undefined) {
-                continue;
-            }
-            if (ignoreEmpty) {
-                dest[key] = src[key];
-            } else {
-                let ignore = false;
-                for (let i = 0; i < ignoreProps.length; ++i) {
-                    if (key === ignoreProps[i]) {
-                        ignore = true;
-                        break;
-                    }
-                }
-                if (!ignore) {
-                    dest[key] = src[key];
-                }
-            }
-        }
-    }
-
-    static delProps(obj, ...props) {
-        for (const prop of props) {
-            if (prop in obj) {
-                delete obj[prop];
-            }
-        }
-    }
-
-    static execute(func, ...args) {
-        if (!this.isEmpty(func) && typeof func === 'function') {
-            func(...args);
-        }
-    }
-
-    static orDefault(obj, defaultValue) {
-        if (obj == null) {
-            return defaultValue;
-        }
-        return obj;
-    }
-
-    static equals(a, b) {
-        // shallow, symmetric comparison so newly added fields also affect equality
-        const aKeys = Object.keys(a);
-        const bKeys = Object.keys(b);
-        if (aKeys.length !== bKeys.length) return false;
-        for (const key of aKeys) {
-            if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
-            if (a[key] !== b[key]) return false;
-        }
-        return true;
-    }
-}
-
-class Wireguard {
-    static gf(init) {
-        var r = new Float64Array(16);
-        if (init) {
-            for (var i = 0; i < init.length; ++i)
-                r[i] = init[i];
-        }
-        return r;
-    }
-
-    static pack(o, n) {
-        var b, m = this.gf(), t = this.gf();
-        for (var i = 0; i < 16; ++i)
-            t[i] = n[i];
-        this.carry(t);
-        this.carry(t);
-        this.carry(t);
-        for (var j = 0; j < 2; ++j) {
-            m[0] = t[0] - 0xffed;
-            for (var i = 1; i < 15; ++i) {
-                m[i] = t[i] - 0xffff - ((m[i - 1] >> 16) & 1);
-                m[i - 1] &= 0xffff;
-            }
-            m[15] = t[15] - 0x7fff - ((m[14] >> 16) & 1);
-            b = (m[15] >> 16) & 1;
-            m[14] &= 0xffff;
-            this.cswap(t, m, 1 - b);
-        }
-        for (var i = 0; i < 16; ++i) {
-            o[2 * i] = t[i] & 0xff;
-            o[2 * i + 1] = t[i] >> 8;
-        }
-    }
-
-    static carry(o) {
-        var c;
-        for (var i = 0; i < 16; ++i) {
-            o[(i + 1) % 16] += (i < 15 ? 1 : 38) * Math.floor(o[i] / 65536);
-            o[i] &= 0xffff;
-        }
-    }
-
-    static cswap(p, q, b) {
-        var t, c = ~(b - 1);
-        for (var i = 0; i < 16; ++i) {
-            t = c & (p[i] ^ q[i]);
-            p[i] ^= t;
-            q[i] ^= t;
-        }
-    }
-
-    static add(o, a, b) {
-        for (var i = 0; i < 16; ++i)
-            o[i] = (a[i] + b[i]) | 0;
-    }
-
-    static subtract(o, a, b) {
-        for (var i = 0; i < 16; ++i)
-            o[i] = (a[i] - b[i]) | 0;
-    }
-
-    static multmod(o, a, b) {
-        var t = new Float64Array(31);
-        for (var i = 0; i < 16; ++i) {
-            for (var j = 0; j < 16; ++j)
-                t[i + j] += a[i] * b[j];
-        }
-        for (var i = 0; i < 15; ++i)
-            t[i] += 38 * t[i + 16];
-        for (var i = 0; i < 16; ++i)
-            o[i] = t[i];
-        this.carry(o);
-        this.carry(o);
-    }
-
-    static invert(o, i) {
-        var c = this.gf();
-        for (var a = 0; a < 16; ++a)
-            c[a] = i[a];
-        for (var a = 253; a >= 0; --a) {
-            this.multmod(c, c, c);
-            if (a !== 2 && a !== 4)
-                this.multmod(c, c, i);
-        }
-        for (var a = 0; a < 16; ++a)
-            o[a] = c[a];
-    }
-
-    static clamp(z) {
-        z[31] = (z[31] & 127) | 64;
-        z[0] &= 248;
-    }
-
-    static generatePublicKey(privateKey) {
-        var r, z = new Uint8Array(32);
-        var a = this.gf([1]),
-            b = this.gf([9]),
-            c = this.gf(),
-            d = this.gf([1]),
-            e = this.gf(),
-            f = this.gf(),
-            _121665 = this.gf([0xdb41, 1]),
-            _9 = this.gf([9]);
-        for (var i = 0; i < 32; ++i)
-            z[i] = privateKey[i];
-        this.clamp(z);
-        for (var i = 254; i >= 0; --i) {
-            r = (z[i >>> 3] >>> (i & 7)) & 1;
-            this.cswap(a, b, r);
-            this.cswap(c, d, r);
-            this.add(e, a, c);
-            this.subtract(a, a, c);
-            this.add(c, b, d);
-            this.subtract(b, b, d);
-            this.multmod(d, e, e);
-            this.multmod(f, a, a);
-            this.multmod(a, c, a);
-            this.multmod(c, b, e);
-            this.add(e, a, c);
-            this.subtract(a, a, c);
-            this.multmod(b, a, a);
-            this.subtract(c, d, f);
-            this.multmod(a, c, _121665);
-            this.add(a, a, d);
-            this.multmod(c, c, a);
-            this.multmod(a, d, f);
-            this.multmod(d, b, _9);
-            this.multmod(b, e, e);
-            this.cswap(a, b, r);
-            this.cswap(c, d, r);
-        }
-        this.invert(c, c);
-        this.multmod(a, a, c);
-        this.pack(z, a);
-        return z;
-    }
-
-    static generatePresharedKey() {
-        var privateKey = new Uint8Array(32);
-        window.crypto.getRandomValues(privateKey);
-        return privateKey;
-    }
-
-    static generatePrivateKey() {
-        var privateKey = this.generatePresharedKey();
-        this.clamp(privateKey);
-        return privateKey;
-    }
-
-    static encodeBase64(dest, src) {
-        var input = Uint8Array.from([(src[0] >> 2) & 63, ((src[0] << 4) | (src[1] >> 4)) & 63, ((src[1] << 2) | (src[2] >> 6)) & 63, src[2] & 63]);
-        for (var i = 0; i < 4; ++i)
-            dest[i] = input[i] + 65 +
-                (((25 - input[i]) >> 8) & 6) -
-                (((51 - input[i]) >> 8) & 75) -
-                (((61 - input[i]) >> 8) & 15) +
-                (((62 - input[i]) >> 8) & 3);
-    }
-
-    static keyToBase64(key) {
-        var i, base64 = new Uint8Array(44);
-        for (i = 0; i < 32 / 3; ++i)
-            this.encodeBase64(base64.subarray(i * 4), key.subarray(i * 3));
-        this.encodeBase64(base64.subarray(i * 4), Uint8Array.from([key[i * 3 + 0], key[i * 3 + 1], 0]));
-        base64[43] = 61;
-        return String.fromCharCode.apply(null, base64);
-    }
-
-    static keyFromBase64(encoded) {
-        const binaryStr = atob(encoded);
-        const bytes = new Uint8Array(binaryStr.length);
-        for (let i = 0; i < binaryStr.length; i++) {
-            bytes[i] = binaryStr.charCodeAt(i);
-        }
-        return bytes;
-    }
-
-    static generateKeypair(secretKey = '') {
-        var privateKey = secretKey.length > 0 ? this.keyFromBase64(secretKey) : this.generatePrivateKey();
-        var publicKey = this.generatePublicKey(privateKey);
-        return {
-            publicKey: this.keyToBase64(publicKey),
-            privateKey: secretKey.length > 0 ? secretKey : this.keyToBase64(privateKey)
-        };
-    }
-}
-
-class ClipboardManager {
-    static copyText(content = "") {
-        // !! here old way of copying is used because not everyone can afford https connection
-        return new Promise((resolve) => {
-            try {
-                const textarea = window.document.createElement('textarea');
-
-                textarea.style.fontSize = '12pt';
-                textarea.style.border = '0';
-                textarea.style.padding = '0';
-                textarea.style.margin = '0';
-                textarea.style.position = 'absolute';
-                textarea.style.left = '-9999px';
-                textarea.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
-                textarea.setAttribute('readonly', '');
-                textarea.value = content;
-
-                window.document.body.appendChild(textarea);
-
-                textarea.select();
-                window.document.execCommand("copy");
-
-                window.document.body.removeChild(textarea);
-
-                resolve(true)
-            } catch {
-                resolve(false)
-            }
-        })
-    }
-}
-
-class Base64 {
-    static encode(content = "", safe = false) {
-        if (safe) {
-            return Base64.encode(content)
-                .replace(/\+/g, '-')
-                .replace(/=/g, '')
-                .replace(/\//g, '_')
-        }
-
-        return window.btoa(
-            String.fromCharCode(...new TextEncoder().encode(content))
-        )
-    }
-
-    static alternativeEncode(content) {
-        return window.btoa(
-            content
-        )
-    }
-
-    static decode(content = "") {
-        return new TextDecoder()
-            .decode(
-                Uint8Array.from(window.atob(content), c => c.charCodeAt(0))
-            )
-    }
-}
-
-class SizeFormatter {
-    static ONE_KB = 1024;
-    static ONE_MB = this.ONE_KB * 1024;
-    static ONE_GB = this.ONE_MB * 1024;
-    static ONE_TB = this.ONE_GB * 1024;
-    static ONE_PB = this.ONE_TB * 1024;
-
-    static sizeFormat(size) {
-        if (size <= 0) return "0 B";
-        if (size < this.ONE_KB) return size.toFixed(0) + " B";
-        if (size < this.ONE_MB) return (size / this.ONE_KB).toFixed(2) + " KB";
-        if (size < this.ONE_GB) return (size / this.ONE_MB).toFixed(2) + " MB";
-        if (size < this.ONE_TB) return (size / this.ONE_GB).toFixed(2) + " GB";
-        if (size < this.ONE_PB) return (size / this.ONE_TB).toFixed(2) + " TB";
-        return (size / this.ONE_PB).toFixed(2) + " PB";
-    }
-}
-
-class CPUFormatter {
-    static cpuSpeedFormat(speed) {
-        return speed > 1000 ? (speed / 1000).toFixed(2) + " GHz" : speed.toFixed(2) + " MHz";
-    }
-
-    static cpuCoreFormat(cores) {
-        return cores === 1 ? "1 Core" : cores + " Cores";
-    }
-}
-
-class TimeFormatter {
-    static formatSecond(second) {
-        if (second < 60) return second.toFixed(0) + 's';
-        if (second < 3600) return (second / 60).toFixed(0) + 'm';
-        if (second < 3600 * 24) return (second / 3600).toFixed(0) + 'h';
-        let day = Math.floor(second / 3600 / 24);
-        let remain = ((second / 3600) - (day * 24)).toFixed(0);
-        return day + 'd' + (remain > 0 ? ' ' + remain + 'h' : '');
-    }
-}
-
-class NumberFormatter {
-    static addZero(num) {
-        return num < 10 ? "0" + num : num;
-    }
-
-    static toFixed(num, n) {
-        n = Math.pow(10, n);
-        return Math.floor(num * n) / n;
-    }
-}
-
-class Utils {
-    static debounce(fn, delay) {
-        let timeoutID = null;
-        return function () {
-            clearTimeout(timeoutID);
-            let args = arguments;
-            let that = this;
-            timeoutID = setTimeout(() => fn.apply(that, args), delay);
-        };
-    }
-}
-
-class CookieManager {
-    static getCookie(cname) {
-        let name = cname + '=';
-        let ca = document.cookie.split(';');
-        for (let c of ca) {
-            c = c.trim();
-            if (c.indexOf(name) === 0) {
-                return decodeURIComponent(c.substring(name.length, c.length));
-            }
-        }
-        return '';
-    }
-
-    static setCookie(cname, cvalue, exdays) {
-        let expires = '';
-        if (exdays) {
-            const d = new Date();
-            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
-            expires = 'expires=' + d.toUTCString() + ';';
-        }
-        document.cookie = cname + '=' + encodeURIComponent(cvalue) + ';' + expires + 'path=/';
-    }
-}
-
-class ColorUtils {
-    static usageColor(data, threshold, total) {
-        switch (true) {
-            case data === null: return "purple";
-            case total < 0: return "green";
-            case total == 0: return "purple";
-            case data < total - threshold: return "green";
-            case data < total: return "orange";
-            default: return "red";
-        }
-    }
-
-    static clientUsageColor(clientStats, trafficDiff) {
-        switch (true) {
-            case !clientStats || clientStats.total == 0: return "#7a316f";
-            case clientStats.up + clientStats.down < clientStats.total - trafficDiff: return "#008771";
-            case clientStats.up + clientStats.down < clientStats.total: return "#f37b24";
-            default: return "#cf3c3c";
-        }
-    }
-
-    static userExpiryColor(threshold, client, isDark = false) {
-        if (!client.enable) return isDark ? '#2c3950' : '#bcbcbc';
-        let now = new Date().getTime(), expiry = client.expiryTime;
-        switch (true) {
-            case expiry === null: return "#7a316f";
-            case expiry < 0: return "#008771";
-            case expiry == 0: return "#7a316f";
-            case now < expiry - threshold: return "#008771";
-            case now < expiry: return "#f37b24";
-            default: return "#cf3c3c";
-        }
-    }
-}
-
-class ArrayUtils {
-    static doAllItemsExist(array1, array2) {
-        return array1.every(item => array2.includes(item));
-    }
-}
-
-class URLBuilder {
-    static buildURL({ host, port, isTLS, base, path }) {
-        if (!host || host.length === 0) host = window.location.hostname;
-        if (!port || port.length === 0) port = window.location.port;
-        if (isTLS === undefined) isTLS = window.location.protocol === "https:";
-
-        const protocol = isTLS ? "https:" : "http:";
-        port = String(port);
-        if (port === "" || (isTLS && port === "443") || (!isTLS && port === "80")) {
-            port = "";
-        } else {
-            port = `:${port}`;
-        }
-
-        return `${protocol}//${host}${port}${base}${path}`;
-    }
-}
-
-class LanguageManager {
-    static supportedLanguages = [
-        {
-            name: "العربية",
-            value: "ar-EG",
-            icon: "🇪🇬",
-        },
-        {
-            name: "English",
-            value: "en-US",
-            icon: "🇺🇸",
-        },
-        {
-            name: "فارسی",
-            value: "fa-IR",
-            icon: "🇮🇷",
-        },
-        {
-            name: "简体中文",
-            value: "zh-CN",
-            icon: "🇨🇳",
-        },
-        {
-            name: "繁體中文",
-            value: "zh-TW",
-            icon: "🇹🇼",
-        },
-        {
-            name: "日本語",
-            value: "ja-JP",
-            icon: "🇯🇵",
-        },
-        {
-            name: "Русский",
-            value: "ru-RU",
-            icon: "🇷🇺",
-        },
-        {
-            name: "Tiếng Việt",
-            value: "vi-VN",
-            icon: "🇻🇳",
-        },
-        {
-            name: "Español",
-            value: "es-ES",
-            icon: "🇪🇸",
-        },
-        {
-            name: "Indonesian",
-            value: "id-ID",
-            icon: "🇮🇩",
-        },
-        {
-            name: "Український",
-            value: "uk-UA",
-            icon: "🇺🇦",
-        },
-        {
-            name: "Türkçe",
-            value: "tr-TR",
-            icon: "🇹🇷",
-        },
-        {
-            name: "Português",
-            value: "pt-BR",
-            icon: "🇧🇷",
-        }
-    ]
-
-    static getLanguage() {
-        let lang = CookieManager.getCookie("lang");
-
-        if (!lang) {
-            if (window.navigator) {
-                lang = window.navigator.language || window.navigator.userLanguage;
-
-                const simularLangs = [
-                    ["ar", this.supportedLanguages[0].value],
-                    ["fa", this.supportedLanguages[2].value],
-                    ["ja", this.supportedLanguages[5].value],
-                    ["ru", this.supportedLanguages[6].value],
-                    ["vi", this.supportedLanguages[7].value],
-                    ["es", this.supportedLanguages[8].value],
-                    ["id", this.supportedLanguages[9].value],
-                    ["uk", this.supportedLanguages[10].value],
-                    ["tr", this.supportedLanguages[11].value],
-                    ["pt", this.supportedLanguages[12].value],
-                ]
-
-                simularLangs.forEach((pair) => {
-                    if (lang === pair[0]) {
-                        lang = pair[1];
-                    }
-                });
-
-                if (LanguageManager.isSupportLanguage(lang)) {
-                    CookieManager.setCookie("lang", lang);
-                } else {
-                    CookieManager.setCookie("lang", "en-US");
-                    window.location.reload();
-                }
-            } else {
-                CookieManager.setCookie("lang", "en-US");
-                window.location.reload();
-            }
-        }
-
-        return lang;
-    }
-
-    static setLanguage(language) {
-        if (!LanguageManager.isSupportLanguage(language)) {
-            language = "en-US";
-        }
-
-        CookieManager.setCookie("lang", language);
-        window.location.reload();
-    }
-
-    static isSupportLanguage(language) {
-        const languageFilter = LanguageManager.supportedLanguages.filter((lang) => {
-            return lang.value === language
-        })
-
-        return languageFilter.length > 0;
-    }
-}
-
-const MediaQueryMixin = {
-    data() {
-        return {
-            isMobile: window.innerWidth <= 768,
-        };
-    },
-    methods: {
-        updateDeviceType() {
-            this.isMobile = window.innerWidth <= 768;
-        },
-    },
-    mounted() {
-        window.addEventListener('resize', this.updateDeviceType);
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.updateDeviceType);
-    },
-}
-
-class FileManager {
-    static downloadTextFile(content, filename = 'file.txt', options = { type: "text/plain" }) {
-        let link = window.document.createElement('a');
-
-        link.download = filename;
-        link.style.border = '0';
-        link.style.padding = '0';
-        link.style.margin = '0';
-        link.style.position = 'absolute';
-        link.style.left = '-9999px';
-        link.style.top = `${window.pageYOffset || window.document.documentElement.scrollTop}px`;
-        link.href = URL.createObjectURL(new Blob([content], options));
-        link.click();
-
-        URL.revokeObjectURL(link.href);
-
-        link.remove();
-    }
-}
-
-class IntlUtil {
-    static formatDate(date) {
-        const language = LanguageManager.getLanguage()
-
-        let intlOptions = {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-            second: "numeric"
-        }
-
-        const intl = new Intl.DateTimeFormat(
-            language,
-            intlOptions
-        )
-
-        return intl.format(new Date(date))
-    }
-    static formatRelativeTime(date) {
-        const language = LanguageManager.getLanguage()
-        const now = new Date()
-
-        // Handle delayed start (negative expiryTime values)
-        const diff = date < 0
-            ? Math.round(date / (1000 * 60 * 60 * 24))
-            : Math.round((date - now) / (1000 * 60 * 60 * 24))
-        const formatter = new Intl.RelativeTimeFormat(language, { numeric: 'auto' })
-
-        return formatter.format(diff, 'day');
-    }
-}
@@ -1,227 +0,0 @@
-/**
- * WebSocket client for real-time panel updates.
- *
- * Public API (kept stable for index.html / inbounds.html / xray.html):
- *   - connect()                     — open the connection (idempotent)
- *   - disconnect()                  — close and stop reconnecting
- *   - on(event, callback)           — subscribe to event
- *   - off(event, callback)          — unsubscribe
- *   - send(data)                    — send JSON to the server
- *   - isConnected                   — boolean, current state
- *   - reconnectAttempts             — number, attempts since last success
- *   - maxReconnectAttempts          — number, give-up threshold
- *
- * Built-in events:
- *   'connected', 'disconnected', 'error', 'message',
- *   plus any server-emitted message type (status, traffic, client_stats, ...).
- */
-class WebSocketClient {
-  static #MAX_PAYLOAD_BYTES = 10 * 1024 * 1024; // 10 MB, mirrors hub maxMessageSize.
-  static #BASE_RECONNECT_MS = 1000;
-  static #MAX_RECONNECT_MS = 30_000;
-  // After exhausting maxReconnectAttempts we switch to a polite slow-retry
-  // cadence rather than giving up forever — a panel that recovers an hour
-  // later should reconnect without a manual page reload.
-  static #SLOW_RETRY_MS = 60_000;
-
-  constructor(basePath = '') {
-    this.basePath = basePath;
-    this.maxReconnectAttempts = 10;
-    this.reconnectAttempts = 0;
-    this.isConnected = false;
-
-    this.ws = null;
-    this.shouldReconnect = true;
-    this.reconnectTimer = null;
-    this.listeners = new Map(); // event → Set<callback>
-  }
-
-  // Open the connection. Safe to call repeatedly — no-op if already
-  // open/connecting. Re-enables reconnects if previously disabled. Cancels
-  // any pending reconnect timer so an external connect() can't race a
-  // delayed retry into spawning a second socket.
-  connect() {
-    if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
-      return;
-    }
-    this.shouldReconnect = true;
-    this.#cancelReconnect();
-    this.#openSocket();
-  }
-
-  // Close the connection and stop any pending reconnect attempt. Resets the
-  // attempt counter so a future connect() starts fresh from the small backoff.
-  disconnect() {
-    this.shouldReconnect = false;
-    this.#cancelReconnect();
-    this.reconnectAttempts = 0;
-    if (this.ws) {
-      try { this.ws.close(1000, 'client disconnect'); } catch { /* ignore */ }
-      this.ws = null;
-    }
-    this.isConnected = false;
-  }
-
-  // Subscribe to an event. Re-subscribing the same callback is a no-op.
-  on(event, callback) {
-    if (typeof callback !== 'function') return;
-    let set = this.listeners.get(event);
-    if (!set) {
-      set = new Set();
-      this.listeners.set(event, set);
-    }
-    set.add(callback);
-  }
-
-  // Unsubscribe from an event.
-  off(event, callback) {
-    const set = this.listeners.get(event);
-    if (!set) return;
-    set.delete(callback);
-    if (set.size === 0) this.listeners.delete(event);
-  }
-
-  // Send JSON to the server. Drops silently if not connected — callers
-  // should rely on connect()/server pushes rather than client-initiated sends.
-  send(data) {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify(data));
-    }
-  }
-
-  // ───── internals ─────
-
-  #openSocket() {
-    const url = this.#buildUrl();
-    let socket;
-    try {
-      socket = new WebSocket(url);
-    } catch (err) {
-      console.error('WebSocket: failed to construct connection', err);
-      this.#emit('error', err);
-      this.#scheduleReconnect();
-      return;
-    }
-    this.ws = socket;
-
-    // Every handler must check `this.ws !== socket` first. A previous socket
-    // can still fire events (especially `close`) after we've moved on to a
-    // new one — e.g. connect() called while the old socket is in CLOSING
-    // state. Without the guard, a stale close would null out the freshly
-    // opened socket and silently break send().
-    socket.addEventListener('open', () => {
-      if (this.ws !== socket) return;
-      this.isConnected = true;
-      this.reconnectAttempts = 0;
-      this.#emit('connected');
-    });
-
-    socket.addEventListener('message', (event) => {
-      if (this.ws !== socket) return;
-      this.#onMessage(event);
-    });
-
-    socket.addEventListener('error', (event) => {
-      if (this.ws !== socket) return;
-      // Browsers fire 'error' before 'close' on failure. We surface it for
-      // consumers (so polling fallbacks can engage) but don't log every blip
-      // — bad networks would flood the console otherwise.
-      this.#emit('error', event);
-    });
-
-    socket.addEventListener('close', () => {
-      if (this.ws !== socket) return;
-      this.isConnected = false;
-      this.ws = null;
-      this.#emit('disconnected');
-      if (this.shouldReconnect) this.#scheduleReconnect();
-    });
-  }
-
-  #buildUrl() {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    let basePath = this.basePath || '';
-    if (basePath && !basePath.endsWith('/')) basePath += '/';
-    return `${protocol}//${window.location.host}${basePath}ws`;
-  }
-
-  #onMessage(event) {
-    const data = event.data;
-    // Reject oversized payloads up front. We compare actual UTF-8 byte
-    // length (via Blob.size) against the limit — string.length counts
-    // UTF-16 code units, which can undercount real bytes by up to 4× for
-    // payloads with non-ASCII characters and bypass the cap.
-    if (typeof data === 'string') {
-      const byteLen = new Blob([data]).size;
-      if (byteLen > WebSocketClient.#MAX_PAYLOAD_BYTES) {
-        console.error(`WebSocket: payload too large (${byteLen} bytes), closing`);
-        try { this.ws?.close(1009, 'message too big'); } catch { /* ignore */ }
-        return;
-      }
-    }
-    let message;
-    try {
-      message = JSON.parse(data);
-    } catch (err) {
-      console.error('WebSocket: invalid JSON message', err);
-      return;
-    }
-    if (!message || typeof message !== 'object' || typeof message.type !== 'string') {
-      console.error('WebSocket: malformed message envelope');
-      return;
-    }
-    this.#emit(message.type, message.payload, message.time);
-    this.#emit('message', message);
-  }
-
-  #emit(event, ...args) {
-    const set = this.listeners.get(event);
-    if (!set) return;
-    for (const callback of set) {
-      try {
-        callback(...args);
-      } catch (err) {
-        console.error(`WebSocket: handler for "${event}" threw`, err);
-      }
-    }
-  }
-
-  #scheduleReconnect() {
-    if (!this.shouldReconnect) return;
-    this.#cancelReconnect();
-
-    let base;
-    if (this.reconnectAttempts < this.maxReconnectAttempts) {
-      this.reconnectAttempts += 1;
-      // Exponential backoff inside the active window.
-      const exp = WebSocketClient.#BASE_RECONNECT_MS * 2 ** (this.reconnectAttempts - 1);
-      base = Math.min(WebSocketClient.#MAX_RECONNECT_MS, exp);
-    } else {
-      // Active window exhausted — keep trying once a minute. The page-level
-      // polling fallback runs in parallel; this just brings WS back when the
-      // network recovers.
-      base = WebSocketClient.#SLOW_RETRY_MS;
-    }
-    // ±25% jitter so reloads after a panel restart don't reconnect in lockstep.
-    const delay = base * (0.75 + Math.random() * 0.5);
-
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null;
-      // clearTimeout doesn't cancel a callback that has already fired but
-      // whose macrotask hasn't run yet — re-check shouldReconnect here so
-      // disconnect() called in that window can't be overridden.
-      if (!this.shouldReconnect) return;
-      this.#openSocket();
-    }, delay);
-  }
-
-  #cancelReconnect() {
-    if (this.reconnectTimer !== null) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-  }
-}
-
-// Global instance — basePath is set by page.html before this script loads.
-window.wsClient = new WebSocketClient(typeof basePath !== 'undefined' ? basePath : '');
@@ -1,19 +0,0 @@
-//! otpauth 9.4.1 | (c) Héctor Molinero Fernández | MIT | https://github.com/hectorm/otpauth
-//! noble-hashes 1.8.0 | (c) Paul Miller | MIT | https://github.com/paulmillr/noble-hashes
-/// <reference types="./otpauth.d.ts" />
-// @ts-nocheck
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OTPAuth={})}(this,function(t){"use strict";function e(t){if(!Number.isSafeInteger(t)||t<0)throw new Error("positive integer expected, got "+t)}function s(t,...e){if(!((s=t)instanceof Uint8Array||ArrayBuffer.isView(s)&&"Uint8Array"===s.constructor.name))throw new Error("Uint8Array expected");var s;if(e.length>0&&!e.includes(t.length))throw new Error("Uint8Array expected of length "+e+", got length="+t.length)}function i(t,e=!0){if(t.destroyed)throw new Error("Hash instance has been destroyed");if(e&&t.finished)throw new Error("Hash#digest() has already been called")}function r(t,e){s(t);const i=e.outputLen;if(t.length<i)throw new Error("digestInto() expects output buffer of length at least "+i)}function n(...t){for(let e=0;e<t.length;e++)t[e].fill(0)}function o(t){return new DataView(t.buffer,t.byteOffset,t.byteLength)}function h(t,e){return t<<32-e|t>>>e}function a(t,e){return t<<e|t>>>32-e>>>0}function c(t){return t<<24&4278190080|t<<8&16711680|t>>>8&65280|t>>>24&255}const l=(()=>68===new Uint8Array(new Uint32Array([287454020]).buffer)[0])()?t=>t:function(t){for(let e=0;e<t.length;e++)t[e]=c(t[e]);return t};function u(t){return"string"==typeof t&&(t=function(t){if("string"!=typeof t)throw new Error("string expected");return new Uint8Array((new TextEncoder).encode(t))}(t)),s(t),t}class f{}function d(t){const e=e=>t().update(u(e)).digest(),s=t();return e.outputLen=s.outputLen,e.blockLen=s.blockLen,e.create=()=>t(),e}class b extends f{update(t){return i(this),this.iHash.update(t),this}digestInto(t){i(this),s(t,this.outputLen),this.finished=!0,this.iHash.digestInto(t),this.oHash.update(t),this.oHash.digestInto(t),this.destroy()}digest(){const t=new Uint8Array(this.oHash.outputLen);return this.digestInto(t),t}_cloneInto(t){t||(t=Object.create(Object.getPrototypeOf(this),{}))
-;const{oHash:e,iHash:s,finished:i,destroyed:r,blockLen:n,outputLen:o}=this;return t.finished=i,t.destroyed=r,t.blockLen=n,t.outputLen=o,t.oHash=e._cloneInto(t.oHash),t.iHash=s._cloneInto(t.iHash),t}clone(){return this._cloneInto()}destroy(){this.destroyed=!0,this.oHash.destroy(),this.iHash.destroy()}constructor(t,s){super(),this.finished=!1,this.destroyed=!1,function(t){if("function"!=typeof t||"function"!=typeof t.create)throw new Error("Hash should be wrapped by utils.createHasher");e(t.outputLen),e(t.blockLen)}(t);const i=u(s);if(this.iHash=t.create(),"function"!=typeof this.iHash.update)throw new Error("Expected instance of class which extends utils.Hash");this.blockLen=this.iHash.blockLen,this.outputLen=this.iHash.outputLen;const r=this.blockLen,o=new Uint8Array(r);o.set(i.length>r?t.create().update(i).digest():i);for(let t=0;t<o.length;t++)o[t]^=54;this.iHash.update(o),this.oHash=t.create();for(let t=0;t<o.length;t++)o[t]^=106;this.oHash.update(o),n(o)}}const g=(t,e,s)=>new b(t,e).update(s).digest();function p(t,e,s){return t&e^~t&s}function w(t,e,s){return t&e^t&s^e&s}g.create=(t,e)=>new b(t,e);class y extends f{update(t){i(this),s(t=u(t));const{view:e,buffer:r,blockLen:n}=this,h=t.length;for(let s=0;s<h;){const i=Math.min(n-this.pos,h-s);if(i===n){const e=o(t);for(;n<=h-s;s+=n)this.process(e,s);continue}r.set(t.subarray(s,s+i),this.pos),this.pos+=i,s+=i,this.pos===n&&(this.process(e,0),this.pos=0)}return this.length+=t.length,this.roundClean(),this}digestInto(t){i(this),r(t,this),this.finished=!0;const{buffer:e,view:s,blockLen:h,isLE:a}=this;let{pos:c}=this;e[c++]=128,n(this.buffer.subarray(c)),this.padOffset>h-c&&(this.process(s,0),c=0);for(let t=c;t<h;t++)e[t]=0;!function(t,e,s,i){if("function"==typeof t.setBigUint64)return t.setBigUint64(e,s,i);const r=BigInt(32),n=BigInt(4294967295),o=Number(s>>r&n),h=Number(s&n),a=i?4:0,c=i?0:4;t.setUint32(e+a,o,i),t.setUint32(e+c,h,i)}(s,h-8,BigInt(8*this.length),a),this.process(s,0);const l=o(t),u=this.outputLen
-;if(u%4)throw new Error("_sha2: outputLen should be aligned to 32bit");const f=u/4,d=this.get();if(f>d.length)throw new Error("_sha2: outputLen bigger than state");for(let t=0;t<f;t++)l.setUint32(4*t,d[t],a)}digest(){const{buffer:t,outputLen:e}=this;this.digestInto(t);const s=t.slice(0,e);return this.destroy(),s}_cloneInto(t){t||(t=new this.constructor),t.set(...this.get());const{blockLen:e,buffer:s,length:i,finished:r,destroyed:n,pos:o}=this;return t.destroyed=n,t.finished=r,t.length=i,t.pos=o,i%e&&t.buffer.set(s),t}clone(){return this._cloneInto()}constructor(t,e,s,i){super(),this.finished=!1,this.length=0,this.pos=0,this.destroyed=!1,this.blockLen=t,this.outputLen=e,this.padOffset=s,this.isLE=i,this.buffer=new Uint8Array(t),this.view=o(this.buffer)}}const x=Uint32Array.from([1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225]),m=Uint32Array.from([3238371032,914150663,812702999,4144912697,4290775857,1750603025,1694076839,3204075428]),A=Uint32Array.from([3418070365,3238371032,1654270250,914150663,2438529370,812702999,355462360,4144912697,1731405415,4290775857,2394180231,1750603025,3675008525,1694076839,1203062813,3204075428]),H=Uint32Array.from([1779033703,4089235720,3144134277,2227873595,1013904242,4271175723,2773480762,1595750129,1359893119,2917565137,2600822924,725511199,528734635,4215389547,1541459225,327033209]),I=Uint32Array.from([1732584193,4023233417,2562383102,271733878,3285377520]),L=new Uint32Array(80);class E extends y{get(){const{A:t,B:e,C:s,D:i,E:r}=this;return[t,e,s,i,r]}set(t,e,s,i,r){this.A=0|t,this.B=0|e,this.C=0|s,this.D=0|i,this.E=0|r}process(t,e){for(let s=0;s<16;s++,e+=4)L[s]=t.getUint32(e,!1);for(let t=16;t<80;t++)L[t]=a(L[t-3]^L[t-8]^L[t-14]^L[t-16],1);let{A:s,B:i,C:r,D:n,E:o}=this;for(let t=0;t<80;t++){let e,h;t<20?(e=p(i,r,n),h=1518500249):t<40?(e=i^r^n,h=1859775393):t<60?(e=w(i,r,n),h=2400959708):(e=i^r^n,h=3395469782);const c=a(s,5)+e+o+h+L[t]|0;o=n,n=r,r=a(i,30),i=s,s=c}s=s+this.A|0,i=i+this.B|0,r=r+this.C|0,n=n+this.D|0,o=o+this.E|0,
-this.set(s,i,r,n,o)}roundClean(){n(L)}destroy(){this.set(0,0,0,0,0),n(this.buffer)}constructor(){super(64,20,8,!1),this.A=0|I[0],this.B=0|I[1],this.C=0|I[2],this.D=0|I[3],this.E=0|I[4]}}const U=d(()=>new E),B=BigInt(2**32-1),S=BigInt(32);function O(t,e=!1){return e?{h:Number(t&B),l:Number(t>>S&B)}:{h:0|Number(t>>S&B),l:0|Number(t&B)}}function C(t,e=!1){const s=t.length;let i=new Uint32Array(s),r=new Uint32Array(s);for(let n=0;n<s;n++){const{h:s,l:o}=O(t[n],e);[i[n],r[n]]=[s,o]}return[i,r]}const v=(t,e,s)=>t>>>s,k=(t,e,s)=>t<<32-s|e>>>s,$=(t,e,s)=>t>>>s|e<<32-s,T=(t,e,s)=>t<<32-s|e>>>s,D=(t,e,s)=>t<<64-s|e>>>s-32,_=(t,e,s)=>t>>>s-32|e<<64-s;function F(t,e,s,i){const r=(e>>>0)+(i>>>0);return{h:t+s+(r/2**32|0)|0,l:0|r}}const G=(t,e,s)=>(t>>>0)+(e>>>0)+(s>>>0),P=(t,e,s,i)=>e+s+i+(t/2**32|0)|0,j=(t,e,s,i)=>(t>>>0)+(e>>>0)+(s>>>0)+(i>>>0),M=(t,e,s,i,r)=>e+s+i+r+(t/2**32|0)|0,R=(t,e,s,i,r)=>(t>>>0)+(e>>>0)+(s>>>0)+(i>>>0)+(r>>>0),N=(t,e,s,i,r,n)=>e+s+i+r+n+(t/2**32|0)|0,X=Uint32Array.from([1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298]),V=new Uint32Array(64);class Z extends y{get(){const{A:t,B:e,C:s,D:i,E:r,F:n,G:o,H:h}=this;return[t,e,s,i,r,n,o,h]}set(t,e,s,i,r,n,o,h){this.A=0|t,this.B=0|e,this.C=0|s,this.D=0|i,this.E=0|r,this.F=0|n,this.G=0|o,this.H=0|h}process(t,e){for(let s=0;s<16;s++,e+=4)V[s]=t.getUint32(e,!1);for(let t=16;t<64;t++){
-const e=V[t-15],s=V[t-2],i=h(e,7)^h(e,18)^e>>>3,r=h(s,17)^h(s,19)^s>>>10;V[t]=r+V[t-7]+i+V[t-16]|0}let{A:s,B:i,C:r,D:n,E:o,F:a,G:c,H:l}=this;for(let t=0;t<64;t++){const e=l+(h(o,6)^h(o,11)^h(o,25))+p(o,a,c)+X[t]+V[t]|0,u=(h(s,2)^h(s,13)^h(s,22))+w(s,i,r)|0;l=c,c=a,a=o,o=n+e|0,n=r,r=i,i=s,s=e+u|0}s=s+this.A|0,i=i+this.B|0,r=r+this.C|0,n=n+this.D|0,o=o+this.E|0,a=a+this.F|0,c=c+this.G|0,l=l+this.H|0,this.set(s,i,r,n,o,a,c,l)}roundClean(){n(V)}destroy(){this.set(0,0,0,0,0,0,0,0),n(this.buffer)}constructor(t=32){super(64,t,8,!1),this.A=0|x[0],this.B=0|x[1],this.C=0|x[2],this.D=0|x[3],this.E=0|x[4],this.F=0|x[5],this.G=0|x[6],this.H=0|x[7]}}class z extends Z{constructor(){super(28),this.A=0|m[0],this.B=0|m[1],this.C=0|m[2],this.D=0|m[3],this.E=0|m[4],this.F=0|m[5],this.G=0|m[6],this.H=0|m[7]}}
-const J=(()=>C(["0x428a2f98d728ae22","0x7137449123ef65cd","0xb5c0fbcfec4d3b2f","0xe9b5dba58189dbbc","0x3956c25bf348b538","0x59f111f1b605d019","0x923f82a4af194f9b","0xab1c5ed5da6d8118","0xd807aa98a3030242","0x12835b0145706fbe","0x243185be4ee4b28c","0x550c7dc3d5ffb4e2","0x72be5d74f27b896f","0x80deb1fe3b1696b1","0x9bdc06a725c71235","0xc19bf174cf692694","0xe49b69c19ef14ad2","0xefbe4786384f25e3","0x0fc19dc68b8cd5b5","0x240ca1cc77ac9c65","0x2de92c6f592b0275","0x4a7484aa6ea6e483","0x5cb0a9dcbd41fbd4","0x76f988da831153b5","0x983e5152ee66dfab","0xa831c66d2db43210","0xb00327c898fb213f","0xbf597fc7beef0ee4","0xc6e00bf33da88fc2","0xd5a79147930aa725","0x06ca6351e003826f","0x142929670a0e6e70","0x27b70a8546d22ffc","0x2e1b21385c26c926","0x4d2c6dfc5ac42aed","0x53380d139d95b3df","0x650a73548baf63de","0x766a0abb3c77b2a8","0x81c2c92e47edaee6","0x92722c851482353b","0xa2bfe8a14cf10364","0xa81a664bbc423001","0xc24b8b70d0f89791","0xc76c51a30654be30","0xd192e819d6ef5218","0xd69906245565a910","0xf40e35855771202a","0x106aa07032bbd1b8","0x19a4c116b8d2d0c8","0x1e376c085141ab53","0x2748774cdf8eeb99","0x34b0bcb5e19b48a8","0x391c0cb3c5c95a63","0x4ed8aa4ae3418acb","0x5b9cca4f7763e373","0x682e6ff3d6b2b8a3","0x748f82ee5defb2fc","0x78a5636f43172f60","0x84c87814a1f0ab72","0x8cc702081a6439ec","0x90befffa23631e28","0xa4506cebde82bde9","0xbef9a3f7b2c67915","0xc67178f2e372532b","0xca273eceea26619c","0xd186b8c721c0c207","0xeada7dd6cde0eb1e","0xf57d4f7fee6ed178","0x06f067aa72176fba","0x0a637dc5a2c898a6","0x113f9804bef90dae","0x1b710b35131c471b","0x28db77f523047d84","0x32caab7b40c72493","0x3c9ebe0a15c9bebc","0x431d67c49c100d4c","0x4cc5d4becb3e42b6","0x597f299cfc657e2a","0x5fcb6fab3ad6faec","0x6c44198c4a475817"].map(t=>BigInt(t))))(),K=(()=>J[0])(),Q=(()=>J[1])(),W=new Uint32Array(80),Y=new Uint32Array(80);class q extends y{get(){const{Ah:t,Al:e,Bh:s,Bl:i,Ch:r,Cl:n,Dh:o,Dl:h,Eh:a,El:c,Fh:l,Fl:u,Gh:f,Gl:d,Hh:b,Hl:g}=this;return[t,e,s,i,r,n,o,h,a,c,l,u,f,d,b,g]}set(t,e,s,i,r,n,o,h,a,c,l,u,f,d,b,g){this.Ah=0|t,this.Al=0|e,this.Bh=0|s,this.Bl=0|i,this.Ch=0|r,
-this.Cl=0|n,this.Dh=0|o,this.Dl=0|h,this.Eh=0|a,this.El=0|c,this.Fh=0|l,this.Fl=0|u,this.Gh=0|f,this.Gl=0|d,this.Hh=0|b,this.Hl=0|g}process(t,e){for(let s=0;s<16;s++,e+=4)W[s]=t.getUint32(e),Y[s]=t.getUint32(e+=4);for(let t=16;t<80;t++){const e=0|W[t-15],s=0|Y[t-15],i=$(e,s,1)^$(e,s,8)^v(e,0,7),r=T(e,s,1)^T(e,s,8)^k(e,s,7),n=0|W[t-2],o=0|Y[t-2],h=$(n,o,19)^D(n,o,61)^v(n,0,6),a=T(n,o,19)^_(n,o,61)^k(n,o,6),c=j(r,a,Y[t-7],Y[t-16]),l=M(c,i,h,W[t-7],W[t-16]);W[t]=0|l,Y[t]=0|c}let{Ah:s,Al:i,Bh:r,Bl:n,Ch:o,Cl:h,Dh:a,Dl:c,Eh:l,El:u,Fh:f,Fl:d,Gh:b,Gl:g,Hh:p,Hl:w}=this;for(let t=0;t<80;t++){const e=$(l,u,14)^$(l,u,18)^D(l,u,41),y=T(l,u,14)^T(l,u,18)^_(l,u,41),x=l&f^~l&b,m=R(w,y,u&d^~u&g,Q[t],Y[t]),A=N(m,p,e,x,K[t],W[t]),H=0|m,I=$(s,i,28)^D(s,i,34)^D(s,i,39),L=T(s,i,28)^_(s,i,34)^_(s,i,39),E=s&r^s&o^r&o,U=i&n^i&h^n&h;p=0|b,w=0|g,b=0|f,g=0|d,f=0|l,d=0|u,({h:l,l:u}=F(0|a,0|c,0|A,0|H)),a=0|o,c=0|h,o=0|r,h=0|n,r=0|s,n=0|i;const B=G(H,L,U);s=P(B,A,I,E),i=0|B}({h:s,l:i}=F(0|this.Ah,0|this.Al,0|s,0|i)),({h:r,l:n}=F(0|this.Bh,0|this.Bl,0|r,0|n)),({h:o,l:h}=F(0|this.Ch,0|this.Cl,0|o,0|h)),({h:a,l:c}=F(0|this.Dh,0|this.Dl,0|a,0|c)),({h:l,l:u}=F(0|this.Eh,0|this.El,0|l,0|u)),({h:f,l:d}=F(0|this.Fh,0|this.Fl,0|f,0|d)),({h:b,l:g}=F(0|this.Gh,0|this.Gl,0|b,0|g)),({h:p,l:w}=F(0|this.Hh,0|this.Hl,0|p,0|w)),this.set(s,i,r,n,o,h,a,c,l,u,f,d,b,g,p,w)}roundClean(){n(W,Y)}destroy(){n(this.buffer),this.set(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)}constructor(t=64){super(128,t,16,!1),this.Ah=0|H[0],this.Al=0|H[1],this.Bh=0|H[2],this.Bl=0|H[3],this.Ch=0|H[4],this.Cl=0|H[5],this.Dh=0|H[6],this.Dl=0|H[7],this.Eh=0|H[8],this.El=0|H[9],this.Fh=0|H[10],this.Fl=0|H[11],this.Gh=0|H[12],this.Gl=0|H[13],this.Hh=0|H[14],this.Hl=0|H[15]}}class tt extends q{constructor(){super(48),this.Ah=0|A[0],this.Al=0|A[1],this.Bh=0|A[2],this.Bl=0|A[3],this.Ch=0|A[4],this.Cl=0|A[5],this.Dh=0|A[6],this.Dl=0|A[7],this.Eh=0|A[8],this.El=0|A[9],this.Fh=0|A[10],this.Fl=0|A[11],this.Gh=0|A[12],this.Gl=0|A[13],this.Hh=0|A[14],this.Hl=0|A[15]}}
-const et=d(()=>new Z),st=d(()=>new z),it=d(()=>new q),rt=d(()=>new tt),nt=BigInt(0),ot=BigInt(1),ht=BigInt(2),at=BigInt(7),ct=BigInt(256),lt=BigInt(113),ut=[],ft=[],dt=[];for(let t=0,e=ot,s=1,i=0;t<24;t++){[s,i]=[i,(2*s+3*i)%5],ut.push(2*(5*i+s)),ft.push((t+1)*(t+2)/2%64);let r=nt;for(let t=0;t<7;t++)e=(e<<ot^(e>>at)*lt)%ct,e&ht&&(r^=ot<<(ot<<BigInt(t))-ot);dt.push(r)}const bt=C(dt,!0),gt=bt[0],pt=bt[1],wt=(t,e,s)=>s>32?((t,e,s)=>e<<s-32|t>>>64-s)(t,e,s):((t,e,s)=>t<<s|e>>>32-s)(t,e,s),yt=(t,e,s)=>s>32?((t,e,s)=>t<<s-32|e>>>64-s)(t,e,s):((t,e,s)=>e<<s|t>>>32-s)(t,e,s);class xt extends f{clone(){return this._cloneInto()}keccak(){l(this.state32),function(t,e=24){const s=new Uint32Array(10);for(let i=24-e;i<24;i++){for(let e=0;e<10;e++)s[e]=t[e]^t[e+10]^t[e+20]^t[e+30]^t[e+40];for(let e=0;e<10;e+=2){const i=(e+8)%10,r=(e+2)%10,n=s[r],o=s[r+1],h=wt(n,o,1)^s[i],a=yt(n,o,1)^s[i+1];for(let s=0;s<50;s+=10)t[e+s]^=h,t[e+s+1]^=a}let e=t[2],r=t[3];for(let s=0;s<24;s++){const i=ft[s],n=wt(e,r,i),o=yt(e,r,i),h=ut[s];e=t[h],r=t[h+1],t[h]=n,t[h+1]=o}for(let e=0;e<50;e+=10){for(let i=0;i<10;i++)s[i]=t[e+i];for(let i=0;i<10;i++)t[e+i]^=~s[(i+2)%10]&s[(i+4)%10]}t[0]^=gt[i],t[1]^=pt[i]}n(s)}(this.state32,this.rounds),l(this.state32),this.posOut=0,this.pos=0}update(t){i(this),s(t=u(t));const{blockLen:e,state:r}=this,n=t.length;for(let s=0;s<n;){const i=Math.min(e-this.pos,n-s);for(let e=0;e<i;e++)r[this.pos++]^=t[s++];this.pos===e&&this.keccak()}return this}finish(){if(this.finished)return;this.finished=!0;const{state:t,suffix:e,pos:s,blockLen:i}=this;t[s]^=e,128&e&&s===i-1&&this.keccak(),t[i-1]^=128,this.keccak()}writeInto(t){i(this,!1),s(t),this.finish();const e=this.state,{blockLen:r}=this;for(let s=0,i=t.length;s<i;){this.posOut>=r&&this.keccak();const n=Math.min(r-this.posOut,i-s);t.set(e.subarray(this.posOut,this.posOut+n),s),this.posOut+=n,s+=n}return t}xofInto(t){if(!this.enableXOF)throw new Error("XOF is not possible for this instance");return this.writeInto(t)}xof(t){return e(t),this.xofInto(new Uint8Array(t))}
-digestInto(t){if(r(t,this),this.finished)throw new Error("digest() was already called");return this.writeInto(t),this.destroy(),t}digest(){return this.digestInto(new Uint8Array(this.outputLen))}destroy(){this.destroyed=!0,n(this.state)}_cloneInto(t){const{blockLen:e,suffix:s,outputLen:i,rounds:r,enableXOF:n}=this;return t||(t=new xt(e,s,i,n,r)),t.state32.set(this.state32),t.pos=this.pos,t.posOut=this.posOut,t.finished=this.finished,t.rounds=r,t.suffix=s,t.outputLen=i,t.enableXOF=n,t.destroyed=this.destroyed,t}constructor(t,s,i,r=!1,n=24){if(super(),this.pos=0,this.posOut=0,this.finished=!1,this.destroyed=!1,this.enableXOF=!1,this.blockLen=t,this.suffix=s,this.outputLen=i,this.enableXOF=r,this.rounds=n,e(i),!(0<t&&t<200))throw new Error("only keccak-f1600 function is supported");var o;this.state=new Uint8Array(200),this.state32=(o=this.state,new Uint32Array(o.buffer,o.byteOffset,Math.floor(o.byteLength/4)))}}const mt=(t,e,s)=>d(()=>new xt(e,t,s)),At=(()=>mt(6,144,28))(),Ht=(()=>mt(6,136,32))(),It=(()=>mt(6,104,48))(),Lt=(()=>mt(6,72,64))(),Et=(()=>{if("object"==typeof globalThis)return globalThis;Object.defineProperty(Object.prototype,"__GLOBALTHIS__",{get(){return this},configurable:!0});try{if("undefined"!=typeof __GLOBALTHIS__)return __GLOBALTHIS__}finally{delete Object.prototype.__GLOBALTHIS__}return"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:void 0})(),Ut={SHA1:U,SHA224:st,SHA256:et,SHA384:rt,SHA512:it,"SHA3-224":At,"SHA3-256":Ht,"SHA3-384":It,"SHA3-512":Lt},Bt=t=>{switch(!0){case/^(?:SHA-?1|SSL3-SHA1)$/i.test(t):return"SHA1";case/^SHA(?:2?-)?224$/i.test(t):return"SHA224";case/^SHA(?:2?-)?256$/i.test(t):return"SHA256";case/^SHA(?:2?-)?384$/i.test(t):return"SHA384";case/^SHA(?:2?-)?512$/i.test(t):return"SHA512";case/^SHA3-224$/i.test(t):return"SHA3-224";case/^SHA3-256$/i.test(t):return"SHA3-256";case/^SHA3-384$/i.test(t):return"SHA3-384";case/^SHA3-512$/i.test(t):return"SHA3-512";default:throw new TypeError(`Unknown hash algorithm: ${t}`)}
-},St="ABCDEFGHIJKLMNOPQRSTUVWXYZ234567",Ot=t=>{let e=(t=t.replace(/ /g,"")).length;for(;"="===t[e-1];)--e;t=(e<t.length?t.substring(0,e):t).toUpperCase();const s=new ArrayBuffer(5*t.length/8|0),i=new Uint8Array(s);let r=0,n=0,o=0;for(let e=0;e<t.length;e++){const s=St.indexOf(t[e]);if(-1===s)throw new TypeError(`Invalid character found: ${t[e]}`);n=n<<5|s,r+=5,r>=8&&(r-=8,i[o++]=n>>>r)}return i},Ct=t=>{let e=0,s=0,i="";for(let r=0;r<t.length;r++)for(s=s<<8|t[r],e+=8;e>=5;)i+=St[s>>>e-5&31],e-=5;return e>0&&(i+=St[s<<5-e&31]),i},vt=t=>{t=t.replace(/ /g,"");const e=new ArrayBuffer(t.length/2),s=new Uint8Array(e);for(let e=0;e<t.length;e+=2)s[e/2]=parseInt(t.substring(e,e+2),16);return s},kt=t=>{let e="";for(let s=0;s<t.length;s++){const i=t[s].toString(16);1===i.length&&(e+="0"),e+=i}return e.toUpperCase()},$t=t=>{const e=new ArrayBuffer(t.length),s=new Uint8Array(e);for(let e=0;e<t.length;e++)s[e]=255&t.charCodeAt(e);return s},Tt=t=>{let e="";for(let s=0;s<t.length;s++)e+=String.fromCharCode(t[s]);return e},Dt=Et.TextEncoder?new Et.TextEncoder:null,_t=Et.TextDecoder?new Et.TextDecoder:null,Ft=t=>{if(!Dt)throw new Error("Encoding API not available");return Dt.encode(t)},Gt=t=>{if(!_t)throw new Error("Encoding API not available");return _t.decode(t)};class Pt{static fromLatin1(t){return new Pt({buffer:$t(t).buffer})}static fromUTF8(t){return new Pt({buffer:Ft(t).buffer})}static fromBase32(t){return new Pt({buffer:Ot(t).buffer})}static fromHex(t){return new Pt({buffer:vt(t).buffer})}get buffer(){return this.bytes.buffer}get latin1(){return Object.defineProperty(this,"latin1",{enumerable:!0,writable:!1,configurable:!1,value:Tt(this.bytes)}),this.latin1}get utf8(){return Object.defineProperty(this,"utf8",{enumerable:!0,writable:!1,configurable:!1,value:Gt(this.bytes)}),this.utf8}get base32(){return Object.defineProperty(this,"base32",{enumerable:!0,writable:!1,configurable:!1,value:Ct(this.bytes)}),this.base32}get hex(){return Object.defineProperty(this,"hex",{enumerable:!0,writable:!1,configurable:!1,
-value:kt(this.bytes)}),this.hex}constructor({buffer:t,size:e=20}={}){this.bytes=void 0===t?(t=>{if(Et.crypto?.getRandomValues)return Et.crypto.getRandomValues(new Uint8Array(t));throw new Error("Cryptography API not available")})(e):new Uint8Array(t),Object.defineProperty(this,"bytes",{enumerable:!0,writable:!1,configurable:!1,value:this.bytes})}}class jt{static get defaults(){return{issuer:"",label:"OTPAuth",issuerInLabel:!0,algorithm:"SHA1",digits:6,counter:0,window:1}}static generate({secret:t,algorithm:e=jt.defaults.algorithm,digits:s=jt.defaults.digits,counter:i=jt.defaults.counter}){const r=((t,e,s)=>{if(g){const i=Ut[t]??Ut[Bt(t)];return g(i,e,s)}throw new Error("Missing HMAC function")})(e,t.bytes,(t=>{const e=new ArrayBuffer(8),s=new Uint8Array(e);let i=t;for(let t=7;t>=0&&0!==i;t--)s[t]=255&i,i-=s[t],i/=256;return s})(i)),n=15&r[r.byteLength-1];return(((127&r[n])<<24|(255&r[n+1])<<16|(255&r[n+2])<<8|255&r[n+3])%10**s).toString().padStart(s,"0")}generate({counter:t=this.counter++}={}){return jt.generate({secret:this.secret,algorithm:this.algorithm,digits:this.digits,counter:t})}static validate({token:t,secret:e,algorithm:s,digits:i=jt.defaults.digits,counter:r=jt.defaults.counter,window:n=jt.defaults.window}){if(t.length!==i)return null;let o=null;const h=n=>{const h=jt.generate({secret:e,algorithm:s,digits:i,counter:n});((t,e)=>{{if(t.length!==e.length)throw new TypeError("Input strings must have the same length");let s=-1,i=0;for(;++s<t.length;)i|=t.charCodeAt(s)^e.charCodeAt(s);return 0===i}})(t,h)&&(o=n-r)};h(r);for(let t=1;t<=n&&null===o&&(h(r-t),null===o)&&(h(r+t),null===o);++t);return o}validate({token:t,counter:e=this.counter,window:s}){return jt.validate({token:t,secret:this.secret,algorithm:this.algorithm,digits:this.digits,counter:e,window:s})}toString(){const t=encodeURIComponent
-;return"otpauth://hotp/"+(this.issuer.length>0?this.issuerInLabel?`${t(this.issuer)}:${t(this.label)}?issuer=${t(this.issuer)}&`:`${t(this.label)}?issuer=${t(this.issuer)}&`:`${t(this.label)}?`)+`secret=${t(this.secret.base32)}&`+`algorithm=${t(this.algorithm)}&`+`digits=${t(this.digits)}&`+`counter=${t(this.counter)}`}constructor({issuer:t=jt.defaults.issuer,label:e=jt.defaults.label,issuerInLabel:s=jt.defaults.issuerInLabel,secret:i=new Pt,algorithm:r=jt.defaults.algorithm,digits:n=jt.defaults.digits,counter:o=jt.defaults.counter}={}){this.issuer=t,this.label=e,this.issuerInLabel=s,this.secret="string"==typeof i?Pt.fromBase32(i):i,this.algorithm=Bt(r),this.digits=n,this.counter=o}}class Mt{static get defaults(){return{issuer:"",label:"OTPAuth",issuerInLabel:!0,algorithm:"SHA1",digits:6,period:30,window:1}}static counter({period:t=Mt.defaults.period,timestamp:e=Date.now()}={}){return Math.floor(e/1e3/t)}counter({timestamp:t=Date.now()}={}){return Mt.counter({period:this.period,timestamp:t})}static remaining({period:t=Mt.defaults.period,timestamp:e=Date.now()}={}){return 1e3*t-e%(1e3*t)}remaining({timestamp:t=Date.now()}={}){return Mt.remaining({period:this.period,timestamp:t})}static generate({secret:t,algorithm:e,digits:s,period:i=Mt.defaults.period,timestamp:r=Date.now()}){return jt.generate({secret:t,algorithm:e,digits:s,counter:Mt.counter({period:i,timestamp:r})})}generate({timestamp:t=Date.now()}={}){return Mt.generate({secret:this.secret,algorithm:this.algorithm,digits:this.digits,period:this.period,timestamp:t})}static validate({token:t,secret:e,algorithm:s,digits:i,period:r=Mt.defaults.period,timestamp:n=Date.now(),window:o}){return jt.validate({token:t,secret:e,algorithm:s,digits:i,counter:Mt.counter({period:r,timestamp:n}),window:o})}validate({token:t,timestamp:e,window:s}){return Mt.validate({token:t,secret:this.secret,algorithm:this.algorithm,digits:this.digits,period:this.period,timestamp:e,window:s})}toString(){const t=encodeURIComponent
-;return"otpauth://totp/"+(this.issuer.length>0?this.issuerInLabel?`${t(this.issuer)}:${t(this.label)}?issuer=${t(this.issuer)}&`:`${t(this.label)}?issuer=${t(this.issuer)}&`:`${t(this.label)}?`)+`secret=${t(this.secret.base32)}&`+`algorithm=${t(this.algorithm)}&`+`digits=${t(this.digits)}&`+`period=${t(this.period)}`}constructor({issuer:t=Mt.defaults.issuer,label:e=Mt.defaults.label,issuerInLabel:s=Mt.defaults.issuerInLabel,secret:i=new Pt,algorithm:r=Mt.defaults.algorithm,digits:n=Mt.defaults.digits,period:o=Mt.defaults.period}={}){this.issuer=t,this.label=e,this.issuerInLabel=s,this.secret="string"==typeof i?Pt.fromBase32(i):i,this.algorithm=Bt(r),this.digits=n,this.period=o}}const Rt=/^otpauth:\/\/([ht]otp)\/(.+)\?([A-Z0-9.~_-]+=[^?&]*(?:&[A-Z0-9.~_-]+=[^?&]*)*)$/i,Nt=/^[2-7A-Z]+=*$/i,Xt=/^SHA(?:1|224|256|384|512|3-224|3-256|3-384|3-512)$/i,Vt=/^[+-]?\d+$/,Zt=/^\+?[1-9]\d*$/;t.HOTP=jt,t.Secret=Pt,t.TOTP=Mt,t.URI=class{static parse(t){let e;try{e=t.match(Rt)}catch(t){}if(!Array.isArray(e))throw new URIError("Invalid URI format");const s=e[1].toLowerCase(),i=e[2].split(/(?::|%3A) *(.+)/i,2).map(decodeURIComponent),r=e[3].split("&").reduce((t,e)=>{const s=e.split(/=(.*)/,2).map(decodeURIComponent),i=s[0].toLowerCase(),r=s[1],n=t;return n[i]=r,n},{});let n;const o={};if("hotp"===s){if(n=jt,void 0===r.counter||!Vt.test(r.counter))throw new TypeError("Missing or invalid 'counter' parameter");o.counter=parseInt(r.counter,10)}else{if("totp"!==s)throw new TypeError("Unknown OTP type");if(n=Mt,void 0!==r.period){if(!Zt.test(r.period))throw new TypeError("Invalid 'period' parameter");o.period=parseInt(r.period,10)}}if(void 0!==r.issuer&&(o.issuer=r.issuer),2===i.length?(o.label=i[1],void 0===o.issuer||""===o.issuer?o.issuer=i[0]:""===i[0]&&(o.issuerInLabel=!1)):(o.label=i[0],void 0!==o.issuer&&""!==o.issuer&&(o.issuerInLabel=!1)),void 0===r.secret||!Nt.test(r.secret))throw new TypeError("Missing or invalid 'secret' parameter");if(o.secret=r.secret,void 0!==r.algorithm){
-if(!Xt.test(r.algorithm))throw new TypeError("Invalid 'algorithm' parameter");o.algorithm=r.algorithm}if(void 0!==r.digits){if(!Zt.test(r.digits))throw new TypeError("Invalid 'digits' parameter");o.digits=parseInt(r.digits,10)}return new n(o)}static stringify(t){if(t instanceof jt||t instanceof Mt)return t.toString();throw new TypeError("Invalid 'HOTP/TOTP' object")}},t.version="9.4.1"});
-//# sourceMappingURL=otpauth.umd.min.js.map
@@ -1,95 +0,0 @@
-/*! URI.js v1.19.11 http://medialize.github.io/URI.js/ */
-/* build contains: IPv6.js, punycode.js, SecondLevelDomains.js, URI.js, URITemplate.js */
-'use strict';(function(r,x){"object"===typeof module&&module.exports?module.exports=x():"function"===typeof define&&define.amd?define(x):r.IPv6=x(r)})(this,function(r){var x=r&&r.IPv6;return{best:function(k){k=k.toLowerCase().split(":");var m=k.length,d=8;""===k[0]&&""===k[1]&&""===k[2]?(k.shift(),k.shift()):""===k[0]&&""===k[1]?k.shift():""===k[m-1]&&""===k[m-2]&&k.pop();m=k.length;-1!==k[m-1].indexOf(".")&&(d=7);var q;for(q=0;q<m&&""!==k[q];q++);if(q<d)for(k.splice(q,1,"0000");k.length<d;)k.splice(q,
-    0,"0000");for(q=0;q<d;q++){m=k[q].split("");for(var B=0;3>B;B++)if("0"===m[0]&&1<m.length)m.splice(0,1);else break;k[q]=m.join("")}m=-1;var z=B=0,h=-1,p=!1;for(q=0;q<d;q++)p?"0"===k[q]?z+=1:(p=!1,z>B&&(m=h,B=z)):"0"===k[q]&&(p=!0,h=q,z=1);z>B&&(m=h,B=z);1<B&&k.splice(m,B,"");m=k.length;d="";""===k[0]&&(d=":");for(q=0;q<m;q++){d+=k[q];if(q===m-1)break;d+=":"}""===k[m-1]&&(d+=":");return d},noConflict:function(){r.IPv6===this&&(r.IPv6=x);return this}}});
-    (function(r){function x(l){throw new RangeError(G[l]);}function k(l,t){for(var H=l.length,y=[];H--;)y[H]=t(l[H]);return y}function m(l,t){var H=l.split("@"),y="";1<H.length&&(y=H[0]+"@",l=H[1]);l=l.replace(w,".");l=l.split(".");t=k(l,t).join(".");return y+t}function d(l){for(var t=[],H=0,y=l.length,I,M;H<y;)I=l.charCodeAt(H++),55296<=I&&56319>=I&&H<y?(M=l.charCodeAt(H++),56320==(M&64512)?t.push(((I&1023)<<10)+(M&1023)+65536):(t.push(I),H--)):t.push(I);return t}function q(l){return k(l,function(t){var H=
-    "";65535<t&&(t-=65536,H+=g(t>>>10&1023|55296),t=56320|t&1023);return H+=g(t)}).join("")}function B(l,t,H){var y=0;l=H?v(l/700):l>>1;for(l+=v(l/t);455<l;y+=36)l=v(l/35);return v(y+36*l/(l+38))}function z(l){var t=[],H=l.length,y=0,I=128,M=72,a,b;var c=l.lastIndexOf("-");0>c&&(c=0);for(a=0;a<c;++a)128<=l.charCodeAt(a)&&x("not-basic"),t.push(l.charCodeAt(a));for(c=0<c?c+1:0;c<H;){a=y;var e=1;for(b=36;;b+=36){c>=H&&x("invalid-input");var f=l.charCodeAt(c++);f=10>f-48?f-22:26>f-65?f-65:26>f-97?f-97:36;
-    (36<=f||f>v((2147483647-y)/e))&&x("overflow");y+=f*e;var n=b<=M?1:b>=M+26?26:b-M;if(f<n)break;f=36-n;e>v(2147483647/f)&&x("overflow");e*=f}e=t.length+1;M=B(y-a,e,0==a);v(y/e)>2147483647-I&&x("overflow");I+=v(y/e);y%=e;t.splice(y++,0,I)}return q(t)}function h(l){var t,H,y,I=[];l=d(l);var M=l.length;var a=128;var b=0;var c=72;for(y=0;y<M;++y){var e=l[y];128>e&&I.push(g(e))}for((t=H=I.length)&&I.push("-");t<M;){var f=2147483647;for(y=0;y<M;++y)e=l[y],e>=a&&e<f&&(f=e);var n=t+1;f-a>v((2147483647-b)/n)&&
-    x("overflow");b+=(f-a)*n;a=f;for(y=0;y<M;++y)if(e=l[y],e<a&&2147483647<++b&&x("overflow"),e==a){var E=b;for(f=36;;f+=36){e=f<=c?1:f>=c+26?26:f-c;if(E<e)break;var K=E-e;E=36-e;var L=I;e+=K%E;L.push.call(L,g(e+22+75*(26>e)-0));E=v(K/E)}I.push(g(E+22+75*(26>E)-0));c=B(b,n,t==H);b=0;++t}++b;++a}return I.join("")}var p="object"==typeof exports&&exports&&!exports.nodeType&&exports,F="object"==typeof module&&module&&!module.nodeType&&module,u="object"==typeof global&&global;if(u.global===u||u.window===u||
-    u.self===u)r=u;var J=/^xn--/,C=/[^\x20-\x7E]/,w=/[\x2E\u3002\uFF0E\uFF61]/g,G={overflow:"Overflow: input needs wider integers to process","not-basic":"Illegal input >= 0x80 (not a basic code point)","invalid-input":"Invalid input"},v=Math.floor,g=String.fromCharCode,A;var D={version:"1.3.2",ucs2:{decode:d,encode:q},decode:z,encode:h,toASCII:function(l){return m(l,function(t){return C.test(t)?"xn--"+h(t):t})},toUnicode:function(l){return m(l,function(t){return J.test(t)?z(t.slice(4).toLowerCase()):
-    t})}};if("function"==typeof define&&"object"==typeof define.amd&&define.amd)define("punycode",function(){return D});else if(p&&F)if(module.exports==p)F.exports=D;else for(A in D)D.hasOwnProperty(A)&&(p[A]=D[A]);else r.punycode=D})(this);
-    (function(r,x){"object"===typeof module&&module.exports?module.exports=x():"function"===typeof define&&define.amd?define(x):r.SecondLevelDomains=x(r)})(this,function(r){var x=r&&r.SecondLevelDomains,k={list:{ac:" com gov mil net org ",ae:" ac co gov mil name net org pro sch ",af:" com edu gov net org ",al:" com edu gov mil net org ",ao:" co ed gv it og pb ",ar:" com edu gob gov int mil net org tur ",at:" ac co gv or ",au:" asn com csiro edu gov id net org ",ba:" co com edu gov mil net org rs unbi unmo unsa untz unze ",
-    bb:" biz co com edu gov info net org store tv ",bh:" biz cc com edu gov info net org ",bn:" com edu gov net org ",bo:" com edu gob gov int mil net org tv ",br:" adm adv agr am arq art ato b bio blog bmd cim cng cnt com coop ecn edu eng esp etc eti far flog fm fnd fot fst g12 ggf gov imb ind inf jor jus lel mat med mil mus net nom not ntr odo org ppg pro psc psi qsl rec slg srv tmp trd tur tv vet vlog wiki zlg ",bs:" com edu gov net org ",bz:" du et om ov rg ",ca:" ab bc mb nb nf nl ns nt nu on pe qc sk yk ",
-    ck:" biz co edu gen gov info net org ",cn:" ac ah bj com cq edu fj gd gov gs gx gz ha hb he hi hl hn jl js jx ln mil net nm nx org qh sc sd sh sn sx tj tw xj xz yn zj ",co:" com edu gov mil net nom org ",cr:" ac c co ed fi go or sa ",cy:" ac biz com ekloges gov ltd name net org parliament press pro tm ","do":" art com edu gob gov mil net org sld web ",dz:" art asso com edu gov net org pol ",ec:" com edu fin gov info med mil net org pro ",eg:" com edu eun gov mil name net org sci ",er:" com edu gov ind mil net org rochest w ",
-    es:" com edu gob nom org ",et:" biz com edu gov info name net org ",fj:" ac biz com info mil name net org pro ",fk:" ac co gov net nom org ",fr:" asso com f gouv nom prd presse tm ",gg:" co net org ",gh:" com edu gov mil org ",gn:" ac com gov net org ",gr:" com edu gov mil net org ",gt:" com edu gob ind mil net org ",gu:" com edu gov net org ",hk:" com edu gov idv net org ",hu:" 2000 agrar bolt casino city co erotica erotika film forum games hotel info ingatlan jogasz konyvelo lakas media news org priv reklam sex shop sport suli szex tm tozsde utazas video ",
-    id:" ac co go mil net or sch web ",il:" ac co gov idf k12 muni net org ","in":" ac co edu ernet firm gen gov i ind mil net nic org res ",iq:" com edu gov i mil net org ",ir:" ac co dnssec gov i id net org sch ",it:" edu gov ",je:" co net org ",jo:" com edu gov mil name net org sch ",jp:" ac ad co ed go gr lg ne or ",ke:" ac co go info me mobi ne or sc ",kh:" com edu gov mil net org per ",ki:" biz com de edu gov info mob net org tel ",km:" asso com coop edu gouv k medecin mil nom notaires pharmaciens presse tm veterinaire ",
-    kn:" edu gov net org ",kr:" ac busan chungbuk chungnam co daegu daejeon es gangwon go gwangju gyeongbuk gyeonggi gyeongnam hs incheon jeju jeonbuk jeonnam k kg mil ms ne or pe re sc seoul ulsan ",kw:" com edu gov net org ",ky:" com edu gov net org ",kz:" com edu gov mil net org ",lb:" com edu gov net org ",lk:" assn com edu gov grp hotel int ltd net ngo org sch soc web ",lr:" com edu gov net org ",lv:" asn com conf edu gov id mil net org ",ly:" com edu gov id med net org plc sch ",ma:" ac co gov m net org press ",
-    mc:" asso tm ",me:" ac co edu gov its net org priv ",mg:" com edu gov mil nom org prd tm ",mk:" com edu gov inf name net org pro ",ml:" com edu gov net org presse ",mn:" edu gov org ",mo:" com edu gov net org ",mt:" com edu gov net org ",mv:" aero biz com coop edu gov info int mil museum name net org pro ",mw:" ac co com coop edu gov int museum net org ",mx:" com edu gob net org ",my:" com edu gov mil name net org sch ",nf:" arts com firm info net other per rec store web ",ng:" biz com edu gov mil mobi name net org sch ",
-    ni:" ac co com edu gob mil net nom org ",np:" com edu gov mil net org ",nr:" biz com edu gov info net org ",om:" ac biz co com edu gov med mil museum net org pro sch ",pe:" com edu gob mil net nom org sld ",ph:" com edu gov i mil net ngo org ",pk:" biz com edu fam gob gok gon gop gos gov net org web ",pl:" art bialystok biz com edu gda gdansk gorzow gov info katowice krakow lodz lublin mil net ngo olsztyn org poznan pwr radom slupsk szczecin torun warszawa waw wroc wroclaw zgora ",pr:" ac biz com edu est gov info isla name net org pro prof ",
-    ps:" com edu gov net org plo sec ",pw:" belau co ed go ne or ",ro:" arts com firm info nom nt org rec store tm www ",rs:" ac co edu gov in org ",sb:" com edu gov net org ",sc:" com edu gov net org ",sh:" co com edu gov net nom org ",sl:" com edu gov net org ",st:" co com consulado edu embaixada gov mil net org principe saotome store ",sv:" com edu gob org red ",sz:" ac co org ",tr:" av bbs bel biz com dr edu gen gov info k12 name net org pol tel tsk tv web ",tt:" aero biz cat co com coop edu gov info int jobs mil mobi museum name net org pro tel travel ",
-    tw:" club com ebiz edu game gov idv mil net org ",mu:" ac co com gov net or org ",mz:" ac co edu gov org ",na:" co com ",nz:" ac co cri geek gen govt health iwi maori mil net org parliament school ",pa:" abo ac com edu gob ing med net nom org sld ",pt:" com edu gov int net nome org publ ",py:" com edu gov mil net org ",qa:" com edu gov mil net org ",re:" asso com nom ",ru:" ac adygeya altai amur arkhangelsk astrakhan bashkiria belgorod bir bryansk buryatia cbg chel chelyabinsk chita chukotka chuvashia com dagestan e-burg edu gov grozny int irkutsk ivanovo izhevsk jar joshkar-ola kalmykia kaluga kamchatka karelia kazan kchr kemerovo khabarovsk khakassia khv kirov koenig komi kostroma kranoyarsk kuban kurgan kursk lipetsk magadan mari mari-el marine mil mordovia mosreg msk murmansk nalchik net nnov nov novosibirsk nsk omsk orenburg org oryol penza perm pp pskov ptz rnd ryazan sakhalin samara saratov simbirsk smolensk spb stavropol stv surgut tambov tatarstan tom tomsk tsaritsyn tsk tula tuva tver tyumen udm udmurtia ulan-ude vladikavkaz vladimir vladivostok volgograd vologda voronezh vrn vyatka yakutia yamal yekaterinburg yuzhno-sakhalinsk ",
-    rw:" ac co com edu gouv gov int mil net ",sa:" com edu gov med net org pub sch ",sd:" com edu gov info med net org tv ",se:" a ac b bd c d e f g h i k l m n o org p parti pp press r s t tm u w x y z ",sg:" com edu gov idn net org per ",sn:" art com edu gouv org perso univ ",sy:" com edu gov mil net news org ",th:" ac co go in mi net or ",tj:" ac biz co com edu go gov info int mil name net nic org test web ",tn:" agrinet com defense edunet ens fin gov ind info intl mincom nat net org perso rnrt rns rnu tourism ",
-    tz:" ac co go ne or ",ua:" biz cherkassy chernigov chernovtsy ck cn co com crimea cv dn dnepropetrovsk donetsk dp edu gov if in ivano-frankivsk kh kharkov kherson khmelnitskiy kiev kirovograd km kr ks kv lg lugansk lutsk lviv me mk net nikolaev od odessa org pl poltava pp rovno rv sebastopol sumy te ternopil uzhgorod vinnica vn zaporizhzhe zhitomir zp zt ",ug:" ac co go ne or org sc ",uk:" ac bl british-library co cym gov govt icnet jet lea ltd me mil mod national-library-scotland nel net nhs nic nls org orgn parliament plc police sch scot soc ",
-    us:" dni fed isa kids nsn ",uy:" com edu gub mil net org ",ve:" co com edu gob info mil net org web ",vi:" co com k12 net org ",vn:" ac biz com edu gov health info int name net org pro ",ye:" co com gov ltd me net org plc ",yu:" ac co edu gov org ",za:" ac agric alt bourse city co cybernet db edu gov grondar iaccess imt inca landesign law mil net ngo nis nom olivetti org pix school tm web ",zm:" ac co com edu gov net org sch ",com:"ar br cn de eu gb gr hu jpn kr no qc ru sa se uk us uy za ",net:"gb jp se uk ",
-    org:"ae",de:"com "},has:function(m){var d=m.lastIndexOf(".");if(0>=d||d>=m.length-1)return!1;var q=m.lastIndexOf(".",d-1);if(0>=q||q>=d-1)return!1;var B=k.list[m.slice(d+1)];return B?0<=B.indexOf(" "+m.slice(q+1,d)+" "):!1},is:function(m){var d=m.lastIndexOf(".");if(0>=d||d>=m.length-1||0<=m.lastIndexOf(".",d-1))return!1;var q=k.list[m.slice(d+1)];return q?0<=q.indexOf(" "+m.slice(0,d)+" "):!1},get:function(m){var d=m.lastIndexOf(".");if(0>=d||d>=m.length-1)return null;var q=m.lastIndexOf(".",d-1);
-    if(0>=q||q>=d-1)return null;var B=k.list[m.slice(d+1)];return!B||0>B.indexOf(" "+m.slice(q+1,d)+" ")?null:m.slice(q+1)},noConflict:function(){r.SecondLevelDomains===this&&(r.SecondLevelDomains=x);return this}};return k});
-    (function(r,x){"object"===typeof module&&module.exports?module.exports=x(require("./punycode"),require("./IPv6"),require("./SecondLevelDomains")):"function"===typeof define&&define.amd?define(["./punycode","./IPv6","./SecondLevelDomains"],x):r.URI=x(r.punycode,r.IPv6,r.SecondLevelDomains,r)})(this,function(r,x,k,m){function d(a,b){var c=1<=arguments.length,e=2<=arguments.length;if(!(this instanceof d))return c?e?new d(a,b):new d(a):new d;if(void 0===a){if(c)throw new TypeError("undefined is not a valid argument for URI");
-    a="undefined"!==typeof location?location.href+"":""}if(null===a&&c)throw new TypeError("null is not a valid argument for URI");this.href(a);return void 0!==b?this.absoluteTo(b):this}function q(a){return a.replace(/([.*+?^=!:${}()|[\]\/\\])/g,"\\$1")}function B(a){return void 0===a?"Undefined":String(Object.prototype.toString.call(a)).slice(8,-1)}function z(a){return"Array"===B(a)}function h(a,b){var c={},e;if("RegExp"===B(b))c=null;else if(z(b)){var f=0;for(e=b.length;f<e;f++)c[b[f]]=!0}else c[b]=
-    !0;f=0;for(e=a.length;f<e;f++)if(c&&void 0!==c[a[f]]||!c&&b.test(a[f]))a.splice(f,1),e--,f--;return a}function p(a,b){var c;if(z(b)){var e=0;for(c=b.length;e<c;e++)if(!p(a,b[e]))return!1;return!0}var f=B(b);e=0;for(c=a.length;e<c;e++)if("RegExp"===f){if("string"===typeof a[e]&&a[e].match(b))return!0}else if(a[e]===b)return!0;return!1}function F(a,b){if(!z(a)||!z(b)||a.length!==b.length)return!1;a.sort();b.sort();for(var c=0,e=a.length;c<e;c++)if(a[c]!==b[c])return!1;return!0}function u(a){return a.replace(/^\/+|\/+$/g,
-    "")}function J(a){return escape(a)}function C(a){return encodeURIComponent(a).replace(/[!'()*]/g,J).replace(/\*/g,"%2A")}function w(a){return function(b,c){if(void 0===b)return this._parts[a]||"";this._parts[a]=b||null;this.build(!c);return this}}function G(a,b){return function(c,e){if(void 0===c)return this._parts[a]||"";null!==c&&(c+="",c.charAt(0)===b&&(c=c.substring(1)));this._parts[a]=c;this.build(!e);return this}}var v=m&&m.URI;d.version="1.19.11";var g=d.prototype,A=Object.prototype.hasOwnProperty;
-    d._parts=function(){return{protocol:null,username:null,password:null,hostname:null,urn:null,port:null,path:null,query:null,fragment:null,preventInvalidHostname:d.preventInvalidHostname,duplicateQueryParameters:d.duplicateQueryParameters,escapeQuerySpace:d.escapeQuerySpace}};d.preventInvalidHostname=!1;d.duplicateQueryParameters=!1;d.escapeQuerySpace=!0;d.protocol_expression=/^[a-z][a-z0-9.+-]*$/i;d.idn_expression=/[^a-z0-9\._-]/i;d.punycode_expression=/(xn--)/i;d.ip4_expression=/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
-    d.ip6_expression=/^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;
-    d.find_uri_expression=/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?\u00ab\u00bb\u201c\u201d\u2018\u2019]))/ig;d.findUri={start:/\b(?:([a-z][a-z0-9.+-]*:\/\/)|www\.)/gi,end:/[\s\r\n]|$/,trim:/[`!()\[\]{};:'".,<>?\u00ab\u00bb\u201c\u201d\u201e\u2018\u2019]+$/,parens:/(\([^\)]*\)|\[[^\]]*\]|\{[^}]*\}|<[^>]*>)/g};d.leading_whitespace_expression=/^[\x00-\x20\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]+/;
-    d.ascii_tab_whitespace=/[\u0009\u000A\u000D]+/g;d.defaultPorts={http:"80",https:"443",ftp:"21",gopher:"70",ws:"80",wss:"443"};d.hostProtocols=["http","https"];d.invalid_hostname_characters=/[^a-zA-Z0-9\.\-:_]/;d.domAttributes={a:"href",blockquote:"cite",link:"href",base:"href",script:"src",form:"action",img:"src",area:"href",iframe:"src",embed:"src",source:"src",track:"src",input:"src",audio:"src",video:"src"};d.getDomAttribute=function(a){if(a&&a.nodeName){var b=a.nodeName.toLowerCase();if("input"!==
-    b||"image"===a.type)return d.domAttributes[b]}};d.encode=C;d.decode=decodeURIComponent;d.iso8859=function(){d.encode=escape;d.decode=unescape};d.unicode=function(){d.encode=C;d.decode=decodeURIComponent};d.characters={pathname:{encode:{expression:/%(24|26|2B|2C|3B|3D|3A|40)/ig,map:{"%24":"$","%26":"&","%2B":"+","%2C":",","%3B":";","%3D":"=","%3A":":","%40":"@"}},decode:{expression:/[\/\?#]/g,map:{"/":"%2F","?":"%3F","#":"%23"}}},reserved:{encode:{expression:/%(21|23|24|26|27|28|29|2A|2B|2C|2F|3A|3B|3D|3F|40|5B|5D)/ig,
-    map:{"%3A":":","%2F":"/","%3F":"?","%23":"#","%5B":"[","%5D":"]","%40":"@","%21":"!","%24":"$","%26":"&","%27":"'","%28":"(","%29":")","%2A":"*","%2B":"+","%2C":",","%3B":";","%3D":"="}}},urnpath:{encode:{expression:/%(21|24|27|28|29|2A|2B|2C|3B|3D|40)/ig,map:{"%21":"!","%24":"$","%27":"'","%28":"(","%29":")","%2A":"*","%2B":"+","%2C":",","%3B":";","%3D":"=","%40":"@"}},decode:{expression:/[\/\?#:]/g,map:{"/":"%2F","?":"%3F","#":"%23",":":"%3A"}}}};d.encodeQuery=function(a,b){a=d.encode(a+"");void 0===
-    b&&(b=d.escapeQuerySpace);return b?a.replace(/%20/g,"+"):a};d.decodeQuery=function(a,b){a+="";void 0===b&&(b=d.escapeQuerySpace);try{return d.decode(b?a.replace(/\+/g,"%20"):a)}catch(c){return a}};var D={encode:"encode",decode:"decode"},l,t=function(a,b){return function(c){try{return d[b](c+"").replace(d.characters[a][b].expression,function(e){return d.characters[a][b].map[e]})}catch(e){return c}}};for(l in D)d[l+"PathSegment"]=t("pathname",D[l]),d[l+"UrnPathSegment"]=t("urnpath",D[l]);D=function(a,
-    b,c){return function(e){var f=c?function(K){return d[b](d[c](K))}:d[b];e=(e+"").split(a);for(var n=0,E=e.length;n<E;n++)e[n]=f(e[n]);return e.join(a)}};d.decodePath=D("/","decodePathSegment");d.decodeUrnPath=D(":","decodeUrnPathSegment");d.recodePath=D("/","encodePathSegment","decode");d.recodeUrnPath=D(":","encodeUrnPathSegment","decode");d.encodeReserved=t("reserved","encode");d.parse=function(a,b){b||={preventInvalidHostname:d.preventInvalidHostname};a=a.replace(d.leading_whitespace_expression,
-    "");a=a.replace(d.ascii_tab_whitespace,"");var c=a.indexOf("#");-1<c&&(b.fragment=a.substring(c+1)||null,a=a.substring(0,c));c=a.indexOf("?");-1<c&&(b.query=a.substring(c+1)||null,a=a.substring(0,c));a=a.replace(/^(https?|ftp|wss?)?:+[/\\]*/i,"$1://");a=a.replace(/^[/\\]{2,}/i,"//");"//"===a.substring(0,2)?(b.protocol=null,a=a.substring(2),a=d.parseAuthority(a,b)):(c=a.indexOf(":"),-1<c&&(b.protocol=a.substring(0,c)||null,b.protocol&&!b.protocol.match(d.protocol_expression)?b.protocol=void 0:"//"===
-    a.substring(c+1,c+3).replace(/\\/g,"/")?(a=a.substring(c+3),a=d.parseAuthority(a,b)):(a=a.substring(c+1),b.urn=!0)));b.path=a;return b};d.parseHost=function(a,b){a||="";a=a.replace(/\\/g,"/");var c=a.indexOf("/");-1===c&&(c=a.length);if("["===a.charAt(0)){var e=a.indexOf("]");b.hostname=a.substring(1,e)||null;b.port=a.substring(e+2,c)||null;"/"===b.port&&(b.port=null)}else{var f=a.indexOf(":");e=a.indexOf("/");f=a.indexOf(":",f+1);-1!==f&&(-1===e||f<e)?(b.hostname=a.substring(0,c)||null,b.port=null):
-    (e=a.substring(0,c).split(":"),b.hostname=e[0]||null,b.port=e[1]||null)}b.hostname&&"/"!==a.substring(c).charAt(0)&&(c++,a="/"+a);b.preventInvalidHostname&&d.ensureValidHostname(b.hostname,b.protocol);b.port&&d.ensureValidPort(b.port);return a.substring(c)||"/"};d.parseAuthority=function(a,b){a=d.parseUserinfo(a,b);return d.parseHost(a,b)};d.parseUserinfo=function(a,b){var c=a;-1!==a.indexOf("\\")&&(a=a.replace(/\\/g,"/"));var e=a.indexOf("/"),f=a.lastIndexOf("@",-1<e?e:a.length-1);-1<f&&(-1===e||
-    f<e)?(a=a.substring(0,f).split(":"),b.username=a[0]?d.decode(a[0]):null,a.shift(),b.password=a[0]?d.decode(a.join(":")):null,a=c.substring(f+1)):(b.username=null,b.password=null);return a};d.parseQuery=function(a,b){if(!a)return{};a=a.replace(/&+/g,"&").replace(/^\?*&*|&+$/g,"");if(!a)return{};var c={};a=a.split("&");for(var e=a.length,f,n,E=0;E<e;E++)if(f=a[E].split("="),n=d.decodeQuery(f.shift(),b),f=f.length?d.decodeQuery(f.join("="),b):null,"__proto__"!==n)if(A.call(c,n)){if("string"===typeof c[n]||
-    null===c[n])c[n]=[c[n]];c[n].push(f)}else c[n]=f;return c};d.build=function(a){var b="",c=!1;a.protocol&&(b+=a.protocol+":");a.urn||!b&&!a.hostname||(b+="//",c=!0);b+=d.buildAuthority(a)||"";"string"===typeof a.path&&("/"!==a.path.charAt(0)&&c&&(b+="/"),b+=a.path);"string"===typeof a.query&&a.query&&(b+="?"+a.query);"string"===typeof a.fragment&&a.fragment&&(b+="#"+a.fragment);return b};d.buildHost=function(a){var b="";if(a.hostname)b=d.ip6_expression.test(a.hostname)?b+("["+a.hostname+"]"):b+a.hostname;
-    else return"";a.port&&(b+=":"+a.port);return b};d.buildAuthority=function(a){return d.buildUserinfo(a)+d.buildHost(a)};d.buildUserinfo=function(a){var b="";a.username&&(b+=d.encode(a.username));a.password&&(b+=":"+d.encode(a.password));b&&(b+="@");return b};d.buildQuery=function(a,b,c){var e="",f,n;for(f in a)if("__proto__"!==f&&A.call(a,f))if(z(a[f])){var E={};var K=0;for(n=a[f].length;K<n;K++)void 0!==a[f][K]&&void 0===E[a[f][K]+""]&&(e+="&"+d.buildQueryParameter(f,a[f][K],c),!0!==b&&(E[a[f][K]+
-    ""]=!0))}else void 0!==a[f]&&(e+="&"+d.buildQueryParameter(f,a[f],c));return e.substring(1)};d.buildQueryParameter=function(a,b,c){return d.encodeQuery(a,c)+(null!==b?"="+d.encodeQuery(b,c):"")};d.addQuery=function(a,b,c){if("object"===typeof b)for(var e in b)A.call(b,e)&&d.addQuery(a,e,b[e]);else if("string"===typeof b)void 0===a[b]?a[b]=c:("string"===typeof a[b]&&(a[b]=[a[b]]),z(c)||(c=[c]),a[b]=(a[b]||[]).concat(c));else throw new TypeError("URI.addQuery() accepts an object, string as the name parameter");
-    };d.setQuery=function(a,b,c){if("object"===typeof b)for(var e in b)A.call(b,e)&&d.setQuery(a,e,b[e]);else if("string"===typeof b)a[b]=void 0===c?null:c;else throw new TypeError("URI.setQuery() accepts an object, string as the name parameter");};d.removeQuery=function(a,b,c){var e;if(z(b))for(c=0,e=b.length;c<e;c++)a[b[c]]=void 0;else if("RegExp"===B(b))for(e in a)b.test(e)&&(a[e]=void 0);else if("object"===typeof b)for(e in b)A.call(b,e)&&d.removeQuery(a,e,b[e]);else if("string"===typeof b)void 0!==
-    c?"RegExp"===B(c)?!z(a[b])&&c.test(a[b])?a[b]=void 0:a[b]=h(a[b],c):a[b]!==String(c)||z(c)&&1!==c.length?z(a[b])&&(a[b]=h(a[b],c)):a[b]=void 0:a[b]=void 0;else throw new TypeError("URI.removeQuery() accepts an object, string, RegExp as the first parameter");};d.hasQuery=function(a,b,c,e){switch(B(b)){case "String":break;case "RegExp":for(var f in a)if(A.call(a,f)&&b.test(f)&&(void 0===c||d.hasQuery(a,f,c)))return!0;return!1;case "Object":for(var n in b)if(A.call(b,n)&&!d.hasQuery(a,n,b[n]))return!1;
-    return!0;default:throw new TypeError("URI.hasQuery() accepts a string, regular expression or object as the name parameter");}switch(B(c)){case "Undefined":return b in a;case "Boolean":return a=!(z(a[b])?!a[b].length:!a[b]),c===a;case "Function":return!!c(a[b],b,a);case "Array":return z(a[b])?(e?p:F)(a[b],c):!1;case "RegExp":return z(a[b])?e?p(a[b],c):!1:!(!a[b]||!a[b].match(c));case "Number":c=String(c);case "String":return z(a[b])?e?p(a[b],c):!1:a[b]===c;default:throw new TypeError("URI.hasQuery() accepts undefined, boolean, string, number, RegExp, Function as the value parameter");
-    }};d.joinPaths=function(){for(var a=[],b=[],c=0,e=0;e<arguments.length;e++){var f=new d(arguments[e]);a.push(f);f=f.segment();for(var n=0;n<f.length;n++)"string"===typeof f[n]&&b.push(f[n]),f[n]&&c++}if(!b.length||!c)return new d("");b=(new d("")).segment(b);""!==a[0].path()&&"/"!==a[0].path().slice(0,1)||b.path("/"+b.path());return b.normalize()};d.commonPath=function(a,b){var c=Math.min(a.length,b.length),e;for(e=0;e<c;e++)if(a.charAt(e)!==b.charAt(e)){e--;break}if(1>e)return a.charAt(0)===b.charAt(0)&&
-    "/"===a.charAt(0)?"/":"";if("/"!==a.charAt(e)||"/"!==b.charAt(e))e=a.substring(0,e).lastIndexOf("/");return a.substring(0,e+1)};d.withinString=function(a,b,c){c||={};var e=c.start||d.findUri.start,f=c.end||d.findUri.end,n=c.trim||d.findUri.trim,E=c.parens||d.findUri.parens,K=/[a-z0-9-]=["']?$/i;for(e.lastIndex=0;;){var L=e.exec(a);if(!L)break;var P=L.index;if(c.ignoreHtml){var N=a.slice(Math.max(P-3,0),P);if(N&&K.test(N))continue}var O=P+a.slice(P).search(f);N=a.slice(P,O);for(O=-1;;){var Q=E.exec(N);
-    if(!Q)break;O=Math.max(O,Q.index+Q[0].length)}N=-1<O?N.slice(0,O)+N.slice(O).replace(n,""):N.replace(n,"");N.length<=L[0].length||c.ignore&&c.ignore.test(N)||(O=P+N.length,L=b(N,P,O,a),void 0===L?e.lastIndex=O:(L=String(L),a=a.slice(0,P)+L+a.slice(O),e.lastIndex=P+L.length))}e.lastIndex=0;return a};d.ensureValidHostname=function(a,b){var c=!!a,e=!1;b&&(e=p(d.hostProtocols,b));if(e&&!c)throw new TypeError("Hostname cannot be empty, if protocol is "+b);if(a&&a.match(d.invalid_hostname_characters)){if(!r)throw new TypeError('Hostname "'+
-    a+'" contains characters other than [A-Z0-9.-:_] and Punycode.js is not available');if(r.toASCII(a).match(d.invalid_hostname_characters))throw new TypeError('Hostname "'+a+'" contains characters other than [A-Z0-9.-:_]');}};d.ensureValidPort=function(a){if(a){var b=Number(a);if(!(/^[0-9]+$/.test(b)&&0<b&&65536>b))throw new TypeError('Port "'+a+'" is not a valid port');}};d.noConflict=function(a){if(a)return a={URI:this.noConflict()},m.URITemplate&&"function"===typeof m.URITemplate.noConflict&&(a.URITemplate=
-    m.URITemplate.noConflict()),m.IPv6&&"function"===typeof m.IPv6.noConflict&&(a.IPv6=m.IPv6.noConflict()),m.SecondLevelDomains&&"function"===typeof m.SecondLevelDomains.noConflict&&(a.SecondLevelDomains=m.SecondLevelDomains.noConflict()),a;m.URI===this&&(m.URI=v);return this};g.build=function(a){if(!0===a)this._deferred_build=!0;else if(void 0===a||this._deferred_build)this._string=d.build(this._parts),this._deferred_build=!1;return this};g.clone=function(){return new d(this)};g.valueOf=g.toString=
-    function(){return this.build(!1)._string};g.protocol=w("protocol");g.username=w("username");g.password=w("password");g.hostname=w("hostname");g.port=w("port");g.query=G("query","?");g.fragment=G("fragment","#");g.search=function(a,b){a=this.query(a,b);return"string"===typeof a&&a.length?"?"+a:a};g.hash=function(a,b){a=this.fragment(a,b);return"string"===typeof a&&a.length?"#"+a:a};g.pathname=function(a,b){if(void 0===a||!0===a)return b=this._parts.path||(this._parts.hostname?"/":""),a?(this._parts.urn?
-    d.decodeUrnPath:d.decodePath)(b):b;this._parts.path=this._parts.urn?a?d.recodeUrnPath(a):"":a?d.recodePath(a):"/";this.build(!b);return this};g.path=g.pathname;g.href=function(a,b){var c;if(void 0===a)return this.toString();this._string="";this._parts=d._parts();var e=a instanceof d,f="object"===typeof a&&(a.hostname||a.path||a.pathname);a.nodeName&&(f=d.getDomAttribute(a),a=a[f]||"",f=!1);!e&&f&&void 0!==a.pathname&&(a=a.toString());if("string"===typeof a||a instanceof String)this._parts=d.parse(String(a),
-    this._parts);else if(e||f){a=e?a._parts:a;for(c in a)"query"!==c&&A.call(this._parts,c)&&(this._parts[c]=a[c]);a.query&&this.query(a.query,!1)}else throw new TypeError("invalid input");this.build(!b);return this};g.is=function(a){var b=!1,c=!1,e=!1,f=!1,n=!1,E=!1,K=!1,L=!this._parts.urn;this._parts.hostname&&(L=!1,c=d.ip4_expression.test(this._parts.hostname),e=d.ip6_expression.test(this._parts.hostname),b=c||e,n=(f=!b)&&k&&k.has(this._parts.hostname),E=f&&d.idn_expression.test(this._parts.hostname),
-    K=f&&d.punycode_expression.test(this._parts.hostname));switch(a.toLowerCase()){case "relative":return L;case "absolute":return!L;case "domain":case "name":return f;case "sld":return n;case "ip":return b;case "ip4":case "ipv4":case "inet4":return c;case "ip6":case "ipv6":case "inet6":return e;case "idn":return E;case "url":return!this._parts.urn;case "urn":return!!this._parts.urn;case "punycode":return K}return null};var H=g.protocol,y=g.port,I=g.hostname;g.protocol=function(a,b){if(a&&(a=a.replace(/:(\/\/)?$/,
-    ""),!a.match(d.protocol_expression)))throw new TypeError('Protocol "'+a+"\" contains characters other than [A-Z0-9.+-] or doesn't start with [A-Z]");return H.call(this,a,b)};g.scheme=g.protocol;g.port=function(a,b){if(this._parts.urn)return void 0===a?"":this;void 0!==a&&(0===a&&(a=null),a&&(a+="",":"===a.charAt(0)&&(a=a.substring(1)),d.ensureValidPort(a)));return y.call(this,a,b)};g.hostname=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0!==a){var c={preventInvalidHostname:this._parts.preventInvalidHostname};
-    if("/"!==d.parseHost(a,c))throw new TypeError('Hostname "'+a+'" contains characters other than [A-Z0-9.-]');a=c.hostname;this._parts.preventInvalidHostname&&d.ensureValidHostname(a,this._parts.protocol)}return I.call(this,a,b)};g.origin=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0===a)return b=this.protocol(),this.authority()?(b?b+"://":"")+this.authority():"";a=d(a);this.protocol(a.protocol()).authority(a.authority()).build(!b);return this};g.host=function(a,b){if(this._parts.urn)return void 0===
-    a?"":this;if(void 0===a)return this._parts.hostname?d.buildHost(this._parts):"";if("/"!==d.parseHost(a,this._parts))throw new TypeError('Hostname "'+a+'" contains characters other than [A-Z0-9.-]');this.build(!b);return this};g.authority=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0===a)return this._parts.hostname?d.buildAuthority(this._parts):"";if("/"!==d.parseAuthority(a,this._parts))throw new TypeError('Hostname "'+a+'" contains characters other than [A-Z0-9.-]');this.build(!b);
-    return this};g.userinfo=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0===a)return(a=d.buildUserinfo(this._parts))?a.substring(0,a.length-1):a;"@"!==a[a.length-1]&&(a+="@");d.parseUserinfo(a,this._parts);this.build(!b);return this};g.resource=function(a,b){if(void 0===a)return this.path()+this.search()+this.hash();a=d.parse(a);this._parts.path=a.path;this._parts.query=a.query;this._parts.fragment=a.fragment;this.build(!b);return this};g.subdomain=function(a,b){if(this._parts.urn)return void 0===
-    a?"":this;if(void 0===a){if(!this._parts.hostname||this.is("IP"))return"";a=this._parts.hostname.length-this.domain().length-1;return this._parts.hostname.substring(0,a)||""}var c=this._parts.hostname.length-this.domain().length;c=this._parts.hostname.substring(0,c);c=new RegExp("^"+q(c));a&&"."!==a.charAt(a.length-1)&&(a+=".");if(-1!==a.indexOf(":"))throw new TypeError("Domains cannot contain colons");a&&d.ensureValidHostname(a,this._parts.protocol);this._parts.hostname=this._parts.hostname.replace(c,
-    a);this.build(!b);return this};g.domain=function(a,b){if(this._parts.urn)return void 0===a?"":this;"boolean"===typeof a&&(b=a,a=void 0);if(void 0===a){if(!this._parts.hostname||this.is("IP"))return"";if((a=this._parts.hostname.match(/\./g))&&2>a.length)return this._parts.hostname;b=this._parts.hostname.length-this.tld(b).length-1;b=this._parts.hostname.lastIndexOf(".",b-1)+1;return this._parts.hostname.substring(b)||""}if(!a)throw new TypeError("cannot set domain empty");if(-1!==a.indexOf(":"))throw new TypeError("Domains cannot contain colons");
-    d.ensureValidHostname(a,this._parts.protocol);if(!this._parts.hostname||this.is("IP"))this._parts.hostname=a;else{var c=new RegExp(q(this.domain())+"$");this._parts.hostname=this._parts.hostname.replace(c,a)}this.build(!b);return this};g.tld=function(a,b){if(this._parts.urn)return void 0===a?"":this;"boolean"===typeof a&&(b=a,a=void 0);if(void 0===a){if(!this._parts.hostname||this.is("IP"))return"";a=this._parts.hostname.lastIndexOf(".");a=this._parts.hostname.substring(a+1);return!0!==b&&k&&k.list[a.toLowerCase()]?
-    k.get(this._parts.hostname)||a:a}if(a)if(a.match(/[^a-zA-Z0-9-]/))if(k&&k.is(a)){var c=new RegExp(q(this.tld())+"$");this._parts.hostname=this._parts.hostname.replace(c,a)}else throw new TypeError('TLD "'+a+'" contains characters other than [A-Z0-9]');else{if(!this._parts.hostname||this.is("IP"))throw new ReferenceError("cannot set TLD on non-domain host");c=new RegExp(q(this.tld())+"$");this._parts.hostname=this._parts.hostname.replace(c,a)}else throw new TypeError("cannot set TLD empty");this.build(!b);
-    return this};g.directory=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0===a||!0===a){if(!this._parts.path&&!this._parts.hostname)return"";if("/"===this._parts.path)return"/";b=this._parts.path.length-this.filename().length-1;b=this._parts.path.substring(0,b)||(this._parts.hostname?"/":"");return a?d.decodePath(b):b}var c=this._parts.path.length-this.filename().length;c=this._parts.path.substring(0,c);c=new RegExp("^"+q(c));this.is("relative")||(a||="/","/"!==a.charAt(0)&&(a=
-    "/"+a));a&&"/"!==a.charAt(a.length-1)&&(a+="/");a=d.recodePath(a);this._parts.path=this._parts.path.replace(c,a);this.build(!b);return this};g.filename=function(a,b){if(this._parts.urn)return void 0===a?"":this;if("string"!==typeof a){if(!this._parts.path||"/"===this._parts.path)return"";b=this._parts.path.lastIndexOf("/");b=this._parts.path.substring(b+1);return a?d.decodePathSegment(b):b}var c=!1;"/"===a.charAt(0)&&(a=a.substring(1));a.match(/\.?\//)&&(c=!0);var e=new RegExp(q(this.filename())+
-    "$");a=d.recodePath(a);this._parts.path=this._parts.path.replace(e,a);c?this.normalizePath(b):this.build(!b);return this};g.suffix=function(a,b){if(this._parts.urn)return void 0===a?"":this;if(void 0===a||!0===a){if(!this._parts.path||"/"===this._parts.path)return"";b=this.filename();var c=b.lastIndexOf(".");if(-1===c)return"";b=b.substring(c+1);b=/^[a-z0-9%]+$/i.test(b)?b:"";return a?d.decodePathSegment(b):b}"."===a.charAt(0)&&(a=a.substring(1));c=this.suffix();if(c)var e=a?new RegExp(q(c)+"$"):
-    new RegExp(q("."+c)+"$");else{if(!a)return this;this._parts.path+="."+d.recodePath(a)}e&&(a=d.recodePath(a),this._parts.path=this._parts.path.replace(e,a));this.build(!b);return this};g.segment=function(a,b,c){var e=this._parts.urn?":":"/",f=this.path(),n="/"===f.substring(0,1);f=f.split(e);void 0!==a&&"number"!==typeof a&&(c=b,b=a,a=void 0);if(void 0!==a&&"number"!==typeof a)throw Error('Bad segment "'+a+'", must be 0-based integer');n&&f.shift();0>a&&(a=Math.max(f.length+a,0));if(void 0===b)return void 0===
-    a?f:f[a];if(null===a||void 0===f[a])if(z(b)){f=[];a=0;for(var E=b.length;a<E;a++)if(b[a].length||f.length&&f[f.length-1].length)f.length&&!f[f.length-1].length&&f.pop(),f.push(u(b[a]))}else{if(b||"string"===typeof b)b=u(b),""===f[f.length-1]?f[f.length-1]=b:f.push(b)}else b?f[a]=u(b):f.splice(a,1);n&&f.unshift("");return this.path(f.join(e),c)};g.segmentCoded=function(a,b,c){var e;"number"!==typeof a&&(c=b,b=a,a=void 0);if(void 0===b){a=this.segment(a,b,c);if(z(a)){var f=0;for(e=a.length;f<e;f++)a[f]=
-    d.decode(a[f])}else a=void 0!==a?d.decode(a):void 0;return a}if(z(b))for(f=0,e=b.length;f<e;f++)b[f]=d.encode(b[f]);else b="string"===typeof b||b instanceof String?d.encode(b):b;return this.segment(a,b,c)};var M=g.query;g.query=function(a,b){if(!0===a)return d.parseQuery(this._parts.query,this._parts.escapeQuerySpace);if("function"===typeof a){var c=d.parseQuery(this._parts.query,this._parts.escapeQuerySpace);a=a.call(this,c);this._parts.query=d.buildQuery(a||c,this._parts.duplicateQueryParameters,
-    this._parts.escapeQuerySpace);this.build(!b);return this}return void 0!==a&&"string"!==typeof a?(this._parts.query=d.buildQuery(a,this._parts.duplicateQueryParameters,this._parts.escapeQuerySpace),this.build(!b),this):M.call(this,a,b)};g.setQuery=function(a,b,c){var e=d.parseQuery(this._parts.query,this._parts.escapeQuerySpace);if("string"===typeof a||a instanceof String)e[a]=void 0!==b?b:null;else if("object"===typeof a)for(var f in a)A.call(a,f)&&(e[f]=a[f]);else throw new TypeError("URI.addQuery() accepts an object, string as the name parameter");
-    this._parts.query=d.buildQuery(e,this._parts.duplicateQueryParameters,this._parts.escapeQuerySpace);"string"!==typeof a&&(c=b);this.build(!c);return this};g.addQuery=function(a,b,c){var e=d.parseQuery(this._parts.query,this._parts.escapeQuerySpace);d.addQuery(e,a,void 0===b?null:b);this._parts.query=d.buildQuery(e,this._parts.duplicateQueryParameters,this._parts.escapeQuerySpace);"string"!==typeof a&&(c=b);this.build(!c);return this};g.removeQuery=function(a,b,c){var e=d.parseQuery(this._parts.query,
-    this._parts.escapeQuerySpace);d.removeQuery(e,a,b);this._parts.query=d.buildQuery(e,this._parts.duplicateQueryParameters,this._parts.escapeQuerySpace);"string"!==typeof a&&(c=b);this.build(!c);return this};g.hasQuery=function(a,b,c){var e=d.parseQuery(this._parts.query,this._parts.escapeQuerySpace);return d.hasQuery(e,a,b,c)};g.setSearch=g.setQuery;g.addSearch=g.addQuery;g.removeSearch=g.removeQuery;g.hasSearch=g.hasQuery;g.normalize=function(){return this._parts.urn?this.normalizeProtocol(!1).normalizePath(!1).normalizeQuery(!1).normalizeFragment(!1).build():
-    this.normalizeProtocol(!1).normalizeHostname(!1).normalizePort(!1).normalizePath(!1).normalizeQuery(!1).normalizeFragment(!1).build()};g.normalizeProtocol=function(a){"string"===typeof this._parts.protocol&&(this._parts.protocol=this._parts.protocol.toLowerCase(),this.build(!a));return this};g.normalizeHostname=function(a){this._parts.hostname&&(this.is("IDN")&&r?this._parts.hostname=r.toASCII(this._parts.hostname):this.is("IPv6")&&x&&(this._parts.hostname=x.best(this._parts.hostname)),this._parts.hostname=
-    this._parts.hostname.toLowerCase(),this.build(!a));return this};g.normalizePort=function(a){"string"===typeof this._parts.protocol&&this._parts.port===d.defaultPorts[this._parts.protocol]&&(this._parts.port=null,this.build(!a));return this};g.normalizePath=function(a){var b=this._parts.path;if(!b)return this;if(this._parts.urn)return this._parts.path=d.recodeUrnPath(this._parts.path),this.build(!a),this;if("/"===this._parts.path)return this;b=d.recodePath(b);var c="";if("/"!==b.charAt(0)){var e=!0;
-    b="/"+b}if("/.."===b.slice(-3)||"/."===b.slice(-2))b+="/";b=b.replace(/(\/(\.\/)+)|(\/\.$)/g,"/").replace(/\/{2,}/g,"/");e&&(c=b.substring(1).match(/^(\.\.\/)+/)||"")&&(c=c[0]);for(;;){var f=b.search(/\/\.\.(\/|$)/);if(-1===f)break;else if(0===f){b=b.substring(3);continue}var n=b.substring(0,f).lastIndexOf("/");-1===n&&(n=f);b=b.substring(0,n)+b.substring(f+3)}e&&this.is("relative")&&(b=c+b.substring(1));this._parts.path=b;this.build(!a);return this};g.normalizePathname=g.normalizePath;g.normalizeQuery=
-    function(a){"string"===typeof this._parts.query&&(this._parts.query.length?this.query(d.parseQuery(this._parts.query,this._parts.escapeQuerySpace)):this._parts.query=null,this.build(!a));return this};g.normalizeFragment=function(a){this._parts.fragment||(this._parts.fragment=null,this.build(!a));return this};g.normalizeSearch=g.normalizeQuery;g.normalizeHash=g.normalizeFragment;g.iso8859=function(){var a=d.encode,b=d.decode;d.encode=escape;d.decode=decodeURIComponent;try{this.normalize()}finally{d.encode=
-    a,d.decode=b}return this};g.unicode=function(){var a=d.encode,b=d.decode;d.encode=C;d.decode=unescape;try{this.normalize()}finally{d.encode=a,d.decode=b}return this};g.readable=function(){var a=this.clone();a.username("").password("").normalize();var b="";a._parts.protocol&&(b+=a._parts.protocol+"://");a._parts.hostname&&(a.is("punycode")&&r?(b+=r.toUnicode(a._parts.hostname),a._parts.port&&(b+=":"+a._parts.port)):b+=a.host());a._parts.hostname&&a._parts.path&&"/"!==a._parts.path.charAt(0)&&(b+="/");
-    b+=a.path(!0);if(a._parts.query){for(var c="",e=0,f=a._parts.query.split("&"),n=f.length;e<n;e++){var E=(f[e]||"").split("=");c+="&"+d.decodeQuery(E[0],this._parts.escapeQuerySpace).replace(/&/g,"%26");void 0!==E[1]&&(c+="="+d.decodeQuery(E[1],this._parts.escapeQuerySpace).replace(/&/g,"%26"))}b+="?"+c.substring(1)}return b+=d.decodeQuery(a.hash(),!0)};g.absoluteTo=function(a){var b=this.clone(),c=["protocol","username","password","hostname","port"],e,f;if(this._parts.urn)throw Error("URNs do not have any generally defined hierarchical components");
-    a instanceof d||(a=new d(a));if(b._parts.protocol)return b;b._parts.protocol=a._parts.protocol;if(this._parts.hostname)return b;for(e=0;f=c[e];e++)b._parts[f]=a._parts[f];b._parts.path?(".."===b._parts.path.substring(-2)&&(b._parts.path+="/"),"/"!==b.path().charAt(0)&&(c=(c=a.directory())?c:0===a.path().indexOf("/")?"/":"",b._parts.path=(c?c+"/":"")+b._parts.path,b.normalizePath())):(b._parts.path=a._parts.path,b._parts.query||(b._parts.query=a._parts.query));b.build();return b};g.relativeTo=function(a){var b=
-    this.clone().normalize();if(b._parts.urn)throw Error("URNs do not have any generally defined hierarchical components");a=(new d(a)).normalize();var c=b._parts;var e=a._parts;var f=b.path();a=a.path();if("/"!==f.charAt(0))throw Error("URI is already relative");if("/"!==a.charAt(0))throw Error("Cannot calculate a URI relative to another relative URI");c.protocol===e.protocol&&(c.protocol=null);if(c.username===e.username&&c.password===e.password&&null===c.protocol&&null===c.username&&null===c.password&&
-    c.hostname===e.hostname&&c.port===e.port)c.hostname=null,c.port=null;else return b.build();if(f===a)return c.path="",b.build();f=d.commonPath(f,a);if(!f)return b.build();e=e.path.substring(f.length).replace(/[^\/]*$/,"").replace(/.*?\//g,"../");c.path=e+c.path.substring(f.length)||"./";return b.build()};g.equals=function(a){var b=this.clone(),c=new d(a);a={};var e;b.normalize();c.normalize();if(b.toString()===c.toString())return!0;var f=b.query();var n=c.query();b.query("");c.query("");if(b.toString()!==
-    c.toString()||f.length!==n.length)return!1;b=d.parseQuery(f,this._parts.escapeQuerySpace);n=d.parseQuery(n,this._parts.escapeQuerySpace);for(e in b)if(A.call(b,e)){if(!z(b[e])){if(b[e]!==n[e])return!1}else if(!F(b[e],n[e]))return!1;a[e]=!0}for(e in n)if(A.call(n,e)&&!a[e])return!1;return!0};g.preventInvalidHostname=function(a){this._parts.preventInvalidHostname=!!a;return this};g.duplicateQueryParameters=function(a){this._parts.duplicateQueryParameters=!!a;return this};g.escapeQuerySpace=function(a){this._parts.escapeQuerySpace=
-    !!a;return this};return d});
-    (function(r,x){"object"===typeof module&&module.exports?module.exports=x(require("./URI")):"function"===typeof define&&define.amd?define(["./URI"],x):r.URITemplate=x(r.URI,r)})(this,function(r,x){function k(h){if(k._cache[h])return k._cache[h];if(!(this instanceof k))return new k(h);this.expression=h;k._cache[h]=this;return this}function m(h){this.data=h;this.cache={}}var d=x&&x.URITemplate,q=Object.prototype.hasOwnProperty,B=k.prototype,z={"":{prefix:"",separator:",",named:!1,empty_name_separator:!1,
-    encode:"encode"},"+":{prefix:"",separator:",",named:!1,empty_name_separator:!1,encode:"encodeReserved"},"#":{prefix:"#",separator:",",named:!1,empty_name_separator:!1,encode:"encodeReserved"},".":{prefix:".",separator:".",named:!1,empty_name_separator:!1,encode:"encode"},"/":{prefix:"/",separator:"/",named:!1,empty_name_separator:!1,encode:"encode"},";":{prefix:";",separator:";",named:!0,empty_name_separator:!1,encode:"encode"},"?":{prefix:"?",separator:"&",named:!0,empty_name_separator:!0,encode:"encode"},
-    "&":{prefix:"&",separator:"&",named:!0,empty_name_separator:!0,encode:"encode"}};k._cache={};k.EXPRESSION_PATTERN=/\{([^a-zA-Z0-9%_]?)([^\}]+)(\}|$)/g;k.VARIABLE_PATTERN=/^([^*:.](?:\.?[^*:.])*)((\*)|:(\d+))?$/;k.VARIABLE_NAME_PATTERN=/[^a-zA-Z0-9%_.]/;k.LITERAL_PATTERN=/[<>{}"`^| \\]/;k.expand=function(h,p,F){var u=z[h.operator],J=u.named?"Named":"Unnamed";h=h.variables;var C=[],w,G;for(G=0;w=h[G];G++){var v=p.get(w.name);if(0===v.type&&F&&F.strict)throw Error('Missing expansion value for variable "'+
-    w.name+'"');if(v.val.length){if(1<v.type&&w.maxlength)throw Error('Invalid expression: Prefix modifier not applicable to variable "'+w.name+'"');C.push(k["expand"+J](v,u,w.explode,w.explode&&u.separator||",",w.maxlength,w.name))}else v.type&&C.push("")}return C.length?u.prefix+C.join(u.separator):""};k.expandNamed=function(h,p,F,u,J,C){var w="",G=p.encode;p=p.empty_name_separator;var v=!h[G].length,g=2===h.type?"":r[G](C),A;var D=0;for(A=h.val.length;D<A;D++){if(J){var l=r[G](h.val[D][1].substring(0,
-    J));2===h.type&&(g=r[G](h.val[D][0].substring(0,J)))}else v?(l=r[G](h.val[D][1]),2===h.type?(g=r[G](h.val[D][0]),h[G].push([g,l])):h[G].push([void 0,l])):(l=h[G][D][1],2===h.type&&(g=h[G][D][0]));w&&(w+=u);F?w+=g+(p||l?"=":"")+l:(D||(w+=r[G](C)+(p||l?"=":"")),2===h.type&&(w+=g+","),w+=l)}return w};k.expandUnnamed=function(h,p,F,u,J){var C="",w=p.encode;p=p.empty_name_separator;var G=!h[w].length,v;var g=0;for(v=h.val.length;g<v;g++){if(J)var A=r[w](h.val[g][1].substring(0,J));else G?(A=r[w](h.val[g][1]),
-    h[w].push([2===h.type?r[w](h.val[g][0]):void 0,A])):A=h[w][g][1];C&&(C+=u);if(2===h.type){var D=J?r[w](h.val[g][0].substring(0,J)):h[w][g][0];C+=D;C=F?C+(p||A?"=":""):C+","}C+=A}return C};k.noConflict=function(){x.URITemplate===k&&(x.URITemplate=d);return k};B.expand=function(h,p){var F="";this.parts&&this.parts.length||this.parse();h instanceof m||(h=new m(h));for(var u=0,J=this.parts.length;u<J;u++)F+="string"===typeof this.parts[u]?this.parts[u]:k.expand(this.parts[u],h,p);return F};B.parse=function(){var h=
-    this.expression,p=k.EXPRESSION_PATTERN,F=k.VARIABLE_PATTERN,u=k.VARIABLE_NAME_PATTERN,J=k.LITERAL_PATTERN,C=[],w=0,G=function(t){if(t.match(J))throw Error('Invalid Literal "'+t+'"');return t};for(p.lastIndex=0;;){var v=p.exec(h);if(null===v){C.push(G(h.substring(w)));break}else C.push(G(h.substring(w,v.index))),w=v.index+v[0].length;if(!z[v[1]])throw Error('Unknown Operator "'+v[1]+'" in "'+v[0]+'"');if(!v[3])throw Error('Unclosed Expression "'+v[0]+'"');var g=v[2].split(",");for(var A=0,D=g.length;A<
-    D;A++){var l=g[A].match(F);if(null===l)throw Error('Invalid Variable "'+g[A]+'" in "'+v[0]+'"');if(l[1].match(u))throw Error('Invalid Variable Name "'+l[1]+'" in "'+v[0]+'"');g[A]={name:l[1],explode:!!l[3],maxlength:l[4]&&parseInt(l[4],10)}}if(!g.length)throw Error('Expression Missing Variable(s) "'+v[0]+'"');C.push({expression:v[0],operator:v[1],variables:g})}C.length||C.push(G(h));this.parts=C;return this};m.prototype.get=function(h){var p=this.data,F={type:0,val:[],encode:[],encodeReserved:[]};
-    if(void 0!==this.cache[h])return this.cache[h];this.cache[h]=F;p="[object Function]"===String(Object.prototype.toString.call(p))?p(h):"[object Function]"===String(Object.prototype.toString.call(p[h]))?p[h](h):p[h];if(void 0!==p&&null!==p)if("[object Array]"===String(Object.prototype.toString.call(p))){var u=0;for(h=p.length;u<h;u++)void 0!==p[u]&&null!==p[u]&&F.val.push([void 0,String(p[u])]);F.val.length&&(F.type=3)}else if("[object Object]"===String(Object.prototype.toString.call(p))){for(u in p)q.call(p,
-    u)&&void 0!==p[u]&&null!==p[u]&&F.val.push([u,String(p[u])]);F.val.length&&(F.type=2)}else F.type=1,F.val.push([void 0,String(p)]);return F};r.expand=function(h,p){h=(new k(h)).expand(p);return new r(h)};return k});
-    
@@ -2,6 +2,7 @@ package controller

 import (
 	"net/http"
+	"strings"

 	"github.com/mhsanaei/3x-ui/v2/web/middleware"
 	"github.com/mhsanaei/3x-ui/v2/web/service"
@@ -15,6 +16,9 @@ type APIController struct {
 	BaseController
 	inboundController *InboundController
 	serverController  *ServerController
+	nodeController    *NodeController
+	settingService    service.SettingService
+	userService       service.UserService
 	Tgbot             service.Tgbot
 }

@@ -26,8 +30,32 @@ func NewAPIController(g *gin.RouterGroup, customGeo *service.CustomGeoService) *
 }

 // checkAPIAuth is a middleware that returns 404 for unauthenticated API requests
-// to hide the existence of API endpoints from unauthorized users
+// to hide the existence of API endpoints from unauthorized users.
+//
+// Two auth paths are accepted:
+//  1. Authorization: Bearer <apiToken> — used by remote central panels
+//     polling this instance as a node. Matches via constant-time compare.
+//     Sets c.Set("api_authed", true) so CSRFMiddleware can short-circuit.
+//  2. Existing session cookie — used by browsers logged into the panel UI.
+//
+// Anything else falls through to a 404 so the API endpoints remain hidden.
 func (a *APIController) checkAPIAuth(c *gin.Context) {
+	auth := c.GetHeader("Authorization")
+	if strings.HasPrefix(auth, "Bearer ") {
+		tok := strings.TrimPrefix(auth, "Bearer ")
+		if a.settingService.MatchApiToken(tok) {
+			// Handlers like InboundController.addInbound assume a logged-in
+			// user (inbound.UserId = user.Id). Bearer callers have no
+			// session, so attach the first user as a fallback. Single-user
+			// panels are the norm here.
+			if u, err := a.userService.GetFirstUser(); err == nil {
+				session.SetAPIAuthUser(c, u)
+			}
+			c.Set("api_authed", true)
+			c.Next()
+			return
+		}
+	}
 	if !session.IsLogin(c) {
 		c.AbortWithStatus(http.StatusNotFound)
 		return
@@ -50,6 +78,10 @@ func (a *APIController) initRouter(g *gin.RouterGroup, customGeo *service.Custom
 	server := api.Group("/server")
 	a.serverController = NewServerController(server)

+	// Nodes API — multi-panel management
+	nodes := api.Group("/nodes")
+	a.nodeController = NewNodeController(nodes)
+
 	NewCustomGeoController(api.Group("/custom-geo"), customGeo)

 	// Extra routes
@@ -0,0 +1,116 @@
+package controller
+
+import (
+	"bytes"
+	"embed"
+	htmlpkg "html"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/gin-gonic/gin"
+
+	"github.com/mhsanaei/3x-ui/v2/config"
+	"github.com/mhsanaei/3x-ui/v2/logger"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
+)
+
+// distFS is filled in once at startup by the web package via SetDistFS.
+// It holds the Vite-built frontend (the `dist/<page>.html` files) so
+// the panel's HTML routes can serve them in production.
+//
+// We can't `go:embed` the dist directory directly from this package
+// because embed.FS only accepts paths relative to the source file —
+// dist/ lives one directory up. The web package owns the embed and
+// hands the FS to us through this setter.
+var distFS embed.FS
+
+// SetDistFS is called once during server bootstrap by the web package
+// to hand off the embedded `dist/` filesystem.
+func SetDistFS(fs embed.FS) {
+	distFS = fs
+}
+
+// distPageBuildTime is captured at startup so every served HTML page
+// reports a stable Last-Modified header and the browser's conditional
+// GETs can hit the 304 path on repeat loads.
+var distPageBuildTime = time.Now()
+
+// serveDistPage reads `dist/<name>` from the embedded FS and writes it
+// to the response. Two transforms run before send:
+//
+//  1. `<script>window.__X_UI_BASE_PATH__ = "..."</script>` is injected
+//     just before </head> so the AppSidebar's link generator sees the
+//     right prefix.
+//  2. Absolute Vite-emitted asset URLs (`/assets/...`) are rewritten
+//     to include the panel's basePath, so installs running under a
+//     custom URL prefix (e.g. `/myprefix/`) load the bundle from
+//     `/myprefix/assets/...` where the static handler actually lives.
+//
+// The HTML responses are served with no-cache so a panel update
+// reaches users on the next reload; the long-hashed JS/CSS files
+// under /assets/ stay cacheable indefinitely.
+func serveDistPage(c *gin.Context, name string) {
+	body, err := distFS.ReadFile("dist/" + name)
+	if err != nil {
+		c.String(http.StatusInternalServerError, "missing embedded page: %s", name)
+		return
+	}
+
+	basePath := c.GetString("base_path")
+	if basePath == "" {
+		basePath = "/"
+	}
+
+	// Rewrite asset URLs only when basePath isn't the root — for the
+	// default `/` install, Vite's `/assets/...` already resolves
+	// correctly and we save the byte churn.
+	if basePath != "/" {
+		// Vite emits these three attribute shapes for every entry's
+		// JS / CSS / modulepreload reference. Anchoring the search to
+		// the leading attribute name avoids matching unrelated /assets
+		// substrings inside any inlined script.
+		body = bytes.ReplaceAll(body, []byte(`src="/assets/`), []byte(`src="`+basePath+`assets/`))
+		body = bytes.ReplaceAll(body, []byte(`href="/assets/`), []byte(`href="`+basePath+`assets/`))
+	}
+
+	// Escape just enough that a hostile basePath setting can't break
+	// out of the JS string literal. The setting is admin-controlled
+	// but defense-in-depth costs nothing here.
+	jsEscape := strings.NewReplacer(
+		`\`, `\\`,
+		`"`, `\"`,
+		"\n", `\n`,
+		"\r", `\r`,
+		"<", `<`,
+		">", `>`,
+		"&", `&`,
+	)
+	escapedBase := jsEscape.Replace(basePath)
+	escapedVer := jsEscape.Replace(config.GetVersion())
+
+	// Embed a CSRF token in the served HTML the same way the legacy
+	// templates did via `<meta name="csrf-token">`. Without this the
+	// SPA login page has no way to acquire a token (the existing
+	// /panel/csrf-token endpoint sits behind checkLogin), and POST
+	// /login is rejected by CSRFMiddleware. EnsureCSRFToken creates
+	// a session token on first call even for anonymous visitors.
+	csrfToken, err := session.EnsureCSRFToken(c)
+	if err != nil {
+		logger.Warning("Unable to mint CSRF token for", name+":", err)
+		csrfToken = ""
+	}
+	csrfMeta := []byte(`<meta name="csrf-token" content="` + htmlpkg.EscapeString(csrfToken) + `">`)
+
+	inject := []byte(`<script>window.__X_UI_BASE_PATH__="` + escapedBase +
+		`";window.__X_UI_CUR_VER__="` + escapedVer + `";</script>`)
+	inject = append(inject, csrfMeta...)
+	inject = append(inject, []byte(`</head>`)...)
+	out := bytes.Replace(body, []byte("</head>"), inject, 1)
+
+	c.Header("Cache-Control", "no-cache, no-store, must-revalidate")
+	c.Header("Pragma", "no-cache")
+	c.Header("Expires", "0")
+	c.Header("Last-Modified", distPageBuildTime.UTC().Format(http.TimeFormat))
+	c.Data(http.StatusOK, "text/html; charset=utf-8", out)
+}
@@ -148,10 +148,23 @@ func (a *InboundController) addInbound(c *gin.Context) {
 	}
 	user := session.GetLoginUser(c)
 	inbound.UserId = user.Id
-	if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
-		inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
-	} else {
-		inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+	// Treat NodeID=0 as "no node" — gin's *int form binding can land on
+	// 0 when the field is absent or empty, and 0 is never a valid Node
+	// row id. Without this normalization the runtime layer would try to
+	// load Node id=0 and surface "record not found".
+	if inbound.NodeID != nil && *inbound.NodeID == 0 {
+		inbound.NodeID = nil
+	}
+	// When the central panel deploys an inbound to a remote node, it sends
+	// the Tag pre-computed (so both DBs agree on the identifier). Local
+	// UI submits don't include a Tag — we compute one from listen+port
+	// using the original collision-avoiding scheme.
+	if inbound.Tag == "" {
+		if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
+			inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+		} else {
+			inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+		}
 	}

 	inbound, needRestart, err := a.inboundService.AddInbound(inbound)
@@ -201,6 +214,13 @@ func (a *InboundController) updateInbound(c *gin.Context) {
 		jsonMsg(c, I18nWeb(c, "pages.inbounds.toasts.inboundUpdateSuccess"), err)
 		return
 	}
+	// Same NodeID=0 → nil normalisation as addInbound. UpdateInbound
+	// loads the existing row's NodeID from DB anyway (Phase 1 doesn't
+	// support migrating an inbound between nodes), but normalising here
+	// keeps the wire shape consistent.
+	if inbound.NodeID != nil && *inbound.NodeID == 0 {
+		inbound.NodeID = nil
+	}
 	inbound, needRestart, err := a.inboundService.UpdateInbound(inbound)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
@@ -458,10 +478,12 @@ func (a *InboundController) importInbound(c *gin.Context) {
 	user := session.GetLoginUser(c)
 	inbound.Id = 0
 	inbound.UserId = user.Id
-	if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
-		inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
-	} else {
-		inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+	if inbound.Tag == "" {
+		if inbound.Listen == "" || inbound.Listen == "0.0.0.0" || inbound.Listen == "::" || inbound.Listen == "::0" {
+			inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
+		} else {
+			inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
+		}
 	}

 	for index := range inbound.ClientStats {
@@ -40,6 +40,12 @@ func NewIndexController(g *gin.RouterGroup) *IndexController {
 func (a *IndexController) initRouter(g *gin.RouterGroup) {
 	g.GET("/", a.index)
 	g.GET("/logout", a.logout)
+	// Public CSRF endpoint — the SPA login page (served by Vite in
+	// dev or by serveDistPage in prod) needs a token to POST /login,
+	// but the panel-side /panel/csrf-token sits behind checkLogin.
+	// EnsureCSRFToken creates a session token even for anonymous
+	// callers, so any pre-login flow can bootstrap from here.
+	g.GET("/csrf-token", a.csrfToken)

 	g.POST("/login", middleware.CSRFMiddleware(), a.login)
 	g.POST("/getTwoFactorEnable", middleware.CSRFMiddleware(), a.getTwoFactorEnable)
@@ -51,7 +57,7 @@ func (a *IndexController) index(c *gin.Context) {
 		c.Redirect(http.StatusTemporaryRedirect, "panel/")
 		return
 	}
-	html(c, "login.html", "pages.login.title", nil)
+	serveDistPage(c, "login.html")
 }

 // login handles user authentication and session creation.
@@ -145,6 +151,17 @@ func (a *IndexController) logout(c *gin.Context) {
 	c.Redirect(http.StatusTemporaryRedirect, c.GetString("base_path"))
 }

+// csrfToken returns the session CSRF token. Public — the login page
+// needs a token before authenticating.
+func (a *IndexController) csrfToken(c *gin.Context) {
+	token, err := session.EnsureCSRFToken(c)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"success": false, "msg": err.Error()})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"success": true, "obj": token})
+}
+
 // getTwoFactorEnable retrieves the current status of two-factor authentication.
 func (a *IndexController) getTwoFactorEnable(c *gin.Context) {
 	status, err := a.settingService.GetTwoFactorEnable()
@@ -0,0 +1,211 @@
+package controller
+
+import (
+	"context"
+	"fmt"
+	"slices"
+	"strconv"
+	"time"
+
+	"github.com/mhsanaei/3x-ui/v2/database/model"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
+
+	"github.com/gin-gonic/gin"
+)
+
+// NodeController exposes CRUD + probe endpoints for managing remote
+// 3x-ui panels registered as nodes. All routes mount under
+// /panel/api/nodes/ via APIController.initRouter and inherit its
+// session-or-bearer auth from checkAPIAuth.
+type NodeController struct {
+	nodeService service.NodeService
+}
+
+// NewNodeController creates the controller and wires its routes onto g.
+func NewNodeController(g *gin.RouterGroup) *NodeController {
+	a := &NodeController{}
+	a.initRouter(g)
+	return a
+}
+
+func (a *NodeController) initRouter(g *gin.RouterGroup) {
+	g.GET("/list", a.list)
+	g.GET("/get/:id", a.get)
+
+	g.POST("/add", a.add)
+	g.POST("/update/:id", a.update)
+	g.POST("/del/:id", a.del)
+	g.POST("/setEnable/:id", a.setEnable)
+
+	// /test takes a transient payload (no DB write) so the user can
+	// validate connectivity before saving the node.
+	g.POST("/test", a.test)
+	// /probe/:id triggers a synchronous probe of an already-saved node
+	// without waiting for the next 10s heartbeat tick.
+	g.POST("/probe/:id", a.probe)
+	// /history/:id/:metric/:bucket returns up to 60 averaged buckets of
+	// the per-node CPU or Mem time series collected by the heartbeat job.
+	g.GET("/history/:id/:metric/:bucket", a.history)
+}
+
+func (a *NodeController) list(c *gin.Context) {
+	nodes, err := a.nodeService.GetAll()
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.list"), err)
+		return
+	}
+	jsonObj(c, nodes, nil)
+}
+
+func (a *NodeController) get(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	n, err := a.nodeService.GetById(id)
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.obtain"), err)
+		return
+	}
+	jsonObj(c, n, nil)
+}
+
+func (a *NodeController) add(c *gin.Context) {
+	n := &model.Node{}
+	if err := c.ShouldBind(n); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.add"), err)
+		return
+	}
+	if err := a.nodeService.Create(n); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.add"), err)
+		return
+	}
+	jsonMsgObj(c, I18nWeb(c, "pages.nodes.toasts.add"), n, nil)
+}
+
+func (a *NodeController) update(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	n := &model.Node{}
+	if err := c.ShouldBind(n); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), err)
+		return
+	}
+	if err := a.nodeService.Update(id, n); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), err)
+		return
+	}
+	jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), nil)
+}
+
+func (a *NodeController) del(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	if err := a.nodeService.Delete(id); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.delete"), err)
+		return
+	}
+	jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.delete"), nil)
+}
+
+// setEnable accepts a JSON body { "enable": bool } so the toggle
+// switch can flip a node without sending the whole record back.
+func (a *NodeController) setEnable(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	body := struct {
+		Enable bool `json:"enable" form:"enable"`
+	}{}
+	if err := c.ShouldBind(&body); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), err)
+		return
+	}
+	if err := a.nodeService.SetEnable(id, body.Enable); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), err)
+		return
+	}
+	jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.update"), nil)
+}
+
+// test runs Probe against a transient Node payload without writing to
+// the DB. Used by the form modal to validate connectivity before save.
+func (a *NodeController) test(c *gin.Context) {
+	n := &model.Node{}
+	if err := c.ShouldBind(n); err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.test"), err)
+		return
+	}
+	// Reuse normalize-style defaults so the form can leave scheme/basePath
+	// blank and still get a sensible probe URL. We do this by round-tripping
+	// through Create's validator without the DB write — a tiny duplication
+	// here vs. exposing normalize publicly.
+	if n.Scheme == "" {
+		n.Scheme = "https"
+	}
+	if n.BasePath == "" {
+		n.BasePath = "/"
+	}
+
+	ctx, cancel := context.WithTimeout(c.Request.Context(), 6*time.Second)
+	defer cancel()
+	patch, err := a.nodeService.Probe(ctx, n)
+	jsonObj(c, patch.ToUI(err == nil), nil)
+}
+
+// probe triggers a one-off probe against a saved node and persists
+// the result so the dashboard updates immediately, without waiting
+// for the next heartbeat tick.
+func (a *NodeController) probe(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	n, err := a.nodeService.GetById(id)
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.nodes.toasts.obtain"), err)
+		return
+	}
+	ctx, cancel := context.WithTimeout(c.Request.Context(), 6*time.Second)
+	defer cancel()
+	patch, probeErr := a.nodeService.Probe(ctx, n)
+	if probeErr != nil {
+		patch.Status = "offline"
+	} else {
+		patch.Status = "online"
+	}
+	_ = a.nodeService.UpdateHeartbeat(id, patch)
+	jsonObj(c, patch.ToUI(probeErr == nil), nil)
+}
+
+// history returns averaged buckets of the per-node CPU/Mem time-series.
+// Mirrors the system-level /panel/api/server/history/:metric/:bucket
+// endpoint so the frontend can reuse the same fetch logic.
+func (a *NodeController) history(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "get"), err)
+		return
+	}
+	metric := c.Param("metric")
+	if !slices.Contains(service.NodeMetricKeys, metric) {
+		jsonMsg(c, "invalid metric", fmt.Errorf("unknown metric"))
+		return
+	}
+	bucket, err := strconv.Atoi(c.Param("bucket"))
+	if err != nil || bucket <= 0 || !allowedHistoryBuckets[bucket] {
+		jsonMsg(c, "invalid bucket", fmt.Errorf("unsupported bucket"))
+		return
+	}
+	jsonObj(c, a.nodeService.AggregateNodeMetric(id, metric, bucket, 60), nil)
+}
@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"net/http"
 	"regexp"
+	"slices"
 	"strconv"
 	"time"

@@ -45,6 +46,7 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {

 	g.GET("/status", a.status)
 	g.GET("/cpuHistory/:bucket", a.getCpuHistoryBucket)
+	g.GET("/history/:metric/:bucket", a.getMetricHistoryBucket)
 	g.GET("/getXrayVersion", a.getXrayVersion)
 	g.GET("/getPanelUpdateInfo", a.getPanelUpdateInfo)
 	g.GET("/getConfigJson", a.getConfigJson)
@@ -67,12 +69,13 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {
 	g.POST("/getNewEchCert", a.getNewEchCert)
 }

-// refreshStatus updates the cached server status and collects CPU history.
+// refreshStatus updates the cached server status and collects time-series
+// metrics. CPU/Mem/Net/Online/Load are all written in one call so the
+// SystemHistoryModal's tabs share an identical x-axis.
 func (a *ServerController) refreshStatus() {
 	a.lastStatus = a.serverService.GetStatus(a.lastStatus)
-	// collect cpu history when status is fresh
 	if a.lastStatus != nil {
-		a.serverService.AppendCpuSample(time.Now(), a.lastStatus.Cpu)
+		a.serverService.AppendStatusSample(time.Now(), a.lastStatus)
 		// Broadcast status update via WebSocket
 		websocket.BroadcastStatus(a.lastStatus)
 	}
@@ -92,7 +95,22 @@ func (a *ServerController) startTask() {
 // status returns the current server status information.
 func (a *ServerController) status(c *gin.Context) { jsonObj(c, a.lastStatus, nil) }

+// allowedHistoryBuckets is the bucket-second whitelist shared by both
+// /cpuHistory/:bucket and /history/:metric/:bucket. Restricting it
+// prevents callers from triggering arbitrary aggregation work and keeps
+// the front-end's bucket selector self-documenting.
+var allowedHistoryBuckets = map[int]bool{
+	2:   true, // Real-time view
+	30:  true, // 30s intervals
+	60:  true, // 1m intervals
+	120: true, // 2m intervals
+	180: true, // 3m intervals
+	300: true, // 5m intervals
+}
+
 // getCpuHistoryBucket retrieves aggregated CPU usage history based on the specified time bucket.
+// Kept for back-compat; new callers should use /history/cpu/:bucket which
+// returns {"t","v"} (uniform across all metrics) instead of {"t","cpu"}.
 func (a *ServerController) getCpuHistoryBucket(c *gin.Context) {
 	bucketStr := c.Param("bucket")
 	bucket, err := strconv.Atoi(bucketStr)
@@ -100,15 +118,7 @@ func (a *ServerController) getCpuHistoryBucket(c *gin.Context) {
 		jsonMsg(c, "invalid bucket", fmt.Errorf("bad bucket"))
 		return
 	}
-	allowed := map[int]bool{
-		2:   true, // Real-time view
-		30:  true, // 30s intervals
-		60:  true, // 1m intervals
-		120: true, // 2m intervals
-		180: true, // 3m intervals
-		300: true, // 5m intervals
-	}
-	if !allowed[bucket] {
+	if !allowedHistoryBuckets[bucket] {
 		jsonMsg(c, "invalid bucket", fmt.Errorf("unsupported bucket"))
 		return
 	}
@@ -116,6 +126,23 @@ func (a *ServerController) getCpuHistoryBucket(c *gin.Context) {
 	jsonObj(c, points, nil)
 }

+// getMetricHistoryBucket returns up to 60 buckets of history for a single
+// system metric (cpu, mem, netUp, netDown, online, load1/5/15). The
+// SystemHistoryModal calls one endpoint per active tab.
+func (a *ServerController) getMetricHistoryBucket(c *gin.Context) {
+	metric := c.Param("metric")
+	if !slices.Contains(service.SystemMetricKeys, metric) {
+		jsonMsg(c, "invalid metric", fmt.Errorf("unknown metric"))
+		return
+	}
+	bucket, err := strconv.Atoi(c.Param("bucket"))
+	if err != nil || bucket <= 0 || !allowedHistoryBuckets[bucket] {
+		jsonMsg(c, "invalid bucket", fmt.Errorf("unsupported bucket"))
+		return
+	}
+	jsonObj(c, a.serverService.AggregateSystemMetric(metric, bucket, 60), nil)
+}
+
 // getXrayVersion retrieves available Xray versions, with caching for 1 minute.
 func (a *ServerController) getXrayVersion(c *gin.Context) {
 	now := time.Now().Unix()
@@ -44,6 +44,8 @@ func (a *SettingController) initRouter(g *gin.RouterGroup) {
 	g.POST("/updateUser", a.updateUser)
 	g.POST("/restartPanel", a.restartPanel)
 	g.GET("/getDefaultJsonConfig", a.getDefaultXrayConfig)
+	g.GET("/getApiToken", a.getApiToken)
+	g.POST("/regenerateApiToken", a.regenerateApiToken)
 }

 // getAllSetting retrieves all current settings.
@@ -121,3 +123,27 @@ func (a *SettingController) getDefaultXrayConfig(c *gin.Context) {
 	}
 	jsonObj(c, defaultJsonConfig, nil)
 }
+
+// getApiToken returns the panel's API token used by remote central
+// panels to authenticate as Bearer tokens. The token is auto-generated
+// on first read so existing installs upgrade transparently.
+func (a *SettingController) getApiToken(c *gin.Context) {
+	tok, err := a.settingService.GetApiToken()
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	jsonObj(c, tok, nil)
+}
+
+// regenerateApiToken rotates the API token. Any central panel that had
+// the old value cached will start failing heartbeats until it is updated
+// with the new token — that's intentional, it's the whole point of rotation.
+func (a *SettingController) regenerateApiToken(c *gin.Context) {
+	tok, err := a.settingService.RegenerateApiToken()
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.settings.toasts.modifySettings"), err)
+		return
+	}
+	jsonObj(c, tok, nil)
+}
@@ -7,10 +7,8 @@ import (
 	"net/netip"
 	"strings"

-	"github.com/mhsanaei/3x-ui/v2/config"
 	"github.com/mhsanaei/3x-ui/v2/logger"
 	"github.com/mhsanaei/3x-ui/v2/web/entity"
-	"github.com/mhsanaei/3x-ui/v2/web/session"

 	"github.com/gin-gonic/gin"
 )
@@ -116,46 +114,6 @@ func pureJsonMsg(c *gin.Context, statusCode int, success bool, msg string) {
 	})
 }

-// html renders an HTML template with the provided data and title.
-func html(c *gin.Context, name string, title string, data gin.H) {
-	if data == nil {
-		data = gin.H{}
-	}
-	data["title"] = title
-	csrfToken, err := session.EnsureCSRFToken(c)
-	if err != nil {
-		logger.Warning("Unable to create CSRF token:", err)
-	} else {
-		data["csrf_token"] = csrfToken
-	}
-	host := c.GetHeader("X-Forwarded-Host")
-	if host == "" {
-		host = c.GetHeader("X-Real-IP")
-	}
-	if host == "" {
-		var err error
-		host, _, err = net.SplitHostPort(c.Request.Host)
-		if err != nil {
-			host = c.Request.Host
-		}
-	}
-	data["host"] = host
-	data["request_uri"] = c.Request.RequestURI
-	data["base_path"] = c.GetString("base_path")
-	c.HTML(http.StatusOK, name, getContext(data))
-}
-
-// getContext adds version and other context data to the provided gin.H.
-func getContext(h gin.H) gin.H {
-	a := gin.H{
-		"cur_ver": config.GetVersion(),
-	}
-	for key, value := range h {
-		a[key] = value
-	}
-	return a
-}
-
 // isAjax checks if the request is an AJAX request.
 func isAjax(c *gin.Context) bool {
 	return c.GetHeader("X-Requested-With") == "XMLHttpRequest"
@@ -1,7 +1,11 @@
 package controller

 import (
+	"net/http"
+
+	"github.com/mhsanaei/3x-ui/v2/web/entity"
 	"github.com/mhsanaei/3x-ui/v2/web/middleware"
+	"github.com/mhsanaei/3x-ui/v2/web/session"

 	"github.com/gin-gonic/gin"
 )
@@ -29,29 +33,57 @@ func (a *XUIController) initRouter(g *gin.RouterGroup) {

 	g.GET("/", a.index)
 	g.GET("/inbounds", a.inbounds)
+	g.GET("/nodes", a.nodes)
 	g.GET("/settings", a.settings)
 	g.GET("/xray", a.xraySettings)

+	// SPA pages built by Vite don't have a server-rendered <meta name="csrf-token">,
+	// so they fetch the session token via this endpoint at startup and replay it
+	// on subsequent unsafe requests through axios.
+	g.GET("/csrf-token", a.csrfToken)
+
 	a.settingController = NewSettingController(g)
 	a.xraySettingController = NewXraySettingController(g)
 }

+// All four panel pages now serve the Vue 3 builds from web/dist/
+// instead of rendering the legacy Go templates. Each handler is a
+// thin wrapper around serveDistPage so the basePath injection +
+// no-cache headers stay centralised.
+
 // index renders the main panel index page.
 func (a *XUIController) index(c *gin.Context) {
-	html(c, "index.html", "pages.index.title", nil)
+	serveDistPage(c, "index.html")
 }

 // inbounds renders the inbounds management page.
 func (a *XUIController) inbounds(c *gin.Context) {
-	html(c, "inbounds.html", "pages.inbounds.title", nil)
+	serveDistPage(c, "inbounds.html")
+}
+
+// nodes renders the multi-panel nodes management page.
+func (a *XUIController) nodes(c *gin.Context) {
+	serveDistPage(c, "nodes.html")
 }

 // settings renders the settings management page.
 func (a *XUIController) settings(c *gin.Context) {
-	html(c, "settings.html", "pages.settings.title", nil)
+	serveDistPage(c, "settings.html")
 }

 // xraySettings renders the Xray settings page.
 func (a *XUIController) xraySettings(c *gin.Context) {
-	html(c, "xray.html", "pages.xray.title", nil)
+	serveDistPage(c, "xray.html")
+}
+
+// csrfToken returns the session CSRF token to authenticated SPA clients.
+// The endpoint is GET (a safe method) so it bypasses CSRFMiddleware itself,
+// but checkLogin still gates the response — anonymous callers get 401/redirect.
+func (a *XUIController) csrfToken(c *gin.Context) {
+	token, err := session.EnsureCSRFToken(c)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, entity.Msg{Success: false, Msg: err.Error()})
+		return
+	}
+	c.JSON(http.StatusOK, entity.Msg{Success: true, Obj: token})
 }
@@ -1,106 +0,0 @@
-{{ define "page/head_start" }}
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="renderer" content="webkit">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="robots" content="noindex,nofollow">
-  {{ if .csrf_token }}<meta name="csrf-token" content="{{ .csrf_token }}">{{ end }}
-  <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue/antd.min.css">
-  <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.min.css?{{ .cur_ver }}">
-  <style>
-    [v-cloak] {
-      display: none;
-    }
-
-    /* vazirmatn-regular - arabic_latin_latin-ext */
-    @font-face {
-      font-display: swap;
-      font-family: 'Vazirmatn';
-      font-style: normal;
-      font-weight: 400;
-      src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
-      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
-    }
-
-    body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    }
-
-    /* mobile touch scrolling for tabs */
-    @media (max-width: 576px) {
-      .ant-tabs-nav-container {
-        overflow-x: auto !important;
-        -webkit-overflow-scrolling: touch;
-        scroll-behavior: smooth;
-        overscroll-behavior-x: contain;
-        white-space: nowrap;
-        max-width: 100%;
-        padding: 0 !important;
-        /* Remove padding for arrows */
-      }
-
-      .ant-tabs-nav-wrap {
-        overflow: visible !important;
-        padding: 0 !important;
-      }
-
-      .ant-tabs-nav-scroll {
-        overflow: visible !important;
-        box-shadow: none !important;
-      }
-
-      .ant-tabs-nav {
-        display: flex !important;
-        transform: none !important;
-        /* Disable JS transform */
-        width: auto !important;
-        margin: 0 !important;
-      }
-
-      .ant-tabs-tab-prev,
-      .ant-tabs-tab-next {
-        display: none !important;
-        /* Hide arrows */
-      }
-
-      .ant-tabs-nav-container::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  </style>
-  <title>{{ .host }} – {{ i18n .title}}</title>
-  {{ end }}
-
-  {{ define "page/head_end" }}
-</head>
-{{ end }}
-
-{{ define "page/body_start" }}
-
-<body>
-  <div id="message"></div>
-  {{ end }}
-
-  {{ define "page/body_scripts" }}
-  <script src="{{ .base_path }}assets/vue/vue.min.js?{{ .cur_ver }}"></script>
-  <script src="{{ .base_path }}assets/moment/moment.min.js"></script>
-  <script src="{{ .base_path }}assets/ant-design-vue/antd.min.js"></script>
-  <script src="{{ .base_path }}assets/axios/axios.min.js?{{ .cur_ver }}"></script>
-  <script src="{{ .base_path }}assets/qs/qs.min.js"></script>
-  <script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
-  <script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
-  <script>
-    const basePath = '{{ .base_path }}';
-    axios.defaults.baseURL = basePath;
-  </script>
-  <script src="{{ .base_path }}assets/js/websocket.js?{{ .cur_ver }}"></script>
-  {{ end }}
-
-  {{ define "page/body_end" }}
-</body>
-
-</html>
-{{ end }}
@@ -1,301 +0,0 @@
-{{define "component/aClientTable"}}
-<template slot="actions" slot-scope="text, client, index">
-  <a-tooltip>
-    <template slot="title">{{ i18n "qrCode" }}</template>
-    <a-icon :style="{ fontSize: '22px', marginInlineStart: '14px' }" class="normal-icon" type="qrcode"
-      v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
-  </a-tooltip>
-  <a-tooltip>
-    <template slot="title">{{ i18n "pages.client.edit" }}</template>
-    <a-icon :style="{ fontSize: '22px' }" class="normal-icon" type="edit"
-      @click="openEditClient(record.id,client);"></a-icon>
-  </a-tooltip>
-  <a-tooltip>
-    <template slot="title">{{ i18n "info" }}</template>
-    <a-icon :style="{ fontSize: '22px' }" class="normal-icon" type="info-circle"
-      @click="showInfo(record.id,client);"></a-icon>
-  </a-tooltip>
-  <a-tooltip>
-    <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-    <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)"
-      title='{{ i18n "pages.inbounds.resetTrafficContent"}}' :overlay-class-name="themeSwitcher.currentTheme"
-      ok-text='{{ i18n "reset"}}' cancel-text='{{ i18n "cancel"}}'>
-      <a-icon slot="icon" type="question-circle-o" :style="{ color: 'var(--color-primary-100)'}"></a-icon>
-      <a-icon :style="{ fontSize: '22px', cursor: 'pointer' }" class="normal-icon" type="retweet"
-        v-if="client.email.length > 0"></a-icon>
-    </a-popconfirm>
-  </a-tooltip>
-  <a-tooltip>
-    <template slot="title">
-      <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
-    </template>
-    <a-popconfirm @confirm="delClient(record.id,client,false)" title='{{ i18n "pages.inbounds.deleteClientContent"}}'
-      :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger"
-      cancel-text='{{ i18n "cancel"}}'>
-      <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
-      <a-icon :style="{ fontSize: '22px', cursor: 'pointer' }" class="delete-icon" type="delete"
-        v-if="isRemovable(record.id)"></a-icon>
-    </a-popconfirm>
-  </a-tooltip>
-</template>
-<template slot="enable" slot-scope="text, client, index">
-  <a-switch v-model="client.enable" @change="switchEnableClient(record.id, client, $event)"></a-switch>
-</template>
-<template slot="online" slot-scope="text, client, index">
-  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-    <template slot="content">
-      {{ i18n "lastOnline" }}: [[ formatLastOnline(client.email) ]]
-    </template>
-    <template v-if="client.enable && isClientOnline(client.email)">
-      <a-tag color="green">{{ i18n "online" }}</a-tag>
-    </template>
-    <template v-else>
-      <a-tag>{{ i18n "offline" }}</a-tag>
-    </template>
-  </a-popover>
-</template>
-<template slot="client" slot-scope="text, client">
-  <a-space direction="horizontal" :size="2" style="flex-wrap:nowrap;min-width:0">
-    <a-tooltip>
-      <template slot="title">
-        <template v-if="isClientDepleted(record, client.email)">{{ i18n "depleted" }}</template>
-        <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-        <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
-      </template>
-      <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''"
-        :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
-    </a-tooltip>
-    <a-space direction="vertical" :size="2" style="min-width:0;overflow:hidden">
-      <a-tooltip :title="client.email" :overlay-class-name="themeSwitcher.currentTheme">
-        <span class="client-email">[[ client.email ]]</span>
-      </a-tooltip>
-      <template v-if="client.comment && client.comment.trim()">
-        <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
-          <template slot="title">
-            [[ client.comment ]]
-          </template>
-          <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
-        </a-tooltip>
-        <span v-else class="client-comment">[[ client.comment ]]</span>
-      </template>
-    </a-space>
-  </a-space>
-</template>
-<template slot="traffic" slot-scope="text, client">
-  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-    <template slot="content" v-if="client.email">
-      <table cellpadding="2" width="100%">
-        <tr>
-          <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
-          <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
-        </tr>
-        <tr v-if="client.totalGB > 0">
-          <td>{{ i18n "remained" }}</td>
-          <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
-        </tr>
-      </table>
-    </template>
-    <div class="tr-table-box">
-      <div class="tr-table-rt">[[ SizeFormatter.sizeFormat(getSumStats(record, client.email)) ]]</div>
-      <div class="tr-table-bar" v-if="!client.enable">
-        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
-      </div>
-      <div class="tr-table-bar" v-else-if="client.totalGB > 0">
-        <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
-      </div>
-      <div v-else class="infinite-bar tr-table-bar">
-        <a-progress :show-info="false" :percent="100"></a-progress>
-      </div>
-      <div class="tr-table-rt">
-        <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
-        <span v-else class="tr-infinity-ch">&infin;</span>
-      </div>
-    </div>
-  </a-popover>
-</template>
-
-<template slot="allTime" slot-scope="text, client">
-  <a-tag>[[ SizeFormatter.sizeFormat(getAllTimeClient(record, client.email)) ]]</a-tag>
-</template>
-<template slot="expiryTime" slot-scope="text, client, index">
-  <template v-if="client.expiryTime !=0 && client.reset >0">
-    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-      <template slot="content">
-        <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
-        <span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
-      </template>
-      <div class="tr-table-box">
-        <div class="tr-table-rt">[[ IntlUtil.formatRelativeTime(client.expiryTime) ]]</div>
-        <div class="infinite-bar tr-table-bar">
-          <a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
-        </div>
-        <div class="tr-table-lt">[[ client.reset + "d" ]]</div>
-      </div>
-    </a-popover>
-  </template>
-  <template v-else>
-    <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
-      <template slot="content">
-        <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
-        <span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
-      </template>
-      <a-tag :style="{ minWidth: '50px', border: 'none' }"
-        :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[
-        IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
-    </a-popover>
-    <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"
-      :style="{ border: 'none' }" class="infinite-tag">
-      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-        <path
-          d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
-          fill="currentColor"></path>
-      </svg>
-    </a-tag>
-  </template>
-</template>
-<template slot="actionMenu" slot-scope="text, client, index">
-  <a-dropdown :trigger="['click']">
-    <a-icon @click="e => e.preventDefault()" type="ellipsis" :style="{ fontSize: '20px' }"></a-icon>
-    <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
-      <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
-        <a-icon :style="{ fontSize: '14px' }" type="qrcode"></a-icon>
-        {{ i18n "qrCode" }}
-      </a-menu-item>
-      <a-menu-item @click="openEditClient(record.id,client);">
-        <a-icon :style="{ fontSize: '14px' }" type="edit"></a-icon>
-        {{ i18n "pages.client.edit" }}
-      </a-menu-item>
-      <a-menu-item @click="showInfo(record.id,client);">
-        <a-icon :style="{ fontSize: '14px' }" type="info-circle"></a-icon>
-        {{ i18n "info" }}
-      </a-menu-item>
-      <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
-        <a-icon :style="{ fontSize: '14px' }" type="retweet"></a-icon>
-        {{ i18n "pages.inbounds.resetTraffic" }}
-      </a-menu-item>
-      <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
-        <a-icon :style="{ fontSize: '14px' }" type="delete"></a-icon>
-        <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
-      </a-menu-item>
-      <a-menu-item>
-        <a-switch v-model="client.enable" size="small"
-          @change="switchEnableClient(record.id, client, $event)"></a-switch>
-        {{ i18n "enable"}}
-      </a-menu-item>
-    </a-menu>
-  </a-dropdown>
-</template>
-<template slot="info" slot-scope="text, client, index">
-  <a-popover :placement="isMobile ? 'bottomLeft' : 'bottomRight'" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
-    <template slot="content">
-      <table>
-        <tr>
-          <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
-        </tr>
-        <tr>
-          <td width="65px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[
-            SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
-          <td width="90px" v-if="!client.enable">
-            <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false"
-              :percent="statsProgress(record, client.email)" />
-          </td>
-          <td width="90px" v-else-if="client.totalGB > 0">
-            <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-              <template slot="content" v-if="client.email">
-                <table cellpadding="2" width="100%">
-                  <tr>
-                    <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
-                    <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
-                  </tr>
-                  <tr>
-                    <td>{{ i18n "remained" }}</td>
-                    <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
-                  </tr>
-                </table>
-              </template>
-              <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false"
-                :status="isClientDepleted(record, client.email)? 'exception' : ''"
-                :percent="statsProgress(record, client.email)" />
-            </a-popover>
-          </td>
-          <td width="90px" v-else class="infinite-bar">
-            <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'" :show-info="false"
-              :percent="100"></a-progress>
-          </td>
-          <td width="60px">
-            <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
-            <span v-else class="tr-infinity-ch">&infin;</span>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3" :style="{ textAlign: 'center' }">
-            <a-divider :style="{ margin: '0', borderCollapse: 'separate' }"></a-divider>
-            {{ i18n "pages.inbounds.expireDate" }}
-          </td>
-        </tr>
-        <tr>
-          <template v-if="client.expiryTime !=0 && client.reset >0">
-            <td width="65px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[
-              IntlUtil.formatRelativeTime(client.expiryTime) ]] </td>
-            <td width="90px" class="infinite-bar">
-              <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                <template slot="content">
-                  <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
-                  <span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
-                </template>
-                <a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''"
-                  :percent="expireProgress(client.expiryTime, client.reset)" />
-              </a-popover>
-            </td>
-            <td width="50px">[[ client.reset + "d" ]]</td>
-          </template>
-          <template v-else>
-            <td colspan="3" :style="{ textAlign: 'center' }">
-              <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
-                <template slot="content">
-                  <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
-                  <span v-else>[[ IntlUtil.formatDate(client.expiryTime) ]]</span>
-                </template>
-                <a-tag :style="{ minWidth: '50px', border: 'none' }"
-                  :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[
-                  IntlUtil.formatRelativeTime(client.expiryTime) ]] </a-tag>
-              </a-popover>
-              <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"
-                class="infinite-tag">
-                <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                  <path
-                    d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
-                    fill="currentColor"></path>
-                </svg>
-              </a-tag>
-          </template>
-          </td>
-        </tr>
-      </table>
-    </template>
-    <a-badge>
-      <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled"
-        :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
-      <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
-        <a-icon type="solution"></a-icon>
-      </a-button>
-    </a-badge>
-  </a-popover>
-</template>
-<template slot="createdAt" slot-scope="text, client, index">
-  <template v-if="client.created_at">
-    [[ IntlUtil.formatDate(client.created_at) ]]
-  </template>
-  <template v-else>
-    -
-  </template>
-</template>
-<template slot="updatedAt" slot-scope="text, client, index">
-  <template v-if="client.updated_at">
-    [[ IntlUtil.formatDate(client.updated_at) ]]
-  </template>
-  <template v-else>
-    -
-  </template>
-</template>
-{{end}}
@@ -1,44 +0,0 @@
-{{define "component/customStatistic"}}
-<template>
-  <a-statistic :title="title" :value="value">
-    <template #prefix>
-      <slot name="prefix"></slot>
-    </template>
-    <template #suffix>
-      <slot name="suffix"></slot>
-    </template>
-  </a-statistic>
-</template>
-{{end}}
-
-{{define "component/aCustomStatistic"}}
-<style>
-  .dark .ant-statistic-content {
-    color: var(--dark-color-text-primary)
-  }
-
-  .dark .ant-statistic-title {
-    color: rgba(255, 255, 255, 0.55)
-  }
-
-  .ant-statistic-content {
-    font-size: 16px;
-  }
-</style>
-
-<script>
-  Vue.component('a-custom-statistic', {
-    props: {
-      'title': {
-        type: String,
-        required: false,
-      },
-      'value': {
-        type: String,
-        required: false
-      }
-    },
-    template: `{{template "component/customStatistic" .}}`,
-  });
-</script>
-{{end}}
@@ -1,73 +0,0 @@
-{{define "component/persianDatepickerTemplate"}}
-<template>
-    <div>
-        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
-            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
-            :placeholder="placeholder">
-            <template #addonAfter>
-                <a-icon type="calendar" :style="{ fontSize: '14px', opacity: '0.5' }" />
-            </template>
-        </a-input>
-    </div>
-</template>
-{{end}}
-
-{{define "component/aPersianDatepicker"}}
-<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
-<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
-<script>
-    const persianDatepicker = {};
-
-    Vue.component('a-persian-datepicker', {
-        props: {
-            'format': {
-                type: undefined,
-                required: false,
-            },
-            'value': {
-                type: String,
-                required: false,
-            },
-            'placeholder': {
-                type: String,
-                required: false,
-            },
-        },
-        template: `{{template "component/persianDatepickerTemplate" .}}`,
-        data() {
-            return {
-                date: '',
-                persianDatepicker,
-            };
-        },
-        watch: {
-            value: function(date) {
-                this.date = this.convertToJalalian(date)
-            }
-        },
-        mounted() {
-            this.date = this.convertToJalalian(this.value)
-            this.listenToDatepicker()
-        },
-        methods: {
-            convertToGregorian(date) {
-                return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) :
-                    null
-            },
-            convertToJalalian(date) {
-                return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
-            },
-            listenToDatepicker() {
-                jalaliDatepicker.startWatch({
-                    time: true,
-                    zIndex: '9999',
-                    hideAfterChange: true,
-                    useDropDownYears: false,
-                    changeMonthRotateYear: true,
-                });
-            },
-        }
-    });
-</script>
-{{end}}
@@ -1,49 +0,0 @@
-{{define "component/settingListItem"}}
-<a-list-item :style="{ padding: padding }">
-    <a-row :gutter="[8,16]">
-        <a-col :lg="24" :xl="12">
-            <a-list-item-meta>
-                <template #title>
-                    <slot name="title"></slot>
-                </template>
-                <template #description>
-                    <slot name="description"></slot>
-                </template>
-            </a-list-item-meta>
-        </a-col>
-        <a-col :lg="24" :xl="12">
-            <slot name="control"></slot>
-        </a-col>
-    </a-row>
-</a-list-item>
-{{end}}
-
-{{define "component/aSettingListItem"}}
-<script>
-    Vue.component('a-setting-list-item', {
-        props: {
-            'paddings': {
-                type: String,
-                required: false,
-                defaultValue: "default",
-                validator: function(value) {
-                    return ['small', 'default'].includes(value)
-                }
-            }
-        },
-        template: `{{ template "component/settingListItem" }}`,
-        computed: {
-            padding() {
-                switch (this.paddings) {
-                    case "small":
-                        return "10px 20px !important"
-                        break;
-                    case "default":
-                        return "20px !important"
-                        break;
-                }
-            }
-        }
-    })
-</script>
-{{end}}
@@ -1,102 +0,0 @@
-{{define "component/sidebar/content"}}
-<template>
-    <div class="ant-sidebar">
-        <a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed"
-            @collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md">
-            <a-theme-switch></a-theme-switch>
-            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
-                @click="({key}) => openLink(key)">
-                <a-menu-item v-for="tab in tabs" :key="tab.key">
-                    <a-icon :type="tab.icon"></a-icon>
-                    <span v-text="tab.title"></span>
-                </a-menu-item>
-            </a-menu>
-        </a-layout-sider>
-        <a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible"
-            :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }">
-            <div class="drawer-handle" @click="toggleDrawer" slot="handle">
-                <a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon>
-            </div>
-            <a-theme-switch></a-theme-switch>
-            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
-                @click="({key}) => openLink(key)">
-                <a-menu-item v-for="tab in tabs" :key="tab.key">
-                    <a-icon :type="tab.icon"></a-icon>
-                    <span v-text="tab.title"></span>
-                </a-menu-item>
-            </a-menu>
-        </a-drawer>
-    </div>
-</template>
-{{end}}
-
-{{define "component/aSidebar"}}
-<style>
-    .ant-sidebar>.ant-layout-sider {
-        height: 100%;
-    }
-</style>
-
-<script>
-    const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed"
-
-    Vue.component('a-sidebar', {
-        data() {
-            return {
-                tabs: [{
-                        key: '{{ .base_path }}panel/',
-                        icon: 'dashboard',
-                        title: '{{ i18n "menu.dashboard"}}'
-                    },
-                    {
-                        key: '{{ .base_path }}panel/inbounds',
-                        icon: 'user',
-                        title: '{{ i18n "menu.inbounds"}}'
-                    },
-                    {
-                        key: '{{ .base_path }}panel/settings',
-                        icon: 'setting',
-                        title: '{{ i18n "menu.settings"}}'
-                    },
-                    {
-                        key: '{{ .base_path }}panel/xray',
-                        icon: 'tool',
-                        title: '{{ i18n "menu.xray"}}'
-                    },
-                    {
-                        key: '{{ .base_path }}logout/',
-                        icon: 'logout',
-                        title: '{{ i18n "menu.logout"}}'
-                    },
-                ],
-                activeTab: [
-                    '{{ .request_uri }}'
-                ],
-                visible: false,
-                collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)),
-            }
-        },
-        methods: {
-            openLink(key) {
-                return key.startsWith('http') ?
-                    window.open(key) :
-                    location.href = key
-            },
-            closeDrawer() {
-                this.visible = false;
-            },
-            toggleDrawer() {
-                this.visible = !this.visible;
-            },
-            collapseHandle(collapsed, type) {
-                if (type === "clickTrigger") {
-                    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
-
-                    this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY));
-                }
-            }
-        },
-        template: `{{template "component/sidebar/content" .}}`,
-    });
-</script>
-{{end}}
@@ -1,302 +0,0 @@
-{{define "component/sortableTableTrigger"}}
-<a-icon type="drag" class="sortable-icon"
-        role="button" tabindex="0"
-        :aria-label="ariaLabel"
-        @pointerdown="onPointerDown"
-        @keydown="onKeyDown" />
-{{end}}
-
-{{define "component/aTableSortable"}}
-<script>
-  /**
-   * Sortable a-table — drag-to-reorder rows using Pointer Events.
-   *
-   * Why a rewrite:
-   * - Old impl set `draggable: true` on every row, which (a) broke text
-   *   selection inside cells, (b) let HTML5 start a drag from anywhere on
-   *   the row even when the state machine wasn't primed, producing
-   *   "phantom drags" that didn't reorder anything.
-   * - HTML5 drag has no touch support on most mobile browsers and no
-   *   keyboard fallback at all.
-   * - The drag-image hack cloned the entire table — slow on big lists.
-   *
-   * New design:
-   * - Only the explicit drag handle initiates a drag, via Pointer Events
-   *   (one API for mouse + touch + pen). Rows are not draggable.
-   * - During drag, `data-source` is reordered live: the source row visually
-   *   slides into the target slot and other rows shift around it. The live
-   *   reorder IS the visual feedback — no separate floating preview.
-   * - On commit, emits `onsort(sourceIndex, targetIndex)` — same event name
-   *   and signature as before, so existing call sites stay unchanged.
-   * - Keyboard support: the handle is focusable; ArrowUp / ArrowDown move
-   *   the row by one; Escape cancels a pointer-drag in progress.
-   */
-  const ROW_CLASS = 'sortable-row';
-
-  Vue.component('a-table-sortable', {
-    data() {
-      return {
-        // null when idle. While dragging:
-        //   { sourceIndex, targetIndex, pointerId, sourceKey }
-        drag: null,
-      };
-    },
-    props: {
-      'data-source': { type: undefined, required: false },
-      'customRow':   { type: undefined, required: false },
-      'row-key':     { type: undefined, required: false },
-    },
-    inheritAttrs: false,
-    provide() {
-      const sortable = {};
-      // Methods exposed to the trigger child via inject. Defined as getters
-      // so `this` binds to the component instance, not the plain object.
-      Object.defineProperty(sortable, 'startDrag', {
-        enumerable: true,
-        get: () => this.startDrag,
-      });
-      Object.defineProperty(sortable, 'moveByKeyboard', {
-        enumerable: true,
-        get: () => this.moveByKeyboard,
-      });
-      return { sortable };
-    },
-    beforeDestroy() {
-      this.detachPointerListeners();
-    },
-    methods: {
-      isDragging() { return this.drag !== null; },
-      // Resolve the row key for a record. Used to identify the source row
-      // even after data-source is reordered live during drag.
-      keyOf(record, fallback) {
-        const rk = this.rowKey;
-        if (typeof rk === 'function') return rk(record);
-        if (typeof rk === 'string')   return record && record[rk];
-        return fallback;
-      },
-      startDrag(e, sourceIndex) {
-        // Primary button only (mouse left / first touch).
-        if (e.button != null && e.button !== 0) return;
-        e.preventDefault();
-        const record = this.dataSource && this.dataSource[sourceIndex];
-        this.drag = {
-          sourceIndex,
-          targetIndex: sourceIndex,
-          pointerId: e.pointerId,
-          sourceKey: this.keyOf(record, sourceIndex),
-        };
-        // Capture the pointer so move/up keep firing even if the cursor leaves
-        // the icon. Try/catch because some older browsers throw on capture.
-        if (e.target && typeof e.target.setPointerCapture === 'function' && e.pointerId != null) {
-          try { e.target.setPointerCapture(e.pointerId); } catch (_) {}
-        }
-        this.attachPointerListeners();
-      },
-      attachPointerListeners() {
-        this._onMove   = (ev) => this.onPointerMove(ev);
-        this._onUp     = (ev) => this.onPointerUp(ev);
-        this._onCancel = (ev) => this.cancelDrag(ev);
-        document.addEventListener('pointermove',   this._onMove,   true);
-        document.addEventListener('pointerup',     this._onUp,     true);
-        document.addEventListener('pointercancel', this._onCancel, true);
-        document.addEventListener('keydown',       this._onCancel, true);
-      },
-      detachPointerListeners() {
-        if (!this._onMove) return;
-        document.removeEventListener('pointermove',   this._onMove,   true);
-        document.removeEventListener('pointerup',     this._onUp,     true);
-        document.removeEventListener('pointercancel', this._onCancel, true);
-        document.removeEventListener('keydown',       this._onCancel, true);
-        this._onMove = this._onUp = this._onCancel = null;
-      },
-      onPointerMove(e) {
-        if (!this.drag) return;
-        if (this.drag.pointerId != null && e.pointerId !== this.drag.pointerId) return;
-        // Hit-test: find which row the pointer Y is inside (or closest to).
-        const rows = this.$el.querySelectorAll('tr.' + ROW_CLASS);
-        if (!rows.length) return;
-        const y = e.clientY;
-        const firstRect = rows[0].getBoundingClientRect();
-        const lastRect  = rows[rows.length - 1].getBoundingClientRect();
-        let target = this.drag.targetIndex;
-        if (y < firstRect.top) {
-          target = 0;
-        } else if (y > lastRect.bottom) {
-          target = rows.length - 1;
-        } else {
-          for (let i = 0; i < rows.length; i++) {
-            const rect = rows[i].getBoundingClientRect();
-            if (y >= rect.top && y <= rect.bottom) {
-              target = i;
-              break;
-            }
-          }
-        }
-        if (target !== this.drag.targetIndex) {
-          this.drag = Object.assign({}, this.drag, { targetIndex: target });
-        }
-      },
-      onPointerUp(e) {
-        if (!this.drag) return;
-        if (this.drag.pointerId != null && e.pointerId !== this.drag.pointerId) return;
-        this.commitDrag();
-      },
-      commitDrag() {
-        const d = this.drag;
-        this.detachPointerListeners();
-        this.drag = null;
-        if (d && d.sourceIndex !== d.targetIndex) {
-          this.$emit('onsort', d.sourceIndex, d.targetIndex);
-        }
-      },
-      cancelDrag(e) {
-        // Triggered by pointercancel and keydown handlers. For keydown, only
-        // act on Escape; otherwise let the event flow to other listeners.
-        if (e && e.type === 'keydown' && e.key !== 'Escape') return;
-        this.detachPointerListeners();
-        this.drag = null;
-      },
-      // Keyboard reorder: commit immediately by emitting onsort. No "preview"
-      // state needed since the move is one row up or down.
-      moveByKeyboard(direction, sourceIndex) {
-        const target = sourceIndex + direction;
-        if (target < 0 || target >= (this.dataSource || []).length) return;
-        this.$emit('onsort', sourceIndex, target);
-      },
-      customRowRender(record, index) {
-        const parent = (typeof this.customRow === 'function')
-          ? (this.customRow(record, index) || {})
-          : {};
-        const d = this.drag;
-        const isSource = d && this.keyOf(record, index) === d.sourceKey;
-        return Object.assign({}, parent, {
-          // CRITICAL: no `draggable: true`. Drag is initiated only by the
-          // handle icon. Leaves text-selection on cells working normally.
-          attrs: Object.assign({}, parent.attrs || {}),
-          class: Object.assign({}, parent.class || {}, {
-            [ROW_CLASS]: true,
-            'sortable-source-row': !!isSource,
-          }),
-        });
-      },
-    },
-    computed: {
-      // Render-data: dataSource with the source row spliced into targetIndex.
-      // When idle or when target equals source, returns the original list
-      // unchanged so Ant Design's table treats this as a stable reference.
-      records() {
-        const d = this.drag;
-        if (!d || d.sourceIndex === d.targetIndex) return this.dataSource;
-        const list = (this.dataSource || []).slice();
-        const [item] = list.splice(d.sourceIndex, 1);
-        list.splice(d.targetIndex, 0, item);
-        return list;
-      },
-    },
-    render(h) {
-      return h('a-table', {
-        class: { 'sortable-table': true, 'sortable-table-dragging': this.isDragging() },
-        props: Object.assign({}, this.$attrs, {
-          'data-source': this.records,
-          'row-key': this.rowKey,
-          customRow: (record, index) => this.customRowRender(record, index),
-          locale: {
-            filterConfirm: `{{ i18n "confirm" }}`,
-            filterReset:   `{{ i18n "reset" }}`,
-            emptyText:     `{{ i18n "noData" }}`,
-          },
-        }),
-        on: this.$listeners,
-        scopedSlots: this.$scopedSlots,
-      }, this.$slots.default);
-    },
-  });
-
-  Vue.component('a-table-sort-trigger', {
-    template: `{{template "component/sortableTableTrigger" .}}`,
-    props: {
-      'item-index': { type: undefined, required: false },
-    },
-    inject: ['sortable'],
-    computed: {
-      ariaLabel() {
-        // Localised label is overkill for an internal a11y string; English is
-        // fine here and matches screen-reader expectations across locales.
-        return 'Drag to reorder row ' + (((this.itemIndex == null ? 0 : this.itemIndex) + 1));
-      },
-    },
-    methods: {
-      onPointerDown(e) {
-        if (this.sortable && this.sortable.startDrag) {
-          this.sortable.startDrag(e, this.itemIndex);
-        }
-      },
-      onKeyDown(e) {
-        if (!this.sortable || !this.sortable.moveByKeyboard) return;
-        if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          this.sortable.moveByKeyboard(-1, this.itemIndex);
-        } else if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          this.sortable.moveByKeyboard(+1, this.itemIndex);
-        }
-      },
-    },
-  });
-</script>
-
-<style>
-  /* Drag handle — focusable, keyboard-accessible, touch-friendly hit area.
-     `touch-action: none` is critical: it tells the browser not to interpret
-     touch on the icon as a scroll/zoom gesture, so pointermove fires for
-     drag-tracking. Without it, mobile browsers eat the pointer events. */
-  .sortable-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: grab;
-    padding: 6px;
-    border-radius: 6px;
-    color: rgba(255, 255, 255, 0.5);
-    transition: background-color 0.15s ease, color 0.15s ease;
-    user-select: none;
-    touch-action: none;
-  }
-  .sortable-icon:hover {
-    color: rgba(255, 255, 255, 0.85);
-    background: rgba(255, 255, 255, 0.06);
-  }
-  .sortable-icon:active { cursor: grabbing; }
-  .sortable-icon:focus-visible {
-    outline: 2px solid #008771;
-    outline-offset: 2px;
-  }
-
-  .light .sortable-icon { color: rgba(0, 0, 0, 0.45); }
-  .light .sortable-icon:hover {
-    color: rgba(0, 0, 0, 0.85);
-    background: rgba(0, 0, 0, 0.05);
-  }
-
-  /* While dragging: the source row gets a soft green wash so the user can
-     track which row is being moved. Other rows transition smoothly as the
-     data-source is reordered. */
-  .sortable-table-dragging .sortable-source-row > td {
-    background: rgba(0, 135, 113, 0.10) !important;
-    transition: background-color 0.18s ease;
-  }
-  .sortable-table-dragging .sortable-source-row .routing-index,
-  .sortable-table-dragging .sortable-source-row .outbound-index {
-    opacity: 0.45;
-  }
-  .sortable-table-dragging .sortable-row > td {
-    transition: background-color 0.18s ease;
-  }
-  /* Disable text selection across the whole table while a drag is in
-     progress — selection during drag is never useful and looks broken. */
-  .sortable-table-dragging,
-  .sortable-table-dragging * {
-    user-select: none;
-  }
-</style>
-{{end}}
@@ -1,122 +0,0 @@
-{{define "component/themeSwitchTemplate"}}
-<template>
-  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
-    <a-sub-menu>
-      <span slot="title">
-        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-        <span>{{ i18n "menu.theme" }}</span>
-      </span>
-      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
-        <span>{{ i18n "menu.dark" }}</span>
-        <a-switch :style="{ marginLeft: '2px' }" size="small" :default-checked="themeSwitcher.isDarkTheme"
-          @change="themeSwitcher.toggleTheme()"></a-switch>
-      </a-menu-item>
-      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
-        @mousedown="themeSwitcher.animationsOffUltra()">
-        <span>{{ i18n "menu.ultraDark" }}</span>
-        <a-checkbox :style="{ marginLeft: '2px' }" :checked="themeSwitcher.isUltra"
-          @click="themeSwitcher.toggleUltra()"></a-checkbox>
-      </a-menu-item>
-    </a-sub-menu>
-  </a-menu>
-</template>
-{{end}}
-
-{{define "component/themeSwitchTemplateLogin"}}
-<template>
-  <a-space @mousedown="themeSwitcher.animationsOff()" id="change-theme" direction="vertical" :size="10"
-    :style="{ width: '100%' }">
-    <a-space direction="horizontal" size="small">
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
-        @change="themeSwitcher.toggleTheme()"></a-switch>
-      <span>{{ i18n "menu.dark" }}</span>
-    </a-space>
-    <a-space v-if="themeSwitcher.isDarkTheme" direction="horizontal" size="small">
-      <a-checkbox :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
-      <span>{{ i18n "menu.ultraDark" }}</span>
-    </a-space>
-  </a-space>
-</template>
-{{end}}
-
-{{define "component/aThemeSwitch"}}
-<script>
-  function createThemeSwitcher() {
-    const darkModePreference = localStorage.getItem('dark-mode');
-    const isDarkTheme = darkModePreference === null ? true : darkModePreference === 'true';
-    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
-    if (isUltra) {
-      document.documentElement.setAttribute('data-theme', 'ultra-dark');
-    }
-    const theme = isDarkTheme ? 'dark' : 'light';
-    document.querySelector('body').setAttribute('class', theme);
-    return {
-      animationsOff() {
-        document.documentElement.setAttribute('data-theme-animations', 'off');
-        const themeAnimations = document.querySelector('#change-theme');
-        themeAnimations.addEventListener('mouseleave', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-        themeAnimations.addEventListener('touchend', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-      },
-      animationsOffUltra() {
-        document.documentElement.setAttribute('data-theme-animations', 'off');
-        const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
-        themeAnimationsUltra.addEventListener('mouseleave', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-        themeAnimationsUltra.addEventListener('touchend', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-      },
-      isDarkTheme,
-      isUltra,
-      get currentTheme() {
-        return this.isDarkTheme ? 'dark' : 'light';
-      },
-      toggleTheme() {
-        this.isDarkTheme = !this.isDarkTheme;
-        localStorage.setItem('dark-mode', this.isDarkTheme);
-        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
-        document.getElementById('message').className = themeSwitcher.currentTheme;
-      },
-      toggleUltra() {
-        this.isUltra = !this.isUltra;
-        if (this.isUltra) {
-          document.documentElement.setAttribute('data-theme', 'ultra-dark');
-        } else {
-          document.documentElement.removeAttribute('data-theme');
-        }
-        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
-      }
-    };
-  }
-  const themeSwitcher = createThemeSwitcher();
-  Vue.component('a-theme-switch', {
-    template: `{{template "component/themeSwitchTemplate" .}}`,
-    data: () => ({
-      themeSwitcher
-    }),
-    mounted() {
-      this.$message.config({
-        getContainer: () => document.getElementById('message')
-      });
-      document.getElementById('message').className = themeSwitcher.currentTheme;
-    }
-  });
-  Vue.component('a-theme-switch-login', {
-    template: `{{template "component/themeSwitchTemplateLogin" .}}`,
-    data: () => ({
-      themeSwitcher
-    }),
-    mounted() {
-      this.$message.config({
-        getContainer: () => document.getElementById('message')
-      });
-      document.getElementById('message').className = themeSwitcher.currentTheme;
-    }
-  });
-</script>
-{{end}}
@@ -1,199 +0,0 @@
-{{define "form/client"}}
-<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
-    <a-switch v-model="client.enable"></a-switch>
-  </a-form-item>
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-        </template>
-        {{ i18n "pages.inbounds.email" }}
-        <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.email"></a-input>
-  </a-form-item>
-  <a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "reset" }}</span>
-        </template>
-        {{ i18n "password" }}
-        <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"
-          @click="client.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)" type="sync"></a-icon>
-        <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"
-          type="sync">
-        </a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.password"></a-input>
-  </a-form-item>
-  <a-form-item v-if="inbound.protocol === Protocols.HYSTERIA">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "reset" }}</span>
-        </template>
-        Auth Password
-        <a-icon @click="client.auth = RandomUtil.randomSeq(10)" type="sync"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.auth"></a-input>
-  </a-form-item>
-  <a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "reset" }}</span>
-        </template>
-        ID
-        <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.id"></a-input>
-  </a-form-item>
-  <a-form-item v-if="inbound.protocol === Protocols.VMESS" label='{{ i18n "security" }}'>
-    <a-select v-model="client.security" :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key ]]</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item v-if="client.email && app.subSettings?.enable">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-        </template>
-        Subscription
-        <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.subId"></a-input>
-  </a-form-item>
-  <a-form-item v-if="client.email && app.tgBotEnable">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-        </template>
-        Telegram ChatID
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number :style="{ width: '50%' }" v-model.number="client.tgId" min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item v-if="client.email" label='{{ i18n "comment" }}'>
-    <a-input v-model.trim="client.comment"></a-input>
-  </a-form-item>
-  <a-form-item v-if="app.ipLimitEnable">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.IPLimitDesc"}}</span>
-        </template>
-        <span>{{ i18n "pages.inbounds.IPLimit"}} </span>
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number v-model.number="client.limitIp" min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item v-if="app.ipLimitEnable && client.limitIp > 0 && client.email && isEdit">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
-        </template>
-        <span>{{ i18n "pages.inbounds.IPLimitlog" }} </span>
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-tooltip>
-      <template slot="title">
-        <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
-      </template>
-      <span :style="{ color: '#FF4D4F' }">
-        <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
-      </span>
-    </a-tooltip>
-    <a-form layout="block">
-      <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)" placeholder="Click To Get IPs"
-        :auto-size="{ minRows: 5, maxRows: 10 }">
-      </a-textarea>
-    </a-form>
-  </a-form-item>
-  <a-form-item v-if="inbound.canEnableTlsFlow()" label="Flow">
-    <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value selected>{{ i18n "none" }}</a-select-option>
-      <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item v-if="inbound.protocol === Protocols.VLESS">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.xray.outbound.reverseTagDesc" }}</span>
-        </template>
-        {{ i18n "pages.xray.outbound.reverseTag" }}
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="client.reverseTag" :placeholder='`{{ i18n "pages.xray.outbound.reverseTagPlaceholder" }}`'></a-input>
-  </a-form-item>
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-        </template>
-        {{ i18n "pages.inbounds.totalFlow" }}
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number v-model.number="client._totalGB" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
-    <a-tag :color="ColorUtils.clientUsageColor(clientStats, app.trafficDiff)">
-      [[ SizeFormatter.sizeFormat(clientStats.up) ]] / [[
-      SizeFormatter.sizeFormat(clientStats.down) ]] ([[
-      SizeFormatter.sizeFormat(clientStats.up + clientStats.down) ]])
-    </a-tag>
-    <a-tooltip>
-      <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-      <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
-        v-if="client.email.length > 0"></a-icon>
-    </a-tooltip>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-    <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-  </a-form-item>
-  <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-    <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item v-else>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
-        {{ i18n "pages.inbounds.expireDate" }}
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-      :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
-    <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
-      value="client._expiryTime" v-model="client._expiryTime"></a-persian-datepicker>
-    <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
-  </a-form-item>
-  <a-form-item v-if="client.expiryTime != 0">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
-        {{ i18n "pages.client.renew" }}
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,85 +0,0 @@
-{{define "form/fallbacks"}}
-<div :style="{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px', margin: '8px 0' }">
-  <span :style="{ fontWeight: 500 }">
-    <a-tooltip title="Route incoming TLS traffic to a backend when it doesn't match a valid VLESS/Trojan handshake. Match by SNI, ALPN, and HTTP path; the most precise rule wins. Fallbacks require TCP+TLS transport.">
-      Fallbacks ([[ inbound.settings.fallbacks.length ]])
-      <a-icon type="question-circle"></a-icon>
-    </a-tooltip>
-  </span>
-  <span :style="{ flex: 1 }"></span>
-  <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()">Add</a-button>
-</div>
-
-<a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false"
-  :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-divider :style="{ margin: '0' }">
-    Fallback [[ index + 1 ]]
-    <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
-      :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: '6px' }"></a-icon>
-  </a-divider>
-
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip title="Match TLS SNI (server name). Leave empty to match any SNI.">
-        SNI <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="fallback.name" placeholder="any (leave empty)"></a-input>
-  </a-form-item>
-
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip title="Match TLS ALPN. 'any' = no ALPN constraint. Use h2/http/1.1 split when the inbound advertises both.">
-        ALPN <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-select v-model="fallback.alpn" :style="{ width: '100%' }">
-      <a-select-option value="">any</a-select-option>
-      <a-select-option value="h2">h2</a-select-option>
-      <a-select-option value="http/1.1">http/1.1</a-select-option>
-    </a-select>
-  </a-form-item>
-
-  <a-form-item
-    :validate-status="fallback.path && !fallback.path.startsWith('/') ? 'error' : ''"
-    :help="fallback.path && !fallback.path.startsWith('/') ? 'Path must start with /' : ''">
-    <template slot="label">
-      <a-tooltip title="Match the HTTP request path of the first packet. Must start with '/'. Leave empty to match any.">
-        Path <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="fallback.path" placeholder="any (leave empty) or /ws"></a-input>
-  </a-form-item>
-
-  <a-form-item
-    :validate-status="!fallback.dest ? 'error' : ''"
-    :help="!fallback.dest ? 'Destination is required' : ''">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>
-            Where matching traffic is forwarded. Accepts a port number (<code>80</code>),
-            an <code>addr:port</code> (<code>127.0.0.1:8080</code>), or a Unix socket path
-            (<code>/dev/shm/x.sock</code> or <code>@abstract</code>).
-          </span>
-        </template>
-        Destination <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="fallback.dest" placeholder="80 | 127.0.0.1:8080 | /dev/shm/x.sock"></a-input>
-  </a-form-item>
-
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip title="PROXY protocol version sent to the destination. Off (0) for plain TCP; v1/v2 to preserve client IP if the backend supports it.">
-        PROXY <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-select v-model="fallback.xver" :style="{ width: '100%' }">
-      <a-select-option :value="0">Off</a-select-option>
-      <a-select-option :value="1">v1</a-select-option>
-      <a-select-option :value="2">v2</a-select-option>
-    </a-select>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,171 +0,0 @@
-{{define "form/inbound"}}
-<!-- base -->
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "enable" }}'>
-        <a-switch v-model="dbInbound.enable"></a-switch>
-    </a-form-item>
-    <a-form-item label='{{ i18n "remark" }}'>
-        <a-input v-model.trim="dbInbound.remark"></a-input>
-    </a-form-item>
-
-    <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p
-                ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
-                </template>
-                {{ i18n "monitor" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="inbound.listen"></a-input>
-    </a-form-item>
-
-    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input-number v-model.number="inbound.port" :min="1" :max="65535"></a-input-number>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                </template>
-                {{ i18n "pages.inbounds.totalFlow" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input-number v-model.number="dbInbound.totalGB" :min="0"></a-input-number>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.periodicTrafficResetDesc"
-                        }}</span>
-                    <br v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
-                    <span v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
-                        <strong>{{ i18n "pages.inbounds.lastReset" }}:</strong>
-                        <span>[[
-                            IntlUtil.formatDate(dbInbound.lastTrafficResetTime)
-                            ]]</span>
-                    </span>
-                </template>
-                {{ i18n "pages.inbounds.periodicTrafficResetTitle" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-select v-model="dbInbound.trafficReset" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="never">{{ i18n
-                "pages.inbounds.periodicTrafficReset.never" }}</a-select-option>
-            <a-select-option value="hourly">{{ i18n
-                "pages.inbounds.periodicTrafficReset.hourly"
-                }}</a-select-option>
-            <a-select-option value="daily">{{ i18n
-                "pages.inbounds.periodicTrafficReset.daily" }}</a-select-option>
-            <a-select-option value="weekly">{{ i18n
-                "pages.inbounds.periodicTrafficReset.weekly"
-                }}</a-select-option>
-            <a-select-option value="monthly">{{ i18n
-                "pages.inbounds.periodicTrafficReset.monthly"
-                }}</a-select-option>
-        </a-select>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire"
-                        }}</span>
-                </template>
-                {{ i18n "pages.inbounds.expireDate" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-date-picker :style="{ width: '100%' }" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
-            v-model="dbInbound._expiryTime"></a-date-picker>
-        <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
-            value="dbInbound._expiryTime" v-model="dbInbound._expiryTime">
-        </a-persian-datepicker>
-    </a-form-item>
-</a-form>
-
-<!-- vmess settings -->
-<template v-if="inbound.protocol === Protocols.VMESS">
-    {{template "form/vmess" .}}
-</template>
-
-<!-- vless settings -->
-<template v-if="inbound.protocol === Protocols.VLESS">
-    {{template "form/vless" .}}
-</template>
-
-<!-- trojan settings -->
-<template v-if="inbound.protocol === Protocols.TROJAN">
-    {{template "form/trojan" .}}
-</template>
-
-<!-- shadowsocks -->
-<template v-if="inbound.protocol === Protocols.SHADOWSOCKS">
-    {{template "form/shadowsocks" .}}
-</template>
-
-<!-- tunnel -->
-<template v-if="inbound.protocol === Protocols.TUNNEL">
-    {{template "form/tunnel" .}}
-</template>
-
-<!-- mixed -->
-<template v-if="inbound.protocol === Protocols.MIXED">
-    {{template "form/mixed" .}}
-</template>
-
-<!-- http -->
-<template v-if="inbound.protocol === Protocols.HTTP">
-    {{template "form/http" .}}
-</template>
-
-<!-- wireguard -->
-<template v-if="inbound.protocol === Protocols.WIREGUARD">
-    {{template "form/wireguard" .}}
-</template>
-
-<!-- tun -->
-<template v-if="inbound.protocol === Protocols.TUN">
-    {{template "form/tun" .}}
-</template>
-
-<!-- hysteria -->
-<template v-if="inbound.protocol === Protocols.HYSTERIA">
-    {{template "form/hysteria" .}}
-</template>
-
-<!-- stream settings -->
-<template v-if="inbound.canEnableStream()">
-    {{template "form/streamSettings" .}}
-    {{template "form/externalProxy" .}}
-</template>
-
-<!-- tls settings -->
-<template v-if="inbound.canEnableTls()">
-    {{template "form/tlsSettings" .}}
-</template>
-
-<!-- sniffing -->
-<a-collapse>
-    <a-collapse-panel header='Sniffing'>
-        {{template "form/sniffing" .}}
-    </a-collapse-panel>
-</a-collapse>
-
-{{end}}
@@ -1,37 +0,0 @@
-{{define "form/tunnel"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
-        <a-input v-model.trim="inbound.settings.address"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-        <a-input-number v-model.number="inbound.settings.port"></a-input-number>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.portMap"}}'>
-        <a-button size="small" @click="inbound.settings.portMap.push({name: '', value: ''})">+</a-button>
-    </a-form-item>
-    <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(pm, index) in inbound.settings.portMap">
-            <a-input style="width: 50%" v-model.trim="pm.name" placeholder='{{ i18n "pages.inbounds.port"}}'>
-                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-            </a-input>
-            <a-input style="width: 50%" v-model.trim="pm.value" placeholder='{{ i18n "pages.inbounds.targetAddress" }}'>
-                <a-button slot="addonAfter" size="small" @click="inbound.settings.portMap.splice(index,1)">-</a-button>
-            </a-input>
-        </a-input-group>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="tcp,udp">TCP,UDP</a-select-option>
-            <a-select-option value="tcp">TCP</a-select-option>
-            <a-select-option value="udp">UDP</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label='Follow Redirect'>
-        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
-    </a-form-item>
-</a-form>
-<!-- sockopt -->
-<template>
-    {{template "form/streamSockopt" .}}
-</template>
-{{end}}
@@ -1,27 +0,0 @@
-{{define "form/http"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <table :style="{ width: '100%', textAlign: 'center', margin: '1rem 0' }">
-    <tr>
-      <td width="45%">{{ i18n "username" }}</td>
-      <td width="45%">{{ i18n "password" }}</td>
-      <td>
-        <a-button icon="plus" size="small"
-          @click="inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())"></a-button>
-      </td>
-    </tr>
-  </table>
-  <a-input-group compact v-for="(account, index) in inbound.settings.accounts" :style="{ marginBottom: '10px' }">
-    <a-input :style="{ width: '50%' }" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-      <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-    </a-input>
-    <a-input :style="{ width: '50%' }" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-      <template slot="addonAfter">
-        <a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
-      </template>
-    </a-input>
-  </a-input-group>
-  <a-form-item label="Allow Transparent">
-    <a-switch v-model="inbound.settings.allowTransparent" />
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,28 +0,0 @@
-{{define "form/hysteria"}}
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.hysterias.slice(0,1)" v-if="!isEdit">
-    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        {{template "form/client" .}}
-    </a-collapse-panel>
-</a-collapse>
-<a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' +
-        inbound.settings.hysterias.length">
-        <table width="100%">
-            <tr class="client-table-header">
-                <th>{{ i18n "pages.inbounds.email" }}</th>
-                <th>Auth</th>
-            </tr>
-            <tr v-for="(client, index) in inbound.settings.hysterias"
-                :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                <td>[[ client.email ]]</td>
-                <td>[[ client.auth ]]</td>
-            </tr>
-        </table>
-    </a-collapse-panel>
-</a-collapse>
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item :label="'{{ i18n "pages.inbounds.stream.tcp.version" }}'">
-        <a-input-number v-model.number="inbound.settings.version" :min="2" :max="2" disabled></a-input-number>
-    </a-form-item>
-</a-form>
-{{end}}
@@ -1,56 +0,0 @@
-{{define "form/shadowsocks"}}
-<template v-if="inbound.isSSMultiUser">
-  <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">
-    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-      {{template "form/client" .}}
-    </a-collapse-panel>
-  </a-collapse>
-  <a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.shadowsockses.length">
-      <table width="100%">
-        <tr class="client-table-header">
-          <th>{{ i18n "pages.inbounds.email" }}</th>
-          <th>Password</th>
-        </tr>
-        <tr v-for="(client, index) in inbound.settings.shadowsockses"
-          :class="index % 2 == 1 ? ' client-table-odd-row' : ''">
-          <td>[[ client.email ]]</td>
-          <td>[[ client.password ]]</td>
-        </tr>
-      </table>
-    </a-collapse-panel>
-  </a-collapse>
-</template>
-<a-form :colon=" false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label='{{ i18n "encryption" }}'>
-    <a-select v-model="inbound.settings.method" @change="SSMethodChange"
-      :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option v-for="(method,method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item v-if="inbound.isSS2022">
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "reset" }}</span>
-        </template>
-        Password
-        <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)"
-          type="sync"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="inbound.settings.password"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-    <a-select v-model="inbound.settings.network" :style="{ width: '100px' }"
-      :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value="tcp,udp">TCP,UDP</a-select-option>
-      <a-select-option value="tcp">TCP</a-select-option>
-      <a-select-option value="udp">UDP</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item label="ivCheck">
-    <a-switch v-model="inbound.settings.ivCheck"></a-switch>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,36 +0,0 @@
-{{define "form/mixed"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
-    <a-switch v-model="inbound.settings.udp"></a-switch>
-  </a-form-item>
-  <a-form-item label="IP" v-if="inbound.settings.udp">
-    <a-input v-model.trim="inbound.settings.ip"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "password" }}'>
-    <a-switch :checked="inbound.settings.auth === 'password'"
-      @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
-  </a-form-item>
-  <template v-if="inbound.settings.auth === 'password'">
-    <table :style="{ width: '100%', textAlign: 'center', margin: '1rem 0' }">
-      <tr>
-        <td width="45%">{{ i18n "username" }}</td>
-        <td width="45%">{{ i18n "password" }}</td>
-        <td>
-          <a-button icon="plus" size="small"
-            @click="inbound.settings.addAccount(new Inbound.MixedSettings.SocksAccount())"></a-button>
-        </td>
-      </tr>
-    </table>
-    <a-input-group compact v-for="(account, index) in inbound.settings.accounts" :style="{ marginBottom: '10px' }">
-      <a-input :style="{ width: '50%' }" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-        <template slot="addonAfter">
-          <a-button icon="minus" size="small" @click="inbound.settings.delAccount(index)"></a-button>
-        </template>
-      </a-input>
-    </a-input-group>
-  </template>
-</a-form>
-{{end}}
@@ -1,25 +0,0 @@
-{{define "form/trojan"}}
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
-  <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-    {{template "form/client" .}}
-  </a-collapse-panel>
-</a-collapse>
-<a-collapse v-else>
-  <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
-    <table width="100%">
-      <tr class="client-table-header">
-        <th>{{ i18n "pages.inbounds.email" }}</th>
-        <th>Password</th>
-      </tr>
-      <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? ' client-table-odd-row' : ''">
-        <td>[[ client.email ]]</td>
-        <td>[[ client.password ]]</td>
-      </tr>
-    </table>
-  </a-collapse-panel>
-</a-collapse>
-<template v-if=" inbound.isTcp">
-  {{template "form/fallbacks" .}}
-  <a-divider style="margin:5px 0;"></a-divider>
-</template>
-{{end}}
@@ -1,55 +0,0 @@
-{{define "form/tun"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.xray.tun.nameDesc" }}</span>
-        </template>
-        Interface Name
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="inbound.settings.name" placeholder="xray0"></a-input>
-  </a-form-item>
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.xray.tun.mtuDesc" }}</span>
-        </template>
-        MTU
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number v-model.number="inbound.settings.mtu" :min="1" :max="9000" placeholder="1500"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Gateway">
-    <a-select mode="tags" v-model="inbound.settings.gateway" :style="{ width: '100%' }" :token-separators="[',']"
-      placeholder="IPv4/IPv6 gateway"></a-select>
-  </a-form-item>
-  <a-form-item label="DNS">
-    <a-select mode="tags" v-model="inbound.settings.dns" :style="{ width: '100%' }" :token-separators="[',']"
-      placeholder="DNS servers"></a-select>
-  </a-form-item>
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.xray.tun.userLevelDesc" }}</span>
-        </template>
-        {{ i18n "pages.xray.tun.userLevel" }}
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input-number v-model.number="inbound.settings.userLevel" :min="0" placeholder="0"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Auto Routing Table">
-    <a-select mode="tags" v-model="inbound.settings.autoSystemRoutingTable" :style="{ width: '100%' }"
-      :token-separators="[',']" placeholder="e.g. vpn, proxy"></a-select>
-  </a-form-item>
-  <a-form-item label="Auto Outbounds">
-    <a-input v-model.trim="inbound.settings.autoOutboundsInterface" placeholder="auto"></a-input>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,101 +0,0 @@
-{{define "form/vless"}}
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
-  <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-    {{template "form/client" .}}
-  </a-collapse-panel>
-</a-collapse>
-<a-collapse v-else>
-  <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' +
-    inbound.settings.vlesses.length">
-    <table width="100%">
-      <tr class="client-table-header">
-        <th>{{ i18n "pages.inbounds.email" }}</th>
-        <th>ID</th>
-      </tr>
-      <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? ' client-table-odd-row' : ''">
-        <td>[[ client.email ]]</td>
-        <td>[[ client.id ]]</td>
-      </tr>
-    </table>
-  </a-collapse-panel>
-</a-collapse>
-<template v-if=" !inbound.stream.isTLS || !inbound.stream.isReality">
-  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label="decryption">
-      <a-input v-model.trim="inbound.settings.decryption"></a-input>
-    </a-form-item>
-    <a-form-item label="encryption">
-      <a-input v-model="inbound.settings.encryption"></a-input>
-    </a-form-item>
-    <a-form-item label=" ">
-      <a-space :size="8" wrap>
-        <a-button type="primary" icon="import" @click="getNewVlessEnc('X25519, not Post-Quantum')">
-          X25519
-        </a-button>
-        <a-button type="primary" icon="import" @click="getNewVlessEnc('ML-KEM-768, Post-Quantum')">
-          ML-KEM-768
-        </a-button>
-        <a-button danger @click="clearVlessEnc">Clear</a-button>
-      </a-space>
-    </a-form-item>
-  </a-form>
-  <a-divider :style="{ margin: '5px 0' }"></a-divider>
-</template>
-<template v-if="inbound.isTcp && (!inbound.settings.encryption || inbound.settings.encryption === 'none')">
-  {{template "form/fallbacks" .}}
-  <a-divider :style="{ margin: '5px 0' }"></a-divider>
-</template>
-<template v-if="inbound.canEnableVisionSeed()">
-  <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item
-      :validate-status="testseedError() ? 'error' : ''"
-      :help="testseedError() || ''">
-      <template slot="label">
-        Vision Seed
-        <a-tooltip title="Optional. Controls XTLS Vision padding. Provide exactly 4 positive integers, or leave empty to use defaults: [900, 500, 900, 256].">
-          <a-icon type="question-circle" :style="{ marginLeft: '4px' }"></a-icon>
-        </a-tooltip>
-      </template>
-      <a-row :gutter="8">
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[0] !== undefined) ? inbound.settings.testseed[0] : null"
-            @change="(val) => updateTestseed(0, val)" :min="1" :max="9999" :style="{ width: '100%' }" placeholder="900"
-            addon-before="[0]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[1] !== undefined) ? inbound.settings.testseed[1] : null"
-            @change="(val) => updateTestseed(1, val)" :min="1" :max="9999" :style="{ width: '100%' }" placeholder="500"
-            addon-before="[1]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[2] !== undefined) ? inbound.settings.testseed[2] : null"
-            @change="(val) => updateTestseed(2, val)" :min="1" :max="9999" :style="{ width: '100%' }" placeholder="900"
-            addon-before="[2]"></a-input-number>
-        </a-col>
-        <a-col :span="6">
-          <a-input-number
-            :value="(inbound.settings.testseed && inbound.settings.testseed[3] !== undefined) ? inbound.settings.testseed[3] : null"
-            @change="(val) => updateTestseed(3, val)" :min="1" :max="9999" :style="{ width: '100%' }" placeholder="256"
-            addon-before="[3]"></a-input-number>
-        </a-col>
-      </a-row>
-      <a-space :size="8" :style="{ marginTop: '8px' }">
-        <a-button type="primary" @click="setRandomTestseed">
-          Rand
-        </a-button>
-        <a-button @click="resetTestseed">
-          Reset
-        </a-button>
-      </a-space>
-      <div :style="{ marginTop: '6px', fontSize: '12px', color: 'inherit', opacity: 0.65, lineHeight: 1.4 }">
-        Optional. Controls XTLS Vision padding behavior (used only for xtls-rprx-vision).
-        Provide exactly four positive integers to customize padding; otherwise leave empty to use safe defaults.
-      </div>
-    </a-form-item>
-  </a-form>
-  <a-divider :style="{ margin: '5px 0' }"></a-divider>
-</template>
-{{end}}
@@ -1,24 +0,0 @@
-{{define "form/vmess"}}
-<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
-    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-        {{template "form/client" .}}
-    </a-collapse-panel>
-</a-collapse>
-<a-collapse v-else>
-    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
-        <table width="100%">
-            <tr class="client-table-header">
-                <th>{{ i18n "pages.inbounds.email" }}</th>
-                <th>ID</th>
-                <th>{{ i18n "security" }}</th>
-            </tr>
-            <tr v-for="(client, index) in inbound.settings.vmesses"
-                :class="index % 2 == 1 ? ' client-table-odd-row' : ''">
-                <td>[[ client.email ]]</td>
-                <td>[[ client.id ]]</td>
-                <td>[[ client.security ]]</td>
-            </tr>
-        </table>
-    </a-collapse-panel>
-</a-collapse>
-{{end}}
@@ -1,82 +0,0 @@
-{{define "form/wireguard"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item>
-    <template slot="label">
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "reset" }}</span>
-        </template>
-        {{ i18n "pages.xray.wireguard.secretKey" }}
-        <a-icon type="sync"
-          @click="[inbound.settings.pubKey, inbound.settings.secretKey] = Object.values(Wireguard.generateKeypair())"></a-icon>
-      </a-tooltip>
-    </template>
-    <a-input v-model.trim="inbound.settings.secretKey"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.xray.wireguard.publicKey" }}'>
-    <a-input disabled v-model="inbound.settings.pubKey"></a-input>
-  </a-form-item>
-  <a-form-item label='MTU'>
-    <a-input-number v-model.number="inbound.settings.mtu"></a-input-number>
-  </a-form-item>
-  <a-form-item label='No Kernel Tun'>
-    <a-switch v-model="inbound.settings.noKernelTun"></a-switch>
-  </a-form-item>
-  <a-form-item label="Peers">
-    <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addPeer()"></a-button>
-  </a-form-item>
-  <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }"
-    :wrapper-col="{ md: {span:14} }">
-    <a-divider :style="{ margin: '0' }"> Peer [[ index + 1 ]] <a-icon v-if="inbound.settings.peers.length>1"
-        type="delete" @click="() => inbound.settings.delPeer(index)"
-        :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-    </a-divider>
-    <a-form-item>
-      <template slot="label">
-        <a-tooltip>
-          <template slot="title">
-            <span>{{ i18n "reset" }}</span>
-          </template>
-          {{ i18n "pages.xray.wireguard.secretKey" }}
-          <a-icon @click="[peer.publicKey, peer.privateKey] = Object.values(Wireguard.generateKeypair())"
-            type="sync"></a-icon>
-        </a-tooltip>
-      </template>
-      <a-input v-model.trim="peer.privateKey"></a-input>
-    </a-form-item>
-    <a-form-item>
-      <template slot="label">
-        {{ i18n "pages.xray.wireguard.publicKey" }}
-      </template>
-      <a-input v-model.trim="peer.publicKey"></a-input>
-    </a-form-item>
-    <a-form-item>
-      <template slot="label">
-        <a-tooltip>
-          <template slot="title">
-            <span>{{ i18n "reset" }}</span>
-          </template>
-          {{ i18n "pages.xray.wireguard.psk" }}
-          <a-icon @click="peer.psk = Wireguard.keyToBase64(Wireguard.generatePresharedKey())" type="sync"></a-icon>
-        </a-tooltip>
-      </template>
-      <a-input v-model.trim="peer.psk"></a-input>
-    </a-form-item>
-    <a-form-item>
-      <template slot="label">
-        {{ i18n "pages.xray.wireguard.allowedIPs" }}
-        <a-button icon="plus" type="primary" size="small" @click="peer.allowedIPs.push('')"></a-button>
-      </template>
-      <template v-for="(aip, index) in peer.allowedIPs" :style="{ marginBottom: '10px' }">
-        <a-input v-model.trim="peer.allowedIPs[index]">
-          <a-button icon="minus" v-if="peer.allowedIPs.length>1" slot="addonAfter" size="small"
-            @click="peer.allowedIPs.splice(index, 1)"></a-button>
-        </a-input>
-      </template>
-    </a-form-item>
-    <a-form-item label='Keep Alive'>
-      <a-input-number v-model.number="peer.keepAlive" :min="0"></a-input-number>
-    </a-form-item>
-  </a-form>
-</a-form>
-{{end}}
@@ -1,83 +0,0 @@
-{{define "form/realitySettings"}}
-<template>
-    <a-form-item label='Show'>
-        <a-switch v-model="inbound.stream.reality.show"></a-switch>
-    </a-form-item>
-    <a-form-item label='Xver'>
-        <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label='uTLS'>
-        <a-select v-model="inbound.stream.reality.settings.fingerprint" :style="{ width: '100%' }"
-            :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
-                </template> Target <a-icon @click="randomizeRealityTarget()" type="sync"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="inbound.stream.reality.target"></a-input>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
-                </template> SNI <a-icon @click="randomizeRealityTarget()" type="sync"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
-    </a-form-item>
-    <a-form-item label='Max Time Diff (ms)'>
-        <a-input-number v-model.number="inbound.stream.reality.maxTimediff" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label='Min Client Ver'>
-        <a-input v-model.trim="inbound.stream.reality.minClientVer" placeholder='25.9.11'></a-input>
-    </a-form-item>
-    <a-form-item label='Max Client Ver'>
-        <a-input v-model.trim="inbound.stream.reality.maxClientVer" placeholder='25.9.11'></a-input>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "reset" }}</span>
-                </template> Short IDs <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortIds()"
-                    type="sync"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-textarea v-model.trim="inbound.stream.reality.shortIds"></a-textarea>
-    </a-form-item>
-    <a-form-item label='SpiderX'>
-        <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-        <a-textarea v-model="inbound.stream.reality.settings.publicKey"></a-textarea>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-        <a-textarea v-model="inbound.stream.reality.privateKey"></a-textarea>
-    </a-form-item>
-    <a-form-item label=" ">
-        <a-space>
-            <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Cert</a-button>
-            <a-button danger @click="clearX25519Cert">Clear</a-button>
-        </a-space>
-    </a-form-item>
-    <a-form-item label="mldsa65 Seed">
-        <a-textarea v-model="inbound.stream.reality.mldsa65Seed"></a-textarea>
-    </a-form-item>
-    <a-form-item label="mldsa65 Verify">
-        <a-textarea v-model="inbound.stream.reality.settings.mldsa65Verify"></a-textarea>
-    </a-form-item>
-    <a-form-item label=" ">
-        <a-space>
-            <a-button type="primary" icon="import" @click="getNewmldsa65">Get New Seed</a-button>
-            <a-button danger @click="clearMldsa65">Clear</a-button>
-        </a-space>
-    </a-form-item>
-</template>
-{{end}}
@@ -1,37 +0,0 @@
-{{define "form/sniffing"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item>
-    <span slot="label">
-      {{ i18n "enabled" }}
-      <a-tooltip>
-        <template slot="title">
-          <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
-        </template>
-        <a-icon type="question-circle"></a-icon>
-      </a-tooltip>
-    </span>
-    <a-switch v-model="inbound.sniffing.enabled"></a-switch>
-  </a-form-item>
-  <template v-if="inbound.sniffing.enabled">
-    <a-form-item :wrapper-col="{span:24}">
-      <a-checkbox-group v-model="inbound.sniffing.destOverride">
-        <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
-      </a-checkbox-group>
-    </a-form-item>
-    <a-form-item label="Metadata Only">
-      <a-switch v-model="inbound.sniffing.metadataOnly"></a-switch>
-    </a-form-item>
-    <a-form-item label="Route Only">
-      <a-switch v-model="inbound.sniffing.routeOnly"></a-switch>
-    </a-form-item>
-    <a-form-item label="IPs Excluded">
-      <a-select mode="tags" v-model="inbound.sniffing.ipsExcluded" :style="{ width: '100%' }" :token-separators="[',']"
-        placeholder="IP/CIDR/geoip:*/ext:*"></a-select>
-    </a-form-item>
-    <a-form-item label="Domains Excluded">
-      <a-select mode="tags" v-model="inbound.sniffing.domainsExcluded" :style="{ width: '100%' }"
-        :token-separators="[',']" placeholder="domain:*/ext:*"></a-select>
-    </a-form-item>
-  </template>
-</a-form>
-{{end}}
@@ -1,31 +0,0 @@
-{{define "form/externalProxy"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-divider :style="{ margin: '5px 0 0' }"></a-divider>
-  <a-form-item label="External Proxy">
-    <a-switch v-model="externalProxy"></a-switch>
-    <a-button icon="plus" v-if="externalProxy" type="primary" :style="{ marginLeft: '10px' }" size="small"
-      @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})"></a-button>
-  </a-form-item>
-  <a-input-group :style="{ margin: '8px 0' }" compact v-for="(row, index) in inbound.stream.externalProxy">
-    <template>
-      <a-tooltip title="Force TLS">
-        <a-select v-model="row.forceTls" :style="{ width: '20%', margin: '0px' }"
-          :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-          <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-          <a-select-option value="tls">TLS</a-select-option>
-        </a-select>
-      </a-tooltip>
-    </template>
-    <a-input :style="{ width: '30%' }" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-      <a-input-number :style="{ width: '15%' }" v-model.number="row.port" min="1" max="65535"></a-input-number>
-    </a-tooltip>
-    <a-input :style="{ width: '30%', top: '0' }" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'>
-      <template slot="addonAfter">
-        <a-button icon="minus" size="small" @click="inbound.stream.externalProxy.splice(index, 1)"></a-button>
-      </template>
-    </a-input>
-  </a-input-group>
-</a-form>
-{{end}}
@@ -1,408 +0,0 @@
-{{define "form/streamFinalMask"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }"
-  v-if="inbound.protocol == Protocols.HYSTERIA || ['kcp', 'xhttp', 'raw', 'tcp', 'httpupgrade', 'ws', 'grpc'].includes(inbound.stream.network)">
-  <a-divider :style="{ margin: '5px 0 0' }"></a-divider>
-
-  <!-- TCP Masks – for raw/tcp/httpupgrade/ws/grpc/xhttp -->
-  <template v-if="['raw', 'tcp', 'httpupgrade', 'ws', 'grpc', 'xhttp'].includes(inbound.stream.network)">
-    <a-form-item label="TCP Masks">
-      <a-button icon="plus" type="primary" size="small" @click="inbound.stream.addTcpMask('fragment')"></a-button>
-    </a-form-item>
-    <template v-if="inbound.stream.finalmask.tcp && inbound.stream.finalmask.tcp.length > 0">
-      <a-form v-for="(mask, index) in inbound.stream.finalmask.tcp" :key="index" :colon="false"
-        :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-divider :style="{ margin: '0' }">
-          TCP Mask [[ index + 1 ]]
-          <a-icon type="delete" @click="() => inbound.stream.delTcpMask(index)"
-            :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-        </a-divider>
-        <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-          <a-select v-model="mask.type" @change="(type) => { mask.settings = mask._getDefaultSettings(type, {}); }"
-            :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option value="fragment">Fragment</a-select-option>
-            <a-select-option value="header-custom">Header Custom</a-select-option>
-            <a-select-option value="sudoku">Sudoku</a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <!-- Fragment settings -->
-        <template v-if="mask.type === 'fragment'">
-          <a-form-item label="Packets">
-            <a-select v-model="mask.settings.packets" :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option value="tlshello">tlshello</a-select-option>
-              <a-select-option value="1-3">1-3</a-select-option>
-              <a-select-option value="1-5">1-5</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="Length">
-            <a-input v-model.trim="mask.settings.length" placeholder="e.g. 100-200" />
-          </a-form-item>
-          <a-form-item label="Delay">
-            <a-input v-model.trim="mask.settings.delay" placeholder="e.g. 10-20" />
-          </a-form-item>
-          <a-form-item label="Max Split">
-            <a-input v-model.trim="mask.settings.maxSplit" placeholder="e.g. 3-6" />
-          </a-form-item>
-        </template>
-
-        <!-- Sudoku settings (TCP) -->
-        <template v-if="mask.type === 'sudoku'">
-          <a-form-item label="Password">
-            <a-input v-model.trim="mask.settings.password" placeholder="Obfuscation password" />
-          </a-form-item>
-          <a-form-item label="ASCII">
-            <a-input v-model.trim="mask.settings.ascii" placeholder="ASCII" />
-          </a-form-item>
-          <a-form-item label="Custom Table">
-            <a-input v-model.trim="mask.settings.customTable" placeholder="Custom Table" />
-          </a-form-item>
-          <a-form-item label="Custom Tables">
-            <a-input v-model.trim="mask.settings.customTables" placeholder="Custom Tables" />
-          </a-form-item>
-          <a-form-item label="Padding Min">
-            <a-input-number v-model.number="mask.settings.paddingMin" :min="0" />
-          </a-form-item>
-          <a-form-item label="Padding Max">
-            <a-input-number v-model.number="mask.settings.paddingMax" :min="0" />
-          </a-form-item>
-        </template>
-
-        <!-- Header Custom (TCP) – clients/servers/errors are 2D arrays of groups -->
-        <template v-if="mask.type === 'header-custom'">
-          <!-- Clients -->
-          <a-form-item label="Clients">
-            <a-button icon="plus" type="primary" size="small"
-              @click="mask.settings.clients.push([{delay: 0, rand: 0, randRange: '0-255', type: 'array', packet: []}])"></a-button>
-          </a-form-item>
-          <template v-for="(group, gi) in mask.settings.clients" :key="'cg'+gi">
-            <a-divider :style="{ margin: '0' }">
-              Clients Group [[ gi + 1 ]]
-              <a-icon type="delete" @click="mask.settings.clients.splice(gi, 1)"
-                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: '8px' }"></a-icon>
-            </a-divider>
-            <template v-for="(item, ii) in group" :key="'ci'+ii">
-              <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-                <a-select v-model="item.type" :dropdown-class-name="themeSwitcher.currentTheme"
-                  @change="t => { if(t === 'base64') item.packet = RandomUtil.randomBase64(); else if(t === 'array') { item.rand = 0; item.packet = []; } else { item.packet = ''; } }">
-                  <a-select-option value="array">Array</a-select-option>
-                  <a-select-option value="str">String</a-select-option>
-                  <a-select-option value="hex">Hex</a-select-option>
-                  <a-select-option value="base64">Base64</a-select-option>
-                </a-select>
-              </a-form-item>
-              <a-form-item label="Delay (ms)">
-                <a-input-number v-model.number="item.delay" :min="0" />
-              </a-form-item>
-              <template v-if="item.type === 'array'">
-                <a-form-item label="Rand">
-                  <a-input-number v-model.number="item.rand" :min="0" />
-                </a-form-item>
-                <a-form-item label="Rand Range">
-                  <a-input v-model.trim="item.randRange" placeholder="0-255" />
-                </a-form-item>
-              </template>
-              <a-form-item v-else label="Packet">
-                <a-input-group compact v-if="item.type === 'base64'">
-                  <a-input v-model.trim="item.packet" placeholder="binary data"
-                    :style="{ width: 'calc(100% - 32px)' }" />
-                  <a-button icon="reload" @click="item.packet = RandomUtil.randomBase64()" />
-                </a-input-group>
-                <a-input v-else v-model.trim="item.packet" placeholder="binary data" />
-              </a-form-item>
-            </template>
-          </template>
-
-          <!-- Servers -->
-          <a-form-item label="Servers">
-            <a-button icon="plus" type="primary" size="small"
-              @click="mask.settings.servers.push([{delay: 0, rand: 0, randRange: '0-255', type: 'array', packet: []}])"></a-button>
-          </a-form-item>
-          <template v-for="(group, gi) in mask.settings.servers" :key="'sg'+gi">
-            <a-divider :style="{ margin: '0' }">
-              Servers Group [[ gi + 1 ]]
-              <a-icon type="delete" @click="mask.settings.servers.splice(gi, 1)"
-                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: '8px' }"></a-icon>
-            </a-divider>
-            <template v-for="(item, ii) in group" :key="'si'+ii">
-              <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-                <a-select v-model="item.type" :dropdown-class-name="themeSwitcher.currentTheme"
-                  @change="t => { if(t === 'base64') item.packet = RandomUtil.randomBase64(); else if(t === 'array') { item.rand = 0; item.packet = []; } else { item.packet = ''; } }">
-                  <a-select-option value="array">Array</a-select-option>
-                  <a-select-option value="str">String</a-select-option>
-                  <a-select-option value="hex">Hex</a-select-option>
-                  <a-select-option value="base64">Base64</a-select-option>
-                </a-select>
-              </a-form-item>
-              <a-form-item label="Delay (ms)">
-                <a-input-number v-model.number="item.delay" :min="0" />
-              </a-form-item>
-              <template v-if="item.type === 'array'">
-                <a-form-item label="Rand">
-                  <a-input-number v-model.number="item.rand" :min="0" />
-                </a-form-item>
-                <a-form-item label="Rand Range">
-                  <a-input v-model.trim="item.randRange" placeholder="0-255" />
-                </a-form-item>
-              </template>
-              <a-form-item v-else label="Packet">
-                <a-input-group compact v-if="item.type === 'base64'">
-                  <a-input v-model.trim="item.packet" placeholder="binary data"
-                    :style="{ width: 'calc(100% - 32px)' }" />
-                  <a-button icon="reload" @click="item.packet = RandomUtil.randomBase64()" />
-                </a-input-group>
-                <a-input v-else v-model.trim="item.packet" placeholder="binary data" />
-              </a-form-item>
-            </template>
-          </template>
-        </template>
-
-      </a-form>
-    </template>
-  </template>
-
-  <template v-if="inbound.protocol == Protocols.HYSTERIA || inbound.stream.network == 'kcp'">
-    <a-form-item label="UDP Masks">
-      <a-button icon="plus" type="primary" size="small"
-        @click="inbound.stream.addUdpMask(inbound.protocol === Protocols.HYSTERIA ? 'salamander' : 'mkcp-aes128gcm')"></a-button>
-    </a-form-item>
-    <template v-if="inbound.stream.finalmask.udp && inbound.stream.finalmask.udp.length > 0">
-      <a-form v-for="(mask, index) in inbound.stream.finalmask.udp" :key="index" :colon="false"
-        :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-divider :style="{ margin: '0' }">
-          UDP Mask [[ index + 1 ]]
-          <a-icon type="delete" @click="() => inbound.stream.delUdpMask(index)"
-            :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-        </a-divider>
-        <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-          <a-select v-model="mask.type"
-            @change="(type) => { mask.settings = mask._getDefaultSettings(type, {}); if(inbound.stream.network === 'kcp') { inbound.stream.kcp.mtu = type === 'xdns' ? 900 : 1350; } }"
-            :dropdown-class-name="themeSwitcher.currentTheme">
-            <template v-if="inbound.protocol === Protocols.HYSTERIA">
-              <a-select-option value="salamander">Salamander (Hysteria2)</a-select-option>
-            </template>
-            <template v-else>
-              <a-select-option value="mkcp-aes128gcm">mKCP AES-128-GCM</a-select-option>
-              <a-select-option value="header-dns">Header DNS</a-select-option>
-              <a-select-option value="header-dtls">Header DTLS 1.2</a-select-option>
-              <a-select-option value="header-srtp">Header SRTP</a-select-option>
-              <a-select-option value="header-utp">Header uTP</a-select-option>
-              <a-select-option value="header-wechat">Header WeChat Video</a-select-option>
-              <a-select-option value="header-wireguard">Header WireGuard</a-select-option>
-              <a-select-option value="mkcp-original">mKCP Original</a-select-option>
-              <a-select-option value="xdns">xDNS</a-select-option>
-              <a-select-option value="xicmp">xICMP</a-select-option>
-              <a-select-option value="header-custom">Header Custom</a-select-option>
-              <a-select-option value="noise">Noise</a-select-option>
-            </template>
-          </a-select>
-        </a-form-item>
-        <a-form-item label="Password" v-if="['mkcp-aes128gcm', 'salamander'].includes(mask.type)">
-          <a-input v-model.trim="mask.settings.password" placeholder="Obfuscation password"></a-input>
-        </a-form-item>
-        <a-form-item label="Domain" v-if="mask.type === 'header-dns'">
-          <a-input v-model.trim="mask.settings.domain" placeholder="e.g., www.example.com"></a-input>
-        </a-form-item>
-        <template v-if="mask.type === 'xdns'">
-          <a-form-item label="Domains">
-            <a-select mode="tags" v-model="mask.settings.domains" :style="{ width: '100%' }" :token-separators="[',']"
-              placeholder="e.g., www.example.com"></a-select>
-          </a-form-item>
-        </template>
-        <template v-if="mask.type === 'noise'">
-          <a-form-item label="Reset">
-            <a-input-number v-model.number="mask.settings.reset" :min="0" />
-          </a-form-item>
-          <a-form-item label="Noise">
-            <a-button icon="plus" type="primary" size="small"
-              @click="mask.settings.noise.push({rand: '1-8192', randRange: '0-255', type: 'array', packet: [], delay: '10-20'})"></a-button>
-          </a-form-item>
-          <template v-for="(n, index) in mask.settings.noise" :key="index">
-            <a-divider :style="{ margin: '0' }">
-              Noise [[ index + 1 ]]
-              <a-icon type="delete" @click="() => mask.settings.noise.splice(index, 1)"
-                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-            </a-divider>
-            <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-              <a-select v-model="n.type" :dropdown-class-name="themeSwitcher.currentTheme"
-                @change="t => { if(t === 'base64') n.packet = RandomUtil.randomBase64(); else if(t === 'array') n.packet = []; else n.packet = ''; }">
-                <a-select-option value="array">Array</a-select-option>
-                <a-select-option value="str">String</a-select-option>
-                <a-select-option value="hex">Hex</a-select-option>
-                <a-select-option value="base64">Base64</a-select-option>
-              </a-select>
-            </a-form-item>
-            <template v-if="n.type === 'array'">
-              <a-form-item label="Rand">
-                <a-input v-model.trim="n.rand" placeholder="0 or 1-8192" />
-              </a-form-item>
-              <a-form-item label="Rand Range">
-                <a-input v-model.trim="n.randRange" placeholder="0-255" />
-              </a-form-item>
-            </template>
-            <a-form-item v-else label="Packet">
-              <a-input-group compact v-if="n.type === 'base64'">
-                <a-input v-model.trim="n.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
-                <a-button icon="reload" @click="n.packet = RandomUtil.randomBase64()" />
-              </a-input-group>
-              <a-input v-else v-model.trim="n.packet" placeholder="binary data" />
-            </a-form-item>
-            <a-form-item label="Delay">
-              <a-input v-model.trim="n.delay" placeholder="10-20" />
-            </a-form-item>
-          </template>
-        </template>
-        <template v-if="mask.type === 'header-custom'">
-          <a-form-item label="Client">
-            <a-button icon="plus" type="primary" size="small"
-              @click="mask.settings.client.push({rand: 0, randRange: '0-255', type: 'array', packet: []})"></a-button>
-          </a-form-item>
-          <template v-for="(c, index) in mask.settings.client" :key="index">
-            <a-divider :style="{ margin: '0' }">
-              Client [[ index + 1 ]]
-              <a-icon type="delete" @click="mask.settings.client.splice(index, 1)"
-                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-            </a-divider>
-            <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-              <a-select v-model="c.type" :dropdown-class-name="themeSwitcher.currentTheme"
-                @change="t => { if(t === 'base64') c.packet = RandomUtil.randomBase64(); else if(t === 'array') c.packet = []; else c.packet = ''; }">
-                <a-select-option value="array">Array</a-select-option>
-                <a-select-option value="str">String</a-select-option>
-                <a-select-option value="hex">Hex</a-select-option>
-                <a-select-option value="base64">Base64</a-select-option>
-              </a-select>
-            </a-form-item>
-            <template v-if="c.type === 'array'">
-              <a-form-item label="Rand">
-                <a-input-number v-model.number="c.rand" />
-              </a-form-item>
-              <a-form-item label="Rand Range">
-                <a-input v-model.trim="c.randRange" placeholder="0-255" />
-              </a-form-item>
-            </template>
-            <a-form-item v-else label="Packet">
-              <a-input-group compact v-if="c.type === 'base64'">
-                <a-input v-model.trim="c.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
-                <a-button icon="reload" @click="c.packet = RandomUtil.randomBase64()" />
-              </a-input-group>
-              <a-input v-else v-model.trim="c.packet" placeholder="binary data" />
-            </a-form-item>
-          </template>
-          <a-divider :style="{ margin: '0' }"></a-divider>
-          <a-form-item label="Server">
-            <a-button icon="plus" type="primary" size="small"
-              @click="mask.settings.server.push({rand: 0, randRange: '0-255', type: 'array', packet: []})"></a-button>
-          </a-form-item>
-          <template v-for="(s, index) in mask.settings.server" :key="index">
-            <a-divider :style="{ margin: '0' }">
-              Server [[ index + 1 ]]
-              <a-icon type="delete" @click="mask.settings.server.splice(index, 1)"
-                :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer' }"></a-icon>
-            </a-divider>
-            <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
-              <a-select v-model="s.type" :dropdown-class-name="themeSwitcher.currentTheme"
-                @change="t => { if(t === 'base64') s.packet = RandomUtil.randomBase64(); else if(t === 'array') s.packet = []; else s.packet = ''; }">
-                <a-select-option value="array">Array</a-select-option>
-                <a-select-option value="str">String</a-select-option>
-                <a-select-option value="hex">Hex</a-select-option>
-                <a-select-option value="base64">Base64</a-select-option>
-              </a-select>
-            </a-form-item>
-            <template v-if="s.type === 'array'">
-              <a-form-item label="Rand">
-                <a-input-number v-model.number="s.rand" />
-              </a-form-item>
-              <a-form-item label="Rand Range">
-                <a-input v-model.trim="s.randRange" placeholder="0-255" />
-              </a-form-item>
-            </template>
-            <a-form-item v-else label="Packet">
-              <a-input-group compact v-if="s.type === 'base64'">
-                <a-input v-model.trim="s.packet" placeholder="binary data" :style="{ width: 'calc(100% - 32px)' }" />
-                <a-button icon="reload" @click="s.packet = RandomUtil.randomBase64()" />
-              </a-input-group>
-              <a-input v-else v-model.trim="s.packet" placeholder="binary data" />
-            </a-form-item>
-          </template>
-        </template>
-        <template v-if="mask.type === 'xicmp'">
-          <a-form-item label="IP">
-            <a-input v-model.trim="mask.settings.ip" placeholder="0.0.0.0" />
-          </a-form-item>
-          <a-form-item label="ID">
-            <a-input-number v-model.number="mask.settings.id" :min="0" />
-          </a-form-item>
-        </template>
-      </a-form>
-    </template>
-  </template>
-
-  <!-- quicParams – only for xhttp H3 and hysteria -->
-  <template v-if="inbound.protocol == Protocols.HYSTERIA || inbound.stream.network == 'xhttp'">
-    <a-form-item label="QUIC Params">
-      <a-switch v-model="inbound.stream.finalmask.enableQuicParams"></a-switch>
-    </a-form-item>
-    <template v-if="inbound.stream.finalmask.enableQuicParams">
-      <a-form-item label="Congestion">
-        <a-select v-model="inbound.stream.finalmask.quicParams.congestion"
-          :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option value="reno">Reno</a-select-option>
-          <a-select-option value="bbr">BBR</a-select-option>
-          <a-select-option value="brutal">Brutal</a-select-option>
-          <a-select-option value="force-brutal">Force Brutal</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="Debug">
-        <a-switch v-model="inbound.stream.finalmask.quicParams.debug"></a-switch>
-      </a-form-item>
-      <template v-if="['brutal','force-brutal'].includes(inbound.stream.finalmask.quicParams.congestion)">
-        <a-form-item label="Brutal Up">
-          <a-input v-model.trim="inbound.stream.finalmask.quicParams.brutalUp" :min="65537" placeholder="65537" />
-        </a-form-item>
-        <a-form-item label="Brutal Down">
-          <a-input v-model.trim="inbound.stream.finalmask.quicParams.brutalDown" :min="65537" placeholder="65537" />
-        </a-form-item>
-      </template>
-      <a-form-item label="UDP Hop">
-        <a-switch v-model="inbound.stream.finalmask.quicParams.hasUdpHop"></a-switch>
-      </a-form-item>
-      <template v-if="inbound.stream.finalmask.quicParams.hasUdpHop">
-        <a-form-item label="Hop Ports">
-          <a-input v-model.trim="inbound.stream.finalmask.quicParams.udpHop.ports" placeholder="e.g. 20000-50000" />
-        </a-form-item>
-        <a-form-item label="Hop Interval (s)">
-          <a-input-number v-model.number="inbound.stream.finalmask.quicParams.udpHop.interval" :min="5" />
-        </a-form-item>
-      </template>
-      <a-form-item label="Max Idle Timeout (s)">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.maxIdleTimeout" :min="4" :max="120" />
-      </a-form-item>
-      <a-form-item label="Keep Alive Period (s)">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.keepAlivePeriod" :min="2" :max="60" />
-      </a-form-item>
-      <a-form-item label="Disable Path MTU Dis">
-        <a-switch v-model="inbound.stream.finalmask.quicParams.disablePathMTUDiscovery"></a-switch>
-      </a-form-item>
-      <a-form-item label="Max Incoming Streams">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.maxIncomingStreams" :min="8"
-          placeholder="1024 = default" />
-      </a-form-item>
-      <a-form-item label="Init Stream Window">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.initStreamReceiveWindow" :min="16384"
-          placeholder="8388608 = default" />
-      </a-form-item>
-      <a-form-item label="Max Stream Window">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.maxStreamReceiveWindow" :min="16384"
-          placeholder="8388608 = default" />
-      </a-form-item>
-      <a-form-item label="Init Conn Window">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.initConnectionReceiveWindow" :min="16384"
-          placeholder="20971520 = default" />
-      </a-form-item>
-      <a-form-item label="Max Conn Window">
-        <a-input-number v-model.number="inbound.stream.finalmask.quicParams.maxConnectionReceiveWindow" :min="16384"
-          placeholder="20971520 = default" />
-      </a-form-item>
-    </template>
-  </template>
-</a-form>
-{{end}}
@@ -1,13 +0,0 @@
-{{define "form/streamGRPC"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="Service Name">
-    <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
-  </a-form-item>
-  <a-form-item label="Authority">
-    <a-input v-model.trim="inbound.stream.grpc.authority"></a-input>
-  </a-form-item>
-  <a-form-item label="Multi Mode">
-    <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,29 +0,0 @@
-{{define "form/streamHTTPUpgrade"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="Proxy Protocol">
-    <a-switch v-model="inbound.stream.httpupgrade.acceptProxyProtocol"></a-switch>
-  </a-form-item>
-  <a-form-item label='{{ i18n "host" }}'>
-    <a-input v-model.trim="inbound.stream.httpupgrade.host"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "path" }}'>
-    <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-    <a-button icon="plus" size="small" @click="inbound.stream.httpupgrade.addHeader('', '')"></a-button>
-  </a-form-item>
-  <a-form-item :wrapper-col="{span:24}">
-    <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
-      <a-input :style="{ width: '50%' }" v-model.trim="header.name"
-        placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="header.value"
-        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-        <a-button icon="minus" slot="addonAfter" size="small"
-          @click="inbound.stream.httpupgrade.removeHeader(index)"></a-button>
-      </a-input>
-    </a-input-group>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,58 +0,0 @@
-{{define "form/streamHysteria"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="UDP Idle Timeout">
-    <a-input-number v-model.number="inbound.stream.hysteria.udpIdleTimeout" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Masquerade">
-    <a-switch v-model="inbound.stream.hysteria.masqueradeSwitch"></a-switch>
-  </a-form-item>
-  <template v-if="inbound.stream.hysteria.masqueradeSwitch">
-    <a-divider :style="{ margin: '5px 0 0' }">Masquerade</a-divider>
-    <a-form-item label="Type">
-      <a-select v-model="inbound.stream.hysteria.masquerade.type" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value="file">File</a-select-option>
-        <a-select-option value="proxy">Proxy</a-select-option>
-        <a-select-option value="string">String</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="Dir" v-if="inbound.stream.hysteria.masquerade.type === 'file'">
-      <a-input v-model.trim="inbound.stream.hysteria.masquerade.dir"></a-input>
-    </a-form-item>
-    <template v-if="inbound.stream.hysteria.masquerade.type === 'proxy'">
-      <a-form-item label="URL">
-        <a-input v-model.trim="inbound.stream.hysteria.masquerade.url"></a-input>
-      </a-form-item>
-      <a-form-item label="Rewrite Host">
-        <a-switch v-model="inbound.stream.hysteria.masquerade.rewriteHost"></a-switch>
-      </a-form-item>
-      <a-form-item label="Insecure">
-        <a-switch v-model="inbound.stream.hysteria.masquerade.insecure"></a-switch>
-      </a-form-item>
-    </template>
-    <template v-if="inbound.stream.hysteria.masquerade.type === 'string'">
-      <a-form-item label="Content">
-        <a-input v-model.trim="inbound.stream.hysteria.masquerade.content"></a-input>
-      </a-form-item>
-      <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.hysteria.masquerade.addHeader('', '')">+</a-button>
-      </a-form-item>
-      <a-form-item :wrapper-col="{span:24}">
-        <a-input-group compact v-for="(header, index) in inbound.stream.hysteria.masquerade.headers">
-          <a-input style="width: 50%" v-model.trim="header.name"
-            placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-            <template slot="addonBefore" style="margin: 0">[[ index+1 ]]</template>
-          </a-input>
-          <a-input style="width: 50%" v-model.trim="header.value"
-            placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-            <a-button slot="addonAfter" size="small"
-              @click="inbound.stream.hysteria.masquerade.removeHeader(index)">-</a-button>
-          </a-input>
-        </a-input-group>
-      </a-form-item>
-      <a-form-item label="Status Code">
-        <a-input-number v-model.number="inbound.stream.hysteria.masquerade.statusCode"></a-input-number>
-      </a-form-item>
-    </template>
-  </template>
-</a-form>
-{{end}}
@@ -1,22 +0,0 @@
-{{define "form/streamKCP"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="MTU">
-    <a-input-number v-model.number="inbound.stream.kcp.mtu" :min="576" :max="1460"></a-input-number>
-  </a-form-item>
-  <a-form-item label="TTI (ms)">
-    <a-input-number v-model.number="inbound.stream.kcp.tti" :min="10" :max="100"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Uplink (MB/s)">
-    <a-input-number v-model.number="inbound.stream.kcp.upCap" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Downlink (MB/s)">
-    <a-input-number v-model.number="inbound.stream.kcp.downCap" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item label="CWND Multiplier">
-    <a-input-number v-model.number="inbound.stream.kcp.cwndMultiplier" :min="1"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Max Sending Window">
-    <a-input-number v-model.number="inbound.stream.kcp.maxSendingWindow" :min="0"></a-input-number>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,58 +0,0 @@
-{{define "form/streamSettings"}}
-<!-- select stream network -->
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }"
-  v-if="inbound.protocol != Protocols.HYSTERIA">
-  <a-form-item label='{{ i18n "transmission" }}'>
-    <a-select v-model="inbound.stream.network" :style="{ width: '75%' }" @change="streamNetworkChange"
-      :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value="tcp">TCP (RAW)</a-select-option>
-      <a-select-option value="kcp">mKCP</a-select-option>
-      <a-select-option value="ws">WebSocket</a-select-option>
-      <a-select-option value="grpc">gRPC</a-select-option>
-      <a-select-option value="httpupgrade">HTTPUpgrade</a-select-option>
-      <a-select-option value="xhttp">XHTTP</a-select-option>
-    </a-select>
-  </a-form-item>
-</a-form>
-
-<!-- tcp -->
-<template v-if="inbound.stream.network === 'tcp'">
-  {{template "form/streamTCP" .}}
-</template>
-
-<!-- kcp -->
-<template v-if="inbound.stream.network === 'kcp'">
-  {{template "form/streamKCP" .}}
-</template>
-
-<!-- ws -->
-<template v-if="inbound.stream.network === 'ws'">
-  {{template "form/streamWS" .}}
-</template>
-
-<!-- grpc -->
-<template v-if="inbound.stream.network === 'grpc'">
-  {{template "form/streamGRPC" .}}
-</template>
-
-<!-- hysteria -->
-<template v-if="inbound.stream.network === 'hysteria'">
-  {{template "form/streamHysteria" .}}
-</template>
-
-<!-- httpupgrade -->
-<template v-if="inbound.stream.network === 'httpupgrade'">
-  {{template "form/streamHTTPUpgrade" .}}
-</template>
-
-<!-- xhttp -->
-<template v-if="inbound.stream.network === 'xhttp'">
-  {{template "form/streamXHTTP" .}}
-</template>
-
-<!-- sockopt -->
-<template> {{template "form/streamSockopt" .}} </template>
-
-<!-- finalmask -->
-<template> {{template "form/streamFinalMask" .}} </template>
-{{end}}
@@ -1,78 +0,0 @@
-{{define "form/streamSockopt"}}
-<a-divider :style="{ margin: '5px 0 0' }"></a-divider>
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="Sockopt">
-    <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
-  </a-form-item>
-  <template v-if="inbound.stream.sockoptSwitch">
-    <a-form-item label="Route Mark">
-      <a-input-number v-model.number="inbound.stream.sockopt.mark" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="TCP Keep Alive Interval">
-      <a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="TCP Keep Alive Idle">
-      <a-input-number v-model.number="inbound.stream.sockopt.tcpKeepAliveIdle" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="TCP Max Seg">
-      <a-input-number v-model.number="inbound.stream.sockopt.tcpMaxSeg" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="TCP User Timeout">
-      <a-input-number v-model.number="inbound.stream.sockopt.tcpUserTimeout" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="TCP Window Clamp">
-      <a-input-number v-model.number="inbound.stream.sockopt.tcpWindowClamp" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item label="Proxy Protocol">
-      <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
-    </a-form-item>
-    <a-form-item label="TCP Fast Open">
-      <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
-    </a-form-item>
-    <a-form-item label="Multipath TCP">
-      <a-switch v-model.trim="inbound.stream.sockopt.tcpMptcp"></a-switch>
-    </a-form-item>
-    <a-form-item label="Penetrate">
-      <a-switch v-model.trim="inbound.stream.sockopt.penetrate"></a-switch>
-    </a-form-item>
-    <a-form-item label="V6 Only">
-      <a-switch v-model.trim="inbound.stream.sockopt.V6Only"></a-switch>
-    </a-form-item>
-    <a-form-item label="Domain Strategy">
-      <a-select v-model="inbound.stream.sockopt.domainStrategy" :style="{ width: '50%' }"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option v-for="key in DOMAIN_STRATEGY_OPTION" :value="key">[[ key ]]</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="TCP Congestion">
-      <a-select v-model="inbound.stream.sockopt.tcpcongestion" :style="{ width: '50%' }"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option v-for="key in TCP_CONGESTION_OPTION" :value="key">[[ key ]]</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="TProxy">
-      <a-select v-model="inbound.stream.sockopt.tproxy" :style="{ width: '50%' }"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value="off">Off</a-select-option>
-        <a-select-option value="redirect">Redirect</a-select-option>
-        <a-select-option value="tproxy">TProxy</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="Dialer Proxy">
-      <a-input v-model="inbound.stream.sockopt.dialerProxy"></a-input>
-    </a-form-item>
-    <a-form-item label="Interface Name">
-      <a-input v-model="inbound.stream.sockopt.interfaceName"></a-input>
-    </a-form-item>
-    <a-form-item label="Trusted X-Forwarded-For">
-      <a-select mode="tags" v-model="inbound.stream.sockopt.trustedXForwardedFor" :style="{ width: '100%' }"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value="CF-Connecting-IP">CF-Connecting-IP</a-select-option>
-        <a-select-option value="X-Real-IP">X-Real-IP</a-select-option>
-        <a-select-option value="True-Client-IP">True-Client-IP</a-select-option>
-        <a-select-option value="X-Client-IP">X-Client-IP</a-select-option>
-      </a-select>
-    </a-form-item>
-  </template>
-</a-form>
-{{end}}
@@ -1,81 +0,0 @@
-{{define "form/streamTCP"}}
-<!-- tcp type -->
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="Proxy Protocol" v-if="inbound.canEnableTls()">
-    <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
-  </a-form-item>
-  <a-form-item label='HTTP {{ i18n "camouflage" }}'>
-    <a-switch :checked="inbound.stream.tcp.type === 'http'"
-      @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'"></a-switch>
-  </a-form-item>
-</a-form>
-
-<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }"
-  :wrapper-col="{ md: {span:14} }">
-  <!-- tcp request -->
-  <a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.request" }}</a-divider>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-    <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.method" }}'>
-    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
-  </a-form-item>
-  <a-form-item>
-    <template slot="label">{{ i18n "pages.inbounds.stream.tcp.path" }}
-      <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addPath('/')"></a-button>
-    </template>
-    <template v-for="(path, index) in inbound.stream.tcp.request.path">
-      <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
-        <a-button icon="minus" size="small" slot="addonAfter" @click="inbound.stream.tcp.request.removePath(index)"
-          v-if="inbound.stream.tcp.request.path.length>1"></a-button>
-      </a-input>
-    </template>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-    <a-button icon="plus" size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')"></a-button>
-  </a-form-item>
-  <a-form-item :wrapper-col="{span:24}">
-    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
-      <a-input :style="{ width: '50%' }" v-model.trim="header.name"
-        placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="header.value"
-        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-        <a-button icon="minus" slot="addonAfter" size="small"
-          @click="inbound.stream.tcp.request.removeHeader(index)"></a-button>
-      </a-input>
-    </a-input-group>
-  </a-form-item>
-
-  <!-- tcp response -->
-  <a-divider :style="{ margin: '0' }">{{ i18n "pages.inbounds.stream.general.response" }}</a-divider>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.version" }}'>
-    <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.status" }}'>
-    <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.statusDescription" }}'>
-    <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
-    <a-button icon="plus" size="small"
-      @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')"></a-button>
-  </a-form-item>
-  <a-form-item :wrapper-col="{span:24}">
-    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.headers">
-      <a-input :style="{ width: '50%' }" v-model.trim="header.name"
-        placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="header.value"
-        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-        <template slot="addonAfter">
-          <a-button icon="minus" size="small" @click="inbound.stream.tcp.response.removeHeader(index)"></a-button>
-        </template>
-      </a-input>
-    </a-input-group>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,31 +0,0 @@
-{{define "form/streamWS"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label="Proxy Protocol">
-    <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
-  </a-form-item>
-  <a-form-item label='{{ i18n "host" }}'>
-    <a-input v-model.trim="inbound.stream.ws.host"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "path" }}'>
-    <a-input v-model.trim="inbound.stream.ws.path"></a-input>
-  </a-form-item>
-  <a-form-item label="Heartbeat Period">
-    <a-input-number v-model.number="inbound.stream.ws.heartbeatPeriod" :min="0"></a-input-number>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-    <a-button icon="plus" size="small" @click="inbound.stream.ws.addHeader('', '')"></a-button>
-  </a-form-item>
-  <a-form-item :wrapper-col="{span:24}">
-    <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
-      <a-input :style="{ width: '50%' }" v-model.trim="header.name"
-        placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="header.value"
-        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-        <a-button icon="minus" slot="addonAfter" size="small" @click="inbound.stream.ws.removeHeader(index)"></a-button>
-      </a-input>
-    </a-input-group>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,117 +0,0 @@
-{{define "form/streamXHTTP"}}
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <a-form-item label='{{ i18n "host" }}'>
-    <a-input v-model.trim="inbound.stream.xhttp.host"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "path" }}'>
-    <a-input v-model.trim="inbound.stream.xhttp.path"></a-input>
-  </a-form-item>
-  <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-    <a-button icon="plus" size="small" @click="inbound.stream.xhttp.addHeader('', '')"></a-button>
-  </a-form-item>
-  <a-form-item :wrapper-col="{span:24}">
-    <a-input-group compact v-for="(header, index) in inbound.stream.xhttp.headers">
-      <a-input :style="{ width: '50%' }" v-model.trim="header.name"
-        placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
-        <template slot="addonBefore" :style="{ margin: '0' }">[[ index+1 ]]</template>
-      </a-input>
-      <a-input :style="{ width: '50%' }" v-model.trim="header.value"
-        placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-        <a-button icon="minus" slot="addonAfter" size="small"
-          @click="inbound.stream.xhttp.removeHeader(index)"></a-button>
-      </a-input>
-    </a-input-group>
-  </a-form-item>
-  <a-form-item label="Mode">
-    <a-select v-model="inbound.stream.xhttp.mode" :style="{ width: '50%' }"
-      :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option v-for="key in MODE_OPTION" :value="key">[[ key ]]</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item label="Max Buffered Upload" v-if="inbound.stream.xhttp.mode === 'packet-up'">
-    <a-input-number v-model.number="inbound.stream.xhttp.scMaxBufferedPosts"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Max Upload Size (Byte)" v-if="inbound.stream.xhttp.mode === 'packet-up'">
-    <a-input v-model.trim="inbound.stream.xhttp.scMaxEachPostBytes"></a-input>
-  </a-form-item>
-  <a-form-item label="Stream-Up Server" v-if="inbound.stream.xhttp.mode === 'stream-up'">
-    <a-input v-model.trim="inbound.stream.xhttp.scStreamUpServerSecs"></a-input>
-  </a-form-item>
-  <a-form-item label="Server Max Header Bytes">
-    <a-input-number v-model.number="inbound.stream.xhttp.serverMaxHeaderBytes" :min="0"
-      placeholder="0 (default)"></a-input-number>
-  </a-form-item>
-  <a-form-item label="Padding Bytes">
-    <a-input v-model.trim="inbound.stream.xhttp.xPaddingBytes"></a-input>
-  </a-form-item>
-  <a-form-item label="Padding Obfs Mode">
-    <a-switch v-model="inbound.stream.xhttp.xPaddingObfsMode"></a-switch>
-  </a-form-item>
-  <template v-if="inbound.stream.xhttp.xPaddingObfsMode">
-    <a-form-item label="Padding Key">
-      <a-input v-model.trim="inbound.stream.xhttp.xPaddingKey" placeholder="x_padding"></a-input>
-    </a-form-item>
-    <a-form-item label="Padding Header">
-      <a-input v-model.trim="inbound.stream.xhttp.xPaddingHeader" placeholder="X-Padding"></a-input>
-    </a-form-item>
-    <a-form-item label="Padding Placement">
-      <a-select v-model="inbound.stream.xhttp.xPaddingPlacement" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value>Default (queryInHeader)</a-select-option>
-        <a-select-option value="queryInHeader">queryInHeader</a-select-option>
-        <a-select-option value="header">header</a-select-option>
-        <a-select-option value="cookie">cookie</a-select-option>
-        <a-select-option value="query">query</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="Padding Method">
-      <a-select v-model="inbound.stream.xhttp.xPaddingMethod" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value>Default (repeat-x)</a-select-option>
-        <a-select-option value="repeat-x">repeat-x</a-select-option>
-        <a-select-option value="tokenish">tokenish</a-select-option>
-      </a-select>
-    </a-form-item>
-  </template>
-  <a-form-item label="Session Placement">
-    <a-select v-model="inbound.stream.xhttp.sessionPlacement" :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value>Default (path)</a-select-option>
-      <a-select-option value="path">path</a-select-option>
-      <a-select-option value="header">header</a-select-option>
-      <a-select-option value="cookie">cookie</a-select-option>
-      <a-select-option value="query">query</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item label="Session Key"
-    v-if="inbound.stream.xhttp.sessionPlacement && inbound.stream.xhttp.sessionPlacement !== 'path'">
-    <a-input v-model.trim="inbound.stream.xhttp.sessionKey" placeholder="x_session"></a-input>
-  </a-form-item>
-  <a-form-item label="Sequence Placement">
-    <a-select v-model="inbound.stream.xhttp.seqPlacement" :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value>Default (path)</a-select-option>
-      <a-select-option value="path">path</a-select-option>
-      <a-select-option value="header">header</a-select-option>
-      <a-select-option value="cookie">cookie</a-select-option>
-      <a-select-option value="query">query</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item label="Sequence Key"
-    v-if="inbound.stream.xhttp.seqPlacement && inbound.stream.xhttp.seqPlacement !== 'path'">
-    <a-input v-model.trim="inbound.stream.xhttp.seqKey" placeholder="x_seq"></a-input>
-  </a-form-item>
-  <a-form-item label="Uplink Data Placement" v-if="inbound.stream.xhttp.mode === 'packet-up'">
-    <a-select v-model="inbound.stream.xhttp.uplinkDataPlacement" :dropdown-class-name="themeSwitcher.currentTheme">
-      <a-select-option value>Default (body)</a-select-option>
-      <a-select-option value="body">body</a-select-option>
-      <a-select-option value="header">header</a-select-option>
-      <a-select-option value="cookie">cookie</a-select-option>
-      <a-select-option value="query">query</a-select-option>
-    </a-select>
-  </a-form-item>
-  <a-form-item label="Uplink Data Key"
-    v-if="inbound.stream.xhttp.mode === 'packet-up' && inbound.stream.xhttp.uplinkDataPlacement && inbound.stream.xhttp.uplinkDataPlacement !== 'body'">
-    <a-input v-model.trim="inbound.stream.xhttp.uplinkDataKey" placeholder="x_data"></a-input>
-  </a-form-item>
-  <a-form-item label="No SSE Header">
-    <a-switch v-model="inbound.stream.xhttp.noSSEHeader"></a-switch>
-  </a-form-item>
-</a-form>
-{{end}}
@@ -1,138 +0,0 @@
-{{define "form/tlsSettings"}}
-<!-- tls enable -->
-<a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-  <template v-if="inbound.protocol !== Protocols.HYSTERIA">
-    <a-divider :style="{ margin: '3px 0' }"></a-divider>
-    <a-form-item label='{{ i18n "security" }}'>
-      <a-radio-group v-model="inbound.stream.security" button-style="solid">
-        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-        <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
-        <a-radio-button value="tls">TLS</a-radio-button>
-      </a-radio-group>
-    </a-form-item>
-  </template>
-  <template v-else><a-divider style="margin:0;">TLS</a-divider></template>
-
-  <!-- tls settings -->
-  <template v-if="inbound.stream.isTls">
-    <a-form-item label="SNI" placeholder="Server Name Indication">
-      <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
-    </a-form-item>
-    <a-form-item label="Cipher Suites">
-      <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value>Auto</a-select-option>
-        <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[
-          value ]]</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="Min/Max Version">
-      <a-input-group compact>
-        <a-select v-model="inbound.stream.tls.minVersion" :style="{ width: '50%' }"
-          :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key
-            ]]</a-select-option>
-        </a-select>
-        <a-select v-model="inbound.stream.tls.maxVersion" :style="{ width: '50%' }"
-          :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key
-            ]]</a-select-option>
-        </a-select>
-      </a-input-group>
-    </a-form-item>
-    <a-form-item label="uTLS">
-      <a-select v-model="inbound.stream.tls.settings.fingerprint" :style="{ width: '100%' }"
-        :dropdown-class-name="themeSwitcher.currentTheme">
-        <a-select-option value>None</a-select-option>
-        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key
-          ]]</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="ALPN">
-      <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme" v-model="inbound.stream.tls.alpn">
-        <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn
-          ]]</a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="Reject Unknown SNI">
-      <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
-    </a-form-item>
-    <a-form-item label="Disable System Root">
-      <a-switch v-model="inbound.stream.tls.disableSystemRoot"></a-switch>
-    </a-form-item>
-    <a-form-item label="Session Resumption">
-      <a-switch v-model="inbound.stream.tls.enableSessionResumption"></a-switch>
-    </a-form-item>
-    <a-divider :style="{ margin: '3px 0' }"></a-divider>
-    <template v-for="cert,index in inbound.stream.tls.certs">
-      <a-form-item label='{{ i18n "certificate" }}'>
-        <a-radio-group v-model="cert.useFile" button-style="solid"
-          :style="{ display: 'inline-flex', whiteSpace: 'nowrap', maxWidth: '100%' }">
-          <a-radio-button :value="true" :style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">{{
-            i18n "pages.inbounds.certificatePath" }}</a-radio-button>
-          <a-radio-button :value="false"
-            :style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">{{
-            i18n "pages.inbounds.certificateContent" }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item label=" ">
-        <a-space>
-          <a-button icon="plus" v-if="index === 0" type="primary" size="small"
-            @click="inbound.stream.tls.addCert()"></a-button>
-          <a-button icon="minus" v-if="inbound.stream.tls.certs.length>1" type="primary" size="small"
-            @click="inbound.stream.tls.removeCert(index)"></a-button>
-        </a-space>
-      </a-form-item>
-      <template v-if="cert.useFile">
-        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-          <a-input v-model.trim="cert.certFile"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-          <a-input v-model.trim="cert.keyFile"></a-input>
-        </a-form-item>
-        <a-form-item label=" ">
-          <a-button type="primary" icon="import" @click="setDefaultCertData(index)">
-            {{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
-        </a-form-item>
-      </template>
-      <template v-else>
-        <a-form-item label='{{ i18n "pages.inbounds.publicKey" }}'>
-          <a-textarea v-model="cert.cert"></a-textarea>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.inbounds.privatekey" }}'>
-          <a-textarea v-model="cert.key"></a-textarea>
-        </a-form-item>
-      </template>
-      <a-form-item label="One Time Loading">
-        <a-switch v-model="cert.oneTimeLoading"></a-switch>
-      </a-form-item>
-      <a-form-item label='Usage Option'>
-        <a-select v-model="cert.usage" :style="{ width: '50%' }" :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option v-for="key in USAGE_OPTION" :value="key">[[ key
-            ]]</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="Build Chain" v-if="cert.usage === 'issue'">
-        <a-switch v-model="cert.buildChain"></a-switch>
-      </a-form-item>
-    </template>
-    <a-form-item label='ECH key'>
-      <a-input v-model="inbound.stream.tls.echServerKeys"></a-input>
-    </a-form-item>
-    <a-form-item label='ECH config'>
-      <a-input v-model="inbound.stream.tls.settings.echConfigList"></a-input>
-    </a-form-item>
-    <a-form-item label=" ">
-      <a-space>
-        <a-button type="primary" icon="import" @click="getNewEchCert">Get New
-          ECH Cert</a-button>
-        <a-button danger @click="clearEchCert">Clear</a-button>
-      </a-space>
-    </a-form-item>
-  </template>
-
-  <!-- reality settings -->
-  <template v-if="inbound.stream.isReality">
-    {{template "form/realitySettings" .}}
-  </template>
-</a-form>
-{{end}}
@@ -1,261 +0,0 @@
-{{ template "page/head_start" .}}
-{{ template "page/head_end" .}}
-
-{{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
-  <transition name="list" appear>
-    <a-layout-content class="under min-h-0">
-      <div class="waves-header">
-        <div class="waves-inner-header"></div>
-        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
-          <defs>
-            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-          </defs>
-          <g class="parallax">
-            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
-          </g>
-        </svg>
-      </div>
-      <a-row type="flex" justify="center" align="middle" class="h-100 overflow-y-auto overflow-x-hidden">
-        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
-          <template v-if="!loadingStates.fetched">
-            <div class="text-center">
-              <a-spin size="large" />
-            </div>
-          </template>
-          <template v-else>
-            <div class="setting-section">
-              <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
-                placement="bottomRight" trigger="click">
-                <template slot="content">
-                  <a-space direction="vertical" :size="10">
-                    <a-theme-switch-login></a-theme-switch-login>
-                    <span>{{ i18n "pages.settings.language" }}</span>
-                    <a-select ref="selectLang" class="w-100" v-model="lang" @change="LanguageManager.setLanguage(lang)"
-                      :dropdown-class-name="themeSwitcher.currentTheme">
-                      <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
-                        <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                        &nbsp;&nbsp;<span v-text="l.name"></span>
-                      </a-select-option>
-                    </a-select>
-                  </a-space>
-                </template>
-                <a-button shape="circle" icon="setting"></a-button>
-              </a-popover>
-            </div>
-            <a-row type="flex" justify="center">
-              <a-col :style="{ width: '100%' }">
-                <h2 class="title headline zoom">
-                  <span class="words-wrapper">
-                    <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
-                    <b>{{ i18n "pages.login.title" }}</b>
-                  </span>
-                </h2>
-              </a-col>
-            </a-row>
-            <a-row type="flex" justify="center">
-              <a-col span="24">
-                <a-form @submit.prevent="login">
-                  <a-space direction="vertical" size="middle">
-                    <a-form-item>
-                      <a-input autocomplete="username" name="username" v-model.trim="user.username"
-                        placeholder='{{ i18n "username" }}' autofocus required>
-                        <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
-                      </a-input>
-                    </a-form-item>
-                    <a-form-item>
-                      <a-input-password autocomplete="current-password" name="password" v-model.trim="user.password"
-                        placeholder='{{ i18n "password" }}' required>
-                        <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
-                      </a-input-password>
-                    </a-form-item>
-                    <a-form-item v-if="twoFactorEnable">
-                      <a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
-                        placeholder='{{ i18n "twoFactorCode" }}' required>
-                        <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
-                      </a-input>
-                    </a-form-item>
-                    <a-form-item>
-                      <a-row justify="center" class="centered">
-                        <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem"
-                          :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
-                          <a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
-                            :icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
-                            [[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
-                          </a-button>
-                        </div>
-                      </a-row>
-                    </a-form-item>
-                  </a-space>
-                </a-form>
-              </a-col>
-            </a-row>
-          </template>
-        </a-col>
-      </a-row>
-    </a-layout-content>
-  </transition>
-</a-layout>
-{{template "page/body_scripts" .}}
-{{template "component/aThemeSwitch" .}}
-<script>
-  const app = new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#app',
-    data: {
-      themeSwitcher,
-      loadingStates: {
-        fetched: false,
-        spinning: false
-      },
-      user: {
-        username: "",
-        password: "",
-        twoFactorCode: ""
-      },
-      twoFactorEnable: false,
-      lang: "",
-      animationStarted: false
-    },
-    async mounted() {
-      this.lang = LanguageManager.getLanguage();
-      this.twoFactorEnable = await this.getTwoFactorEnable();
-    },
-    methods: {
-      async login() {
-        this.loadingStates.spinning = true;
-        const msg = await HttpUtil.post('/login', this.user);
-        if (msg.success) {
-          location.href = basePath + 'panel/';
-        }
-        this.loadingStates.spinning = false;
-      },
-      async getTwoFactorEnable() {
-        const msg = await HttpUtil.post('/getTwoFactorEnable');
-        if (msg.success) {
-          this.twoFactorEnable = msg.obj;
-          this.loadingStates.fetched = true;
-          this.$nextTick(() => {
-            if (!this.animationStarted) {
-              this.animationStarted = true;
-              this.initHeadline();
-            }
-          });
-          return msg.obj;
-        }
-      },
-      initHeadline() {
-        const animationDelay = 2000;
-        const rootEl = this.$el instanceof Element ? this.$el : document.getElementById('app');
-        if (!rootEl || typeof rootEl.querySelectorAll !== 'function') {
-          return;
-        }
-        const headlines = rootEl.querySelectorAll('.headline');
-        headlines.forEach((headline) => {
-          const first = headline.querySelector('.is-visible');
-          if (!first) return;
-          setTimeout(() => this.hideWord(first, animationDelay), animationDelay);
-        });
-      },
-      hideWord(word, delay) {
-        const nextWord = this.takeNext(word);
-        this.switchWord(word, nextWord);
-        setTimeout(() => this.hideWord(nextWord, delay), delay);
-      },
-      takeNext(word) {
-        return word.nextElementSibling || word.parentElement.firstElementChild;
-      },
-      switchWord(oldWord, newWord) {
-        oldWord.classList.remove('is-visible');
-        oldWord.classList.add('is-hidden');
-        newWord.classList.remove('is-hidden');
-        newWord.classList.add('is-visible');
-      }
-    },
-  });
-
-  const pm_input_selector = 'input.ant-input, textarea.ant-input';
-  const pm_strip_props = [
-    'background',
-    'background-color',
-    'background-image',
-    'color'
-  ];
-
-  const pm_observed_forms = new WeakSet();
-
-  function pm_strip_inline(el) {
-    if (!el || el.nodeType !== 1 || !el.matches?.(pm_input_selector)) return;
-
-    let did_change = false;
-    for (const prop of pm_strip_props) {
-      if (el.style.getPropertyValue(prop)) {
-        el.style.removeProperty(prop);
-        did_change = true;
-      }
-    }
-
-    if (did_change && el.style.length === 0) {
-      el.removeAttribute('style');
-    }
-  }
-
-  function pm_attach_observer(form) {
-    if (pm_observed_forms.has(form)) return;
-    pm_observed_forms.add(form);
-
-    form.querySelectorAll(pm_input_selector).forEach(pm_strip_inline);
-
-    const pm_mo = new MutationObserver(mutations => {
-      for (const m of mutations) {
-        if (m.type === 'attributes') {
-          pm_strip_inline(m.target);
-        } else if (m.type === 'childList') {
-          for (const n of m.addedNodes) {
-            if (n.nodeType !== 1) continue;
-            if (n.matches?.(pm_input_selector)) pm_strip_inline(n);
-            n.querySelectorAll?.(pm_input_selector).forEach(pm_strip_inline);
-          }
-        }
-      }
-    });
-
-    pm_mo.observe(form, {
-      attributes: true,
-      attributeFilter: ['style'],
-      childList: true,
-      subtree: true
-    });
-  }
-
-  function pm_init() {
-    document.querySelectorAll('form.ant-form').forEach(pm_attach_observer);
-    const pm_host = document.getElementById('login') || document.body;
-    const pm_wait_for_forms = new MutationObserver(mutations => {
-      for (const m of mutations) {
-        for (const n of m.addedNodes) {
-          if (n.nodeType !== 1) continue;
-          if (n.matches?.('form.ant-form')) pm_attach_observer(n);
-          n.querySelectorAll?.('form.ant-form').forEach(pm_attach_observer);
-        }
-      }
-    });
-    pm_wait_for_forms.observe(pm_host, {
-      childList: true,
-      subtree: true
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', pm_init, {
-      once: true
-    });
-  } else {
-    pm_init();
-  }
-</script>
-{{ template "page/body_end" .}}
@@ -1,262 +0,0 @@
-{{define "modals/clientsBulkModal"}}
-<a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title"
-    @ok="clientsBulkModal.ok" :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
-    :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-        <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid"
-                :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option :value="0">Random</a-select-option>
-                <a-select-option :value="1">Random+Prefix</a-select-option>
-                <a-select-option :value="2">Random+Prefix+Num</a-select-option>
-                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
-                <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.first" }}' v-if="clientsBulkModal.emailMethod>1">
-            <a-input-number v-model.number="clientsBulkModal.firstNum" :min="1"></a-input-number>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.last" }}' v-if="clientsBulkModal.emailMethod>1">
-            <a-input-number v-model.number="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.prefix" }}' v-if="clientsBulkModal.emailMethod>0">
-            <a-input v-model.trim="clientsBulkModal.emailPrefix"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.postfix" }}' v-if="clientsBulkModal.emailMethod>2">
-            <a-input v-model.trim="clientsBulkModal.emailPostfix"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.clientCount" }}' v-if="clientsBulkModal.emailMethod < 2">
-            <a-input-number v-model.number="clientsBulkModal.quantity" :min="1" :max="500"></a-input-number>
-        </a-form-item>
-        <a-form-item label='{{ i18n "security" }}' v-if="inbound.protocol === Protocols.VMESS">
-            <a-select v-model="clientsBulkModal.security" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option v-for="key in USERS_SECURITY" :value="key">[[
-                    key ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
-            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value selected>{{ i18n "none"
-                    }}</a-select-option>
-                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[
-                    key ]]</a-select-option>
-            </a-select>
-        </a-form-item>
-        <a-form-item v-if="app.subSettings?.enable">
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.subscriptionDesc"
-                            }}</span>
-                    </template>
-                    Subscription
-                    <a-icon @click="clientsBulkModal.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-input v-model.trim="clientsBulkModal.subId"></a-input>
-        </a-form-item>
-        <a-form-item v-if="app.tgBotEnable">
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                    </template>
-                    Telegram ChatID
-                    <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-input-number :style="{ width: '50%' }" v-model.number="clientsBulkModal.tgId" min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item v-if="app.ipLimitEnable">
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                    </template>
-                    <span>{{ i18n "pages.inbounds.IPLimit" }} </span>
-                    <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-input-number v-model.number="clientsBulkModal.limitIp" min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    {{ i18n "pages.inbounds.totalFlow" }}
-                    <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-input-number v-model.number="clientsBulkModal.totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
-        </a-form-item>
-        <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
-            <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item v-else>
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire"
-                            }}</span>
-                    </template>
-                    {{ i18n "pages.inbounds.expireDate" }}
-                    <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
-                format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
-                v-model="clientsBulkModal.expiryTime"></a-date-picker>
-            <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
-                value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime">
-            </a-persian-datepicker>
-        </a-form-item>
-        <a-form-item v-if="clientsBulkModal.expiryTime != 0">
-            <template slot="label">
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.client.renewDesc" }}</span>
-                    </template>
-                    {{ i18n "pages.client.renew" }}
-                    <a-icon type="question-circle"></a-icon>
-                </a-tooltip>
-            </template>
-            <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
-        </a-form-item>
-    </a-form>
-</a-modal>
-<script>
-    const clientsBulkModal = {
-        visible: false,
-        confirmLoading: false,
-        title: '',
-        okText: '',
-        confirm: null,
-        dbInbound: new DBInbound(),
-        inbound: new Inbound(),
-        quantity: 1,
-        totalGB: 0,
-        limitIp: 0,
-        expiryTime: '',
-        emailMethod: 0,
-        firstNum: 1,
-        lastNum: 1,
-        emailPrefix: "",
-        emailPostfix: "",
-        subId: "",
-        tgId: '',
-        security: "auto",
-        flow: "",
-        delayedStart: false,
-        reset: 0,
-        ok() {
-            clients = [];
-            method = clientsBulkModal.emailMethod;
-            if (method > 1) {
-                start = clientsBulkModal.firstNum;
-                end = clientsBulkModal.lastNum + 1;
-            } else {
-                start = 0;
-                end = clientsBulkModal.quantity;
-            }
-            prefix = (method > 0 && clientsBulkModal.emailPrefix.length > 0) ? clientsBulkModal.emailPrefix : "";
-            useNum = (method > 1);
-            postfix = (method > 2 && clientsBulkModal.emailPostfix.length > 0) ? clientsBulkModal.emailPostfix : "";
-            for (let i = start; i < end; i++) {
-                newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
-                if (method == 4) newClient.email = "";
-                newClient.email += useNum ? prefix + i.toString() + postfix : prefix + postfix;
-                if (clientsBulkModal.subId.length > 0) newClient.subId = clientsBulkModal.subId;
-                newClient.tgId = clientsBulkModal.tgId;
-                newClient.security = clientsBulkModal.security;
-                newClient.limitIp = clientsBulkModal.limitIp;
-                newClient._totalGB = clientsBulkModal.totalGB;
-                newClient._expiryTime = clientsBulkModal.expiryTime;
-                if (clientsBulkModal.inbound.canEnableTlsFlow()) {
-                    newClient.flow = clientsBulkModal.flow;
-                }
-                newClient.reset = clientsBulkModal.reset;
-                clients.push(newClient);
-            }
-            ObjectUtil.execute(clientsBulkModal.confirm, clients, clientsBulkModal.dbInbound.id);
-        },
-        show({
-            title = '',
-            okText = '{{ i18n "sure" }}',
-            dbInbound = null,
-            confirm = (inbound, dbInbound) => {}
-        }) {
-            this.visible = true;
-            this.title = title;
-            this.okText = okText;
-            this.confirm = confirm;
-            this.quantity = 1;
-            this.totalGB = 0;
-            this.expiryTime = 0;
-            this.emailMethod = 0;
-            this.limitIp = 0;
-            this.firstNum = 1;
-            this.lastNum = 1;
-            this.emailPrefix = "";
-            this.emailPostfix = "";
-            this.subId = "";
-            this.tgId = '';
-            this.security = "auto";
-            this.flow = "";
-            this.dbInbound = new DBInbound(dbInbound);
-            this.inbound = Inbound.fromJson(dbInbound.toInbound().toJson());
-            this.delayedStart = false;
-            this.reset = 0;
-        },
-        newClient(protocol) {
-            switch (protocol) {
-                case Protocols.VMESS:
-                    return new Inbound.VmessSettings.VMESS();
-                case Protocols.VLESS:
-                    return new Inbound.VLESSSettings.VLESS();
-                case Protocols.TROJAN:
-                    return new Inbound.TrojanSettings.Trojan();
-                case Protocols.SHADOWSOCKS:
-                    return new Inbound.ShadowsocksSettings.Shadowsocks(clientsBulkModal.inbound.settings
-                        .shadowsockses[0].method);
-                case Protocols.HYSTERIA:
-                    return new Inbound.HysteriaSettings.Hysteria();
-                default:
-                    return null;
-            }
-        },
-        close() {
-            clientsBulkModal.visible = false;
-            clientsBulkModal.loading(false);
-        },
-        loading(loading = true) {
-            clientsBulkModal.confirmLoading = loading;
-        },
-    };
-
-    const clientsBulkModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#client-bulk-modal',
-        data: {
-            clientsBulkModal,
-            get inbound() {
-                return this.clientsBulkModal.inbound;
-            },
-            get delayedExpireDays() {
-                return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 :
-                    0;
-            },
-            get datepicker() {
-                return app.datepicker;
-            },
-            set delayedExpireDays(days) {
-                this.clientsBulkModal.expiryTime = -86400000 * days;
-            },
-        },
-    });
-</script>
-{{end}}
@@ -1,193 +0,0 @@
-{{define "modals/clientsModal"}}
-<a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
-    :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
-    :class="themeSwitcher.currentTheme" :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
-    <template v-if="isEdit">
-        <a-tag v-if="isExpiry || isTrafficExhausted" color="red"
-            :style="{ marginBottom: '10px', display: 'block', textAlign: 'center' }">Account
-            is (Expired|Traffic Ended) And Disabled</a-tag>
-    </template>
-    {{template "form/client" .}}
-</a-modal>
-<script>
-    const clientModal = {
-        visible: false,
-        confirmLoading: false,
-        title: '',
-        okText: '',
-        isEdit: false,
-        dbInbound: new DBInbound(),
-        inbound: new Inbound(),
-        clients: [],
-        clientStats: [],
-        oldClientId: "",
-        index: null,
-        clientIps: null,
-        delayedStart: false,
-        ok() {
-            if (clientModal.isEdit) {
-                ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id, clientModal
-                    .oldClientId);
-            } else {
-                ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id);
-            }
-        },
-        show({
-            title = '',
-            okText = '{{ i18n "sure" }}',
-            index = null,
-            dbInbound = null,
-            confirm = () => {},
-            isEdit = false
-        }) {
-            this.visible = true;
-            this.title = title;
-            this.okText = okText;
-            this.isEdit = isEdit;
-            this.dbInbound = new DBInbound(dbInbound);
-            this.inbound = Inbound.fromJson(dbInbound.toInbound().toJson());
-            this.clients = this.inbound.clients;
-            this.index = index === null ? this.clients.length : index;
-            this.delayedStart = false;
-            if (isEdit) {
-                if (this.clients[index].expiryTime < 0) {
-                    this.delayedStart = true;
-                }
-                this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]);
-            } else {
-                this.addClient(this.inbound, this.clients);
-            }
-            this.clientStats = this.dbInbound.clientStats.find(row => row.email === this.clients[this.index].email);
-            this.confirm = confirm;
-        },
-        getClientId(protocol, client) {
-            switch (protocol) {
-                case Protocols.TROJAN:
-                    return client.password;
-                case Protocols.SHADOWSOCKS:
-                    return client.email;
-                case Protocols.HYSTERIA:
-                    return client.auth;
-                default:
-                    return client.id;
-            }
-        },
-        addClient(inbound, clients) {
-            switch (inbound.protocol) {
-                case Protocols.VMESS:
-                    return clients.push(new Inbound.VmessSettings.VMESS());
-                case Protocols.VLESS:
-                    return clients.push(new Inbound.VLESSSettings.VLESS());
-                case Protocols.TROJAN:
-                    return clients.push(new Inbound.TrojanSettings.Trojan());
-                case Protocols.SHADOWSOCKS:
-                    return clients.push(new Inbound.ShadowsocksSettings.Shadowsocks(clients[0].method, RandomUtil
-                        .randomShadowsocksPassword(inbound.settings.method)));
-                case Protocols.HYSTERIA:
-                    return clients.push(new Inbound.HysteriaSettings.Hysteria());
-                default:
-                    return null;
-            }
-        },
-        close() {
-            clientModal.visible = false;
-            clientModal.loading(false);
-        },
-        loading(loading = true) {
-            clientModal.confirmLoading = loading;
-        },
-    };
-
-    const clientModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#client-modal',
-        data: {
-            clientModal,
-            get inbound() {
-                return this.clientModal.inbound;
-            },
-            get client() {
-                return this.clientModal.clients[this.clientModal.index];
-            },
-            get clientStats() {
-                return this.clientModal.clientStats;
-            },
-            get isEdit() {
-                return this.clientModal.isEdit;
-            },
-            get datepicker() {
-                return app.datepicker;
-            },
-            get isTrafficExhausted() {
-                if (!this.clientStats) return false
-                if (this.clientStats.total <= 0) return false
-                if (this.clientStats.up + this.clientStats.down < this.clientStats.total) return false
-                return true
-            },
-            get isExpiry() {
-                return this.clientModal.isEdit && this.client.expiryTime > 0 ? (this.client.expiryTime <
-                    new Date().getTime()) : false;
-            },
-            get delayedStart() {
-                return this.clientModal.delayedStart;
-            },
-            set delayedStart(value) {
-                this.clientModal.delayedStart = value;
-            },
-            get delayedExpireDays() {
-                return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
-            },
-            set delayedExpireDays(days) {
-                this.client.expiryTime = -86400000 * days;
-            },
-        },
-        methods: {
-            async getDBClientIps(email) {
-                const msg = await HttpUtil.post(`/panel/api/inbounds/clientIps/${email}`);
-                if (!msg.success) {
-                    document.getElementById("clientIPs").value = msg.obj;
-                    return;
-                }
-                let ips = msg.obj;
-                if (typeof ips === 'string' && ips.startsWith('[') && ips.endsWith(']')) {
-                    try {
-                        ips = JSON.parse(ips);
-                        ips = Array.isArray(ips) ? ips.join("\n") : ips;
-                    } catch (e) {
-                        console.error('Error parsing JSON:', e);
-                    }
-                }
-                document.getElementById("clientIPs").value = ips;
-            },
-            async clearDBClientIps(email) {
-                try {
-                    const msg = await HttpUtil.post(`/panel/api/inbounds/clearClientIps/${email}`);
-                    if (!msg.success) {
-                        return;
-                    }
-                    document.getElementById("clientIPs").value = "";
-                } catch (error) {}
-            },
-            resetClientTraffic(email, dbInboundId, iconElement) {
-                this.$confirm({
-                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
-                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: themeSwitcher.currentTheme,
-                    okText: '{{ i18n "reset"}}',
-                    cancelText: '{{ i18n "cancel"}}',
-                    onOk: async () => {
-                        iconElement.disabled = true;
-                        const msg = await HttpUtil.postWithModal('/panel/api/inbounds/' +
-                            dbInboundId + '/resetClientTraffic/' + email);
-                        if (msg.success) {
-                            this.clientModal.clientStats.up = 0;
-                            this.clientModal.clientStats.down = 0;
-                        }
-                        iconElement.disabled = false;
-                    },
-                })
-            },
-        },
-    });
-</script>
-{{end}}
@@ -1,122 +0,0 @@
-{{define "modals/dnsPresetsModal"}}
-<a-modal id="dnsPresets-modal" v-model="dnsPresetsModal.visible" :title="dnsPresetsModal.title" :closable="true"
-  :mask-closable="false" :footer="null" :class="themeSwitcher.currentTheme">
-  <a-list class="ant-dns-presets-list" bordered :style="{ width: '100%' }">
-    <a-list-item v-for="dns in dnsPresetsDatabase" :style="{ padding: '12px 16px' }">
-      <div class="ant-dns-presets-line">
-        <a-space direction="horizontal" size="small" align="center">
-          <a-tag :color="dns.family ? 'purple' : 'green'">[[ dns.family ? '{{ i18n "pages.xray.dns.dnsPresetFamily" }}'
-            : 'DNS' ]]</a-tag>
-          <span class="ant-dns-presets-list-name">[[ dns.name ]]</span>
-        </a-space>
-        <a-button class="ant-dns-presets-install" type="primary"
-          @click="dnsPresetsModal.install(dns.data)">{{ i18n "install" }}</a-button>
-      </div>
-    </a-list-item>
-  </a-list>
-</a-modal>
-
-<style>
-  .ant-dns-presets-line {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .ant-dns-presets-install {
-    margin-left: auto;
-  }
-
-  .dark .ant-dns-presets-list {
-    border-color: var(--dark-color-stroke)
-  }
-
-  .dark .ant-dns-presets-list-name {
-    color: var(--dark-color-text-primary);
-  }
-</style>
-
-<script>
-  const dnsPresetsDatabase = [{
-      name: 'Google DNS',
-      family: false,
-      data: [
-        "8.8.8.8",
-        "8.8.4.4",
-        "2001:4860:4860::8888",
-        "2001:4860:4860::8844"
-      ]
-    },
-    {
-      name: 'Cloudflare DNS',
-      family: false,
-      data: [
-        "1.1.1.1",
-        "1.0.0.1",
-        "2606:4700:4700::1111",
-        "2606:4700:4700::1001"
-      ]
-    },
-    {
-      name: 'Adguard DNS',
-      family: false,
-      data: [
-        "94.140.14.14",
-        "94.140.15.15",
-        "2a10:50c0::ad1:ff",
-        "2a10:50c0::ad2:ff"
-      ]
-    },
-    {
-      name: 'Adguard Family DNS',
-      family: true,
-      data: [
-        "94.140.14.14",
-        "94.140.15.15",
-        "2a10:50c0::ad1:ff",
-        "2a10:50c0::ad2:ff"
-      ]
-    },
-    {
-      name: 'Cloudflare Family DNS',
-      family: true,
-      data: [
-        "1.1.1.3",
-        "1.0.0.3",
-        "2606:4700:4700::1113",
-        "2606:4700:4700::1003"
-      ]
-    }
-  ]
-
-  const dnsPresetsModal = {
-    title: '',
-    visible: false,
-    selected: null,
-    install(selectedPreset) {
-      return ObjectUtil.execute(dnsPresetsModal.selected, selectedPreset);
-    },
-    show({
-      title = '',
-      selected = (selectedPreset) => {},
-      isEdit = false
-    }) {
-      this.title = title;
-      this.selected = selected;
-      this.visible = true;
-    },
-    close() {
-      dnsPresetsModal.visible = false;
-    },
-  };
-
-  new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#dnsPresets-modal',
-    data: {
-      dnsPresetsModal: dnsPresetsModal,
-    }
-  });
-</script>
-{{end}}
@@ -1,799 +0,0 @@
-{{define "modals/inboundInfoModal"}}
-<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' :closable="true"
-  :mask-closable="true" :footer="null" width="600px" :class="themeSwitcher.currentTheme">
-  <a-row>
-    <a-col :xs="24" :md="12">
-      <table>
-        <tr>
-          <td>{{ i18n "protocol" }}</td>
-          <td>
-            <a-tag color="purple">[[ dbInbound.protocol ]]</a-tag>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "pages.inbounds.address" }}</td>
-          <td>
-            <a-tooltip :title="[[ dbInbound.address ]]">
-              <a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
-            </a-tooltip>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "pages.inbounds.port" }}</td>
-          <td>
-            <a-tag>[[ dbInbound.port ]]</a-tag>
-          </td>
-        </tr>
-      </table>
-    </a-col>
-    <a-col :xs="24" :md="12">
-      <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-        <table>
-          <tr>
-            <td>{{ i18n "transmission" }}</td>
-            <td>
-              <a-tag color="green">[[ inbound.network ]]</a-tag>
-            </td>
-          </tr>
-          <template v-if="inbound.isTcp || inbound.isWs || inbound.isHttpupgrade || inbound.isXHTTP">
-            <tr>
-              <td>{{ i18n "host" }}</td>
-              <td v-if="inbound.host">
-                <a-tooltip :title="[[ inbound.host ]]">
-                  <a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
-                </a-tooltip>
-              </td>
-              <td v-else>
-                <a-tag color="orange">{{ i18n "none" }}</a-tag>
-              </td>
-            </tr>
-            </tr>
-            <tr>
-              <td>{{ i18n "path" }}</td>
-              <td v-if="inbound.path">
-                <a-tooltip :title="[[ inbound.path ]]">
-                  <a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
-                </a-tooltip>
-              <td v-else>
-                <a-tag color="orange">{{ i18n "none" }}</a-tag>
-              </td>
-            </tr>
-          </template>
-          <template v-if="inbound.isXHTTP">
-            <tr>
-              <td>Mode</td>
-              <td>
-                <a-tag>[[ inbound.stream.xhttp.mode ]]</a-tag>
-              </td>
-            </tr>
-          </template>
-          <template v-if="inbound.isGrpc">
-            <tr>
-              <td>grpc serviceName</td>
-              <td>
-                <a-tooltip :title="[[ inbound.serviceName ]]">
-                  <a-tag class="info-large-tag">[[ inbound.serviceName
-                    ]]</a-tag>
-                </a-tooltip>
-            <tr>
-              <td>grpc multiMode</td>
-              <td>
-                <a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag>
-              </td>
-            </tr>
-          </template>
-        </table>
-      </template>
-    </a-col>
-    <template v-if="dbInbound.hasLink()">
-      {{ i18n "security" }}
-      <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[
-        inbound.stream.security ]]</a-tag>
-      <br />
-      {{ i18n "encryption" }}
-      <a-tag class="info-large-tag"
-        :color="inbound.settings.encryption && inbound.settings.encryption !== 'none' ? 'green' : 'red'">[[
-        inbound.settings.encryption ? inbound.settings.encryption : ''
-        ]]</a-tag>
-      <a-tooltip title='{{ i18n "copy" }}'>
-        <a-button size="small" icon="snippets" @click="copy(inbound.settings.encryption)"></a-button>
-      </a-tooltip>
-      <br />
-      <template v-if="inbound.stream.security != 'none'">
-        {{ i18n "domainName" }}
-        <a-tag v-if="inbound.serverName" color="green">[[ inbound.serverName
-          ? inbound.serverName : '' ]]</a-tag>
-        <a-tag v-else color="orange">{{ i18n "none" }}</a-tag>
-      </template>
-    </template>
-    <table v-if="dbInbound.isSS" :style="{ marginBottom: '10px', width: '100%' }">
-      <tr>
-        <td>{{ i18n "encryption" }}</td>
-        <td>
-          <a-tag color="green">[[ inbound.settings.method ]]</a-tag>
-        </td>
-      </tr>
-      <tr v-if="inbound.isSS2022">
-        <td>{{ i18n "password" }}</td>
-        <td>
-          <a-tooltip :title="[[ inbound.settings.password  ]]">
-            <a-tag class="info-large-tag">[[ inbound.settings.password
-              ]]</a-tag>
-          </a-tooltip>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ i18n "pages.inbounds.network" }}</td>
-        <td>
-          <a-tag color="green">[[ inbound.settings.network ]]</a-tag>
-        </td>
-      </tr>
-    </table>
-    <template v-if="infoModal.clientSettings">
-      <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
-      <table :style="{ marginBottom: '10px' }">
-        <tr>
-          <td>{{ i18n "pages.inbounds.email" }}</td>
-          <td v-if="infoModal.clientSettings.email">
-            <a-tag color="green">[[ infoModal.clientSettings.email
-              ]]</a-tag>
-          </td>
-          <td v-else>
-            <a-tag color="red">{{ i18n "none" }}</a-tag>
-          </td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.id">
-          <td>ID</td>
-          <td>
-            <a-tag>[[ infoModal.clientSettings.id ]]</a-tag>
-          </td>
-        </tr>
-        <tr v-if="dbInbound.isVMess">
-          <td>{{ i18n "security" }}</td>
-          <td>
-            <a-tag>[[ infoModal.clientSettings.security ]]</a-tag>
-          </td>
-        </tr>
-        <tr v-if="infoModal.inbound.canEnableTlsFlow()">
-          <td>Flow</td>
-          <td v-if="infoModal.clientSettings.flow">
-            <a-tag>[[ infoModal.clientSettings.flow ]]</a-tag>
-          </td>
-          <td v-else>
-            <a-tag color="orange">{{ i18n "none" }}</a-tag>
-          </td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.password">
-          <td>{{ i18n "password" }}</td>
-          <td>
-            <a-tooltip :title="[[ infoModal.clientSettings.password  ]]">
-              <a-tag class="info-large-tag">[[
-                infoModal.clientSettings.password ]]</a-tag>
-            </a-tooltip>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "status" }}</td>
-          <td>
-            <a-tag v-if="isDepleted" color="red">{{ i18n "depleted"
-              }}</a-tag>
-            <a-tag v-else-if="isEnable" color="green">{{ i18n "enabled"
-              }}</a-tag>
-            <a-tag v-else>{{ i18n "disabled" }}</a-tag>
-          </td>
-        </tr>
-        <tr v-if="infoModal.clientStats">
-          <td>{{ i18n "usage" }}</td>
-          <td>
-            <a-tag color="green">[[
-              SizeFormatter.sizeFormat(infoModal.clientStats.up +
-              infoModal.clientStats.down) ]]</a-tag>
-            <a-tag>↑ [[ SizeFormatter.sizeFormat(infoModal.clientStats.up)
-              ]] / [[ SizeFormatter.sizeFormat(infoModal.clientStats.down)
-              ]] ↓</a-tag>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "pages.inbounds.createdAt" }}</td>
-          <td>
-            <template v-if="infoModal.clientSettings && infoModal.clientSettings.created_at">
-              <a-tag>[[
-                IntlUtil.formatDate(infoModal.clientSettings.created_at)
-                ]]</a-tag>
-            </template>
-            <template v-else>
-              <a-tag>-</a-tag>
-            </template>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "pages.inbounds.updatedAt" }}</td>
-          <td>
-            <template v-if="infoModal.clientSettings && infoModal.clientSettings.updated_at">
-              <a-tag>[[
-                IntlUtil.formatDate(infoModal.clientSettings.updated_at)
-                ]]</a-tag>
-            </template>
-            <template v-else>
-              <a-tag>-</a-tag>
-            </template>
-          </td>
-        </tr>
-        <tr>
-          <td>{{ i18n "lastOnline" }}</td>
-          <td>
-            <a-tag>[[ app.formatLastOnline(infoModal.clientSettings &&
-              infoModal.clientSettings.email ?
-              infoModal.clientSettings.email : '') ]]</a-tag>
-          </td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.comment">
-          <td>{{ i18n "comment" }}</td>
-          <td>
-            <a-tooltip :title="[[ infoModal.clientSettings.comment  ]]">
-              <a-tag class="info-large-tag">[[
-                infoModal.clientSettings.comment ]]</a-tag>
-            </a-tooltip>
-          </td>
-        </tr>
-        <tr v-if="app.ipLimitEnable">
-          <td>{{ i18n "pages.inbounds.IPLimit" }}</td>
-          <td>
-            <a-tag>[[ infoModal.clientSettings.limitIp ]]</a-tag>
-          </td>
-        </tr>
-        <tr v-if="app.ipLimitEnable && infoModal.clientSettings.limitIp > 0">
-          <td>{{ i18n "pages.inbounds.IPLimitlog" }}</td>
-          <td>
-            <div style="max-height: 150px; overflow-y: auto; text-align: left;">
-              <div v-if="infoModal.clientIpsArray && infoModal.clientIpsArray.length > 0">
-                <a-tag v-for="(ipInfo, idx) in infoModal.clientIpsArray" :key="idx" color="blue"
-                  style="margin: 2px 0; display: block; font-family: monospace; font-size: 11px;">
-                  [[ formatIpInfo(ipInfo) ]]
-                </a-tag>
-              </div>
-              <a-tag v-else>[[ infoModal.clientIps || 'No IP Record'
-                ]]</a-tag>
-            </div>
-            <div style="margin-top: 5px;">
-              <a-icon type="sync" :spin="refreshing" @click="refreshIPs" :style="{ margin: '0 5px' }"></a-icon>
-              <a-tooltip>
-                <template slot="title">
-                  <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
-                </template>
-                <a-icon type="delete" @click="clearClientIps"></a-icon>
-              </a-tooltip>
-            </div>
-          </td>
-        </tr>
-      </table>
-      <table :style="{ display: 'inline-table', marginBlock: '10px', width: '100%', textAlign: 'center' }">
-        <tr>
-          <th>{{ i18n "remained" }}</th>
-          <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
-          <th>{{ i18n "pages.inbounds.expireDate" }}</th>
-        </tr>
-        <tr>
-          <td>
-            <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0"
-              :color="statsColor(infoModal.clientStats)"> [[ getRemStats()
-              ]] </a-tag>
-          </td>
-          <td>
-            <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[
-              SizeFormatter.sizeFormat(infoModal.clientSettings.totalGB) ]]
-            </a-tag>
-            <a-tag v-else color="purple" class="infinite-tag">
-              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                <path
-                  d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
-                  fill="currentColor"></path>
-              </svg>
-            </a-tag>
-          </td>
-          <td>
-            <template v-if="infoModal.clientSettings.expiryTime > 0">
-              <a-tag
-                :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
-                [[ IntlUtil.formatDate(infoModal.clientSettings.expiryTime)
-                ]]
-              </a-tag>
-            </template>
-            <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[
-              infoModal.clientSettings.expiryTime /
-              -86400000 ]] {{ i18n "pages.client.days" }}
-            </a-tag>
-            <a-tag v-else color="purple" class="infinite-tag">
-              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                <path
-                  d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
-                  fill="currentColor"></path>
-              </svg>
-            </a-tag>
-          </td>
-        </tr>
-      </table>
-      <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
-        <a-divider>Subscription URL</a-divider>
-        <tr-info-row class="tr-info-row">
-          <tr-info-title class="tr-info-title">
-            <a-tag color="purple">Subscription Link</a-tag>
-            <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copy(infoModal.subLink)"></a-button>
-            </a-tooltip>
-          </tr-info-title>
-          <a :href="[[ infoModal.subLink ]]" target="_blank">[[
-            infoModal.subLink ]]</a>
-        </tr-info-row>
-        <tr-info-row class="tr-info-row" v-if="app.subSettings.subJsonEnable">
-          <tr-info-title class="tr-info-title">
-            <a-tag color="purple">Json Link</a-tag>
-            <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copy(infoModal.subJsonLink)"></a-button>
-            </a-tooltip>
-          </tr-info-title>
-          <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[
-            infoModal.subJsonLink ]]</a>
-        </tr-info-row>
-      </template>
-      <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
-        <a-divider>Telegram ChatID</a-divider>
-        <tr-info-row class="tr-info-row">
-          <tr-info-title class="tr-info-title">
-            <a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag>
-            <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-button>
-            </a-tooltip>
-          </tr-info-title>
-        </tr-info-row>
-      </template>
-      <template v-if="dbInbound.hasLink()">
-        <a-divider>URL</a-divider>
-        <tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
-          <tr-info-title class="tr-info-title">
-            <a-tag class="tr-info-tag" color="green">[[ link.remark
-              ]]</a-tag>
-            <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button>
-            </a-tooltip>
-          </tr-info-title>
-          <code>[[ link.link ]]</code>
-        </tr-info-row>
-      </template>
-    </template>
-    <template v-else>
-      <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
-        <a-divider>URL</a-divider>
-        <tr-info-row v-for="(link,index) in infoModal.links" class="tr-info-row">
-          <tr-info-title class="tr-info-title">
-            <a-tag class="tr-info-tag" color="green">[[ link.remark
-              ]]</a-tag>
-            <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button :style="{ minWidth: '24px' }" size="small" icon="snippets" @click="copy(link.link)"></a-button>
-            </a-tooltip>
-          </tr-info-title>
-          <code>[[ link.link ]]</code>
-        </tr-info-row>
-      </template>
-      <table v-if="inbound.protocol == Protocols.TUNNEL" class="tr-info-table">
-        <tr>
-          <th>{{ i18n "pages.inbounds.targetAddress" }}</th>
-          <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
-          <th>{{ i18n "pages.inbounds.network" }}</th>
-          <th>FollowRedirect</th>
-        </tr>
-        <tr>
-          <td>
-            <a-tag color="green">[[ inbound.settings.address ]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ inbound.settings.port ]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ inbound.settings.network ]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ inbound.settings.followRedirect
-              ]]</a-tag>
-          </td>
-        </tr>
-      </table>
-      <table v-if="dbInbound.isMixed" class="tr-info-table">
-        <tr>
-          <th>{{ i18n "password" }} Auth</th>
-          <th>{{ i18n "pages.inbounds.enable" }} udp</th>
-          <th>IP</th>
-        </tr>
-        <tr>
-          <td>
-            <a-tag color="green">[[ inbound.settings.auth ]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ inbound.settings.udp]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ inbound.settings.ip ]]</a-tag>
-          </td>
-        </tr>
-        <template v-if="inbound.settings.auth == 'password'">
-          <tr>
-            <td></td>
-            <td>{{ i18n "username" }}</td>
-            <td>{{ i18n "password" }}</td>
-          </tr>
-          <tr v-for="account,index in inbound.settings.accounts">
-            <td>[[ index ]]</td>
-            <td>
-              <a-tag color="green">[[ account.user ]]</a-tag>
-            </td>
-            <td>
-              <a-tag color="green">[[ account.pass ]]</a-tag>
-            </td>
-          </tr>
-        </template>
-      </table>
-      <table v-if="dbInbound.isHTTP" class="tr-info-table">
-        <tr>
-          <th></th>
-          <th>{{ i18n "username" }}</th>
-          <th>{{ i18n "password" }}</th>
-        </tr>
-        <tr v-for="account,index in inbound.settings.accounts">
-          <td>[[ index ]]</td>
-          <td>
-            <a-tag color="green">[[ account.user ]]</a-tag>
-          </td>
-          <td>
-            <a-tag color="green">[[ account.pass ]]</a-tag>
-          </td>
-        </tr>
-      </table>
-      <table v-if="dbInbound.isWireguard" class="tr-info-table">
-        <tr class="client-table-odd-row">
-          <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
-          <td>[[ inbound.settings.secretKey ]]</td>
-        </tr>
-        <tr>
-          <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
-          <td>[[ inbound.settings.pubKey ]]</td>
-        </tr>
-        <tr class="client-table-odd-row">
-          <td>MTU</td>
-          <td>[[ inbound.settings.mtu ]]</td>
-        </tr>
-        <tr>
-          <td>No Kernel Tun</td>
-          <td>[[ inbound.settings.noKernelTun ]]</td>
-        </tr>
-        <template v-for="(peer, index) in inbound.settings.peers">
-          <tr>
-            <td colspan="2">
-              <a-divider>Peer [[ index + 1 ]]</a-divider>
-            </td>
-          </tr>
-          <tr class="client-table-odd-row">
-            <td>{{ i18n "pages.xray.wireguard.secretKey" }}</td>
-            <td>[[ peer.privateKey ]]</td>
-          </tr>
-          <tr>
-            <td>{{ i18n "pages.xray.wireguard.publicKey" }}</td>
-            <td>[[ peer.publicKey ]]</td>
-          </tr>
-          <tr class="client-table-odd-row">
-            <td>{{ i18n "pages.xray.wireguard.psk" }}</td>
-            <td>[[ peer.psk ]]</td>
-          </tr>
-          <tr>
-            <td>{{ i18n "pages.xray.wireguard.allowedIPs" }}</td>
-            <td>[[ peer.allowedIPs.join(",") ]]</td>
-          </tr>
-          <tr class="client-table-odd-row">
-            <td>Keep Alive</td>
-            <td>[[ peer.keepAlive ]]</td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <tr-info-row class="tr-info-row">
-                <tr-info-title class="tr-info-title">
-                  <a-tag color="blue">Config</a-tag>
-                  <a-tooltip title='{{ i18n "copy" }}'>
-                    <a-button :style="{ minWidth: '24px' }" size="small" icon="snippets"
-                      @click="copy(infoModal.links[index])"></a-button>
-                  </a-tooltip>
-                  <a-tooltip title='{{ i18n "download" }}'>
-                    <a-button :style="{ minWidth: '24px' }" size="small" icon="download"
-                      @click="FileManager.downloadTextFile(infoModal.links[index], `peer-${index + 1}.conf`)"></a-button>
-                  </a-tooltip>
-                </tr-info-title>
-                <div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)"
-                  :style="{ borderRadius: '1rem', padding: '0.5rem' }" class="client-table-odd-row">
-                </div>
-                <a-divider orientation="center">Link</a-divider>
-                <tr-info-title class="tr-info-title">
-                  <a-tag color="green">Link</a-tag>
-                  <a-tooltip title='{{ i18n "copy" }}'>
-                    <a-button :style="{ minWidth: '24px' }" size="small" icon="snippets"
-                      @click="copy(infoModal.wireguardLinks[index])"></a-button>
-                  </a-tooltip>
-                </tr-info-title>
-                <code :style="{ display: 'block', whiteSpace: 'normal', wordBreak: 'break-all' }">[[
-                  infoModal.wireguardLinks[index] ]]</code>
-              </tr-info-row>
-            </td>
-          </tr>
-        </template>
-      </table>
-    </template>
-    </template>
-</a-modal>
-<script>
-  function refreshIPs(email) {
-    return HttpUtil.post(`/panel/api/inbounds/clientIps/${email}`).then((msg) => {
-      if (!msg.success) {
-        return {
-          text: 'No IP Record',
-          array: []
-        };
-      }
-
-      const formatIpRecord = (record) => {
-        if (record == null) {
-          return '';
-        }
-        if (typeof record === 'string' || typeof record === 'number') {
-          return String(record);
-        }
-        const ip = record.ip || record.IP || '';
-        const timestamp = record.timestamp || record.Timestamp || 0;
-        if (!ip) {
-          return String(record);
-        }
-        if (!timestamp) {
-          return String(ip);
-        }
-        const date = new Date(Number(timestamp) * 1000);
-        const timeStr = date
-          .toLocaleString('en-GB', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-            hour12: false,
-          })
-          .replace(',', '');
-        return `${ip} (${timeStr})`;
-      };
-
-      try {
-        let ips = msg.obj;
-        // If msg.obj is a string, try to parse it
-        if (typeof ips === 'string') {
-          try {
-            ips = JSON.parse(ips);
-          } catch (e) {
-            return {
-              text: String(ips),
-              array: [String(ips)]
-            };
-          }
-        }
-
-        // Normalize single object response to array
-        if (ips && !Array.isArray(ips) && typeof ips === 'object') {
-          ips = [ips];
-        }
-
-        // New format or object array
-        if (Array.isArray(ips) && ips.length > 0 && typeof ips[0] === 'object') {
-          const result = ips.map((item) => formatIpRecord(item)).filter(Boolean);
-          return {
-            text: result.join(' | '),
-            array: result
-          };
-        }
-
-        // Old format - simple array of IPs
-        if (Array.isArray(ips) && ips.length > 0) {
-          const result = ips.map((ip) => String(ip));
-          return {
-            text: result.join(', '),
-            array: result
-          };
-        }
-
-        // Fallback for any other format
-        return {
-          text: String(ips),
-          array: [String(ips)]
-        };
-
-      } catch (e) {
-        return {
-          text: 'Error loading IPs',
-          array: []
-        };
-      }
-    });
-  }
-
-  const infoModal = {
-    visible: false,
-    inbound: new Inbound(),
-    dbInbound: new DBInbound(),
-    clientSettings: null,
-    clientStats: [],
-    upStats: 0,
-    downStats: 0,
-    links: [],
-    wireguardLinks: [],
-    index: null,
-    isExpired: false,
-    subLink: '',
-    subJsonLink: '',
-    clientIps: '',
-    clientIpsArray: [],
-    show(dbInbound, index) {
-      this.index = index;
-      this.inbound = dbInbound.toInbound();
-      this.dbInbound = new DBInbound(dbInbound);
-      this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
-      this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index) : this.dbInbound.isExpiry;
-      this.clientStats = this.inbound.clients ? (this.dbInbound.clientStats.find(row => row.email === this
-        .clientSettings.email) || null) : null;
-
-      if (
-        [
-          Protocols.VMESS,
-          Protocols.VLESS,
-          Protocols.TROJAN,
-          Protocols.SHADOWSOCKS
-        ].includes(this.inbound.protocol)
-      ) {
-        if (app.ipLimitEnable && this.clientSettings.limitIp) {
-          refreshIPs(this.clientStats.email).then((result) => {
-            this.clientIps = result.text;
-            this.clientIpsArray = result.array;
-          })
-        }
-      }
-      if (this.inbound.protocol == Protocols.WIREGUARD) {
-        this.links = this.inbound.genWireguardConfigs(dbInbound.remark).split('\r\n')
-        this.wireguardLinks = this.inbound.genWireguardLinks(dbInbound.remark).split('\r\n')
-      } else {
-        this.links = this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, this.clientSettings);
-        this.wireguardLinks = [];
-      }
-      if (this.clientSettings) {
-        if (this.clientSettings.subId) {
-          this.subLink = this.genSubLink(this.clientSettings.subId);
-          this.subJsonLink = app.subSettings.subJsonEnable ? this.genSubJsonLink(this.clientSettings.subId) : '';
-        }
-      }
-      this.visible = true;
-    },
-    close() {
-      infoModal.visible = false;
-    },
-    genSubLink(subID) {
-      return app.subSettings.subURI + subID;
-    },
-    genSubJsonLink(subID) {
-      return app.subSettings.subJsonURI + subID;
-    }
-  };
-  const infoModalApp = new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#inbound-info-modal',
-    data: {
-      infoModal,
-      refreshing: false,
-      get dbInbound() {
-        return this.infoModal.dbInbound;
-      },
-      get inbound() {
-        return this.infoModal.inbound;
-      },
-      get isActive() {
-        if (infoModal.clientStats) {
-          return infoModal.clientStats.enable;
-        }
-        return true;
-      },
-      get isEnable() {
-        if (infoModal.clientSettings) {
-          return infoModal.clientSettings.enable;
-        }
-        return infoModal.dbInbound.isEnable;
-      },
-      get isDepleted() {
-        const stats = infoModal.clientStats;
-        const settings = infoModal.clientSettings;
-        if (!stats || !settings) {
-          return false;
-        }
-        const total = stats.total ?? 0;
-        const used = (stats.up ?? 0) + (stats.down ?? 0);
-        const hasTotal = total > 0;
-        const exhausted = hasTotal && used >= total;
-
-        const expiryTime = settings.expiryTime ?? 0;
-        const hasExpiry = expiryTime > 0;
-        const now = Date.now();
-        const expired = hasExpiry && now >= expiryTime;
-
-        return expired || exhausted;
-      },
-    },
-    methods: {
-      formatIpInfo(ipInfo) {
-        if (ipInfo == null) {
-          return '';
-        }
-        if (typeof ipInfo === 'string' || typeof ipInfo === 'number') {
-          return String(ipInfo);
-        }
-        const ip = ipInfo.ip || ipInfo.IP || '';
-        const timestamp = ipInfo.timestamp || ipInfo.Timestamp || 0;
-        if (!ip) {
-          return String(ipInfo);
-        }
-        if (!timestamp) {
-          return String(ip);
-        }
-        const date = new Date(Number(timestamp) * 1000);
-        const timeStr = date
-          .toLocaleString('en-GB', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-            hour12: false,
-          })
-          .replace(',', '');
-        return `${ip} (${timeStr})`;
-      },
-      copy(content) {
-        ClipboardManager
-          .copyText(content)
-          .then(() => {
-            app.$message.success('{{ i18n "copied" }}')
-          })
-      },
-      statsColor(stats) {
-        return ColorUtils.usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
-      },
-      getRemStats() {
-        remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats
-          .down;
-        return remained > 0 ? SizeFormatter.sizeFormat(remained) : '-';
-      },
-      refreshIPs() {
-        this.refreshing = true;
-        refreshIPs(this.infoModal.clientStats.email)
-          .then((result) => {
-            this.infoModal.clientIps = result.text;
-            this.infoModal.clientIpsArray = result.array;
-          })
-          .finally(() => {
-            this.refreshing = false;
-          });
-      },
-      clearClientIps() {
-        HttpUtil.post(`/panel/api/inbounds/clearClientIps/${this.infoModal.clientStats.email}`)
-          .then((msg) => {
-            if (!msg.success) {
-              return;
-            }
-            this.infoModal.clientIps = 'No IP Record';
-            this.infoModal.clientIpsArray = [];
-          })
-          .catch(() => {});
-      },
-    },
-  });
-</script>
-{{end}}
@@ -1,368 +0,0 @@
-{{define "modals/inboundModal"}}
-<a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" :dialog-style="{ top: '20px' }"
-    @ok="inModal.ok" :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
-    :class="themeSwitcher.currentTheme" :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
-    {{template "form/inbound" .}}
-</a-modal>
-<script>
-    // Make inModal globally available to ensure it works with any base path
-    const inModal = (window.inModal = {
-        title: "",
-        visible: false,
-        confirmLoading: false,
-        okText: '{{ i18n "sure" }}',
-        isEdit: false,
-        confirm: null,
-        inbound: new Inbound(),
-        dbInbound: new DBInbound(),
-        ok() {
-            // Block submit when Vision Seed is XRV-gated and partially/invalidly filled.
-            const seedErr = inModal.testseedError();
-            if (seedErr) {
-                if (typeof Vue !== "undefined" && Vue.prototype && Vue.prototype.$message) {
-                    Vue.prototype.$message.error(seedErr);
-                } else {
-                    alert(seedErr);
-                }
-                return;
-            }
-            ObjectUtil.execute(inModal.confirm, inModal.inbound, inModal.dbInbound);
-        },
-        show({
-            title = "",
-            okText = '{{ i18n "sure" }}',
-            inbound = null,
-            dbInbound = null,
-            confirm = (inbound, dbInbound) => {},
-            isEdit = false,
-        }) {
-            this.title = title;
-            this.okText = okText;
-            if (inbound) {
-                this.inbound = Inbound.fromJson(inbound.toJson());
-            } else {
-                this.inbound = new Inbound();
-            }
-            // Ensure VLESS settings has a testseed array reference for Vue reactivity,
-            // but leave it empty so we don't auto-emit defaults — user must explicitly
-            // fill all four fields, or leave blank to fall back to backend defaults.
-            if (this.inbound.protocol === Protocols.VLESS && this.inbound.settings) {
-                if (!Array.isArray(this.inbound.settings.testseed)) {
-                    this.inbound.settings.testseed = [];
-                }
-            }
-            if (dbInbound) {
-                this.dbInbound = new DBInbound(dbInbound);
-            } else {
-                this.dbInbound = new DBInbound();
-            }
-            this.confirm = confirm;
-            this.visible = true;
-            this.isEdit = isEdit;
-        },
-        close() {
-            inModal.visible = false;
-            inModal.loading(false);
-        },
-        loading(loading = true) {
-            inModal.confirmLoading = loading;
-        },
-        // Returns an error string when the current testseed state would be rejected,
-        // or "" when it's valid (empty == use defaults; full 4 positive ints == custom).
-        testseedError() {
-            if (!inModal.inbound || inModal.inbound.protocol !== Protocols.VLESS) return "";
-            if (typeof inModal.inbound.canEnableVisionSeed === "function"
-                && !inModal.inbound.canEnableVisionSeed()) return "";
-            const seed = inModal.inbound.settings && inModal.inbound.settings.testseed;
-            if (!Array.isArray(seed) || seed.length === 0) return "";
-            const filled = seed.filter(v => v !== null && v !== undefined && v !== "");
-            if (filled.length === 0) return "";
-            if (seed.length !== 4 || filled.length !== 4 ||
-                !seed.every(v => Number.isInteger(v) && v > 0)) {
-                return "Provide exactly 4 positive integers or leave empty to use defaults.";
-            }
-            return "";
-        },
-        // Vision Seed helpers — always available regardless of Vue context
-        updateTestseed(index, value) {
-            if (!inModal.inbound || !inModal.inbound.settings) return;
-            if (!Array.isArray(inModal.inbound.settings.testseed)) {
-                inModal.inbound.settings.testseed = [];
-            }
-            const seed = inModal.inbound.settings.testseed;
-            while (seed.length <= index) seed.push(null);
-            seed[index] = value;
-            // If user cleared every slot, collapse back to empty so we omit testseed entirely.
-            if (seed.every(v => v === null || v === undefined || v === "")) {
-                inModal.inbound.settings.testseed = [];
-            }
-        },
-        setRandomTestseed() {
-            if (!inModal.inbound || !inModal.inbound.settings) return;
-            // Positive integers only (>=1) so the array passes validation and gets emitted.
-            inModal.inbound.settings.testseed = [
-                Math.floor(Math.random() * 999) + 1,
-                Math.floor(Math.random() * 999) + 1,
-                Math.floor(Math.random() * 999) + 1,
-                Math.floor(Math.random() * 999) + 1,
-            ];
-        },
-        resetTestseed() {
-            if (!inModal.inbound || !inModal.inbound.settings) return;
-            // Empty == "use server defaults [900, 500, 900, 256]"; placeholders show in the form.
-            inModal.inbound.settings.testseed = [];
-        },
-    });
-
-    // Store Vue instance globally to ensure methods are always accessible
-    let inboundModalVueInstance = null;
-
-    inboundModalVueInstance = new Vue({
-        delimiters: ["[[", "]]"],
-        el: "#inbound-modal",
-        data: {
-            inModal: inModal,
-            delayedStart: false,
-            get inbound() {
-                return inModal.inbound;
-            },
-            get dbInbound() {
-                return inModal.dbInbound;
-            },
-            get isEdit() {
-                return inModal.isEdit;
-            },
-            get client() {
-                return inModal.inbound &&
-                    inModal.inbound.clients &&
-                    inModal.inbound.clients.length > 0 ?
-                    inModal.inbound.clients[0] :
-                    null;
-            },
-            get datepicker() {
-                return app.datepicker;
-            },
-            get delayedExpireDays() {
-                return this.client && this.client.expiryTime < 0 ?
-                    this.client.expiryTime / -86400000 :
-                    0;
-            },
-            set delayedExpireDays(days) {
-                this.client.expiryTime = -86400000 * days;
-            },
-            get externalProxy() {
-                return this.inbound.stream.externalProxy.length > 0;
-            },
-            set externalProxy(value) {
-                if (value) {
-                    inModal.inbound.stream.externalProxy = [{
-                        forceTls: "same",
-                        dest: window.location.hostname,
-                        port: inModal.inbound.port,
-                        remark: "",
-                    }, ];
-                } else {
-                    inModal.inbound.stream.externalProxy = [];
-                }
-            },
-        },
-        watch: {
-            "inModal.inbound.stream.security"(newVal, oldVal) {
-                // Clear flow when security changes from reality/tls to none
-                if (
-                    inModal.inbound.protocol == Protocols.VLESS &&
-                    !inModal.inbound.canEnableTlsFlow()
-                ) {
-                    inModal.inbound.settings.vlesses.forEach((client) => {
-                        client.flow = "";
-                    });
-                }
-            },
-            // Keep testseed as a valid array reference for Vue reactivity while the user
-            // toggles flows — but do NOT auto-fill defaults. Empty means "use server defaults"
-            // and is the only way the form omits testseed from the outbound JSON.
-            "inModal.inbound.settings.vlesses": {
-                handler() {
-                    if (
-                        inModal.inbound.protocol === Protocols.VLESS &&
-                        inModal.inbound.settings &&
-                        !Array.isArray(inModal.inbound.settings.testseed)
-                    ) {
-                        inModal.inbound.settings.testseed = [];
-                    }
-                },
-                deep: true,
-            },
-        },
-        methods: {
-            streamNetworkChange() {
-                if (!inModal.inbound.canEnableTls()) {
-                    this.inModal.inbound.stream.security = "none";
-                }
-                if (!inModal.inbound.canEnableReality()) {
-                    this.inModal.inbound.reality = false;
-                }
-                if (
-                    this.inModal.inbound.protocol == Protocols.VLESS &&
-                    !inModal.inbound.canEnableTlsFlow()
-                ) {
-                    this.inModal.inbound.settings.vlesses.forEach((client) => {
-                        client.flow = "";
-                    });
-                }
-                if (inModal.inbound.stream.network != "kcp") {
-                    inModal.inbound.stream.finalmask.udp = [];
-                }
-            },
-            SSMethodChange() {
-                this.inModal.inbound.settings.password =
-                    RandomUtil.randomShadowsocksPassword(
-                        this.inModal.inbound.settings.method,
-                    );
-
-                if (this.inModal.inbound.isSSMultiUser) {
-                    if (this.inModal.inbound.settings.shadowsockses.length == 0) {
-                        this.inModal.inbound.settings.shadowsockses = [
-                            new Inbound.ShadowsocksSettings.Shadowsocks(),
-                        ];
-                    }
-                    if (!this.inModal.inbound.isSS2022) {
-                        this.inModal.inbound.settings.shadowsockses.forEach((client) => {
-                            client.method = this.inModal.inbound.settings.method;
-                        });
-                    } else {
-                        this.inModal.inbound.settings.shadowsockses.forEach((client) => {
-                            client.method = "";
-                        });
-                    }
-                    this.inModal.inbound.settings.shadowsockses.forEach((client) => {
-                        client.password = RandomUtil.randomShadowsocksPassword(
-                            this.inModal.inbound.settings.method,
-                        );
-                    });
-                } else {
-                    if (this.inModal.inbound.settings.shadowsockses.length > 0) {
-                        this.inModal.inbound.settings.shadowsockses = [];
-                    }
-                }
-            },
-            setDefaultCertData(index) {
-                inModal.inbound.stream.tls.certs[index].certFile = app.defaultCert;
-                inModal.inbound.stream.tls.certs[index].keyFile = app.defaultKey;
-            },
-            async getNewX25519Cert() {
-                inModal.loading(true);
-                const msg = await HttpUtil.get("/panel/api/server/getNewX25519Cert");
-                inModal.loading(false);
-                if (!msg.success) {
-                    return;
-                }
-                inModal.inbound.stream.reality.privateKey = msg.obj.privateKey;
-                inModal.inbound.stream.reality.settings.publicKey = msg.obj.publicKey;
-            },
-            clearX25519Cert() {
-                this.inbound.stream.reality.privateKey = "";
-                this.inbound.stream.reality.settings.publicKey = "";
-            },
-            async getNewmldsa65() {
-                inModal.loading(true);
-                const msg = await HttpUtil.get("/panel/api/server/getNewmldsa65");
-                inModal.loading(false);
-                if (!msg.success) {
-                    return;
-                }
-                inModal.inbound.stream.reality.mldsa65Seed = msg.obj.seed;
-                inModal.inbound.stream.reality.settings.mldsa65Verify = msg.obj.verify;
-            },
-            clearMldsa65() {
-                this.inbound.stream.reality.mldsa65Seed = "";
-                this.inbound.stream.reality.settings.mldsa65Verify = "";
-            },
-            randomizeRealityTarget() {
-                if (typeof getRandomRealityTarget !== "undefined") {
-                    const randomTarget = getRandomRealityTarget();
-                    this.inbound.stream.reality.target = randomTarget.target;
-                    this.inbound.stream.reality.serverNames = randomTarget.sni;
-                }
-            },
-            async getNewEchCert() {
-                inModal.loading(true);
-                const msg = await HttpUtil.post("/panel/api/server/getNewEchCert", {
-                    sni: inModal.inbound.stream.tls.sni,
-                });
-                inModal.loading(false);
-                if (!msg.success) {
-                    return;
-                }
-                inModal.inbound.stream.tls.echServerKeys = msg.obj.echServerKeys;
-                inModal.inbound.stream.tls.settings.echConfigList =
-                    msg.obj.echConfigList;
-            },
-            clearEchCert() {
-                this.inbound.stream.tls.echServerKeys = "";
-                this.inbound.stream.tls.settings.echConfigList = "";
-            },
-            // Pulls the requested auth block from `xray vlessenc` (which always returns
-            // both X25519 and ML-KEM-768 variants) and applies it to the inbound's
-            // decryption/encryption strings. The auth mode is implied by the resulting
-            async getNewVlessEnc(authLabel) {
-                if (!authLabel) return;
-
-                inModal.loading(true);
-                const msg = await HttpUtil.get("/panel/api/server/getNewVlessEnc");
-                inModal.loading(false);
-
-                if (!msg.success) {
-                    return;
-                }
-
-                const auths = msg.obj.auths || [];
-                const block = auths.find((a) => a.label === authLabel);
-
-                if (!block) {
-                    console.error("No auth block for", authLabel);
-                    return;
-                }
-
-                inModal.inbound.settings.decryption = block.decryption;
-                inModal.inbound.settings.encryption = block.encryption;
-            },
-            clearVlessEnc() {
-                this.inbound.settings.decryption = "none";
-                this.inbound.settings.encryption = "none";
-            },
-            // Vision Seed methods - must be in Vue methods for proper template binding.
-            // Mirror the inModal helpers but use Vue.set so the form re-renders.
-            updateTestseed(index, value) {
-                if (!Array.isArray(this.inbound.settings.testseed)) {
-                    this.$set(this.inbound.settings, "testseed", []);
-                }
-                const seed = this.inbound.settings.testseed;
-                while (seed.length <= index) seed.push(null);
-                this.$set(seed, index, value);
-                // Collapse to empty when every slot is cleared so testseed is omitted from JSON.
-                if (seed.every(v => v === null || v === undefined || v === "")) {
-                    this.$set(this.inbound.settings, "testseed", []);
-                }
-            },
-            setRandomTestseed() {
-                // Positive integers only (>=1) so the resulting array passes validation.
-                const newSeed = [
-                    Math.floor(Math.random() * 999) + 1,
-                    Math.floor(Math.random() * 999) + 1,
-                    Math.floor(Math.random() * 999) + 1,
-                    Math.floor(Math.random() * 999) + 1,
-                ];
-                this.$set(this.inbound.settings, "testseed", newSeed);
-            },
-            resetTestseed() {
-                // Empty == "use server defaults [900, 500, 900, 256]". Placeholders will show in the form.
-                this.$set(this.inbound.settings, "testseed", []);
-            },
-            testseedError() {
-                return inModal.testseedError();
-            },
-        },
-    });
-</script>
-{{end}}
@@ -1,327 +0,0 @@
-{{define "modals/nordModal"}}
-<a-modal id="nord-modal" v-model="nordModal.visible" title="NordVPN NordLynx"
-    :confirm-loading="nordModal.confirmLoading" :closable="true" :mask-closable="true" :footer="null"
-    :class="themeSwitcher.currentTheme">
-    <template v-if="nordModal.nordData == null">
-        <a-tabs default-active-key="token" :class="themeSwitcher.currentTheme">
-            <a-tab-pane key="token" tab='{{ i18n "pages.xray.outbound.accessToken" }}'>
-                <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }"
-                    :style="{ marginTop: '20px' }">
-                    <a-form-item label='{{ i18n "pages.xray.outbound.accessToken" }}'>
-                        <a-input v-model="nordModal.token"
-                            placeholder='{{ i18n "pages.xray.outbound.accessToken" }}'></a-input>
-                        <div :style="{ marginTop: '10px' }">
-                            <a-button type="primary" icon="login" @click="login()"
-                                :loading="nordModal.confirmLoading">{{ i18n "login" }}</a-button>
-                        </div>
-                    </a-form-item>
-                </a-form>
-            </a-tab-pane>
-            <a-tab-pane key="key" tab='{{ i18n "pages.xray.outbound.privateKey" }}'>
-                <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }"
-                    :style="{ marginTop: '20px' }">
-                    <a-form-item label='{{ i18n "pages.xray.outbound.privateKey" }}'>
-                        <a-input v-model="nordModal.manualKey"
-                            placeholder='{{ i18n "pages.xray.outbound.privateKey" }}'></a-input>
-                        <div :style="{ marginTop: '10px' }">
-                            <a-button type="primary" icon="save" @click="saveKey()"
-                                :loading="nordModal.confirmLoading">{{ i18n "save" }}</a-button>
-                        </div>
-                    </a-form-item>
-                </a-form>
-            </a-tab-pane>
-        </a-tabs>
-    </template>
-    <template v-else>
-        <table :style="{ margin: '5px 0', width: '100%' }">
-            <tr class="client-table-odd-row" v-if="nordModal.nordData.token">
-                <td>{{ i18n "pages.xray.outbound.accessToken" }}</td>
-                <td>[[ nordModal.nordData.token ]]</td>
-            </tr>
-            <tr>
-                <td>{{ i18n "pages.xray.outbound.privateKey" }}</td>
-                <td>[[ nordModal.nordData.private_key ]]</td>
-            </tr>
-        </table>
-        <a-button @click="logout" :loading="nordModal.confirmLoading" type="danger">{{ i18n "logout" }}</a-button>
-        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
-        <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }"
-            :style="{ marginTop: '10px' }">
-            <a-form-item label='{{ i18n "pages.xray.outbound.country" }}'>
-                <a-select v-model="nordModal.countryId" @change="fetchServers" show-search option-filter-prop="label">
-                    <a-select-option v-for="c in nordModal.countries" :key="c.id" :value="c.id" :label="c.name">
-                        [[ c.name ]] ([[ c.code ]])
-                    </a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label='{{ i18n "pages.xray.outbound.city" }}' v-if="nordModal.cities.length > 0">
-                <a-select v-model="nordModal.cityId" @change="onCityChange" show-search option-filter-prop="label">
-                    <a-select-option :key="0" :value="null" label='{{ i18n "pages.xray.outbound.allCities" }}'>
-                        {{ i18n "pages.xray.outbound.allCities" }}
-                    </a-select-option>
-                    <a-select-option v-for="c in nordModal.cities" :key="c.id" :value="c.id" :label="c.name">
-                        [[ c.name ]]
-                    </a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item label='{{ i18n "pages.xray.outbound.server" }}' v-if="filteredServers.length > 0">
-                <a-select v-model="nordModal.serverId">
-                    <a-select-option v-for="s in filteredServers" :key="s.id" :value="s.id">
-                        [[ s.cityName ]] - [[ s.name ]] ({{ i18n "pages.xray.outbound.load" }}: [[ s.load ]]%)
-                    </a-select-option>
-                </a-select>
-            </a-form-item>
-        </a-form>
-        <a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
-        <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-            <template v-if="nordOutboundIndex>=0">
-                <a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
-                <a-button @click="resetOutbound" :loading="nordModal.confirmLoading"
-                    type="danger">{{ i18n "reset" }}</a-button>
-            </template>
-            <template v-else>
-                <a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
-                <a-button @click="addOutbound" :disabled="!nordModal.serverId" :loading="nordModal.confirmLoading"
-                    type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-            </template>
-        </a-form>
-    </template>
-</a-modal>
-
-<script>
-    const nordModal = {
-        visible: false,
-        confirmLoading: false,
-        nordData: null,
-        token: '',
-        manualKey: '',
-        countries: [],
-        countryId: null,
-        cities: [],
-        cityId: null,
-        servers: [],
-        serverId: null,
-        show() {
-            this.visible = true;
-            this.getData();
-        },
-        close() {
-            this.visible = false;
-        },
-        loading(loading = true) {
-            this.confirmLoading = loading;
-        },
-        async getData() {
-            this.loading(true);
-            const msg = await HttpUtil.post('/panel/xray/nord/data');
-            if (msg.success) {
-                this.nordData = msg.obj ? JSON.parse(msg.obj) : null;
-                if (this.nordData) {
-                    await this.fetchCountries();
-                }
-            }
-            this.loading(false);
-        },
-        async login() {
-            this.loading(true);
-            const msg = await HttpUtil.post('/panel/xray/nord/reg', {
-                token: this.token
-            });
-            if (msg.success) {
-                this.nordData = JSON.parse(msg.obj);
-                await this.fetchCountries();
-            }
-            this.loading(false);
-        },
-        async saveKey() {
-            this.loading(true);
-            const msg = await HttpUtil.post('/panel/xray/nord/setKey', {
-                key: this.manualKey
-            });
-            if (msg.success) {
-                this.nordData = JSON.parse(msg.obj);
-                await this.fetchCountries();
-            }
-            this.loading(false);
-        },
-        async logout(index) {
-            this.loading(true);
-            const msg = await HttpUtil.post('/panel/xray/nord/del');
-            if (msg.success) {
-                this.delOutbound(index);
-                this.delRouting();
-                this.nordData = null;
-                this.token = '';
-                this.manualKey = '';
-                this.countries = [];
-                this.cities = [];
-                this.servers = [];
-                this.countryId = null;
-                this.cityId = null;
-            }
-            this.loading(false);
-        },
-        async fetchCountries() {
-            const msg = await HttpUtil.post('/panel/xray/nord/countries');
-            if (msg.success) {
-                this.countries = JSON.parse(msg.obj);
-            }
-        },
-        async fetchServers() {
-            this.loading(true);
-            this.servers = [];
-            this.cities = [];
-            this.serverId = null;
-            this.cityId = null;
-            const msg = await HttpUtil.post('/panel/xray/nord/servers', {
-                countryId: this.countryId
-            });
-            if (msg.success) {
-                const data = JSON.parse(msg.obj);
-                const locations = data.locations || [];
-                const locToCity = {};
-                const citiesMap = new Map();
-                locations.forEach(loc => {
-                    if (loc.country && loc.country.city) {
-                        citiesMap.set(loc.country.city.id, loc.country.city);
-                        locToCity[loc.id] = loc.country.city;
-                    }
-                });
-                this.cities = Array.from(citiesMap.values()).sort((a, b) => a.name.localeCompare(b.name));
-
-                this.servers = (data.servers || []).map(s => {
-                    const firstLocId = (s.location_ids || [])[0];
-                    const city = locToCity[firstLocId];
-                    s.cityId = city ? city.id : null;
-                    s.cityName = city ? city.name : 'Unknown';
-                    return s;
-                }).sort((a, b) => a.load - b.load);
-
-                if (this.servers.length > 0) {
-                    this.serverId = this.servers[0].id;
-                }
-
-                if (this.servers.length === 0) {
-                    app.$message.warning('No servers found for the selected country');
-                }
-            }
-            this.loading(false);
-        },
-        addOutbound() {
-            const server = this.servers.find(s => s.id === this.serverId);
-            if (!server) return;
-
-            const tech = server.technologies.find(t => t.id === 35);
-            const publicKey = tech.metadata.find(m => m.name === 'public_key').value;
-
-            const outbound = {
-                tag: `nord-${server.hostname}`,
-                protocol: 'wireguard',
-                settings: {
-                    secretKey: this.nordData.private_key,
-                    address: ['10.5.0.2/32'],
-                    peers: [{
-                        publicKey: publicKey,
-                        endpoint: server.station + ':51820'
-                    }],
-                    noKernelTun: false
-                }
-            };
-
-            app.templateSettings.outbounds.push(outbound);
-            app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-            this.close();
-            app.$message.success('NordVPN outbound added');
-        },
-        resetOutbound(index) {
-            const server = this.servers.find(s => s.id === this.serverId);
-            if (!server || index === -1) return;
-
-            const tech = server.technologies.find(t => t.id === 35);
-            const publicKey = tech.metadata.find(m => m.name === 'public_key').value;
-
-            const oldTag = app.templateSettings.outbounds[index].tag;
-            const newTag = `nord-${server.hostname}`;
-
-            const outbound = {
-                tag: newTag,
-                protocol: 'wireguard',
-                settings: {
-                    secretKey: this.nordData.private_key,
-                    address: ['10.5.0.2/32'],
-                    peers: [{
-                        publicKey: publicKey,
-                        endpoint: server.station + ':51820'
-                    }],
-                    noKernelTun: false
-                }
-            };
-            app.templateSettings.outbounds[index] = outbound;
-
-            // Sync routing rules
-            app.templateSettings.routing.rules.forEach(r => {
-                if (r.outboundTag === oldTag) {
-                    r.outboundTag = newTag;
-                }
-            });
-
-            app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-            this.close();
-            app.$message.success('NordVPN outbound updated');
-        },
-        delOutbound(index) {
-            if (index !== -1) {
-                app.templateSettings.outbounds.splice(index, 1);
-                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-            }
-        },
-        delRouting() {
-            if (app.templateSettings && app.templateSettings.routing) {
-                app.templateSettings.routing.rules = app.templateSettings.routing.rules.filter(r => !r.outboundTag
-                    .startsWith("nord-"));
-            }
-        }
-    };
-
-    new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#nord-modal',
-        data: {
-            nordModal: nordModal,
-        },
-        methods: {
-            login: () => nordModal.login(),
-            saveKey: () => nordModal.saveKey(),
-            logout() {
-                nordModal.logout(this.nordOutboundIndex)
-            },
-            fetchServers: () => nordModal.fetchServers(),
-            addOutbound: () => nordModal.addOutbound(),
-            resetOutbound() {
-                nordModal.resetOutbound(this.nordOutboundIndex)
-            },
-            onCityChange() {
-                if (this.filteredServers.length > 0) {
-                    this.nordModal.serverId = this.filteredServers[0].id;
-                } else {
-                    this.nordModal.serverId = null;
-                }
-            }
-        },
-        computed: {
-            nordOutboundIndex: {
-                get: function() {
-                    return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag
-                        .startsWith("nord-")) : -1;
-                }
-            },
-            filteredServers: function() {
-                if (!this.nordModal.cityId) {
-                    return this.nordModal.servers;
-                }
-                return this.nordModal.servers.filter(s => s.cityId === this.nordModal.cityId);
-            }
-        }
-    });
-</script>
-{{end}}
@@ -1,66 +0,0 @@
-{{define "modals/promptModal"}}
-<a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title" :closable="true"
-    @ok="promptModal.ok" :mask-closable="false" :confirm-loading="promptModal.confirmLoading"
-    :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
-    <a-input id="prompt-modal-input" :type="promptModal.type" v-model="promptModal.value"
-        :autosize="{minRows: 10, maxRows: 20}" @keydown.enter.native="promptModal.keyEnter"
-        @keydown.ctrl.83="promptModal.ctrlS"></a-input>
-</a-modal>
-
-<script>
-    const promptModal = {
-        title: '',
-        type: '',
-        value: '',
-        okText: '{{ i18n "sure"}}',
-        visible: false,
-        confirmLoading: false,
-        keyEnter(e) {
-            if (this.type !== 'textarea') {
-                e.preventDefault();
-                this.ok();
-            }
-        },
-        ctrlS(e) {
-            if (this.type === 'textarea') {
-                e.preventDefault();
-                promptModal.confirm(promptModal.value);
-            }
-        },
-        ok() {
-            promptModal.confirm(promptModal.value);
-        },
-        confirm() {},
-        open({
-            title = '',
-            type = 'text',
-            value = '',
-            okText = '{{ i18n "sure"}}',
-            confirm = () => {},
-        }) {
-            this.title = title;
-            this.type = type;
-            this.value = value;
-            this.okText = okText;
-            this.confirm = confirm;
-            this.visible = true;
-            promptModalApp.$nextTick(() => {
-                document.querySelector('#prompt-modal-input').focus();
-            });
-        },
-        close() {
-            this.visible = false;
-        },
-        loading(loading = true) {
-            this.confirmLoading = loading;
-        },
-    };
-
-    const promptModalApp = new Vue({
-        el: '#prompt-modal',
-        data: {
-            promptModal: promptModal,
-        },
-    });
-</script>
-{{end}}
@@ -1,311 +0,0 @@
-{{define "modals/qrcodeModal"}}
-<a-modal id="qrcode-modal" v-model="qrModal.visible" :closable="true" :class="themeSwitcher.currentTheme"
-  width="fit-content" :dialog-style="isMobile ? { top: '18px' } : {}" :footer="null">
-  <template #title>
-    <a-space direction="horizontal">
-      <span>[[ qrModal.title ]]</span>
-      <a-popover :overlay-class-name="themeSwitcher.currentTheme" trigger="click" placement="bottom">
-        <template slot="content">
-          <a-space direction="vertical">
-            <template v-for="(row, index) in qrModal.qrcodes">
-              <b>[[ row.remark ]]</b>
-              <a-space direction="horizontal">
-                <a-switch size="small" :checked="row.useIPv4" @click="toggleIPv4(index)"></a-switch>
-                <span>{{ i18n "useIPv4ForHost" }}</span>
-              </a-space>
-            </template>
-          </a-space>
-        </template>
-        <a-icon type="setting"></a-icon>
-      </a-popover>
-    </a-space>
-  </template>
-  <tr-qr-modal class="qr-modal">
-    <template v-if="app.subSettings?.enable && qrModal.subId">
-      <tr-qr-box class="qr-box">
-        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
-        <tr-qr-bg class="qr-bg-sub">
-          <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
-          </tr-qr-bg-inner>
-        </tr-qr-bg>
-      </tr-qr-box>
-      <tr-qr-box class="qr-box" v-if="app.subSettings.subJsonEnable">
-        <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
-        <tr-qr-bg class="qr-bg-sub">
-          <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
-          </tr-qr-bg-inner>
-        </tr-qr-bg>
-      </tr-qr-box>
-    </template>
-    <template v-for="(row, index) in qrModal.qrcodes">
-      <tr-qr-box class="qr-box">
-        <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
-        <tr-qr-bg class="qr-bg">
-          <canvas @click="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
-        </tr-qr-bg>
-      </tr-qr-box>
-    </template>
-  </tr-qr-modal>
-</a-modal>
-
-<style>
-  .ant-table:not(.ant-table-expanded-row .ant-table) {
-    outline: 1px solid #f0f0f0;
-    outline-offset: -1px;
-    border-radius: 1rem;
-    overflow-x: hidden;
-  }
-
-  /* QR code transition effects */
-  .qr-cv {
-    transition: all 0.3s ease-in-out;
-  }
-
-  .qr-transition-enter-active,
-  .qr-transition-leave-active {
-    transition: opacity 0.3s, transform 0.3s;
-  }
-
-  .qr-transition-enter,
-  .qr-transition-leave-to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  .qr-transition-enter-to,
-  .qr-transition-leave {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .qr-flash {
-    animation: qr-flash-animation 0.6s;
-  }
-
-  @keyframes qr-flash-animation {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    50% {
-      opacity: 0.5;
-      transform: scale(0.95);
-    }
-
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-</style>
-
-<script>
-  const qrModal = {
-    title: '',
-    dbInbound: new DBInbound(),
-    client: null,
-    qrcodes: [],
-    visible: false,
-    subId: '',
-    show: function(title = '', dbInbound, client) {
-      this.title = title;
-      this.dbInbound = dbInbound;
-      this.inbound = dbInbound.toInbound();
-      this.client = client;
-      this.subId = '';
-      this.qrcodes = [];
-      // Reset the status fetched flag when showing the modal
-      if (qrModalApp) qrModalApp.statusFetched = false;
-      if (this.inbound.protocol == Protocols.WIREGUARD) {
-        this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l, index) => {
-          this.qrcodes.push({
-            remark: "Peer " + (index + 1),
-            link: l,
-            useIPv4: false,
-            originalLink: l
-          });
-        });
-      } else {
-        this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
-          this.qrcodes.push({
-            remark: l.remark,
-            link: l.link,
-            useIPv4: false,
-            originalLink: l.link
-          });
-        });
-      }
-      this.visible = true;
-    },
-    close: function() {
-      this.visible = false;
-    },
-  };
-  const qrModalApp = new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#qrcode-modal',
-    mixins: [MediaQueryMixin],
-    data: {
-      qrModal: qrModal,
-      serverStatus: null,
-      statusFetched: false,
-    },
-    methods: {
-      async getStatus() {
-        try {
-          const msg = await HttpUtil.get('/panel/api/server/status');
-          if (msg.success) {
-            this.serverStatus = msg.obj;
-          }
-        } catch (e) {
-          console.error("Failed to get status:", e);
-        }
-      },
-
-      toggleIPv4(index) {
-        const row = qrModal.qrcodes[index];
-        row.useIPv4 = !row.useIPv4;
-        this.updateLink(index);
-      },
-      updateLink(index) {
-        const row = qrModal.qrcodes[index];
-        if (!this.serverStatus || !this.serverStatus.publicIP) {
-          return;
-        }
-
-        if (row.useIPv4 && this.serverStatus.publicIP.ipv4) {
-          // Replace the hostname or IP in the link with the IPv4 address
-          const originalLink = row.originalLink;
-          const url = new URL(originalLink);
-          const ipv4 = this.serverStatus.publicIP.ipv4;
-
-          if (qrModal.inbound.protocol == Protocols.WIREGUARD) {
-            // Special handling for WireGuard config
-            const endpointRegex = /Endpoint = ([^:]+):(\d+)/;
-            const match = originalLink.match(endpointRegex);
-            if (match) {
-              row.link = originalLink.replace(
-                `Endpoint = ${match[1]}:${match[2]}`,
-                `Endpoint = ${ipv4}:${match[2]}`
-              );
-            }
-          } else {
-            // For other protocols using URL format
-            url.hostname = ipv4;
-            row.link = url.toString();
-          }
-        } else {
-          // Restore original link
-          row.link = row.originalLink;
-        }
-
-        // Update QR code with transition effect
-        const canvasElement = document.querySelector('#qrCode-' + index);
-        if (canvasElement) {
-          // Add flash animation class
-          canvasElement.classList.add('qr-flash');
-
-          // Remove the class after animation completes
-          setTimeout(() => {
-            canvasElement.classList.remove('qr-flash');
-          }, 600);
-        }
-
-        this.setQrCode("qrCode-" + index, row.link);
-      },
-      copy(content) {
-        ClipboardManager
-          .copyText(content)
-          .then(() => {
-            app.$message.success('{{ i18n "copied" }}')
-          })
-      },
-      setQrCode(elementId, content) {
-        new QRious({
-          element: document.querySelector('#' + elementId),
-          size: 400,
-          value: content,
-          background: 'white',
-          backgroundAlpha: 0,
-          foreground: 'black',
-          padding: 2,
-          level: 'L'
-        });
-      },
-      genSubLink(subID) {
-        return app.subSettings.subURI + subID;
-      },
-      genSubJsonLink(subID) {
-        return app.subSettings.subJsonURI + subID;
-      },
-      revertOverflow() {
-        const elements = document.querySelectorAll(".qr-tag");
-        elements.forEach((element) => {
-          element.classList.remove("tr-marquee");
-          element.children[0].style.animation = '';
-          while (element.children.length > 1) {
-            element.removeChild(element.lastChild);
-          }
-        });
-      }
-    },
-    updated() {
-      if (this.qrModal.visible) {
-        fixOverflow();
-        if (!this.statusFetched) {
-          this.getStatus();
-          this.statusFetched = true;
-        }
-      } else {
-        this.revertOverflow();
-        // Reset the flag when modal is closed so it will fetch again next time
-        this.statusFetched = false;
-      }
-      if (qrModal.client && qrModal.client.subId) {
-        qrModal.subId = qrModal.client.subId;
-        this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
-        if (app.subSettings.subJsonEnable) {
-          this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
-        }
-      }
-      qrModal.qrcodes.forEach((element, index) => {
-        this.setQrCode("qrCode-" + index, element.link);
-        // Update links based on current toggle state
-        if (element.useIPv4 && this.serverStatus && this.serverStatus.publicIP) {
-          this.updateLink(index);
-        }
-      });
-    }
-  });
-
-  function fixOverflow() {
-    const elements = document.querySelectorAll(".qr-tag");
-    elements.forEach((element) => {
-      function isElementOverflowing(element) {
-        const overflowX = element.offsetWidth < element.scrollWidth,
-          overflowY = element.offsetHeight < element.scrollHeight;
-        return overflowX || overflowY;
-      }
-
-      function wrapContentsInMarquee(element) {
-        element.classList.add("tr-marquee");
-        element.children[0].style.animation = `move-ltr ${(element.children[0].clientWidth / element.clientWidth) * 5
-          }s ease-in-out infinite`;
-        const marqueeText = element.children[0];
-        if (element.children.length < 2) {
-          for (let i = 0; i < 1; i++) {
-            const marqueeText = element.children[0].cloneNode(true);
-            element.children[0].after(marqueeText);
-          }
-        }
-      }
-      if (isElementOverflowing(element)) {
-        wrapContentsInMarquee(element);
-      }
-    });
-  }
-</script>
-{{end}}
@@ -1,51 +0,0 @@
-{{define "modals/textModal"}}
-<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" :closable="true"
-    :class="themeSwitcher.currentTheme">
-    <a-input :style="{ overflowY: 'auto' }" type="textarea" v-model="txtModal.content"
-        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
-    <template slot="footer">
-        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
-            @click="FileManager.downloadTextFile(txtModal.content, txtModal.fileName)">
-            <span>[[ txtModal.fileName ]]</span>
-        </a-button>
-        <a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
-            <span>{{ i18n "copy" }}</span>
-        </a-button>
-    </template>
-</a-modal>
-
-<script>
-    const txtModal = {
-        title: '',
-        content: '',
-        fileName: '',
-        qrcode: null,
-        visible: false,
-        show: function(title = '', content = '', fileName = '') {
-            this.title = title;
-            this.content = content;
-            this.fileName = fileName;
-            this.visible = true;
-        },
-        copy: function(content = '') {
-            ClipboardManager
-                .copyText(content)
-                .then(() => {
-                    app.$message.success('{{ i18n "copied" }}')
-                    this.close();
-                })
-        },
-        close: function() {
-            this.visible = false;
-        },
-    };
-
-    const textModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#text-modal',
-        data: {
-            txtModal: txtModal,
-        },
-    });
-</script>
-{{end}}
@@ -1,125 +0,0 @@
-{{define "modals/twoFactorModal"}}
-<a-modal id="two-factor-modal" v-model="twoFactorModal.visible" :title="twoFactorModal.title" :closable="true"
-    :class="themeSwitcher.currentTheme">
-    <template v-if="twoFactorModal.type === 'set'">
-        <p>{{ i18n "pages.settings.security.twoFactorModalSteps" }}</p>
-        <a-divider></a-divider>
-        <p>{{ i18n "pages.settings.security.twoFactorModalFirstStep" }}</p>
-        <div :style="{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '12px' }">
-            <div class="qr-bg" :style="{ width: '180px', height: '180px' }">
-                <canvas @click="copy(twoFactorModal.token)" id="twofactor-qrcode" class="qr-cv"></canvas>
-            </div>
-            <span :style="{ fontSize: '12px', fontFamily: 'monospace' }">[[ twoFactorModal.token ]]</span>
-        </div>
-        <a-divider></a-divider>
-        <p>{{ i18n "pages.settings.security.twoFactorModalSecondStep" }}</p>
-        <a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
-    </template>
-    <template v-if="twoFactorModal.type === 'confirm'">
-        <p>[[ twoFactorModal.description ]]</p>
-        <a-input v-model.trim="twoFactorModal.enteredCode" :style="{ width: '100%' }"></a-input>
-    </template>
-    <template slot="footer">
-        <a-button @click="twoFactorModal.cancel">
-            <span>{{ i18n "cancel" }}</span>
-        </a-button>
-        <a-button type="primary" :disabled="twoFactorModal.enteredCode.length < 6" @click="twoFactorModal.ok">
-            <span>{{ i18n "confirm" }}</span>
-        </a-button>
-    </template>
-</a-modal>
-
-<script>
-    const twoFactorModal = {
-        title: '',
-        description: '',
-        fileName: '',
-        token: '',
-        enteredCode: '',
-        visible: false,
-        type: 'set',
-        confirm: null,
-        totpObject: null,
-        qrImage: "",
-        ok() {
-            if (twoFactorModal.totpObject.generate() === twoFactorModal.enteredCode) {
-                ObjectUtil.execute(twoFactorModal.confirm, true)
-
-                twoFactorModal.close()
-            } else {
-                Vue.prototype.$message['error']('{{ i18n "pages.settings.security.twoFactorModalError" }}')
-            }
-        },
-        cancel() {
-            ObjectUtil.execute(twoFactorModal.confirm, false)
-
-            twoFactorModal.close()
-        },
-        show: function({
-            title = '',
-            description = '',
-            token = '',
-            type = 'set',
-            confirm = (success) => {}
-        }) {
-            this.title = title;
-            this.description = description;
-            this.token = token;
-            this.visible = true;
-            this.confirm = confirm;
-            this.type = type;
-
-            this.totpObject = new OTPAuth.TOTP({
-                issuer: "3x-ui",
-                label: "Administrator",
-                algorithm: "SHA1",
-                digits: 6,
-                period: 30,
-                secret: twoFactorModal.token,
-            });
-        },
-        close: function() {
-            twoFactorModal.enteredCode = "";
-            twoFactorModal.visible = false;
-        },
-    };
-
-    const twoFactorModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#two-factor-modal',
-        data: {
-            twoFactorModal: twoFactorModal,
-        },
-        updated() {
-            if (
-                this.twoFactorModal.visible &&
-                this.twoFactorModal.type === 'set' &&
-                document.getElementById('twofactor-qrcode')
-            ) {
-                this.setQrCode('twofactor-qrcode', this.twoFactorModal.totpObject.toString());
-            }
-        },
-        methods: {
-            setQrCode(elementId, content) {
-                new QRious({
-                    element: document.getElementById(elementId),
-                    size: 200,
-                    value: content,
-                    background: 'white',
-                    backgroundAlpha: 0,
-                    foreground: 'black',
-                    padding: 2,
-                    level: 'L'
-                });
-            },
-            copy(content) {
-                ClipboardManager
-                    .copyText(content)
-                    .then(() => {
-                        app.$message.success('{{ i18n "copied" }}')
-                    })
-            },
-        }
-    });
-</script>
-{{end}}
@@ -1,250 +0,0 @@
-{{define "modals/warpModal"}}
-<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP" :confirm-loading="warpModal.confirmLoading"
-    :closable="true" :mask-closable="true" :footer="null" :class="themeSwitcher.currentTheme">
-    <template v-if="ObjectUtil.isEmpty(warpModal.warpData)">
-        <a-button icon="api" @click="register" :loading="warpModal.confirmLoading">{{ i18n "create" }}</a-button>
-    </template>
-    <template v-else>
-        <table :style="{ margin: '5px 0', width: '100%' }">
-            <tr class="client-table-odd-row">
-                <td>Access Token</td>
-                <td>[[ warpModal.warpData.access_token ]]</td>
-            </tr>
-            <tr>
-                <td>Device ID</td>
-                <td>[[ warpModal.warpData.device_id ]]</td>
-            </tr>
-            <tr class="client-table-odd-row">
-                <td>License Key</td>
-                <td>[[ warpModal.warpData.license_key ]]</td>
-            </tr>
-            <tr>
-                <td>Private Key</td>
-                <td>[[ warpModal.warpData.private_key ]]</td>
-            </tr>
-        </table>
-        <a-button @click="delConfig" :loading="warpModal.confirmLoading" type="danger">{{ i18n "delete" }}</a-button>
-        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
-        <a-collapse :style="{ margin: '10px 0' }">
-            <a-collapse-panel header='WARP/WARP+ License Key'>
-                <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-                    <a-form-item label="Key">
-                        <a-input v-model="warpPlus"></a-input>
-                        <a-button @click="updateLicense(warpPlus)" :disabled="warpPlus.length<26"
-                            :loading="warpModal.confirmLoading">{{ i18n "update" }}</a-button>
-                    </a-form-item>
-                </a-form>
-            </a-collapse-panel>
-        </a-collapse>
-        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.accountInfo" }}</a-divider>
-        <a-button icon="sync" @click="getConfig" :style="{ marginTop: '5px', marginBottom: '10px' }"
-            :loading="warpModal.confirmLoading" type="primary">{{ i18n "info" }}</a-button>
-        <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)">
-            <table :style="{ width: '100%' }">
-                <tr class="client-table-odd-row">
-                    <td>Device Name</td>
-                    <td>[[ warpModal.warpConfig.name ]]</td>
-                </tr>
-                <tr>
-                    <td>Device Model</td>
-                    <td>[[ warpModal.warpConfig.model ]]</td>
-                </tr>
-                <tr class="client-table-odd-row">
-                    <td>Device Enabled</td>
-                    <td>[[ warpModal.warpConfig.enabled ]]</td>
-                </tr>
-                <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
-                    <tr>
-                        <td>Account Type</td>
-                        <td>[[ warpModal.warpConfig.account.account_type ]]</td>
-                    </tr>
-                    <tr class="client-table-odd-row">
-                        <td>Role</td>
-                        <td>[[ warpModal.warpConfig.account.role ]]</td>
-                    </tr>
-                    <tr>
-                        <td>WARP+ Data</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
-                    </tr>
-                    <tr class="client-table-odd-row">
-                        <td>Quota</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
-                    </tr>
-                    <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
-                        <td>Usage</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
-                    </tr>
-                </template>
-            </table>
-            <a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
-            <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-                <template v-if="warpOutboundIndex>=0">
-                    <a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
-                    <a-button @click="resetOutbound" :loading="warpModal.confirmLoading"
-                        type="danger">{{ i18n "reset" }}</a-button>
-                </template>
-                <template v-else>
-                    <a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
-                    <a-button @click="addOutbound" :loading="warpModal.confirmLoading"
-                        type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-                </template>
-            </a-form>
-        </template>
-    </template>
-</a-modal>
-<script>
-    const warpModal = {
-        visible: false,
-        confirmLoading: false,
-        warpData: null,
-        warpConfig: null,
-        warpOutbound: null,
-        show() {
-            this.visible = true;
-            this.warpConfig = null;
-            this.getData();
-        },
-        close() {
-            this.visible = false;
-            this.loading(false);
-        },
-        loading(loading = true) {
-            this.confirmLoading = loading;
-        },
-        async getData() {
-            this.loading(true);
-            const msg = await HttpUtil.post('/panel/xray/warp/data');
-            this.loading(false);
-            if (msg.success) {
-                this.warpData = msg.obj.length > 0 ? JSON.parse(msg.obj) : null;
-            }
-        },
-    };
-
-    new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#warp-modal',
-        data: {
-            warpModal: warpModal,
-            warpPlus: '',
-        },
-        methods: {
-            collectConfig() {
-                const config = warpModal.warpConfig && warpModal.warpConfig.config;
-                if (!config || !config.peers || !config.peers.length) {
-                    return;
-                }
-                const peer = config.peers[0];
-                warpModal.warpOutbound = Outbound.fromJson({
-                    tag: 'warp',
-                    protocol: Protocols.Wireguard,
-                    settings: {
-                        mtu: 1420,
-                        secretKey: warpModal.warpData.private_key,
-                        address: this.getAddresses(config.interface.addresses),
-                        reserved: this.getReserved(config.client_id),
-                        domainStrategy: 'ForceIP',
-                        peers: [{
-                            publicKey: peer.public_key,
-                            endpoint: peer.endpoint.host,
-                        }],
-                        noKernelTun: false,
-                    }
-                });
-            },
-            getAddresses(addrs) {
-                let addresses = [];
-                if (addrs.v4) addresses.push(addrs.v4 + "/32");
-                if (addrs.v6) addresses.push(addrs.v6 + "/128");
-                return addresses;
-            },
-            getReserved(client_id) {
-                let reserved = [];
-                let decoded = atob(client_id);
-                let hexString = '';
-                for (let i = 0; i < decoded.length; i++) {
-                    let hex = decoded.charCodeAt(i).toString(16);
-                    hexString += (hex.length === 1 ? '0' : '') + hex;
-                }
-
-                for (let i = 0; i < hexString.length; i += 2) {
-                    let hexByte = hexString.slice(i, i + 2);
-                    let decValue = parseInt(hexByte, 16);
-                    reserved.push(decValue);
-                }
-                return reserved;
-            },
-            async register() {
-                warpModal.loading(true);
-                const keys = Wireguard.generateKeypair();
-                const msg = await HttpUtil.post('/panel/xray/warp/reg', keys);
-                if (msg.success) {
-                    const resp = JSON.parse(msg.obj);
-                    warpModal.warpData = resp.data;
-                    warpModal.warpConfig = resp.config;
-                    this.collectConfig();
-                }
-                warpModal.loading(false);
-            },
-            async updateLicense(l) {
-                warpModal.loading(true);
-                const msg = await HttpUtil.post('/panel/xray/warp/license', {
-                    license: l
-                });
-                if (msg.success) {
-                    warpModal.warpData = JSON.parse(msg.obj);
-                    warpModal.warpConfig = null;
-                    this.warpPlus = '';
-                }
-                warpModal.loading(false);
-            },
-            async getConfig() {
-                warpModal.loading(true);
-                const msg = await HttpUtil.post('/panel/xray/warp/config');
-                warpModal.loading(false);
-                if (msg.success) {
-                    warpModal.warpConfig = JSON.parse(msg.obj);
-                    this.collectConfig();
-                }
-            },
-            async delConfig() {
-                warpModal.loading(true);
-                const msg = await HttpUtil.post('/panel/xray/warp/del');
-                warpModal.loading(false);
-                if (msg.success) {
-                    warpModal.warpData = null;
-                    warpModal.warpConfig = null;
-                    this.delOutbound();
-                }
-            },
-            addOutbound() {
-                if (!warpModal.warpOutbound) return;
-                app.templateSettings.outbounds.push(warpModal.warpOutbound.toJson());
-                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-                warpModal.close();
-            },
-            resetOutbound() {
-                if (!warpModal.warpOutbound) return;
-                app.templateSettings.outbounds[this.warpOutboundIndex] = warpModal.warpOutbound.toJson();
-                app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-                warpModal.close();
-            },
-            delOutbound() {
-                if (this.warpOutboundIndex != -1) {
-                    app.templateSettings.outbounds.splice(this.warpOutboundIndex, 1);
-                    app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
-                }
-                warpModal.close();
-            }
-        },
-        computed: {
-            warpOutboundIndex: {
-                get: function() {
-                    return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag ==
-                        'warp') : -1;
-                }
-            }
-        }
-    });
-</script>
-{{end}}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				.CodeMirror{background-color:#f6fbfa;border:1px solid #d9d9d9}.cm-s-xq.CodeMirror{border-radius:1.5rem;height:auto;transition:background-color .3s,border-color 0.3s}.cm-s-xq.CodeMirror:hover{background-color:#e8f4f2;border-color:#18947b}.cm-s-xq div.CodeMirror-selected{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::selection,.cm-s-xq .CodeMirror-line>span::selection,.cm-s-xq .CodeMirror-line>span>span::selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-line::-moz-selection,.cm-s-xq .CodeMirror-line>span::-moz-selection,.cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:rgb(0 102 85 / .1)}.cm-s-xq .CodeMirror-gutters{border-right:1px solid #ddd;background-color:rgb(221 221 221 / 20%);white-space:nowrap}.cm-s-xq span.cm-keyword{line-height:1em;font-weight:700;color:#5A5CAD}.cm-s-xq span.cm-atom{color:#7A316F;font-weight:700}.cm-s-xq span.cm-number{color:#e36209}.cm-s-xq span.cm-def{text-decoration:underline}.cm-s-xq span.cm-variable{color:#000}.cm-s-xq span.cm-variable-2{color:#000}.cm-s-xq span.cm-variable-3,.cm-s-xq span.cm-type{color:#000}.cm-s-xq span.cm-property{color:#008771}.cm-s-xq span.cm-comment{color:#bbb;font-style:italic}.cm-s-xq span.cm-meta{color:#ff0}.cm-s-xq span.cm-qualifier{color:grey}.cm-s-xq span.cm-builtin{color:#7EA656}.cm-s-xq span.cm-bracket{color:#cc7}.cm-s-xq span.cm-tag{color:#3F7F7F}.cm-s-xq span.cm-attribute{color:#7F007F}.cm-s-xq span.cm-error{color:#e04141}.cm-s-xq .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:black!important;background:#ff0}.dark .CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300)}.dark .cm-s-xq.CodeMirror{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300);color:rgb(255 255 255 / 65%)}.dark .cm-s-xq.CodeMirror:hover{background-color:rgb(0 50 42 / 30%);border-color:#008771}.dark .cm-s-xq div.CodeMirror-selected{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::selection,.dark .cm-s-xq .CodeMirror-line>span::selection,.dark .cm-s-xq .CodeMirror-line>span>span::selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-line::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span::-moz-selection,.dark .cm-s-xq .CodeMirror-line>span>span::-moz-selection{background:var(--dark-color-codemirror-line-selection)}.dark .cm-s-xq .CodeMirror-gutters{background:rgb(0 0 0 / 30%);border-right:1px solid var(--dark-color-surface-300)}.dark .cm-s-xq .CodeMirror-guttermarker{color:#FFBD40}.dark .cm-s-xq .CodeMirror-guttermarker-subtle{color:rgb(255 255 255 / 70%)}.dark .cm-s-xq .CodeMirror-linenumber{color:rgb(255 255 255 / 50%)}.dark .cm-s-xq .CodeMirror-cursor{border-left:1px solid #fff}.dark .cm-s-xq span.cm-keyword{color:#FFBD40}.dark .cm-s-xq span.cm-atom{color:#c099ff}.dark .cm-s-xq span.cm-number{color:#9ccfd8}.dark .cm-s-xq span.cm-def{color:#FFF;text-decoration:underline}.dark .cm-s-xq span.cm-variable{color:#FFF}.dark .cm-s-xq span.cm-variable-2{color:#EEE}.dark .cm-s-xq span.cm-variable-3,.dark .cm-s-xq span.cm-type{color:#DDD}.dark .cm-s-xq span.cm-property{color:#f6c177}.dark .cm-s-xq span.cm-comment{color:gray}.dark .cm-s-xq span.cm-meta{color:#ff0}.dark .cm-s-xq span.cm-qualifier{color:#FFF700}.dark .cm-s-xq span.cm-builtin{color:#30a}.dark .cm-s-xq span.cm-bracket{color:#cc7}.dark .cm-s-xq span.cm-tag{color:#FFBD40}.dark .cm-s-xq span.cm-attribute{color:#FFF700}.dark .cm-s-xq span.cm-error{color:#e04141}.dark .cm-s-xq .CodeMirror-activeline-background{background:#27282E}.dark .cm-s-xq .CodeMirror-matchingbracket{outline:1px solid grey;color:white!important}.Line-Hover{transition:all .2s}.CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:rgb(0 102 85 / .05)}.dark .CodeMirror pre.CodeMirror-line:hover,.CodeMirror pre.CodeMirror-line-like:hover{background-color:var(--dark-color-codemirror-line-hover)}.CodeMirror-foldmarker{color:#fc8800;text-shadow:#ffd8aa 1px 1px 2px,#ffd8aa -1px -1px 2px,#ffd8aa 1px -1px 2px,#ffd8aa -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.dark .CodeMirror-foldmarker{color:#fff;text-shadow:#bbb 1px 1px 2px,#bbb -1px -1px 2px,#bbb 1px -1px 2px,#bbb -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}