mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-08 21:56:08 +00:00
docs: vendor the documentation site into the monorepo
Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to docs.sanaei.dev) into docs/ so the panel and its documentation share a single source of truth, the way sing-box keeps its docs in-tree. The old repo becomes redundant and can be retired. - Import the full site under docs/ (app, components, content, lib, public, scripts, config). The self-contained pnpm project sits alongside the existing engineering notes with no filename collisions. - Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx). - Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to docs/** and run with working-directory: docs, since GitHub only runs workflows from the repo-root .github/. deploy-static.yml's GitHub Pages publish (CNAME docs.sanaei.dev) carries over unchanged. Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to this repository's Pages (or set the Vercel project's root directory to docs), confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.
This commit is contained in:
MHSanaei
@@ -0,0 +1,49 @@
|
||||
import {
|
||||
Boxes,
|
||||
Network,
|
||||
Send,
|
||||
ShieldCheck,
|
||||
TerminalSquare,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
|
||||
// Icons map by position to the localized feature items in lib/site-i18n.ts
|
||||
// (Every major protocol, REALITY, Clients, Multi-node, Telegram, Self-hosted).
|
||||
const ICONS: LucideIcon[] = [Boxes, ShieldCheck, Users, Network, Send, TerminalSquare];
|
||||
|
||||
export function Features({
|
||||
heading,
|
||||
subtitle,
|
||||
items,
|
||||
}: {
|
||||
heading: string;
|
||||
subtitle: string;
|
||||
items: { title: string; description: string }[];
|
||||
}) {
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-6xl px-4 py-16 sm:py-24">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{heading}</h2>
|
||||
<p className="mt-3 text-fd-muted-foreground">{subtitle}</p>
|
||||
</div>
|
||||
<div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map(({ title, description }, i) => {
|
||||
const Icon = ICONS[i] ?? Boxes;
|
||||
return (
|
||||
<div
|
||||
key={title}
|
||||
className="rounded-2xl border bg-fd-card p-6 transition-colors hover:border-fd-primary/40"
|
||||
>
|
||||
<div className="inline-flex size-11 items-center justify-center rounded-xl bg-brand/10 text-brand">
|
||||
<Icon className="size-6" aria-hidden />
|
||||
</div>
|
||||
<h3 className="mt-4 font-semibold">{title}</h3>
|
||||
<p className="mt-2 text-sm text-fd-muted-foreground">{description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GitFork, Star, Tag } from 'lucide-react';
|
||||
import { fetchGitHubStats, formatCount, type GitHubStats } from '@/lib/github-stats';
|
||||
|
||||
/**
|
||||
* Stars / forks / latest-release row. Renders the build-time numbers
|
||||
* immediately (no layout shift, works without JS), then swaps in live ones
|
||||
* from the GitHub API after hydration.
|
||||
*/
|
||||
export function GitHubStatsRow({
|
||||
initial,
|
||||
labels,
|
||||
}: {
|
||||
initial: GitHubStats;
|
||||
labels: { stars: string; forks: string; latest: string };
|
||||
}) {
|
||||
const [stats, setStats] = useState(initial);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
// Plain fetch, no custom headers — keeps the request preflight-free.
|
||||
void fetchGitHubStats().then((live) => {
|
||||
if (cancelled || !live) return;
|
||||
setStats((prev) => ({ ...live, latestVersion: live.latestVersion || prev.latestVersion }));
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<dl className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm">
|
||||
<Stat icon={<Star className="size-4" aria-hidden />} label={labels.stars}>
|
||||
{formatCount(stats.stars)}
|
||||
</Stat>
|
||||
<Stat icon={<GitFork className="size-4" aria-hidden />} label={labels.forks}>
|
||||
{formatCount(stats.forks)}
|
||||
</Stat>
|
||||
<Stat icon={<Tag className="size-4" aria-hidden />} label={labels.latest}>
|
||||
{stats.latestVersion}
|
||||
</Stat>
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({
|
||||
icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="text-brand">{icon}</span>
|
||||
<dt className="sr-only">{label}</dt>
|
||||
<dd>
|
||||
<span className="font-semibold">{children}</span>{' '}
|
||||
<span className="text-fd-muted-foreground">{label}</span>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
export function InstallCommand({
|
||||
command,
|
||||
className,
|
||||
copyLabel = 'Copy install command',
|
||||
copiedLabel = 'Copied',
|
||||
}: {
|
||||
command: string;
|
||||
className?: string;
|
||||
copyLabel?: string;
|
||||
copiedLabel?: string;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Clipboard unavailable (insecure context) — silently ignore.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-xl border bg-fd-card py-2.5 pe-2 ps-4 text-sm shadow-sm',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="select-none font-mono text-fd-muted-foreground">$</span>
|
||||
{/* Commands are always LTR, even on RTL pages. */}
|
||||
<code dir="ltr" className="flex-1 overflow-x-auto whitespace-nowrap text-start font-mono">
|
||||
{command}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
aria-label={copied ? copiedLabel : copyLabel}
|
||||
className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-2 focus-visible:outline-fd-ring"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="size-4 text-brand" aria-hidden />
|
||||
) : (
|
||||
<Copy className="size-4" aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import Link from 'next/link';
|
||||
import { Languages } from 'lucide-react';
|
||||
import { i18n, locales } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
// Home-navbar language switcher.
|
||||
//
|
||||
// fumadocs' built-in popover switcher (`LanguageSelect`) has its item clicks
|
||||
// swallowed when it is nested inside HomeLayout's Radix `NavigationMenu` — the
|
||||
// dropdown opens but selecting a locale never fires `onChange`/`router.push`.
|
||||
// The docs sidebar isn't wrapped in a NavigationMenu, so the built-in one works
|
||||
// there and is kept. Here we use a native `<details>` toggle + real `<Link>`
|
||||
// anchors, which navigate reliably inside the navbar (like the other nav links).
|
||||
//
|
||||
// The home navbar only renders on the landing page, so the targets are simply
|
||||
// each locale's home (`/`, `/fa`, `/ru`, `/zh`).
|
||||
export function HomeLanguageSwitcher({ current }: { current: string }) {
|
||||
return (
|
||||
<details className="group relative [&>summary::-webkit-details-marker]:hidden">
|
||||
<summary
|
||||
aria-label="Choose a language"
|
||||
className="flex cursor-pointer list-none items-center rounded-lg p-1.5 text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground group-open:bg-fd-accent"
|
||||
>
|
||||
<Languages className="size-5" />
|
||||
</summary>
|
||||
<div className="absolute end-0 z-50 mt-1.5 flex min-w-40 flex-col gap-0.5 rounded-lg border bg-fd-popover p-1 text-fd-popover-foreground shadow-lg">
|
||||
<p className="p-2 text-xs font-medium text-fd-muted-foreground">Choose a language</p>
|
||||
{locales.map(({ locale, name }) => (
|
||||
<Link
|
||||
key={locale}
|
||||
href={locale === i18n.defaultLanguage ? '/' : `/${locale}`}
|
||||
className={cn(
|
||||
'rounded-md px-2 py-1.5 text-start text-sm transition-colors',
|
||||
locale === current
|
||||
? 'bg-fd-primary/10 text-fd-primary'
|
||||
: 'text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Brand icons that are not part of lucide-react.
|
||||
|
||||
export function GitHubIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
||||
<path d="M12 .5C5.73.5.5 5.74.5 12.02c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1.16-.02-2.1-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.03 11.03 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.8-.01 3.18 0 .31.21.68.8.56A10.53 10.53 0 0 0 23.5 12.02C23.5 5.74 18.27.5 12 .5Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TelegramIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden>
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
// Official 3x-ui logo (media/3x-ui-{light,dark}.png from the upstream repo).
|
||||
// Theme-aware via Tailwind's `dark:` variant. Pass a height class (e.g. `h-6`);
|
||||
// width scales automatically (the artwork is 2:1).
|
||||
export function Logo({ className }: { className?: string }) {
|
||||
return (
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/logo-light.png" alt="3x-ui" className={cn('w-auto dark:hidden', className)} />
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/logo-dark.png" alt="3x-ui" className={cn('hidden w-auto dark:block', className)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import defaultMdxComponents from 'fumadocs-ui/mdx';
|
||||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { Mermaid } from '@/components/mdx/mermaid';
|
||||
import { RealityConfigGenerator } from '@/components/tools/reality-config-generator';
|
||||
import { ShareLinkInspector } from '@/components/tools/share-link-inspector';
|
||||
import { InstallCommandBuilder } from '@/components/tools/install-command-builder';
|
||||
import { ReverseProxyGenerator } from '@/components/tools/reverse-proxy-generator';
|
||||
import { ProtocolWizard } from '@/components/tools/protocol-wizard';
|
||||
import { FirewallRulesGenerator } from '@/components/tools/firewall-rules-generator';
|
||||
import { OutboundGenerator } from '@/components/tools/outbound-generator';
|
||||
import { RoutingBuilder } from '@/components/tools/routing-builder';
|
||||
import { SubscriptionBuilder } from '@/components/tools/subscription-builder';
|
||||
import { TelegramSetupHelper } from '@/components/tools/telegram-setup-helper';
|
||||
import { ApiRequestBuilder } from '@/components/tools/api-request-builder';
|
||||
import { OpenAPIPage } from '@/components/openapi-page';
|
||||
import type { MDXComponents } from 'mdx/types';
|
||||
|
||||
export function getMDXComponents(components?: MDXComponents) {
|
||||
return {
|
||||
...defaultMdxComponents,
|
||||
Tab,
|
||||
Tabs,
|
||||
Step,
|
||||
Steps,
|
||||
Mermaid,
|
||||
RealityConfigGenerator,
|
||||
ShareLinkInspector,
|
||||
InstallCommandBuilder,
|
||||
ReverseProxyGenerator,
|
||||
ProtocolWizard,
|
||||
FirewallRulesGenerator,
|
||||
OutboundGenerator,
|
||||
RoutingBuilder,
|
||||
SubscriptionBuilder,
|
||||
TelegramSetupHelper,
|
||||
ApiRequestBuilder,
|
||||
OpenAPIPage,
|
||||
...components,
|
||||
} satisfies MDXComponents;
|
||||
}
|
||||
|
||||
export const useMDXComponents = getMDXComponents;
|
||||
|
||||
declare global {
|
||||
type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useId, useState } from 'react';
|
||||
import { useTheme } from 'next-themes';
|
||||
|
||||
// Client-side, theme-aware Mermaid renderer. Mermaid is imported dynamically so
|
||||
// it stays out of the initial bundle and only loads on pages that use a diagram.
|
||||
export function Mermaid({ chart }: { chart: string }) {
|
||||
const rawId = useId();
|
||||
const id = `mmd-${rawId.replace(/[^a-zA-Z0-9]/g, '')}`;
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [svg, setSvg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
void (async () => {
|
||||
const mermaid = (await import('mermaid')).default;
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
securityLevel: 'strict',
|
||||
theme: resolvedTheme === 'dark' ? 'dark' : 'default',
|
||||
fontFamily: 'inherit',
|
||||
});
|
||||
try {
|
||||
const { svg } = await mermaid.render(id, chart.trim());
|
||||
if (active) setSvg(svg);
|
||||
} catch {
|
||||
if (active) setSvg('');
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [chart, resolvedTheme, id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="my-6 flex justify-center overflow-x-auto rounded-xl border bg-fd-card p-4 [&_svg]:max-w-full"
|
||||
role="img"
|
||||
aria-label="Architecture diagram"
|
||||
dangerouslySetInnerHTML={{ __html: svg }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { createOpenAPIPage } from 'fumadocs-openapi/ui';
|
||||
|
||||
// The component used by the generated API reference MDX pages.
|
||||
export const OpenAPIPage = createOpenAPIPage();
|
||||
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import { create } from '@orama/orama';
|
||||
import { useDocsSearch } from 'fumadocs-core/search/client';
|
||||
import { oramaStaticClient } from 'fumadocs-core/search/client/orama-static';
|
||||
import {
|
||||
SearchDialog,
|
||||
SearchDialogClose,
|
||||
SearchDialogContent,
|
||||
SearchDialogHeader,
|
||||
SearchDialogIcon,
|
||||
SearchDialogInput,
|
||||
SearchDialogList,
|
||||
SearchDialogOverlay,
|
||||
} from 'fumadocs-ui/components/dialog/search';
|
||||
import { useI18n } from 'fumadocs-ui/contexts/i18n';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
interface SharedProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
// The static search index is keyed by locale code (en/fa/ru/zh). Fumadocs'
|
||||
// default static dialog feeds those codes to Orama as a tokenizer language, but
|
||||
// Orama only accepts full names ("english") and throws on "en" — which silently
|
||||
// breaks search entirely. All docs content is English (other locales fall back
|
||||
// to it), so re-create the dialog — the documented escape hatch for custom Orama
|
||||
// setups — with an initOrama that always builds an English index.
|
||||
export default function SearchDialogClient(props: SharedProps) {
|
||||
const { locale } = useI18n();
|
||||
const client = useMemo(
|
||||
() =>
|
||||
oramaStaticClient({
|
||||
from: '/api/search',
|
||||
locale,
|
||||
initOrama: () => create({ schema: { _: 'string' }, language: 'english' }),
|
||||
}),
|
||||
[locale],
|
||||
);
|
||||
const { search, setSearch, query } = useDocsSearch({ client });
|
||||
|
||||
return (
|
||||
<SearchDialog search={search} onSearchChange={setSearch} isLoading={query.isLoading} {...props}>
|
||||
<SearchDialogOverlay />
|
||||
<SearchDialogContent>
|
||||
<SearchDialogHeader>
|
||||
<SearchDialogIcon />
|
||||
<SearchDialogInput />
|
||||
<SearchDialogClose />
|
||||
</SearchDialogHeader>
|
||||
<SearchDialogList items={query.data !== 'empty' ? query.data : null} />
|
||||
</SearchDialogContent>
|
||||
</SearchDialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import { useId, useState } from 'react';
|
||||
import { buildCurl, buildFetchSnippet, type ApiRequestInput, type HttpMethod } from '@/lib/xray/api-client';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
const METHODS: readonly HttpMethod[] = ['GET', 'POST', 'PUT', 'DELETE'];
|
||||
|
||||
export function ApiRequestBuilder() {
|
||||
const [baseUrl, setBaseUrl] = useState('https://panel.example.com:2053');
|
||||
const [token, setToken] = useState('');
|
||||
const [path, setPath] = useState('/panel/api/inbounds/list');
|
||||
const [method, setMethod] = useState<HttpMethod>('GET');
|
||||
const [body, setBody] = useState('');
|
||||
const bodyId = useId();
|
||||
|
||||
const showBody = method === 'POST' || method === 'PUT';
|
||||
const input: ApiRequestInput = { baseUrl, token: token || '<token>', path, method, body };
|
||||
|
||||
function reset() {
|
||||
setBaseUrl('https://panel.example.com:2053');
|
||||
setToken('');
|
||||
setPath('/panel/api/inbounds/list');
|
||||
setMethod('GET');
|
||||
setBody('');
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="API request builder"
|
||||
description="Build an authenticated cURL command or fetch() snippet for any 3x-ui panel API endpoint under /panel/api/*."
|
||||
onReset={reset}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TextField label="Panel base URL" value={baseUrl} onChange={setBaseUrl} />
|
||||
<TextField
|
||||
label="API token (Bearer)"
|
||||
value={token}
|
||||
onChange={setToken}
|
||||
placeholder="Settings → Security → API Token"
|
||||
/>
|
||||
<TextField label="Endpoint path" value={path} onChange={setPath} />
|
||||
<SelectField
|
||||
label="Method"
|
||||
value={method}
|
||||
onChange={(v) => setMethod(v as HttpMethod)}
|
||||
options={METHODS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showBody ? (
|
||||
<div className="mt-4 flex flex-col gap-1.5">
|
||||
<label htmlFor={bodyId} className="text-sm font-medium">
|
||||
Request body (JSON)
|
||||
</label>
|
||||
<textarea
|
||||
id={bodyId}
|
||||
dir="ltr"
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
rows={4}
|
||||
placeholder='{"id": 1}'
|
||||
className="rounded-lg border bg-fd-background px-3 py-2 font-mono text-sm outline-none transition-colors focus-visible:border-fd-primary focus-visible:ring-2 focus-visible:ring-fd-ring/30"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="cURL" value={buildCurl(input)} />
|
||||
<OutputBlock label="fetch()" value={buildFetchSnippet(input)} />
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildUfwCommands,
|
||||
buildNftablesRuleset,
|
||||
type FirewallOptions,
|
||||
type PortProtocol,
|
||||
type PortRule,
|
||||
} from '@/lib/xray/firewall';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { CheckboxField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
interface Row {
|
||||
label: string;
|
||||
port: string;
|
||||
protocol: PortProtocol;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
const DEFAULT_ROWS: Row[] = [
|
||||
{ label: 'panel', port: '2053', protocol: 'tcp', enabled: true },
|
||||
{ label: 'subscription', port: '2096', protocol: 'tcp', enabled: false },
|
||||
{ label: 'inbound (HTTPS)', port: '443', protocol: 'tcp', enabled: true },
|
||||
{ label: 'inbound (UDP)', port: '443', protocol: 'udp', enabled: false },
|
||||
];
|
||||
|
||||
export function FirewallRulesGenerator() {
|
||||
const [allowSsh, setAllowSsh] = useState(true);
|
||||
const [sshPort] = useState('22');
|
||||
const [rows, setRows] = useState<Row[]>(DEFAULT_ROWS);
|
||||
|
||||
function toggle(index: number, enabled: boolean) {
|
||||
setRows((prev) => prev.map((r, i) => (i === index ? { ...r, enabled } : r)));
|
||||
}
|
||||
|
||||
const ports: PortRule[] = rows
|
||||
.filter((r) => r.enabled && Number(r.port) > 0)
|
||||
.map((r) => ({ port: Number(r.port), protocol: r.protocol, label: r.label }));
|
||||
|
||||
const options: FirewallOptions = { ports, allowSsh, sshPort: Number(sshPort) || 22 };
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Firewall rules generator"
|
||||
description="Pick the ports to open and copy ready-made ufw and nftables rules."
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<CheckboxField
|
||||
label={`Allow SSH (port ${sshPort})`}
|
||||
checked={allowSsh}
|
||||
onChange={setAllowSsh}
|
||||
/>
|
||||
{rows.map((row, i) => (
|
||||
<CheckboxField
|
||||
key={`${row.label}-${row.protocol}`}
|
||||
label={`${row.label} — ${row.port}/${row.protocol}`}
|
||||
checked={row.enabled}
|
||||
onChange={(c) => toggle(i, c)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="ufw" value={buildUfwCommands(options)} />
|
||||
<OutputBlock label="nftables (/etc/nftables.conf)" value={buildNftablesRuleset(options)} />
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildScriptCommand,
|
||||
buildDockerRun,
|
||||
buildDockerCompose,
|
||||
type InstallMethod,
|
||||
type InstallOptions,
|
||||
} from '@/lib/xray/install';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField, CheckboxField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
export function InstallCommandBuilder() {
|
||||
const [method, setMethod] = useState<InstallMethod>('script');
|
||||
const [version, setVersion] = useState('');
|
||||
const [enableFail2ban, setEnableFail2ban] = useState(true);
|
||||
const [panelPort, setPanelPort] = useState('');
|
||||
const [webBasePath, setWebBasePath] = useState('');
|
||||
|
||||
const options: InstallOptions = {
|
||||
method,
|
||||
version,
|
||||
enableFail2ban,
|
||||
panelPort,
|
||||
webBasePath,
|
||||
};
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Install command builder"
|
||||
description="Build the exact install command for your setup. It is assembled in your browser."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Method"
|
||||
value={method}
|
||||
onChange={(v) => setMethod(v as InstallMethod)}
|
||||
options={['script', 'docker']}
|
||||
/>
|
||||
<TextField
|
||||
label="Version"
|
||||
value={version}
|
||||
onChange={setVersion}
|
||||
placeholder="latest"
|
||||
hint="blank = latest stable · a tag like v3.4.0 · or dev-latest for the rolling dev build"
|
||||
/>
|
||||
{method === 'docker' ? (
|
||||
<>
|
||||
<TextField
|
||||
label="Panel port"
|
||||
value={panelPort}
|
||||
onChange={setPanelPort}
|
||||
placeholder="2053"
|
||||
/>
|
||||
<TextField
|
||||
label="Web base path"
|
||||
value={webBasePath}
|
||||
onChange={setWebBasePath}
|
||||
placeholder="/panel"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<CheckboxField
|
||||
label="Enable Fail2ban"
|
||||
checked={enableFail2ban}
|
||||
onChange={setEnableFail2ban}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
{method === 'script' ? (
|
||||
<OutputBlock label="Run on your server" value={buildScriptCommand(options)} />
|
||||
) : (
|
||||
<>
|
||||
<OutputBlock label="docker run" value={buildDockerRun(options)} />
|
||||
<OutputBlock label="docker-compose.yml" value={buildDockerCompose(options)} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildOutboundJson,
|
||||
type OutboundInput,
|
||||
type OutboundKind,
|
||||
type Network,
|
||||
type Security,
|
||||
type ProxyServerInput,
|
||||
type StreamInput,
|
||||
type WireguardInput,
|
||||
} from '@/lib/xray/outbounds';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
const KINDS: readonly OutboundKind[] = [
|
||||
'freedom',
|
||||
'blackhole',
|
||||
'vless',
|
||||
'vmess',
|
||||
'trojan',
|
||||
'shadowsocks',
|
||||
'socks',
|
||||
'http',
|
||||
'wireguard',
|
||||
'warp',
|
||||
];
|
||||
const NETWORKS: readonly Network[] = ['tcp', 'kcp', 'ws', 'grpc', 'httpupgrade', 'xhttp'];
|
||||
const SECURITIES: readonly Security[] = ['none', 'tls', 'reality'];
|
||||
const FINGERPRINTS = ['chrome', 'firefox', 'safari', 'ios', 'android', 'edge', 'random'];
|
||||
const DOMAIN_STRATEGIES = ['AsIs', 'UseIP', 'UseIPv4', 'UseIPv6', 'ForceIP'];
|
||||
|
||||
const PROXY_KINDS = new Set<OutboundKind>([
|
||||
'vless',
|
||||
'vmess',
|
||||
'trojan',
|
||||
'shadowsocks',
|
||||
'socks',
|
||||
'http',
|
||||
]);
|
||||
const STREAM_KINDS = new Set<OutboundKind>(['vless', 'vmess', 'trojan', 'shadowsocks']);
|
||||
const WG_KINDS = new Set<OutboundKind>(['wireguard', 'warp']);
|
||||
|
||||
export function OutboundGenerator() {
|
||||
const [kind, setKind] = useState<OutboundKind>('vless');
|
||||
const [tag, setTag] = useState('proxy');
|
||||
|
||||
// proxy server
|
||||
const [address, setAddress] = useState('example.com');
|
||||
const [port, setPort] = useState('443');
|
||||
const [id, setId] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [method, setMethod] = useState('2022-blake3-aes-128-gcm');
|
||||
const [flow, setFlow] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
|
||||
// stream
|
||||
const [network, setNetwork] = useState<Network>('tcp');
|
||||
const [security, setSecurity] = useState<Security>('reality');
|
||||
const [host, setHost] = useState('');
|
||||
const [path, setPath] = useState('/');
|
||||
const [serviceName, setServiceName] = useState('');
|
||||
const [sni, setSni] = useState('www.microsoft.com');
|
||||
const [fingerprint, setFingerprint] = useState('chrome');
|
||||
const [publicKey, setPublicKey] = useState('');
|
||||
const [shortId, setShortId] = useState('');
|
||||
|
||||
// freedom
|
||||
const [domainStrategy, setDomainStrategy] = useState('AsIs');
|
||||
|
||||
// wireguard
|
||||
const [wgSecretKey, setWgSecretKey] = useState('');
|
||||
const [wgAddress, setWgAddress] = useState('172.16.0.2/32');
|
||||
const [wgPublicKey, setWgPublicKey] = useState('');
|
||||
const [wgEndpoint, setWgEndpoint] = useState('');
|
||||
|
||||
const isProxy = PROXY_KINDS.has(kind);
|
||||
const hasStream = STREAM_KINDS.has(kind);
|
||||
const isWg = WG_KINDS.has(kind);
|
||||
const hasPath = network === 'ws' || network === 'httpupgrade' || network === 'xhttp';
|
||||
|
||||
const server: ProxyServerInput = {
|
||||
address,
|
||||
port: Number(port),
|
||||
id,
|
||||
password,
|
||||
method,
|
||||
flow,
|
||||
username,
|
||||
};
|
||||
|
||||
const stream: StreamInput = {
|
||||
network,
|
||||
security,
|
||||
host,
|
||||
path,
|
||||
serviceName,
|
||||
sni,
|
||||
fingerprint,
|
||||
publicKey,
|
||||
shortId,
|
||||
};
|
||||
|
||||
const wireguard: WireguardInput = {
|
||||
secretKey: wgSecretKey,
|
||||
address: wgAddress
|
||||
.split(',')
|
||||
.map((a) => a.trim())
|
||||
.filter(Boolean),
|
||||
publicKey: wgPublicKey,
|
||||
endpoint: wgEndpoint,
|
||||
};
|
||||
|
||||
const input: OutboundInput = {
|
||||
kind,
|
||||
tag,
|
||||
server: isProxy ? server : undefined,
|
||||
wireguard: isWg ? wireguard : undefined,
|
||||
stream: hasStream ? stream : undefined,
|
||||
domainStrategy: kind === 'freedom' ? domainStrategy : undefined,
|
||||
};
|
||||
|
||||
function reset() {
|
||||
setKind('vless');
|
||||
setTag('proxy');
|
||||
setAddress('example.com');
|
||||
setPort('443');
|
||||
setId('');
|
||||
setPassword('');
|
||||
setMethod('2022-blake3-aes-128-gcm');
|
||||
setFlow('');
|
||||
setUsername('');
|
||||
setNetwork('tcp');
|
||||
setSecurity('reality');
|
||||
setHost('');
|
||||
setPath('/');
|
||||
setServiceName('');
|
||||
setSni('www.microsoft.com');
|
||||
setFingerprint('chrome');
|
||||
setPublicKey('');
|
||||
setShortId('');
|
||||
setDomainStrategy('AsIs');
|
||||
setWgSecretKey('');
|
||||
setWgAddress('172.16.0.2/32');
|
||||
setWgPublicKey('');
|
||||
setWgEndpoint('');
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Outbound config generator"
|
||||
description="Build an Xray outbound object — freedom, blackhole, a proxy protocol, WireGuard, or WARP — to paste into your Xray configuration."
|
||||
onReset={reset}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Kind"
|
||||
value={kind}
|
||||
onChange={(v) => setKind(v as OutboundKind)}
|
||||
options={KINDS}
|
||||
/>
|
||||
<TextField label="Tag" value={kind === 'warp' ? 'warp' : tag} onChange={setTag} />
|
||||
|
||||
{kind === 'freedom' ? (
|
||||
<SelectField
|
||||
label="Domain strategy"
|
||||
value={domainStrategy}
|
||||
onChange={setDomainStrategy}
|
||||
options={DOMAIN_STRATEGIES}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{isProxy ? (
|
||||
<>
|
||||
<TextField label="Address" value={address} onChange={setAddress} />
|
||||
<TextField label="Port" value={port} onChange={setPort} inputMode="numeric" />
|
||||
{(kind === 'vless' || kind === 'vmess') && (
|
||||
<TextField label="UUID (id)" value={id} onChange={setId} />
|
||||
)}
|
||||
{kind === 'vless' && (
|
||||
<TextField
|
||||
label="Flow"
|
||||
value={flow}
|
||||
onChange={setFlow}
|
||||
placeholder="xtls-rprx-vision (optional)"
|
||||
/>
|
||||
)}
|
||||
{(kind === 'trojan' || kind === 'shadowsocks') && (
|
||||
<TextField label="Password" value={password} onChange={setPassword} />
|
||||
)}
|
||||
{kind === 'shadowsocks' && (
|
||||
<TextField label="Method (cipher)" value={method} onChange={setMethod} />
|
||||
)}
|
||||
{(kind === 'socks' || kind === 'http') && (
|
||||
<>
|
||||
<TextField
|
||||
label="Username"
|
||||
value={username}
|
||||
onChange={setUsername}
|
||||
placeholder="optional"
|
||||
/>
|
||||
<TextField label="Password" value={password} onChange={setPassword} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{isWg ? (
|
||||
<>
|
||||
<TextField
|
||||
label="Private key (secretKey)"
|
||||
value={wgSecretKey}
|
||||
onChange={setWgSecretKey}
|
||||
/>
|
||||
<TextField label="Local address" value={wgAddress} onChange={setWgAddress} />
|
||||
<TextField label="Peer public key" value={wgPublicKey} onChange={setWgPublicKey} />
|
||||
<TextField
|
||||
label="Peer endpoint"
|
||||
value={wgEndpoint}
|
||||
onChange={setWgEndpoint}
|
||||
placeholder={kind === 'warp' ? 'engage.cloudflareclient.com:2408' : 'host:51820'}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{hasStream ? (
|
||||
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Transport"
|
||||
value={network}
|
||||
onChange={(v) => setNetwork(v as Network)}
|
||||
options={NETWORKS}
|
||||
/>
|
||||
<SelectField
|
||||
label="Security"
|
||||
value={security}
|
||||
onChange={(v) => setSecurity(v as Security)}
|
||||
options={SECURITIES}
|
||||
/>
|
||||
{hasPath ? (
|
||||
<>
|
||||
<TextField label="Path" value={path} onChange={setPath} />
|
||||
<TextField label="Host" value={host} onChange={setHost} placeholder="optional" />
|
||||
</>
|
||||
) : null}
|
||||
{network === 'grpc' ? (
|
||||
<TextField label="serviceName" value={serviceName} onChange={setServiceName} />
|
||||
) : null}
|
||||
{security !== 'none' ? (
|
||||
<>
|
||||
<TextField label="SNI (serverName)" value={sni} onChange={setSni} />
|
||||
<SelectField
|
||||
label="Fingerprint"
|
||||
value={fingerprint}
|
||||
onChange={setFingerprint}
|
||||
options={FINGERPRINTS}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
{security === 'reality' ? (
|
||||
<>
|
||||
<TextField label="Public key (pbk)" value={publicKey} onChange={setPublicKey} />
|
||||
<TextField label="Short ID (sid)" value={shortId} onChange={setShortId} />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4">
|
||||
<OutputBlock label="Outbound (Xray JSON)" value={buildOutboundJson(input)} />
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import {
|
||||
recommend,
|
||||
type UseCase,
|
||||
type CensorshipLevel,
|
||||
type ClientSupport,
|
||||
} from '@/lib/xray/protocols';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { SelectField } from './shared/fields';
|
||||
|
||||
const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
|
||||
|
||||
export function ProtocolWizard() {
|
||||
const [useCase, setUseCase] = useState<UseCase>('general');
|
||||
const [censorship, setCensorship] = useState<CensorshipLevel>('medium');
|
||||
const [clientSupport, setClientSupport] = useState<ClientSupport>('modern');
|
||||
|
||||
const result = recommend({ useCase, censorship, clientSupport });
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Protocol wizard"
|
||||
description="Answer a few questions to get a recommended protocol and transport."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<SelectField
|
||||
label="Primary goal"
|
||||
value={cap(useCase)}
|
||||
onChange={(v) => setUseCase(v.toLowerCase() as UseCase)}
|
||||
options={['Censorship', 'General', 'Speed']}
|
||||
/>
|
||||
<SelectField
|
||||
label="Censorship level"
|
||||
value={cap(censorship)}
|
||||
onChange={(v) => setCensorship(v.toLowerCase() as CensorshipLevel)}
|
||||
options={['High', 'Medium', 'Low']}
|
||||
/>
|
||||
<SelectField
|
||||
label="Client support"
|
||||
value={cap(clientSupport)}
|
||||
onChange={(v) => setClientSupport(v.toLowerCase() as ClientSupport)}
|
||||
options={['Modern', 'Broad']}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-xl border bg-fd-background p-4">
|
||||
<div className="flex items-center gap-2 text-brand">
|
||||
<Sparkles className="size-4" aria-hidden />
|
||||
<span className="text-sm font-medium">Recommended</span>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
<Badge>{result.protocol}</Badge>
|
||||
<Badge>{result.transport}</Badge>
|
||||
<Badge>{result.security}</Badge>
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-fd-muted-foreground">{result.rationale}</p>
|
||||
<div className="mt-3 flex flex-wrap gap-3 text-sm">
|
||||
{result.links.map((link) => (
|
||||
<Link key={link.href} href={link.href} className="text-fd-primary hover:underline">
|
||||
{link.title} →
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
|
||||
function Badge({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<span className="rounded-lg bg-brand/10 px-2.5 py-1 text-sm font-medium text-brand">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import {
|
||||
generateX25519KeyPair,
|
||||
isX25519Available,
|
||||
randomShortId,
|
||||
randomUuid,
|
||||
realityClientLink,
|
||||
realityServerInbound,
|
||||
type RealityConfig,
|
||||
type X25519KeyPair,
|
||||
} from '@/lib/xray/reality';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
import { CopyButton } from './shared/copy-button';
|
||||
|
||||
const FINGERPRINTS = ['chrome', 'firefox', 'safari', 'ios', 'android', 'edge', 'random'] as const;
|
||||
|
||||
export function RealityConfigGenerator() {
|
||||
const [address, setAddress] = useState('your-server.com');
|
||||
const [port, setPort] = useState('443');
|
||||
const [dest, setDest] = useState('www.microsoft.com:443');
|
||||
const [sni, setSni] = useState('www.microsoft.com');
|
||||
const [fingerprint, setFingerprint] = useState<string>('chrome');
|
||||
const [uuid, setUuid] = useState('');
|
||||
const [shortId, setShortId] = useState('');
|
||||
const [keys, setKeys] = useState<X25519KeyPair | null>(null);
|
||||
const [unavailable, setUnavailable] = useState(false);
|
||||
|
||||
const regenerate = useCallback(async () => {
|
||||
setUuid(randomUuid());
|
||||
setShortId(randomShortId(4));
|
||||
if (!isX25519Available()) {
|
||||
setUnavailable(true);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setKeys(await generateX25519KeyPair());
|
||||
setUnavailable(false);
|
||||
} catch {
|
||||
setUnavailable(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Generate keys/identifiers on the client after hydration. This is a genuine
|
||||
// client-only side effect (WebCrypto + randomness), not derived render state.
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
void regenerate();
|
||||
}, [regenerate]);
|
||||
|
||||
const config: RealityConfig | null =
|
||||
keys && uuid
|
||||
? {
|
||||
address,
|
||||
port: Number(port) || 443,
|
||||
uuid,
|
||||
dest,
|
||||
serverNames: [sni],
|
||||
shortIds: [shortId],
|
||||
privateKey: keys.privateKey,
|
||||
publicKey: keys.publicKey,
|
||||
fingerprint,
|
||||
spiderX: '/',
|
||||
flow: 'xtls-rprx-vision',
|
||||
}
|
||||
: null;
|
||||
|
||||
const serverJson = config ? JSON.stringify(realityServerInbound(config), null, 2) : '';
|
||||
const clientLink = config ? realityClientLink(config) : '';
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="REALITY config generator"
|
||||
description="Generate a VLESS + REALITY inbound and client link. Keys are created in your browser — nothing is sent anywhere."
|
||||
onReset={() => void regenerate()}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TextField
|
||||
label="Server address"
|
||||
value={address}
|
||||
onChange={setAddress}
|
||||
hint="Your domain or IP"
|
||||
/>
|
||||
<TextField label="Port" value={port} onChange={setPort} inputMode="numeric" />
|
||||
<TextField
|
||||
label="Dest (camouflage target)"
|
||||
value={dest}
|
||||
onChange={setDest}
|
||||
hint="A real TLS 1.3 site, e.g. www.microsoft.com:443"
|
||||
/>
|
||||
<TextField label="SNI / Server name" value={sni} onChange={setSni} />
|
||||
<SelectField
|
||||
label="Fingerprint"
|
||||
value={fingerprint}
|
||||
onChange={setFingerprint}
|
||||
options={FINGERPRINTS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{unavailable ? (
|
||||
<div className="mt-4 rounded-xl border border-amber-500/40 bg-amber-500/10 p-3 text-sm">
|
||||
Your browser can't generate X25519 keys here. Generate them on the server instead:
|
||||
<div className="mt-2">
|
||||
<OutputBlock label="run on the server" value="xray x25519" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-medium">Generated keys & identifiers</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void regenerate()}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
|
||||
>
|
||||
<RefreshCw className="size-3.5" aria-hidden />
|
||||
Regenerate
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<KeyRow label="Public key" value={keys?.publicKey ?? ''} />
|
||||
<KeyRow label="Private key" value={keys?.privateKey ?? ''} />
|
||||
<KeyRow label="UUID" value={uuid} />
|
||||
<KeyRow label="Short ID" value={shortId} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="Server inbound (Xray JSON)" value={serverJson} />
|
||||
<OutputBlock label="Client share link" value={clientLink} qr />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
|
||||
function KeyRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-fd-background px-3 py-2">
|
||||
<span className="shrink-0 text-xs font-medium text-fd-muted-foreground">{label}</span>
|
||||
<code dir="ltr" className="flex-1 truncate text-start text-xs">
|
||||
{value}
|
||||
</code>
|
||||
<CopyButton value={value} label="" className="px-1.5" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildProxyConfig,
|
||||
buildCertCommand,
|
||||
type ProxyServer,
|
||||
type CertTool,
|
||||
type ReverseProxyOptions,
|
||||
} from '@/lib/xray/reverse-proxy';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
export function ReverseProxyGenerator() {
|
||||
const [server, setServer] = useState<ProxyServer>('nginx');
|
||||
const [domain, setDomain] = useState('panel.example.com');
|
||||
const [panelPort, setPanelPort] = useState('2053');
|
||||
const [panelPath, setPanelPath] = useState('/panel');
|
||||
const [certTool, setCertTool] = useState<CertTool>('certbot');
|
||||
|
||||
const options: ReverseProxyOptions = { server, domain, panelPort, panelPath, certTool };
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Reverse-proxy config generator"
|
||||
description="Generate an Nginx or Caddy reverse-proxy config (with WebSocket support) and a matching certificate command."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Server"
|
||||
value={server}
|
||||
onChange={(v) => setServer(v as ProxyServer)}
|
||||
options={['nginx', 'caddy']}
|
||||
/>
|
||||
<TextField label="Domain" value={domain} onChange={setDomain} />
|
||||
<TextField
|
||||
label="Panel port"
|
||||
value={panelPort}
|
||||
onChange={setPanelPort}
|
||||
inputMode="numeric"
|
||||
/>
|
||||
<TextField label="Panel web base path" value={panelPath} onChange={setPanelPath} />
|
||||
{server === 'nginx' ? (
|
||||
<SelectField
|
||||
label="Certificate tool"
|
||||
value={certTool}
|
||||
onChange={(v) => setCertTool(v as CertTool)}
|
||||
options={['certbot', 'acme.sh']}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock
|
||||
label={server === 'nginx' ? 'nginx server block' : 'Caddyfile'}
|
||||
value={buildProxyConfig(options)}
|
||||
/>
|
||||
{server === 'nginx' ? (
|
||||
<OutputBlock label="Obtain a certificate" value={buildCertCommand(options)} />
|
||||
) : (
|
||||
<p className="text-sm text-fd-muted-foreground">
|
||||
Caddy obtains and renews TLS certificates automatically — no extra command needed.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildRoutingJson,
|
||||
type DomainStrategy,
|
||||
type RoutingInput,
|
||||
type RuleNetwork,
|
||||
type Strategy,
|
||||
} from '@/lib/xray/routing';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
interface BalancerRow {
|
||||
tag: string;
|
||||
selector: string;
|
||||
strategy: Strategy;
|
||||
fallbackTag: string;
|
||||
}
|
||||
|
||||
interface RuleRow {
|
||||
domain: string;
|
||||
ip: string;
|
||||
port: string;
|
||||
network: string;
|
||||
inboundTag: string;
|
||||
targetKind: 'outbound' | 'balancer';
|
||||
targetTag: string;
|
||||
}
|
||||
|
||||
const STRATEGIES: readonly Strategy[] = ['random', 'roundRobin', 'leastPing', 'leastLoad'];
|
||||
const NETWORKS = ['any', 'tcp', 'udp', 'tcp,udp'];
|
||||
const TARGET_KINDS = ['outbound', 'balancer'];
|
||||
const DOMAIN_STRATEGIES: readonly DomainStrategy[] = ['AsIs', 'IPIfNonMatch', 'IPOnDemand'];
|
||||
|
||||
const DEFAULT_BALANCERS: BalancerRow[] = [
|
||||
{ tag: 'balancer', selector: 'proxy', strategy: 'leastPing', fallbackTag: '' },
|
||||
];
|
||||
const DEFAULT_RULES: RuleRow[] = [
|
||||
{ domain: 'geosite:category-ads-all', ip: '', port: '', network: 'any', inboundTag: '', targetKind: 'outbound', targetTag: 'block' },
|
||||
{ domain: '', ip: 'geoip:private', port: '', network: 'any', inboundTag: '', targetKind: 'outbound', targetTag: 'direct' },
|
||||
];
|
||||
|
||||
function list(s: string): string[] {
|
||||
return s
|
||||
.split(',')
|
||||
.map((x) => x.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
const addBtn =
|
||||
'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground';
|
||||
|
||||
export function RoutingBuilder() {
|
||||
const [domainStrategy, setDomainStrategy] = useState<DomainStrategy>('IPIfNonMatch');
|
||||
const [balancers, setBalancers] = useState<BalancerRow[]>(DEFAULT_BALANCERS);
|
||||
const [rules, setRules] = useState<RuleRow[]>(DEFAULT_RULES);
|
||||
|
||||
function patchBalancer(i: number, patch: Partial<BalancerRow>) {
|
||||
setBalancers((prev) => prev.map((b, j) => (i === j ? { ...b, ...patch } : b)));
|
||||
}
|
||||
function patchRule(i: number, patch: Partial<RuleRow>) {
|
||||
setRules((prev) => prev.map((r, j) => (i === j ? { ...r, ...patch } : r)));
|
||||
}
|
||||
|
||||
const input: RoutingInput = {
|
||||
domainStrategy,
|
||||
balancers: balancers
|
||||
.filter((b) => b.tag.trim())
|
||||
.map((b) => ({
|
||||
tag: b.tag.trim(),
|
||||
selector: list(b.selector),
|
||||
strategy: b.strategy,
|
||||
fallbackTag: b.fallbackTag.trim() || undefined,
|
||||
})),
|
||||
rules: rules
|
||||
.filter((r) => r.targetTag.trim())
|
||||
.map((r) => ({
|
||||
domain: list(r.domain),
|
||||
ip: list(r.ip),
|
||||
port: r.port.trim() || undefined,
|
||||
network: r.network === 'any' ? undefined : (r.network as RuleNetwork),
|
||||
inboundTag: list(r.inboundTag),
|
||||
target: { kind: r.targetKind, tag: r.targetTag.trim() },
|
||||
})),
|
||||
};
|
||||
|
||||
function reset() {
|
||||
setDomainStrategy('IPIfNonMatch');
|
||||
setBalancers(DEFAULT_BALANCERS);
|
||||
setRules(DEFAULT_RULES);
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Balancer & routing builder"
|
||||
description="Compose Xray balancers and routing rules, then copy the routing block (with a matching observatory for leastPing/leastLoad)."
|
||||
onReset={reset}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Domain strategy"
|
||||
value={domainStrategy}
|
||||
onChange={(v) => setDomainStrategy(v as DomainStrategy)}
|
||||
options={DOMAIN_STRATEGIES}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-between">
|
||||
<h4 className="text-sm font-semibold">Balancers</h4>
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() =>
|
||||
setBalancers((p) => [...p, { tag: '', selector: '', strategy: 'random', fallbackTag: '' }])
|
||||
}
|
||||
>
|
||||
Add balancer
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col gap-3">
|
||||
{balancers.map((b, i) => (
|
||||
<div key={i} className="rounded-xl border p-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<TextField label="Tag" value={b.tag} onChange={(v) => patchBalancer(i, { tag: v })} />
|
||||
<TextField
|
||||
label="Selector (comma-separated prefixes)"
|
||||
value={b.selector}
|
||||
onChange={(v) => patchBalancer(i, { selector: v })}
|
||||
/>
|
||||
<SelectField
|
||||
label="Strategy"
|
||||
value={b.strategy}
|
||||
onChange={(v) => patchBalancer(i, { strategy: v as Strategy })}
|
||||
options={STRATEGIES}
|
||||
/>
|
||||
<TextField
|
||||
label="Fallback tag"
|
||||
value={b.fallbackTag}
|
||||
onChange={(v) => patchBalancer(i, { fallbackTag: v })}
|
||||
placeholder="optional"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() => setBalancers((p) => p.filter((_, j) => j !== i))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-between">
|
||||
<h4 className="text-sm font-semibold">Rules</h4>
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() =>
|
||||
setRules((p) => [
|
||||
...p,
|
||||
{ domain: '', ip: '', port: '', network: 'any', inboundTag: '', targetKind: 'outbound', targetTag: '' },
|
||||
])
|
||||
}
|
||||
>
|
||||
Add rule
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col gap-3">
|
||||
{rules.map((r, i) => (
|
||||
<div key={i} className="rounded-xl border p-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<TextField label="Domain (comma)" value={r.domain} onChange={(v) => patchRule(i, { domain: v })} placeholder="geosite:google, example.com" />
|
||||
<TextField label="IP (comma)" value={r.ip} onChange={(v) => patchRule(i, { ip: v })} placeholder="geoip:cn, 1.1.1.1" />
|
||||
<TextField label="Port" value={r.port} onChange={(v) => patchRule(i, { port: v })} placeholder="443 or 1000-2000" />
|
||||
<SelectField label="Network" value={r.network} onChange={(v) => patchRule(i, { network: v })} options={NETWORKS} />
|
||||
<TextField label="Inbound tag (comma)" value={r.inboundTag} onChange={(v) => patchRule(i, { inboundTag: v })} placeholder="optional" />
|
||||
<SelectField label="Target kind" value={r.targetKind} onChange={(v) => patchRule(i, { targetKind: v as 'outbound' | 'balancer' })} options={TARGET_KINDS} />
|
||||
<TextField label="Target tag" value={r.targetTag} onChange={(v) => patchRule(i, { targetTag: v })} />
|
||||
</div>
|
||||
<div className="mt-2 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() => setRules((p) => p.filter((_, j) => j !== i))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<OutputBlock label="Routing block (Xray JSON)" value={buildRoutingJson(input)} />
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { parseLink, type ParsedLink } from '@/lib/xray/links';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
|
||||
type Result = { ok: true; data: ParsedLink } | { ok: false; error: string } | null;
|
||||
|
||||
export function ShareLinkInspector() {
|
||||
const [input, setInput] = useState('');
|
||||
|
||||
const result: Result = useMemo(() => {
|
||||
const value = input.trim();
|
||||
if (!value) return null;
|
||||
try {
|
||||
return { ok: true, data: parseLink(value) };
|
||||
} catch (e) {
|
||||
return { ok: false, error: (e as Error).message };
|
||||
}
|
||||
}, [input]);
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Share-link inspector"
|
||||
description="Paste a vless / vmess / trojan / ss link to decode every parameter. It is parsed entirely in your browser — nothing is sent over the network."
|
||||
onReset={input ? () => setInput('') : undefined}
|
||||
>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="vless://uuid@host:443?security=reality&pbk=...#name"
|
||||
dir="ltr"
|
||||
rows={3}
|
||||
spellCheck={false}
|
||||
className="w-full resize-y rounded-lg border bg-fd-background px-3 py-2 font-mono text-sm outline-none transition-colors focus-visible:border-fd-primary focus-visible:ring-2 focus-visible:ring-fd-ring/30"
|
||||
/>
|
||||
|
||||
{result && !result.ok ? (
|
||||
<div className="mt-3 flex items-center gap-2 rounded-lg border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400">
|
||||
<AlertCircle className="size-4 shrink-0" aria-hidden />
|
||||
<span>{result.error}</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{result && result.ok ? <ResultTable data={result.data} /> : null}
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultTable({ data }: { data: ParsedLink }) {
|
||||
const rows: [string, string][] = [
|
||||
['Protocol', data.protocol],
|
||||
['Name', data.name],
|
||||
['Address', data.address],
|
||||
['Port', String(data.port)],
|
||||
[data.protocol === 'trojan' ? 'Password' : 'ID / credential', data.credential],
|
||||
...Object.entries(data.params),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mt-3 overflow-hidden rounded-xl border">
|
||||
<table className="w-full text-sm">
|
||||
<tbody>
|
||||
{rows.map(([key, value], i) => (
|
||||
<tr key={`${key}-${i}`} className="border-b last:border-b-0">
|
||||
<th
|
||||
scope="row"
|
||||
className="w-1/3 bg-fd-muted/40 px-3 py-2 text-start align-top font-medium text-fd-muted-foreground"
|
||||
>
|
||||
{key}
|
||||
</th>
|
||||
<td dir="ltr" className="break-all px-3 py-2 text-start font-mono">
|
||||
{value || <span className="text-fd-muted-foreground">—</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
export function CopyButton({
|
||||
value,
|
||||
label = 'Copy',
|
||||
className,
|
||||
}: {
|
||||
value: string;
|
||||
label?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Clipboard unavailable (insecure context) — ignore.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
aria-label={copied ? 'Copied' : label}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-2 focus-visible:outline-fd-ring',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="size-3.5 text-brand" aria-hidden />
|
||||
) : (
|
||||
<Copy className="size-3.5" aria-hidden />
|
||||
)}
|
||||
<span>{copied ? 'Copied' : label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { useId } from 'react';
|
||||
|
||||
const inputClass =
|
||||
'rounded-lg border bg-fd-background px-3 py-2 text-sm outline-none transition-colors focus-visible:border-fd-primary focus-visible:ring-2 focus-visible:ring-fd-ring/30';
|
||||
|
||||
export function TextField({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
hint,
|
||||
inputMode,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
hint?: string;
|
||||
inputMode?: 'numeric' | 'text';
|
||||
}) {
|
||||
const id = useId();
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor={id} className="text-sm font-medium">
|
||||
{label}
|
||||
</label>
|
||||
{/* Values are technical (hosts, links) and stay LTR even on RTL pages. */}
|
||||
<input
|
||||
id={id}
|
||||
dir="ltr"
|
||||
inputMode={inputMode}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
{hint ? <span className="text-xs text-fd-muted-foreground">{hint}</span> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CheckboxField({
|
||||
label,
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}) {
|
||||
const id = useId();
|
||||
return (
|
||||
<label htmlFor={id} className="inline-flex cursor-pointer items-center gap-2 text-sm">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
className="size-4 accent-fd-primary"
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export function SelectField({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: readonly string[];
|
||||
}) {
|
||||
const id = useId();
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor={id} className="text-sm font-medium">
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={inputClass}
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<option key={opt} value={opt}>
|
||||
{opt}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
'use client';
|
||||
|
||||
import QRCode from 'react-qr-code';
|
||||
import { CopyButton } from './copy-button';
|
||||
|
||||
export function OutputBlock({
|
||||
label,
|
||||
value,
|
||||
qr = false,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
qr?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border">
|
||||
<div className="flex items-center justify-between gap-2 border-b bg-fd-muted/40 px-3 py-2">
|
||||
<span className="text-xs font-medium text-fd-muted-foreground">{label}</span>
|
||||
<CopyButton value={value} />
|
||||
</div>
|
||||
<pre dir="ltr" className="max-h-80 overflow-auto p-3 text-start text-xs leading-relaxed">
|
||||
<code>{value}</code>
|
||||
</pre>
|
||||
{qr && value ? (
|
||||
<div className="flex justify-center border-t bg-white p-4">
|
||||
<QRCode value={value} size={180} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
buildSubscriptionUrls,
|
||||
buildShareLinks,
|
||||
buildBase64Subscription,
|
||||
buildJsonSubscription,
|
||||
type SubClient,
|
||||
type SubUrlInput,
|
||||
} from '@/lib/xray/subscription';
|
||||
import type { Network, Security } from '@/lib/xray/outbounds';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField, SelectField, CheckboxField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
type ClientProtocol = 'vless' | 'vmess' | 'trojan' | 'ss';
|
||||
|
||||
interface ClientRow {
|
||||
protocol: ClientProtocol;
|
||||
remark: string;
|
||||
address: string;
|
||||
port: string;
|
||||
credential: string; // id (vless/vmess) or password (trojan/ss)
|
||||
method: string; // ss
|
||||
network: Network;
|
||||
security: Security;
|
||||
sni: string;
|
||||
}
|
||||
|
||||
const PROTOCOLS: readonly ClientProtocol[] = ['vless', 'vmess', 'trojan', 'ss'];
|
||||
const NETWORKS: readonly Network[] = ['tcp', 'kcp', 'ws', 'grpc', 'httpupgrade', 'xhttp'];
|
||||
const SECURITIES: readonly Security[] = ['none', 'tls', 'reality'];
|
||||
|
||||
const addBtn =
|
||||
'inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground';
|
||||
|
||||
const DEFAULT_CLIENTS: ClientRow[] = [
|
||||
{
|
||||
protocol: 'vless',
|
||||
remark: 'HK-01',
|
||||
address: 'a.example.com',
|
||||
port: '443',
|
||||
credential: '11111111-2222-3333-4444-555555555555',
|
||||
method: '',
|
||||
network: 'tcp',
|
||||
security: 'reality',
|
||||
sni: 'www.microsoft.com',
|
||||
},
|
||||
];
|
||||
|
||||
function toClient(r: ClientRow): SubClient {
|
||||
const isUuid = r.protocol === 'vless' || r.protocol === 'vmess';
|
||||
return {
|
||||
protocol: r.protocol,
|
||||
remark: r.remark,
|
||||
address: r.address,
|
||||
port: Number(r.port),
|
||||
id: isUuid ? r.credential : undefined,
|
||||
password: isUuid ? undefined : r.credential,
|
||||
method: r.protocol === 'ss' ? r.method : undefined,
|
||||
network: r.network,
|
||||
security: r.security,
|
||||
sni: r.sni || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export function SubscriptionBuilder() {
|
||||
const [scheme, setScheme] = useState<'http' | 'https'>('https');
|
||||
const [host, setHost] = useState('sub.example.com');
|
||||
const [port, setPort] = useState('2096');
|
||||
const [subPath, setSubPath] = useState('/sub/');
|
||||
const [jsonPath, setJsonPath] = useState('/json/');
|
||||
const [subId, setSubId] = useState('user-1');
|
||||
const [behindProxy, setBehindProxy] = useState(false);
|
||||
const [clients, setClients] = useState<ClientRow[]>(DEFAULT_CLIENTS);
|
||||
|
||||
function patch(i: number, p: Partial<ClientRow>) {
|
||||
setClients((prev) => prev.map((c, j) => (i === j ? { ...c, ...p } : c)));
|
||||
}
|
||||
|
||||
const urlInput: SubUrlInput = { scheme, host, port: Number(port), subPath, jsonPath, subId, behindProxy };
|
||||
const urls = buildSubscriptionUrls(urlInput);
|
||||
const subClients = clients.filter((c) => c.address.trim()).map(toClient);
|
||||
|
||||
function reset() {
|
||||
setScheme('https');
|
||||
setHost('sub.example.com');
|
||||
setPort('2096');
|
||||
setSubPath('/sub/');
|
||||
setJsonPath('/json/');
|
||||
setSubId('user-1');
|
||||
setBehindProxy(false);
|
||||
setClients(DEFAULT_CLIENTS);
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Subscription & sub-JSON builder"
|
||||
description="Build the subscription URLs and preview both body formats — the Base64 link list and the JSON (Xray-json) config."
|
||||
onReset={reset}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Scheme"
|
||||
value={scheme}
|
||||
onChange={(v) => setScheme(v as 'http' | 'https')}
|
||||
options={['https', 'http']}
|
||||
/>
|
||||
<TextField label="Host" value={host} onChange={setHost} />
|
||||
<TextField label="Port" value={port} onChange={setPort} inputMode="numeric" />
|
||||
<TextField label="Sub ID" value={subId} onChange={setSubId} />
|
||||
<TextField label="Sub path" value={subPath} onChange={setSubPath} />
|
||||
<TextField label="JSON path" value={jsonPath} onChange={setJsonPath} />
|
||||
<CheckboxField
|
||||
label="Behind a reverse proxy (omit the port)"
|
||||
checked={behindProxy}
|
||||
onChange={setBehindProxy}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="Base64 subscription URL" value={urls.base64} qr />
|
||||
<OutputBlock label="JSON subscription URL" value={urls.json} />
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-between">
|
||||
<h4 className="text-sm font-semibold">Clients in this subscription</h4>
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() =>
|
||||
setClients((p) => [
|
||||
...p,
|
||||
{
|
||||
protocol: 'vless',
|
||||
remark: '',
|
||||
address: '',
|
||||
port: '443',
|
||||
credential: '',
|
||||
method: '',
|
||||
network: 'tcp',
|
||||
security: 'reality',
|
||||
sni: '',
|
||||
},
|
||||
])
|
||||
}
|
||||
>
|
||||
Add client
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col gap-3">
|
||||
{clients.map((c, i) => (
|
||||
<div key={i} className="rounded-xl border p-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<SelectField
|
||||
label="Protocol"
|
||||
value={c.protocol}
|
||||
onChange={(v) => patch(i, { protocol: v as ClientProtocol })}
|
||||
options={PROTOCOLS}
|
||||
/>
|
||||
<TextField label="Remark" value={c.remark} onChange={(v) => patch(i, { remark: v })} />
|
||||
<TextField label="Address" value={c.address} onChange={(v) => patch(i, { address: v })} />
|
||||
<TextField label="Port" value={c.port} onChange={(v) => patch(i, { port: v })} inputMode="numeric" />
|
||||
<TextField
|
||||
label={c.protocol === 'vless' || c.protocol === 'vmess' ? 'UUID (id)' : 'Password'}
|
||||
value={c.credential}
|
||||
onChange={(v) => patch(i, { credential: v })}
|
||||
/>
|
||||
{c.protocol === 'ss' ? (
|
||||
<TextField label="Method" value={c.method} onChange={(v) => patch(i, { method: v })} />
|
||||
) : null}
|
||||
<SelectField
|
||||
label="Transport"
|
||||
value={c.network}
|
||||
onChange={(v) => patch(i, { network: v as Network })}
|
||||
options={NETWORKS}
|
||||
/>
|
||||
<SelectField
|
||||
label="Security"
|
||||
value={c.security}
|
||||
onChange={(v) => patch(i, { security: v as Security })}
|
||||
options={SECURITIES}
|
||||
/>
|
||||
{c.security !== 'none' ? (
|
||||
<TextField label="SNI" value={c.sni} onChange={(v) => patch(i, { sni: v })} />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-2 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className={addBtn}
|
||||
onClick={() => setClients((p) => p.filter((_, j) => j !== i))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="Subscription links (decoded body)" value={buildShareLinks(subClients).join('\n')} />
|
||||
<OutputBlock label="Base64 body" value={buildBase64Subscription(subClients)} />
|
||||
<OutputBlock label="JSON subscription (preview)" value={buildJsonSubscription(subClients)} />
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
validateBotToken,
|
||||
parseAdminIds,
|
||||
validateRunTime,
|
||||
telegramApiBase,
|
||||
buildBotConfigSummary,
|
||||
} from '@/lib/xray/telegram';
|
||||
import { ToolFrame } from './tool-frame';
|
||||
import { TextField } from './shared/fields';
|
||||
import { OutputBlock } from './shared/output-block';
|
||||
|
||||
function Status({ ok, children }: { ok: boolean; children: ReactNode }) {
|
||||
return (
|
||||
<p
|
||||
className={`text-xs ${ok ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export function TelegramSetupHelper() {
|
||||
const [token, setToken] = useState('');
|
||||
const [adminIds, setAdminIds] = useState('');
|
||||
const [runTime, setRunTime] = useState('@daily');
|
||||
|
||||
const tokenV = validateBotToken(token);
|
||||
const idsV = parseAdminIds(adminIds);
|
||||
const cronV = validateRunTime(runTime);
|
||||
const summary = buildBotConfigSummary({ token, adminIds, runTime });
|
||||
|
||||
const settingsText = [
|
||||
`tgBotEnable = true`,
|
||||
`tgBotToken = ${summary.tgBotToken || '<token>'}`,
|
||||
`tgBotChatId = ${summary.tgBotChatId || '<admin ids>'}`,
|
||||
`tgRunTime = ${summary.tgRunTime || '@daily'}`,
|
||||
].join('\n');
|
||||
|
||||
function reset() {
|
||||
setToken('');
|
||||
setAdminIds('');
|
||||
setRunTime('@daily');
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolFrame
|
||||
title="Telegram bot setup helper"
|
||||
description="Validate your bot token, admin IDs, and report schedule, then copy the panel settings."
|
||||
onReset={reset}
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<TextField
|
||||
label="Bot token (from @BotFather)"
|
||||
value={token}
|
||||
onChange={setToken}
|
||||
placeholder="123456789:AA..."
|
||||
/>
|
||||
{token ? (
|
||||
tokenV.valid ? (
|
||||
<Status ok>Valid — bot id {tokenV.botId}</Status>
|
||||
) : (
|
||||
<Status ok={false}>{tokenV.error}</Status>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="Admin chat IDs (comma-separated)"
|
||||
value={adminIds}
|
||||
onChange={setAdminIds}
|
||||
placeholder="111111111, 222222222"
|
||||
/>
|
||||
{adminIds ? (
|
||||
idsV.invalid.length > 0 ? (
|
||||
<Status ok={false}>Not numeric: {idsV.invalid.join(', ')}</Status>
|
||||
) : (
|
||||
<Status ok>
|
||||
{idsV.ids.length} admin id{idsV.ids.length === 1 ? '' : 's'}
|
||||
</Status>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="Report schedule (tgRunTime)"
|
||||
value={runTime}
|
||||
onChange={setRunTime}
|
||||
placeholder="@daily, @every 8h, or a cron expression"
|
||||
/>
|
||||
{runTime ? (
|
||||
cronV.valid ? (
|
||||
<Status ok>Valid ({cronV.kind})</Status>
|
||||
) : (
|
||||
<Status ok={false}>{cronV.error}</Status>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-4">
|
||||
<OutputBlock label="Panel settings" value={settingsText} />
|
||||
<OutputBlock
|
||||
label="Bot API base (keep secret)"
|
||||
value={tokenV.valid ? telegramApiBase(token) : 'https://api.telegram.org/bot<token>'}
|
||||
/>
|
||||
</div>
|
||||
</ToolFrame>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { RotateCcw } from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export function ToolFrame({
|
||||
title,
|
||||
description,
|
||||
onReset,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
onReset?: () => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section
|
||||
role="group"
|
||||
aria-label={title}
|
||||
className="not-prose my-6 overflow-hidden rounded-2xl border bg-fd-card text-fd-foreground"
|
||||
>
|
||||
<header className="flex items-start justify-between gap-3 border-b px-4 py-3">
|
||||
<div>
|
||||
<h3 className="font-semibold">{title}</h3>
|
||||
{description ? (
|
||||
<p className="mt-0.5 text-sm text-fd-muted-foreground">{description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
{onReset ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
|
||||
>
|
||||
<RotateCcw className="size-3.5" aria-hidden />
|
||||
Reset
|
||||
</button>
|
||||
) : null}
|
||||
</header>
|
||||
<div className="p-4">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user