xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-08-22 10:57:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move to TypeScript 7 and the oxc toolchain (oxlint + oxfmt) (#6262)

Browse Source 
* chore(frontend,docs): move to TypeScript 7 and replace ESLint with oxlint

TypeScript 7 is the native Go port and ships no programmatic compiler
API, so typescript-eslint cannot run at all: it peer-pins
typescript >=4.8.4 <6.1.0 (canary too) and hard-crashes with
"typescript-eslint does not support TS 7.0". Upstream support is
tracked in typescript-eslint#10940 and targets TS >=7.1.

Rather than wait, or carry Microsoft's side-by-side alias (which keeps
a second TS 6 install alive purely to feed the linter), both projects
move to oxlint, which never depended on the TypeScript API.

Typecheck drops from ~9.7s to ~2.2s and 167 packages leave frontend/.

oxlint has no no-restricted-syntax, so the #6121/#6127 cleared-
InputNumber guard is reimplemented as a JS plugin in
frontend/tools/oxlint/. It was verified to still fire in
pages/settings/** and pages/xray/** and to stay exempt in *Modal.tsx.

The type-aware @deprecated sweep survives too, as
`npm run lint:deprecated`: oxlint's type-aware mode runs on
oxlint-tsgolint, which drives the TS 7 typescript-go checker, so the
TS 7 move is what makes it possible.

Behaviour is preserved rather than tightened. jsx-a11y/prefer-tag-over-role
is off in both configs because it was never part of the recommended sets
ESLint actually ran, and oxlint honours the existing eslint-disable
comments, so no source churn was needed.

Two real fixes fell out of the stricter linting:
- outbound-link-parser.test.ts used `out?.streamSettings` behind an `as`
  cast, which hid the optional chain from ESLint and would throw on a
  null parse; the rest of the file already used `out!`.
- InputAddon's conditional role/tabIndex/onKeyDown is genuinely
  accessible but oxlint cannot evaluate it, so it gets a scoped disable.

* chore(docs): replace Prettier with oxfmt

oxfmt is the oxc project's Prettier-compatible formatter, so this pairs
with the oxlint move and drops the last JS-based tool from the docs
toolchain.

The swap is behaviour-preserving. Running Prettier and oxfmt over the
same files, with the existing .prettierrc.json settings migrated via
`oxfmt --migrate=prettier`, produces byte-identical output on every
file. (Comparing them outside the project directory is misleading:
Prettier silently falls back to its defaults when it cannot find its
config, which looks like a mismatch but is not one.)

The 18 files reformatted here were already failing `pnpm format:check`
before this change — Prettier wanted the exact same edits. The check is
not part of docs-ci.yml, which is why the drift went unnoticed.

.prettierignore becomes ignorePatterns in .oxfmtrc.json, keeping the
deliberate MDX exclusion: reflowing MDX prose merges headings into
paragraphs and collapses lists inside Steps/Callout components. Both
that and the generated fumadocs-openapi reference output were verified
untouched.

oxfmt is pinned to 0.63.0 rather than latest. pnpm 11's built-in
minimumReleaseAge policy rejects same-day releases, and 0.64.0 would
have made pnpm silently append 20 waiver lines to pnpm-workspace.yaml.

* style(frontend): adopt oxfmt and format src

frontend/ has never had a formatter, so this reformats 344 of 497 files
in src/. The change is purely whitespace, quoting and line wrapping —
no logic is touched. It is kept in its own commit so it does not bury
the TypeScript 7 / oxlint migration or the git blame for the code
itself.

Settings match docs/ and the code as it was already written: single
quotes, semicolons, trailing commas, 2-space indent, 100 columns. That
was measured rather than assumed — src/ was already uniformly
single-quoted and 2-space indented, with p90 line length at 75.

Formatting is scoped to src/ (mirroring `oxlint src`) and
.oxfmtrc.json ignores src/generated. Both matter: `make gen-check`
compares src/generated and public/openapi.json, and
`make msw-worker-check` byte-compares public/mockServiceWorker.js
against the installed MSW runtime, so reformatting any of them breaks
the gate.

Reflowing also moves `eslint-disable-next-line` comments off the line
they guard, which broke two suppressions that had been silently
correct before:
- clone-inbound-modal.test.tsx: the object literal became multi-line,
  leaving `} as any;` four lines below its no-explicit-any disable.
- ClientsPage.tsx: the useMemo dependency array moved onto its own
  line, out from under its exhaustive-deps disable.
Both comments were relocated onto the line they actually guard, and
verified to still suppress by removing them and watching the errors
return.

* ci: enforce formatting in CI and make verify

Adding oxfmt in the previous two commits gave both projects a formatter
but nothing that checks it, which is how docs/ had already drifted to 18
unformatted files: docs-ci.yml runs typecheck, lint, test and build, but
never format:check, so Prettier's complaints were only ever visible to
whoever ran it by hand.

Wire `format:check` into the frontend job in ci.yml and the docs job in
docs-ci.yml, and add a `format-check` target to `make verify` so the
local gate keeps mirroring CI as the Makefile header promises.

Verified the step actually bites rather than passing vacuously: adding
a badly formatted line to a source file in each project makes both
`make format-check` and `pnpm format:check` fail, and reverting it makes
them pass again.

No workflow referenced ESLint or Prettier by name — they all invoke the
package scripts — so the tooling swap needed no other CI changes.

* ci: trigger CI on Makefile changes

The path filters listed **.go, go.mod, go.sum, frontend/**, .nvmrc and
ci.yml itself, but not the Makefile — so a change to the canonical task
runner that ci.yml is meant to mirror could land without any job
running. The previous commit, which edits both, only triggers because
it happens to touch ci.yml too.

* fix(frontend): replace deprecated Ant Design 6 APIs in the geo components

`npm run lint:deprecated` reported five uses of props Ant Design 6 has
deprecated. All five are gone, and the matching runtime warnings no
longer appear in the test output.

Tag `bordered={false}` becomes `variant="filled"` and Space `direction`
becomes `orientation`; both are the one-to-one replacements named in
antd's own deprecation messages, and `direction`/`orientation` share the
same Orientation type.

Input `addonAfter` is the one that is not a rename. It becomes a
`Space.Compact block` wrapping the Input and the browse Button, which is
antd's documented migration. `block` keeps the field filling its form
row as the addon did. Note this is a deliberate visual change: the
button used to be a borderless `type="text"` icon sitting inside the
addon's grey box, and is now a regular button whose border joins the
input. The tooltip, aria-label, ref, id and onBlur wiring are unchanged,
so the react-hook-form binding in RuleFormModal and the existing tests
still address it the same way.

Only these five were deprecated. The other `bordered` props in the tree
sit on QRCode, Table, Descriptions and Alert, where the prop is not
deprecated, and these were the only two Space `direction` uses in the
codebase.

* fix(frontend): restore lint rules lost in the oxlint migration, and test the guard

Addresses the review on #6262.

The frontend config re-enabled only no-explicit-any and no-unused-vars
and left the rest of tseslint's recommended set to oxlint's correctness
category. It does not cover all of it. Confirmed by linting one probe
file against both configs: docs/ (which enumerates the rules) reports
all nine, frontend/ reported four. So ban-ts-comment,
no-empty-object-type, no-namespace, no-require-imports and
no-unsafe-function-type had silently stopped being enforced — a `//
@ts-ignore` or a `namespace` block would have landed unflagged. The ten
rules are now mirrored from docs/.oxlintrc.json, and src/ still passes.

The #6121/#6127 guard was 57 lines of hand-written AST walking with no
test. It now has one: fixtures for the three banned shapes plus an
onNumber()-wrapped control, asserting the rule fires three times and
that .oxlintrc.json still wires it to the right paths. Verified it fails
for the right reason by making walk() enumerate nothing, which is the
silent-death mode the review described — the traversal depends on
Object.keys() seeing AST children as own enumerable properties.

The fixtures deliberately violate the rule, so their oxlint config is
named guard.oxlintrc.json rather than .oxlintrc.json: oxlint discovers
nested configs by directory, which would otherwise turn the fixtures
into three lint errors. The test passes it explicitly with -c.

Also from the review:
- lint and format now cover tools/ as well as src/, so the one piece of
  hand-written lint logic in the repo is no longer the least covered
  file in it.
- lint-staged runs oxfmt before oxlint --fix. Formatting became a hard
  CI gate in this PR while the hook only ran the linter, so a commit
  could pass the hook and fail CI on formatting alone.
- .oxfmtrc.json ignores public/, so the artefacts that make gen-check
  and make msw-worker-check byte-compare stay safe even if oxfmt is
  invoked without a path argument.
- The MDX and generated-reference rationales that .prettierignore
  carried are back as comments in docs/.oxfmtrc.json — oxlint and oxfmt
  both accept JSONC, so relocating them was unnecessary.

Not applied: the review also suggested restoring ../internal/web/dist to
the ignore lists. Both tools reject `..` patterns outright ("patterns
are resolved within the config file's directory"), and being outside
frontend/ it is unreachable anyway.
This commit is contained in:
Sanaei
2026-08-19 15:36:27 +02:00
committed by GitHub
parent 380aff4d82
commit 92fb94d856
388 changed files with 19613 additions and 14133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/useClients.ts
+387 -235
View File
@@ -80,9 +80,16 @@ export interface ClientQueryParams {
const DEFAULT_QUERY: ClientQueryParams = { page: 1, pageSize: 25 };
const DEFAULT_SUMMARY: ClientsSummary = {
total: 0, active: 0,
onlineCount: 0, depletedCount: 0, expiringCount: 0, deactiveCount: 0,
online: [], depleted: [], expiring: [], deactive: [],
total: 0,
active: 0,
onlineCount: 0,
depletedCount: 0,
expiringCount: 0,
deactiveCount: 0,
online: [],
depleted: [],
expiring: [],
deactive: [],
};
export interface ClientSpeedEntry {
@@ -129,7 +136,9 @@ function buildQS(p: ClientQueryParams): string {
async function fetchClientPage(params: ClientQueryParams): Promise<ClientPageResponse> {
const qs = buildQS(params);
const msg = await HttpUtil.get(`/panel/api/clients/list/paged?${qs}`, undefined, { silent: true });
const msg = await HttpUtil.get(`/panel/api/clients/list/paged?${qs}`, undefined, {
silent: true,
});
if (!msg?.success || !msg.obj) throw new Error(msg?.msg || 'Failed to fetch clients');
const validated = parseMsg(msg, ClientPageResponseSchema, 'clients/list/paged', { strict: true });
if (!validated.obj) throw new Error('Empty clients response');
@@ -144,7 +153,9 @@ async function fetchInboundOptions(): Promise<InboundOption[]> {
}
async function fetchDefaults(): Promise<Record<string, unknown>> {
const msg = await HttpUtil.post('/panel/api/setting/defaultSettings', undefined, { silent: true });
const msg = await HttpUtil.post('/panel/api/setting/defaultSettings', undefined, {
silent: true,
});
if (!msg?.success) throw new Error(msg?.msg || 'Failed to fetch defaults');
const validated = parseMsg(msg, DefaultsPayloadSchema, 'setting/defaultSettings');
return validated.obj || {};
@@ -173,24 +184,25 @@ export function useClients(options: UseClientsOptions = {}) {
const setQuery = useCallback((next: ClientQueryParams) => {
setQueryState((prev) => {
if (
prev
&& prev.page === next.page
&& prev.pageSize === next.pageSize
&& (prev.search ?? '') === (next.search ?? '')
&& (prev.filter ?? '') === (next.filter ?? '')
&& (prev.protocol ?? '') === (next.protocol ?? '')
&& (prev.inbound ?? '') === (next.inbound ?? '')
&& (prev.sort ?? '') === (next.sort ?? '')
&& (prev.order ?? '') === (next.order ?? '')
&& (prev.expiryFrom ?? 0) === (next.expiryFrom ?? 0)
&& (prev.expiryTo ?? 0) === (next.expiryTo ?? 0)
&& (prev.usageFrom ?? 0) === (next.usageFrom ?? 0)
&& (prev.usageTo ?? 0) === (next.usageTo ?? 0)
&& (prev.autoRenew ?? '') === (next.autoRenew ?? '')
&& (prev.hasTgId ?? '') === (next.hasTgId ?? '')
&& (prev.hasComment ?? '') === (next.hasComment ?? '')
&& (prev.group ?? '') === (next.group ?? '')
) return prev;
prev &&
prev.page === next.page &&
prev.pageSize === next.pageSize &&
(prev.search ?? '') === (next.search ?? '') &&
(prev.filter ?? '') === (next.filter ?? '') &&
(prev.protocol ?? '') === (next.protocol ?? '') &&
(prev.inbound ?? '') === (next.inbound ?? '') &&
(prev.sort ?? '') === (next.sort ?? '') &&
(prev.order ?? '') === (next.order ?? '') &&
(prev.expiryFrom ?? 0) === (next.expiryFrom ?? 0) &&
(prev.expiryTo ?? 0) === (next.expiryTo ?? 0) &&
(prev.usageFrom ?? 0) === (next.usageFrom ?? 0) &&
(prev.usageTo ?? 0) === (next.usageTo ?? 0) &&
(prev.autoRenew ?? '') === (next.autoRenew ?? '') &&
(prev.hasTgId ?? '') === (next.hasTgId ?? '') &&
(prev.hasComment ?? '') === (next.hasComment ?? '') &&
(prev.group ?? '') === (next.group ?? '')
)
return prev;
return next;
});
}, []);
@@ -251,24 +263,27 @@ export function useClients(options: UseClientsOptions = {}) {
const onlines = useMemo(() => onlinesQuery.data ?? [], [onlinesQuery.data]);
const defaults = defaultsQuery.data ?? {};
const subSettings: SubSettings = useMemo(() => ({
enable: !!defaults.subEnable,
subURI: (defaults.subURI as string) || '',
subJsonURI: (defaults.subJsonURI as string) || '',
subJsonEnable: !!defaults.subJsonEnable,
subClashURI: (defaults.subClashURI as string) || '',
subClashEnable: !!defaults.subClashEnable,
publicHost: (defaults.subDomain as string) || (defaults.webDomain as string) || '',
}), [
defaults.subEnable,
defaults.subURI,
defaults.subJsonURI,
defaults.subJsonEnable,
defaults.subClashURI,
defaults.subClashEnable,
defaults.subDomain,
defaults.webDomain,
]);
const subSettings: SubSettings = useMemo(
() => ({
enable: !!defaults.subEnable,
subURI: (defaults.subURI as string) || '',
subJsonURI: (defaults.subJsonURI as string) || '',
subJsonEnable: !!defaults.subJsonEnable,
subClashURI: (defaults.subClashURI as string) || '',
subClashEnable: !!defaults.subClashEnable,
publicHost: (defaults.subDomain as string) || (defaults.webDomain as string) || '',
}),
[
defaults.subEnable,
defaults.subURI,
defaults.subJsonURI,
defaults.subJsonEnable,
defaults.subClashURI,
defaults.subClashEnable,
defaults.subDomain,
defaults.webDomain,
],
);
const ipLimitEnable = !!defaults.ipLimitEnable;
const tgBotEnable = !!defaults.tgBotEnable;
@@ -284,17 +299,14 @@ export function useClients(options: UseClientsOptions = {}) {
const [clientSpeed, setClientSpeed] = useState<Record<string, ClientSpeedEntry>>({});
const summary = listQuery.data?.summary ?? DEFAULT_SUMMARY;
const invalidateAll = useCallback(
() => {
markLocalInvalidate();
return Promise.all([
queryClient.invalidateQueries({ queryKey: keys.clients.root() }),
queryClient.invalidateQueries({ queryKey: keys.inbounds.root() }),
queryClient.invalidateQueries({ queryKey: keys.xray.config() }),
]);
},
[queryClient],
);
const invalidateAll = useCallback(() => {
markLocalInvalidate();
return Promise.all([
queryClient.invalidateQueries({ queryKey: keys.clients.root() }),
queryClient.invalidateQueries({ queryKey: keys.inbounds.root() }),
queryClient.invalidateQueries({ queryKey: keys.xray.config() }),
]);
}, [queryClient]);
const refresh = useCallback(async () => {
await invalidateAll();
@@ -311,25 +323,33 @@ export function useClients(options: UseClientsOptions = {}) {
const createMut = useMutation({
mutationFn: (payload: unknown) =>
HttpUtil.post('/panel/api/clients/add', payload, JSON_HEADERS),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkAddToGroupMut = useMutation({
mutationFn: (body: { emails: string[]; group: string }) =>
HttpUtil.post('/panel/api/clients/groups/bulkAdd', body, JSON_HEADERS),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkRemoveFromGroupMut = useMutation({
mutationFn: (body: { emails: string[] }) =>
HttpUtil.post('/panel/api/clients/groups/bulkRemove', body, JSON_HEADERS),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const updateMut = useMutation({
mutationFn: ({ email, client }: { email: string; client: unknown }) =>
HttpUtil.post(`/panel/api/clients/update/${encodeURIComponent(email)}`, client, JSON_HEADERS),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const removeMut = useMutation({
@@ -339,15 +359,22 @@ export function useClients(options: UseClientsOptions = {}) {
: `/panel/api/clients/del/${encodeURIComponent(email)}`;
return HttpUtil.post(url);
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkDeleteMut = useMutation({
mutationFn: async (payload: { emails: string[]; keepTraffic?: boolean }): Promise<Msg<BulkDeleteResult>> => {
mutationFn: async (payload: {
emails: string[];
keepTraffic?: boolean;
}): Promise<Msg<BulkDeleteResult>> => {
const raw = await HttpUtil.post('/panel/api/clients/bulkDel', payload, JSON_HEADERS);
return parseMsg(raw, BulkDeleteResultSchema, 'clients/bulkDel');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkCreateMut = useMutation({
@@ -355,70 +382,121 @@ export function useClients(options: UseClientsOptions = {}) {
const raw = await HttpUtil.post('/panel/api/clients/bulkCreate', payloads, JSON_HEADERS);
return parseMsg(raw, BulkCreateResultSchema, 'clients/bulkCreate');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkAdjustMut = useMutation({
mutationFn: async (payload: { emails: string[]; addDays: number; addBytes: number; flow: string }): Promise<Msg<BulkAdjustResult>> => {
mutationFn: async (payload: {
emails: string[];
addDays: number;
addBytes: number;
flow: string;
}): Promise<Msg<BulkAdjustResult>> => {
const raw = await HttpUtil.post('/panel/api/clients/bulkAdjust', payload, JSON_HEADERS);
return parseMsg(raw, BulkAdjustResultSchema, 'clients/bulkAdjust');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkSetEnableMut = useMutation({
mutationFn: async (payload: { emails: string[]; enable: boolean }): Promise<Msg<BulkSetEnableResult>> => {
const path = payload.enable ? '/panel/api/clients/bulkEnable' : '/panel/api/clients/bulkDisable';
mutationFn: async (payload: {
emails: string[];
enable: boolean;
}): Promise<Msg<BulkSetEnableResult>> => {
const path = payload.enable
? '/panel/api/clients/bulkEnable'
: '/panel/api/clients/bulkDisable';
const raw = await HttpUtil.post(path, { emails: payload.emails }, JSON_HEADERS);
return parseMsg(raw, BulkSetEnableResultSchema, payload.enable ? 'clients/bulkEnable' : 'clients/bulkDisable');
return parseMsg(
raw,
BulkSetEnableResultSchema,
payload.enable ? 'clients/bulkEnable' : 'clients/bulkDisable',
);
},
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
});
const attachMut = useMutation({
mutationFn: ({ email, inboundIds }: { email: string; inboundIds: number[] }) =>
HttpUtil.post(`/panel/api/clients/${encodeURIComponent(email)}/attach`, { inboundIds }, { ...JSON_HEADERS, silentSuccess: true }),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
HttpUtil.post(
`/panel/api/clients/${encodeURIComponent(email)}/attach`,
{ inboundIds },
{ ...JSON_HEADERS, silentSuccess: true },
),
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const setExternalLinksMut = useMutation({
mutationFn: ({ email, externalLinks }: { email: string; externalLinks: ExternalLinkInput[] }) =>
HttpUtil.post(`/panel/api/clients/${encodeURIComponent(email)}/externalLinks`, { externalLinks }, { ...JSON_HEADERS, silentSuccess: true }),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
HttpUtil.post(
`/panel/api/clients/${encodeURIComponent(email)}/externalLinks`,
{ externalLinks },
{ ...JSON_HEADERS, silentSuccess: true },
),
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkAttachMut = useMutation({
mutationFn: async (payload: { emails: string[]; inboundIds: number[] }): Promise<Msg<BulkAttachResult>> => {
mutationFn: async (payload: {
emails: string[];
inboundIds: number[];
}): Promise<Msg<BulkAttachResult>> => {
const raw = await HttpUtil.post('/panel/api/clients/bulkAttach', payload, JSON_HEADERS);
return parseMsg(raw, BulkAttachResultSchema, 'clients/bulkAttach');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const detachMut = useMutation({
mutationFn: ({ email, inboundIds }: { email: string; inboundIds: number[] }) =>
HttpUtil.post(`/panel/api/clients/${encodeURIComponent(email)}/detach`, { inboundIds }, { ...JSON_HEADERS, silentSuccess: true }),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
HttpUtil.post(
`/panel/api/clients/${encodeURIComponent(email)}/detach`,
{ inboundIds },
{ ...JSON_HEADERS, silentSuccess: true },
),
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const bulkDetachMut = useMutation({
mutationFn: async (payload: { emails: string[]; inboundIds: number[] }): Promise<Msg<BulkDetachResult>> => {
mutationFn: async (payload: {
emails: string[];
inboundIds: number[];
}): Promise<Msg<BulkDetachResult>> => {
const raw = await HttpUtil.post('/panel/api/clients/bulkDetach', payload, JSON_HEADERS);
return parseMsg(raw, BulkDetachResultSchema, 'clients/bulkDetach');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const resetTrafficMut = useMutation({
mutationFn: (email: string) =>
HttpUtil.post(`/panel/api/clients/resetTraffic/${encodeURIComponent(email)}`),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const resetAllTrafficsMut = useMutation({
mutationFn: () => HttpUtil.post('/panel/api/clients/resetAllTraffics'),
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const delDepletedMut = useMutation({
@@ -426,7 +504,9 @@ export function useClients(options: UseClientsOptions = {}) {
const raw = await HttpUtil.post('/panel/api/clients/delDepleted');
return parseMsg(raw, DelDepletedResultSchema, 'clients/delDepleted');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const delOrphansMut = useMutation({
@@ -434,7 +514,9 @@ export function useClients(options: UseClientsOptions = {}) {
const raw = await HttpUtil.post('/panel/api/clients/delOrphans');
return parseMsg(raw, DelDepletedResultSchema, 'clients/delOrphans');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const importClientsMut = useMutation({
@@ -442,76 +524,137 @@ export function useClients(options: UseClientsOptions = {}) {
const raw = await HttpUtil.post('/panel/api/clients/import', { data }, JSON_HEADERS);
return parseMsg(raw, BulkCreateResultSchema, 'clients/import');
},
onSuccess: (msg) => { if (msg?.success) invalidateAll(); },
onSuccess: (msg) => {
if (msg?.success) invalidateAll();
},
});
const create = useCallback((payload: unknown) => createMut.mutateAsync(payload), [createMut]);
const update = useCallback((email: string, client: unknown) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return updateMut.mutateAsync({ email, client });
}, [updateMut]);
const remove = useCallback((email: string, keepTraffic = false) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return removeMut.mutateAsync({ email, keepTraffic });
}, [removeMut]);
const bulkDelete = useCallback((emails: string[], keepTraffic = false) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null as unknown as Msg<BulkDeleteResult>);
return bulkDeleteMut.mutateAsync({ emails, keepTraffic });
}, [bulkDeleteMut]);
const bulkCreate = useCallback((payloads: unknown[]) => {
if (!Array.isArray(payloads) || payloads.length === 0) return Promise.resolve(null as unknown as Msg<BulkCreateResult>);
return bulkCreateMut.mutateAsync(payloads);
}, [bulkCreateMut]);
const bulkAdjust = useCallback((emails: string[], addDays: number, addBytes: number, flow = '') => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkAdjustMut.mutateAsync({ emails, addDays, addBytes, flow });
}, [bulkAdjustMut]);
const bulkEnable = useCallback((emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null as unknown as Msg<BulkSetEnableResult>);
return bulkSetEnableMut.mutateAsync({ emails, enable: true });
}, [bulkSetEnableMut]);
const bulkDisable = useCallback((emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null as unknown as Msg<BulkSetEnableResult>);
return bulkSetEnableMut.mutateAsync({ emails, enable: false });
}, [bulkSetEnableMut]);
const bulkAddToGroup = useCallback((emails: string[], group: string) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkAddToGroupMut.mutateAsync({ emails, group });
}, [bulkAddToGroupMut]);
const bulkRemoveFromGroup = useCallback((emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkRemoveFromGroupMut.mutateAsync({ emails });
}, [bulkRemoveFromGroupMut]);
const attach = useCallback((email: string, inboundIds: number[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return attachMut.mutateAsync({ email, inboundIds });
}, [attachMut]);
const setExternalLinks = useCallback((email: string, externalLinks: ExternalLinkInput[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return setExternalLinksMut.mutateAsync({ email, externalLinks });
}, [setExternalLinksMut]);
const bulkAttach = useCallback((emails: string[], inboundIds: number[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null as unknown as Msg<BulkAttachResult>);
if (!Array.isArray(inboundIds) || inboundIds.length === 0) return Promise.resolve(null as unknown as Msg<BulkAttachResult>);
return bulkAttachMut.mutateAsync({ emails, inboundIds });
}, [bulkAttachMut]);
const detach = useCallback((email: string, inboundIds: number[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return detachMut.mutateAsync({ email, inboundIds });
}, [detachMut]);
const bulkDetach = useCallback((emails: string[], inboundIds: number[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null as unknown as Msg<BulkDetachResult>);
if (!Array.isArray(inboundIds) || inboundIds.length === 0) return Promise.resolve(null as unknown as Msg<BulkDetachResult>);
return bulkDetachMut.mutateAsync({ emails, inboundIds });
}, [bulkDetachMut]);
const resetTraffic = useCallback((client: ClientRecord) => {
if (!client?.email) return Promise.resolve(null as unknown as Msg<unknown>);
return resetTrafficMut.mutateAsync(client.email);
}, [resetTrafficMut]);
const resetAllTraffics = useCallback(() => resetAllTrafficsMut.mutateAsync(), [resetAllTrafficsMut]);
const update = useCallback(
(email: string, client: unknown) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return updateMut.mutateAsync({ email, client });
},
[updateMut],
);
const remove = useCallback(
(email: string, keepTraffic = false) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return removeMut.mutateAsync({ email, keepTraffic });
},
[removeMut],
);
const bulkDelete = useCallback(
(emails: string[], keepTraffic = false) => {
if (!Array.isArray(emails) || emails.length === 0)
return Promise.resolve(null as unknown as Msg<BulkDeleteResult>);
return bulkDeleteMut.mutateAsync({ emails, keepTraffic });
},
[bulkDeleteMut],
);
const bulkCreate = useCallback(
(payloads: unknown[]) => {
if (!Array.isArray(payloads) || payloads.length === 0)
return Promise.resolve(null as unknown as Msg<BulkCreateResult>);
return bulkCreateMut.mutateAsync(payloads);
},
[bulkCreateMut],
);
const bulkAdjust = useCallback(
(emails: string[], addDays: number, addBytes: number, flow = '') => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkAdjustMut.mutateAsync({ emails, addDays, addBytes, flow });
},
[bulkAdjustMut],
);
const bulkEnable = useCallback(
(emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0)
return Promise.resolve(null as unknown as Msg<BulkSetEnableResult>);
return bulkSetEnableMut.mutateAsync({ emails, enable: true });
},
[bulkSetEnableMut],
);
const bulkDisable = useCallback(
(emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0)
return Promise.resolve(null as unknown as Msg<BulkSetEnableResult>);
return bulkSetEnableMut.mutateAsync({ emails, enable: false });
},
[bulkSetEnableMut],
);
const bulkAddToGroup = useCallback(
(emails: string[], group: string) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkAddToGroupMut.mutateAsync({ emails, group });
},
[bulkAddToGroupMut],
);
const bulkRemoveFromGroup = useCallback(
(emails: string[]) => {
if (!Array.isArray(emails) || emails.length === 0) return Promise.resolve(null);
return bulkRemoveFromGroupMut.mutateAsync({ emails });
},
[bulkRemoveFromGroupMut],
);
const attach = useCallback(
(email: string, inboundIds: number[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return attachMut.mutateAsync({ email, inboundIds });
},
[attachMut],
);
const setExternalLinks = useCallback(
(email: string, externalLinks: ExternalLinkInput[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return setExternalLinksMut.mutateAsync({ email, externalLinks });
},
[setExternalLinksMut],
);
const bulkAttach = useCallback(
(emails: string[], inboundIds: number[]) => {
if (!Array.isArray(emails) || emails.length === 0)
return Promise.resolve(null as unknown as Msg<BulkAttachResult>);
if (!Array.isArray(inboundIds) || inboundIds.length === 0)
return Promise.resolve(null as unknown as Msg<BulkAttachResult>);
return bulkAttachMut.mutateAsync({ emails, inboundIds });
},
[bulkAttachMut],
);
const detach = useCallback(
(email: string, inboundIds: number[]) => {
if (!email) return Promise.resolve(null as unknown as Msg<unknown>);
return detachMut.mutateAsync({ email, inboundIds });
},
[detachMut],
);
const bulkDetach = useCallback(
(emails: string[], inboundIds: number[]) => {
if (!Array.isArray(emails) || emails.length === 0)
return Promise.resolve(null as unknown as Msg<BulkDetachResult>);
if (!Array.isArray(inboundIds) || inboundIds.length === 0)
return Promise.resolve(null as unknown as Msg<BulkDetachResult>);
return bulkDetachMut.mutateAsync({ emails, inboundIds });
},
[bulkDetachMut],
);
const resetTraffic = useCallback(
(client: ClientRecord) => {
if (!client?.email) return Promise.resolve(null as unknown as Msg<unknown>);
return resetTrafficMut.mutateAsync(client.email);
},
[resetTrafficMut],
);
const resetAllTraffics = useCallback(
() => resetAllTrafficsMut.mutateAsync(),
[resetAllTrafficsMut],
);
const delDepleted = useCallback(() => delDepletedMut.mutateAsync(), [delDepletedMut]);
const delOrphans = useCallback(() => delOrphansMut.mutateAsync(), [delOrphansMut]);
const importClients = useCallback((data: string) => importClientsMut.mutateAsync(data), [importClientsMut]);
const importClients = useCallback(
(data: string) => importClientsMut.mutateAsync(data),
[importClientsMut],
);
// Fetch the exported clients so the page can show them in a CodeMirror viewer
// (Copy / Download), rather than triggering an immediate browser download.
const exportClients = useCallback(async (): Promise<unknown[] | null> => {
@@ -520,104 +663,113 @@ export function useClients(options: UseClientsOptions = {}) {
return Array.isArray(msg.obj) ? msg.obj : [];
}, []);
const setEnable = useCallback(async (client: ClientRecord, enable: boolean) => {
if (!client?.email) return null;
const full = await hydrate(client.email);
const base = full?.client;
if (!base) return null;
const payload: Record<string, unknown> = {
email: base.email,
subId: base.subId,
id: base.uuid,
password: base.password,
auth: base.auth,
flow: base.flow || '',
security: base.security || 'auto',
totalGB: base.totalGB || 0,
expiryTime: base.expiryTime || 0,
limitIp: base.limitIp || 0,
limitHwid: base.limitHwid || 0,
tgId: Number(base.tgId) || 0,
reset: Number(base.reset) || 0,
resetDay: Number(base.resetDay) || 0,
resetMax: Number(base.resetMax) || 0,
group: base.group || '',
comment: base.comment || '',
enable: !!enable,
};
if (base.reverse?.tag) {
payload.reverse = { tag: base.reverse.tag };
}
return update(client.email, payload);
}, [hydrate, update]);
const setEnable = useCallback(
async (client: ClientRecord, enable: boolean) => {
if (!client?.email) return null;
const full = await hydrate(client.email);
const base = full?.client;
if (!base) return null;
const payload: Record<string, unknown> = {
email: base.email,
subId: base.subId,
id: base.uuid,
password: base.password,
auth: base.auth,
flow: base.flow || '',
security: base.security || 'auto',
totalGB: base.totalGB || 0,
expiryTime: base.expiryTime || 0,
limitIp: base.limitIp || 0,
limitHwid: base.limitHwid || 0,
tgId: Number(base.tgId) || 0,
reset: Number(base.reset) || 0,
resetDay: Number(base.resetDay) || 0,
resetMax: Number(base.resetMax) || 0,
group: base.group || '',
comment: base.comment || '',
enable: !!enable,
};
if (base.reverse?.tag) {
payload.reverse = { tag: base.reverse.tag };
}
return update(client.email, payload);
},
[hydrate, update],
);
// WS-driven in-place merges. Page wires these via useWebSocket; the bridge
// covers coarse 'invalidate' and 'inbounds' events centrally.
const queryRef = useRef(query);
queryRef.current = query;
const applyTrafficEvent = useCallback((payload: unknown) => {
if (!payload || typeof payload !== 'object') return;
const p = payload as {
onlineClients?: string[];
clientTraffics?: { email: string; up: number; down: number }[];
};
if (Array.isArray(p.onlineClients)) {
queryClient.setQueryData(keys.clients.onlines(), p.onlineClients);
}
if (Array.isArray(p.clientTraffics)) {
// Xray reports a row per client whether or not it moved a byte, so most of
// this map used to be zeros. A missing entry and a zero entry render
// identically (isActiveSpeed treats both as inactive), so the zeros are
// dropped and an unchanged result returns the previous object — which lets
// React bail out of the update instead of re-rendering the table.
const next: Record<string, ClientSpeedEntry> = {};
for (const ct of p.clientTraffics) {
if (!ct || !ct.email) continue;
const up = ct.up || 0;
const down = ct.down || 0;
if (up === 0 && down === 0) continue;
next[ct.email] = {
up: up / TRAFFIC_POLL_INTERVAL_S,
down: down / TRAFFIC_POLL_INTERVAL_S,
};
const applyTrafficEvent = useCallback(
(payload: unknown) => {
if (!payload || typeof payload !== 'object') return;
const p = payload as {
onlineClients?: string[];
clientTraffics?: { email: string; up: number; down: number }[];
};
if (Array.isArray(p.onlineClients)) {
queryClient.setQueryData(keys.clients.onlines(), p.onlineClients);
}
setClientSpeed((prev) => (sameSpeedMap(prev, next) ? prev : next));
}
}, [queryClient]);
if (Array.isArray(p.clientTraffics)) {
// Xray reports a row per client whether or not it moved a byte, so most of
// this map used to be zeros. A missing entry and a zero entry render
// identically (isActiveSpeed treats both as inactive), so the zeros are
// dropped and an unchanged result returns the previous object — which lets
// React bail out of the update instead of re-rendering the table.
const next: Record<string, ClientSpeedEntry> = {};
for (const ct of p.clientTraffics) {
if (!ct || !ct.email) continue;
const up = ct.up || 0;
const down = ct.down || 0;
if (up === 0 && down === 0) continue;
next[ct.email] = {
up: up / TRAFFIC_POLL_INTERVAL_S,
down: down / TRAFFIC_POLL_INTERVAL_S,
};
}
setClientSpeed((prev) => (sameSpeedMap(prev, next) ? prev : next));
}
},
[queryClient],
);
const applyClientStatsEvent = useCallback((payload: unknown) => {
if (!payload || typeof payload !== 'object') return;
const p = payload as { clients?: ClientStatRow[] };
if (!Array.isArray(p.clients) || p.clients.length === 0) return;
const active = queryRef.current;
if (!active) return;
const byEmail = new Map<string, ClientTraffic>();
for (const row of p.clients) {
if (row && row.email) byEmail.set(row.email, row);
}
queryClient.setQueryData<ClientPageResponse>(keys.clients.list(active), (prev) => {
if (!prev) return prev;
let touched = false;
const next = prev.items.slice();
for (let i = 0; i < next.length; i++) {
const row = next[i];
const upd = byEmail.get(row?.email);
if (!upd) continue;
const merged: ClientTraffic = { ...(row.traffic || {}) };
if (typeof upd.up === 'number') merged.up = upd.up;
if (typeof upd.down === 'number') merged.down = upd.down;
if (typeof upd.total === 'number') merged.total = upd.total;
if (typeof upd.expiryTime === 'number') merged.expiryTime = upd.expiryTime;
if (typeof upd.enable === 'boolean') merged.enable = upd.enable;
if (typeof upd.lastOnline === 'number') merged.lastOnline = upd.lastOnline;
next[i] = { ...row, traffic: merged };
touched = true;
const applyClientStatsEvent = useCallback(
(payload: unknown) => {
if (!payload || typeof payload !== 'object') return;
const p = payload as { clients?: ClientStatRow[] };
if (!Array.isArray(p.clients) || p.clients.length === 0) return;
const active = queryRef.current;
if (!active) return;
const byEmail = new Map<string, ClientTraffic>();
for (const row of p.clients) {
if (row && row.email) byEmail.set(row.email, row);
}
if (!touched) return prev;
return { ...prev, items: next };
});
}, [queryClient]);
queryClient.setQueryData<ClientPageResponse>(keys.clients.list(active), (prev) => {
if (!prev) return prev;
let touched = false;
const next = prev.items.slice();
for (let i = 0; i < next.length; i++) {
const row = next[i];
const upd = byEmail.get(row?.email);
if (!upd) continue;
const merged: ClientTraffic = { ...(row.traffic || {}) };
if (typeof upd.up === 'number') merged.up = upd.up;
if (typeof upd.down === 'number') merged.down = upd.down;
if (typeof upd.total === 'number') merged.total = upd.total;
if (typeof upd.expiryTime === 'number') merged.expiryTime = upd.expiryTime;
if (typeof upd.enable === 'boolean') merged.enable = upd.enable;
if (typeof upd.lastOnline === 'number') merged.lastOnline = upd.lastOnline;
next[i] = { ...row, traffic: merged };
touched = true;
}
if (!touched) return prev;
return { ...prev, items: next };
});
},
[queryClient],
);
useEffect(() => {
queryRef.current = query;
frontend/src/hooks/useServerDraft.ts
+8 -3
View File
@@ -1,6 +1,10 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export function useServerDraft<T>(server: T | undefined, clone: (value: T) => T, equals: (left: T, right: T) => boolean) {
export function useServerDraft<T>(
server: T | undefined,
clone: (value: T) => T,
equals: (left: T, right: T) => boolean,
) {
const cloneRef = useRef(clone);
const equalsRef = useRef(equals);
cloneRef.current = clone;
@@ -17,8 +21,9 @@ export function useServerDraft<T>(server: T | undefined, clone: (value: T) => T,
if (server === undefined) return;
const currentDraft = draftRef.current;
const currentBaseline = baselineRef.current;
const isDirty = currentDraft !== undefined
&& (currentBaseline === undefined || !equalsRef.current(currentDraft, currentBaseline));
const isDirty =
currentDraft !== undefined &&
(currentBaseline === undefined || !equalsRef.current(currentDraft, currentBaseline));
setBaseline(server);
if (isDirty && !equalsRef.current(currentDraft, server)) return;
setDraft(cloneRef.current(server));
frontend/src/hooks/useXraySetting.ts
+159 -117
View File
@@ -26,7 +26,10 @@ function normalizeOutboundTestUrl(url: string) {
}
export function isUdpOutbound(outbound: unknown): boolean {
const o = outbound as { protocol?: string; streamSettings?: { network?: string } } | null | undefined;
const o = outbound as
| { protocol?: string; streamSettings?: { network?: string } }
| null
| undefined;
const p = o?.protocol;
const n = o?.streamSettings?.network;
return p === 'wireguard' || p === 'hysteria' || n === 'hysteria' || n === 'kcp' || n === 'quic';
@@ -90,7 +93,8 @@ type XrayConfigPayload = z.infer<typeof XrayConfigPayloadSchema>;
export async function fetchXrayConfig(): Promise<XrayConfigPayload> {
const msg = await HttpUtil.post('/panel/api/xray/', undefined, { silent: true });
if (!msg?.success) throw new Error(msg?.msg || 'Failed to load xray config');
if (typeof msg.obj !== 'string') throw new Error('Malformed xray config response: expected string');
if (typeof msg.obj !== 'string')
throw new Error('Malformed xray config response: expected string');
let parsed: unknown;
try {
parsed = JSON.parse(msg.obj);
@@ -107,7 +111,9 @@ export async function fetchXrayConfig(): Promise<XrayConfigPayload> {
}
async function fetchOutboundsTraffic(): Promise<OutboundTrafficRow[]> {
const msg = await HttpUtil.get('/panel/api/xray/getOutboundsTraffic', undefined, { silent: true });
const msg = await HttpUtil.get('/panel/api/xray/getOutboundsTraffic', undefined, {
silent: true,
});
if (!msg?.success) throw new Error(msg?.msg || 'Failed to fetch outbounds traffic');
const validated = parseMsg(msg, OutboundTrafficListSchema, 'xray/getOutboundsTraffic');
return Array.isArray(validated.obj) ? validated.obj : [];
@@ -137,10 +143,14 @@ export function useXraySetting(): UseXraySettingResult {
const [clientReverseTags, setClientReverseTags] = useState<string[]>([]);
const [subscriptionOutbounds, setSubscriptionOutbounds] = useState<unknown[]>([]);
const [subscriptionOutboundTags, setSubscriptionOutboundTags] = useState<string[]>([]);
const [outboundTestStates, setOutboundTestStates] = useState<Record<number, OutboundTestState>>({});
const [outboundTestStates, setOutboundTestStates] = useState<Record<number, OutboundTestState>>(
{},
);
// Subscription outbounds aren't in templateSettings.outbounds, so their test
// results are keyed by tag rather than by index.
const [subscriptionTestStates, setSubscriptionTestStates] = useState<Record<string, OutboundTestState>>({});
const [subscriptionTestStates, setSubscriptionTestStates] = useState<
Record<string, OutboundTestState>
>({});
const [testingAll, setTestingAll] = useState(false);
const syncingRef = useRef(false);
@@ -167,8 +177,9 @@ export function useXraySetting(): UseXraySettingResult {
setClientReverseTags(obj.clientReverseTags || []);
setSubscriptionOutbounds(obj.subscriptionOutbounds || []);
setSubscriptionOutboundTags(obj.subscriptionOutboundTags || []);
const isDirty = savedXraySettingRef.current !== xraySettingRef.current
|| savedOutboundTestUrlRef.current !== normalizeOutboundTestUrl(outboundTestUrlRef.current);
const isDirty =
savedXraySettingRef.current !== xraySettingRef.current ||
savedOutboundTestUrlRef.current !== normalizeOutboundTestUrl(outboundTestUrlRef.current);
if (isDirty) return;
syncingRef.current = true;
setXraySettingState(pretty);
@@ -242,8 +253,7 @@ export function useXraySetting(): UseXraySettingResult {
});
const resetTrafficMut = useMutation({
mutationFn: (tag: string) =>
HttpUtil.post('/panel/api/xray/resetOutboundsTraffic', { tag }),
mutationFn: (tag: string) => HttpUtil.post('/panel/api/xray/resetOutboundsTraffic', { tag }),
onSuccess: (msg) => {
if (msg?.success) queryClient.invalidateQueries({ queryKey: keys.xray.outboundsTraffic() });
},
@@ -262,9 +272,18 @@ export function useXraySetting(): UseXraySettingResult {
},
});
const saveAll = useCallback(async () => { await saveMut.mutateAsync(); }, [saveMut]);
const resetOutboundsTraffic = useCallback(async (tag: string) => { await resetTrafficMut.mutateAsync(tag); }, [resetTrafficMut]);
const resetToDefault = useCallback(async () => { await resetDefaultMut.mutateAsync(); }, [resetDefaultMut]);
const saveAll = useCallback(async () => {
await saveMut.mutateAsync();
}, [saveMut]);
const resetOutboundsTraffic = useCallback(
async (tag: string) => {
await resetTrafficMut.mutateAsync(tag);
},
[resetTrafficMut],
);
const resetToDefault = useCallback(async () => {
await resetDefaultMut.mutateAsync();
}, [resetDefaultMut]);
const spinning = saveMut.isPending || resetDefaultMut.isPending;
@@ -285,7 +304,9 @@ export function useXraySetting(): UseXraySettingResult {
const msg = parseMsg(raw, OutboundTestResultListSchema, 'xray/testOutbounds');
if (!msg?.success || !Array.isArray(msg.obj)) return failAll(msg?.msg || 'Unknown error');
const list = msg.obj;
return outbounds.map((_ob, i) => list[i] ?? { success: false, error: 'Missing result', mode: effMode });
return outbounds.map(
(_ob, i) => list[i] ?? { success: false, error: 'Missing result', mode: effMode },
);
} catch (e) {
return failAll(String(e));
}
@@ -325,113 +346,134 @@ export function useXraySetting(): UseXraySettingResult {
[postOutboundTestBatch],
);
const testAllOutbounds = useCallback(async (mode = 'tcp') => {
// Template outbounds key their results by index (outboundTestStates);
// subscription outbounds aren't in the template, so they key by tag
// (subscriptionTestStates). Both go through the same probe endpoint.
const templateList = templateSettingsRef.current?.outbounds || [];
const subList = (subscriptionOutboundsRef.current || []) as Array<{ tag?: string; protocol?: string }>;
if ((templateList.length === 0 && subList.length === 0) || testingAll) return;
setTestingAll(true);
try {
type TcpEntry =
| { kind: 'tpl'; index: number; outbound: unknown }
| { kind: 'sub'; tag: string; outbound: unknown };
const tcpQueue: TcpEntry[] = [];
// HTTP batches stay homogeneous (all template or all subscription) so a
// tag shared between a template and a subscription outbound can't collide
// inside one batch, and each batch's results route to one state map.
const probeMode = mode === 'real' ? 'real' : 'http';
const httpTplQueue: { index: number; outbound: unknown }[] = [];
const httpSubQueue: { tag: string; outbound: unknown }[] = [];
const enqueue = (ob: { tag?: string; protocol?: string }, kind: 'tpl' | 'sub', index: number, tag: string) => {
const proto = ob?.protocol;
if (proto === 'blackhole' || proto === 'loopback' || ob?.tag === 'blocked') return;
// freedom ("direct") and dns aren't proxies — skip them in every mode.
if (proto === 'freedom' || proto === 'dns') return;
if (kind === 'sub' && !tag) return;
const toHttp = mode !== 'tcp' || isUdpOutbound(ob);
if (kind === 'tpl') {
if (toHttp) httpTplQueue.push({ index, outbound: ob });
else tcpQueue.push({ kind: 'tpl', index, outbound: ob });
} else if (toHttp) {
httpSubQueue.push({ tag, outbound: ob });
} else {
tcpQueue.push({ kind: 'sub', tag, outbound: ob });
}
};
templateList.forEach((ob, i) => enqueue(ob, 'tpl', i, ''));
subList.forEach((ob) => enqueue(ob, 'sub', -1, typeof ob?.tag === 'string' ? ob.tag : ''));
// TCP probes are dial-only and cheap server-side; per-item requests
// keep results landing one by one, each routed to its own state map.
const runTcpLane = async () => {
const queue = [...tcpQueue];
const worker = async () => {
while (queue.length > 0) {
const item = queue.shift();
if (!item) break;
if (item.kind === 'sub') await testSubscriptionOutbound(item.tag, item.outbound, mode);
else await testOutbound(item.index, item.outbound, mode);
const testAllOutbounds = useCallback(
async (mode = 'tcp') => {
// Template outbounds key their results by index (outboundTestStates);
// subscription outbounds aren't in the template, so they key by tag
// (subscriptionTestStates). Both go through the same probe endpoint.
const templateList = templateSettingsRef.current?.outbounds || [];
const subList = (subscriptionOutboundsRef.current || []) as Array<{
tag?: string;
protocol?: string;
}>;
if ((templateList.length === 0 && subList.length === 0) || testingAll) return;
setTestingAll(true);
try {
type TcpEntry =
| { kind: 'tpl'; index: number; outbound: unknown }
| { kind: 'sub'; tag: string; outbound: unknown };
const tcpQueue: TcpEntry[] = [];
// HTTP batches stay homogeneous (all template or all subscription) so a
// tag shared between a template and a subscription outbound can't collide
// inside one batch, and each batch's results route to one state map.
const probeMode = mode === 'real' ? 'real' : 'http';
const httpTplQueue: { index: number; outbound: unknown }[] = [];
const httpSubQueue: { tag: string; outbound: unknown }[] = [];
const enqueue = (
ob: { tag?: string; protocol?: string },
kind: 'tpl' | 'sub',
index: number,
tag: string,
) => {
const proto = ob?.protocol;
if (proto === 'blackhole' || proto === 'loopback' || ob?.tag === 'blocked') return;
// freedom ("direct") and dns aren't proxies — skip them in every mode.
if (proto === 'freedom' || proto === 'dns') return;
if (kind === 'sub' && !tag) return;
const toHttp = mode !== 'tcp' || isUdpOutbound(ob);
if (kind === 'tpl') {
if (toHttp) httpTplQueue.push({ index, outbound: ob });
else tcpQueue.push({ kind: 'tpl', index, outbound: ob });
} else if (toHttp) {
httpSubQueue.push({ tag, outbound: ob });
} else {
tcpQueue.push({ kind: 'sub', tag, outbound: ob });
}
};
await Promise.all(Array.from({ length: Math.min(8, queue.length) }, () => worker()));
};
// HTTP probes go out as chunked batches — one temp xray spawn per
// chunk instead of one per outbound, with results landing per chunk.
const runTplHttpLane = async () => {
for (let at = 0; at < httpTplQueue.length; at += HTTP_BATCH_CHUNK) {
const chunk = httpTplQueue.slice(at, at + HTTP_BATCH_CHUNK);
setOutboundTestStates((prev) => {
const next = { ...prev };
for (const item of chunk) next[item.index] = { testing: true, result: null, mode: probeMode };
return next;
});
const results = await postOutboundTestBatch(chunk.map((c) => c.outbound), probeMode);
setOutboundTestStates((prev) => {
const next = { ...prev };
chunk.forEach((item, i) => {
next[item.index] = { testing: false, result: results[i] };
});
return next;
});
}
};
const runSubHttpLane = async () => {
for (let at = 0; at < httpSubQueue.length; at += HTTP_BATCH_CHUNK) {
const chunk = httpSubQueue.slice(at, at + HTTP_BATCH_CHUNK);
setSubscriptionTestStates((prev) => {
const next = { ...prev };
for (const item of chunk) next[item.tag] = { testing: true, result: null, mode: probeMode };
return next;
});
const results = await postOutboundTestBatch(chunk.map((c) => c.outbound), probeMode);
setSubscriptionTestStates((prev) => {
const next = { ...prev };
chunk.forEach((item, i) => {
next[item.tag] = { testing: false, result: results[i] };
});
return next;
});
}
};
// HTTP batches must not overlap: the backend serialises them with a
// non-blocking lock and rejects a second concurrent batch ("Another
// outbound test is already running"). Run the template and subscription
// HTTP lanes one after the other; TCP probes don't take that lock, so
// they still run alongside.
const runHttpLane = async () => {
await runTplHttpLane();
await runSubHttpLane();
};
await Promise.all([runTcpLane(), runHttpLane()]);
} finally {
setTestingAll(false);
}
}, [testingAll, testOutbound, testSubscriptionOutbound, postOutboundTestBatch]);
templateList.forEach((ob, i) => enqueue(ob, 'tpl', i, ''));
subList.forEach((ob) => enqueue(ob, 'sub', -1, typeof ob?.tag === 'string' ? ob.tag : ''));
const saveDisabled = savedXraySetting === xraySetting
&& savedOutboundTestUrl === normalizeOutboundTestUrl(outboundTestUrl);
// TCP probes are dial-only and cheap server-side; per-item requests
// keep results landing one by one, each routed to its own state map.
const runTcpLane = async () => {
const queue = [...tcpQueue];
const worker = async () => {
while (queue.length > 0) {
const item = queue.shift();
if (!item) break;
if (item.kind === 'sub')
await testSubscriptionOutbound(item.tag, item.outbound, mode);
else await testOutbound(item.index, item.outbound, mode);
}
};
await Promise.all(Array.from({ length: Math.min(8, queue.length) }, () => worker()));
};
// HTTP probes go out as chunked batches — one temp xray spawn per
// chunk instead of one per outbound, with results landing per chunk.
const runTplHttpLane = async () => {
for (let at = 0; at < httpTplQueue.length; at += HTTP_BATCH_CHUNK) {
const chunk = httpTplQueue.slice(at, at + HTTP_BATCH_CHUNK);
setOutboundTestStates((prev) => {
const next = { ...prev };
for (const item of chunk)
next[item.index] = { testing: true, result: null, mode: probeMode };
return next;
});
const results = await postOutboundTestBatch(
chunk.map((c) => c.outbound),
probeMode,
);
setOutboundTestStates((prev) => {
const next = { ...prev };
chunk.forEach((item, i) => {
next[item.index] = { testing: false, result: results[i] };
});
return next;
});
}
};
const runSubHttpLane = async () => {
for (let at = 0; at < httpSubQueue.length; at += HTTP_BATCH_CHUNK) {
const chunk = httpSubQueue.slice(at, at + HTTP_BATCH_CHUNK);
setSubscriptionTestStates((prev) => {
const next = { ...prev };
for (const item of chunk)
next[item.tag] = { testing: true, result: null, mode: probeMode };
return next;
});
const results = await postOutboundTestBatch(
chunk.map((c) => c.outbound),
probeMode,
);
setSubscriptionTestStates((prev) => {
const next = { ...prev };
chunk.forEach((item, i) => {
next[item.tag] = { testing: false, result: results[i] };
});
return next;
});
}
};
// HTTP batches must not overlap: the backend serialises them with a
// non-blocking lock and rejects a second concurrent batch ("Another
// outbound test is already running"). Run the template and subscription
// HTTP lanes one after the other; TCP probes don't take that lock, so
// they still run alongside.
const runHttpLane = async () => {
await runTplHttpLane();
await runSubHttpLane();
};
await Promise.all([runTcpLane(), runHttpLane()]);
} finally {
setTestingAll(false);
}
},
[testingAll, testOutbound, testSubscriptionOutbound, postOutboundTestBatch],
);
const saveDisabled =
savedXraySetting === xraySetting &&
savedOutboundTestUrl === normalizeOutboundTestUrl(outboundTestUrl);
const outboundsTraffic = useMemo(() => trafficQuery.data ?? [], [trafficQuery.data]);