mirror of
https://github.com/perfect-panel/ppanel-web.git
synced 2026-02-17 13:51:10 -05:00
✨ feat: Add server form component with protocol configuration and localization support
This commit is contained in:
web
parent
26176a7afa
commit
217ddce60c
@ -61,6 +61,7 @@ export default function AppleForm() {
|
|||||||
|
|
||||||
return data.data;
|
return data.data;
|
||||||
},
|
},
|
||||||
|
enabled: open,
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = useForm<AppleFormData>({
|
const form = useForm<AppleFormData>({
|
||||||
|
|||||||
@ -52,7 +52,7 @@ export default function FacebookForm() {
|
|||||||
});
|
});
|
||||||
return data.data;
|
return data.data;
|
||||||
},
|
},
|
||||||
// 移除 enabled: open，现在默认加载数据
|
enabled: open,
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = useForm<FacebookFormData>({
|
const form = useForm<FacebookFormData>({
|
||||||
|
|||||||
@ -53,6 +53,7 @@ export default function GithubForm() {
|
|||||||
|
|
||||||
return data.data;
|
return data.data;
|
||||||
},
|
},
|
||||||
|
enabled: open,
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = useForm<GithubFormData>({
|
const form = useForm<GithubFormData>({
|
||||||
|
|||||||
@ -53,6 +53,7 @@ export default function TelegramForm() {
|
|||||||
|
|
||||||
return data.data;
|
return data.data;
|
||||||
},
|
},
|
||||||
|
enabled: open,
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = useForm<TelegramFormData>({
|
const form = useForm<TelegramFormData>({
|
||||||
|
|||||||
362
apps/admin/app/dashboard/nodes/node-form.tsx
Normal file
362
apps/admin/app/dashboard/nodes/node-form.tsx
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Button } from '@workspace/ui/components/button';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@workspace/ui/components/form';
|
||||||
|
import { ScrollArea } from '@workspace/ui/components/scroll-area';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@workspace/ui/components/sheet';
|
||||||
|
import { Combobox } from '@workspace/ui/custom-components/combobox';
|
||||||
|
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||||
|
import TagInput from '@workspace/ui/custom-components/tag-input';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { useEffect, useMemo } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
export type ProtocolName =
|
||||||
|
| 'shadowsocks'
|
||||||
|
| 'vmess'
|
||||||
|
| 'vless'
|
||||||
|
| 'trojan'
|
||||||
|
| 'hysteria2'
|
||||||
|
| 'tuic'
|
||||||
|
| 'anytls';
|
||||||
|
|
||||||
|
type ServerProtocolItem = {
|
||||||
|
protocol: ProtocolName;
|
||||||
|
enabled: boolean;
|
||||||
|
config?: { port?: number } & Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ServerRow = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
server_addr: string;
|
||||||
|
protocols: ServerProtocolItem[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type NodeFormValues = {
|
||||||
|
name: string;
|
||||||
|
server_id?: number;
|
||||||
|
protocol: ProtocolName | '';
|
||||||
|
server_addr: string;
|
||||||
|
port?: number;
|
||||||
|
tags: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
async function getServerListMock(): Promise<{ data: { list: ServerRow[] } }> {
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 101,
|
||||||
|
name: 'Tokyo-1',
|
||||||
|
server_addr: 'jp-1.example.com',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'shadowsocks', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'vless', enabled: true, config: { port: 8443 } },
|
||||||
|
{ protocol: 'trojan', enabled: false, config: { port: 443 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 102,
|
||||||
|
name: 'HK-Edge',
|
||||||
|
server_addr: 'hk-edge.example.com',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'vmess', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'vless', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'hysteria2', enabled: true, config: { port: 60000 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 103,
|
||||||
|
name: 'AnyTLS Lab',
|
||||||
|
server_addr: 'lab.example.com',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'anytls', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'tuic', enabled: false, config: { port: 4443 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildSchema = (t: ReturnType<typeof useTranslations>) =>
|
||||||
|
z
|
||||||
|
.object({
|
||||||
|
name: z.string().min(1, t('errors.nameRequired')),
|
||||||
|
server_id: z.number({ invalid_type_error: t('errors.serverRequired') }).optional(),
|
||||||
|
protocol: z.string().min(1, t('errors.protocolRequired')),
|
||||||
|
server_addr: z.string().min(1, t('errors.serverAddrRequired')),
|
||||||
|
port: z
|
||||||
|
.number()
|
||||||
|
.int()
|
||||||
|
.min(1, t('errors.portRange'))
|
||||||
|
.max(65535, t('errors.portRange'))
|
||||||
|
.optional(),
|
||||||
|
tags: z.array(z.string()),
|
||||||
|
})
|
||||||
|
.refine((v) => !!v.server_id, { path: ['server_id'], message: t('errors.serverRequired') });
|
||||||
|
|
||||||
|
export default function NodeForm(props: {
|
||||||
|
trigger: string;
|
||||||
|
title: string;
|
||||||
|
loading?: boolean;
|
||||||
|
initialValues?: Partial<NodeFormValues>;
|
||||||
|
onSubmit: (values: NodeFormValues) => Promise<boolean> | boolean;
|
||||||
|
}) {
|
||||||
|
const { trigger, title, loading, initialValues, onSubmit } = props;
|
||||||
|
const t = useTranslations('nodes');
|
||||||
|
const schema = useMemo(() => buildSchema(t), [t]);
|
||||||
|
|
||||||
|
const form = useForm<NodeFormValues>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: {
|
||||||
|
name: '',
|
||||||
|
server_id: undefined,
|
||||||
|
protocol: '',
|
||||||
|
server_addr: '',
|
||||||
|
port: undefined,
|
||||||
|
tags: [],
|
||||||
|
...initialValues,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const serverId = form.watch('server_id');
|
||||||
|
|
||||||
|
const { data } = useQuery({ queryKey: ['getServerListMock'], queryFn: getServerListMock });
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
const servers: ServerRow[] = data?.data?.list ?? [];
|
||||||
|
|
||||||
|
const currentServer = useMemo(() => servers.find((s) => s.id === serverId), [servers, serverId]);
|
||||||
|
|
||||||
|
const availableProtocols = useMemo(
|
||||||
|
() =>
|
||||||
|
(currentServer?.protocols || [])
|
||||||
|
.filter((p) => p.enabled)
|
||||||
|
.map((p) => ({
|
||||||
|
protocol: p.protocol,
|
||||||
|
port: p.config?.port,
|
||||||
|
})),
|
||||||
|
[currentServer],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialValues) {
|
||||||
|
form.reset({
|
||||||
|
name: '',
|
||||||
|
server_id: undefined,
|
||||||
|
protocol: '',
|
||||||
|
server_addr: '',
|
||||||
|
port: undefined,
|
||||||
|
tags: [],
|
||||||
|
...initialValues,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [initialValues]);
|
||||||
|
|
||||||
|
function handleServerChange(nextId?: number | null) {
|
||||||
|
const id = nextId ?? undefined;
|
||||||
|
form.setValue('server_id', id);
|
||||||
|
|
||||||
|
const sel = servers.find((s) => s.id === id);
|
||||||
|
if (!form.getValues('server_addr') && sel?.server_addr) {
|
||||||
|
form.setValue('server_addr', sel.server_addr);
|
||||||
|
}
|
||||||
|
const allowed = (sel?.protocols || []).filter((p) => p.enabled).map((p) => p.protocol);
|
||||||
|
if (!allowed.includes(form.getValues('protocol') as ProtocolName)) {
|
||||||
|
form.setValue('protocol', '' as any);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleProtocolChange(nextProto?: ProtocolName | null) {
|
||||||
|
const p = (nextProto || '') as ProtocolName | '';
|
||||||
|
form.setValue('protocol', p);
|
||||||
|
if (!p || !currentServer) return;
|
||||||
|
const curPort = Number(form.getValues('port') || 0);
|
||||||
|
if (!curPort) {
|
||||||
|
const hit = currentServer.protocols.find((x) => x.protocol === p);
|
||||||
|
const port = hit?.config?.port;
|
||||||
|
if (typeof port === 'number' && port > 0) {
|
||||||
|
form.setValue('port', port);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit(values: NodeFormValues) {
|
||||||
|
const ok = await onSubmit(values);
|
||||||
|
if (ok) form.reset();
|
||||||
|
return ok;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button onClick={() => form.reset()}>{trigger}</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
|
||||||
|
<SheetContent className='w-[560px] max-w-full'>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{title}</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6 pt-4'>
|
||||||
|
<Form {...form}>
|
||||||
|
<form className='grid grid-cols-1 gap-4'>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='name'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
onValueChange={(v) => form.setValue(field.name, v as string)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='tags'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('tags')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<TagInput
|
||||||
|
placeholder={t('tags_placeholder')}
|
||||||
|
value={field.value || []}
|
||||||
|
onChange={(v) => form.setValue(field.name, v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='server_id'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('server')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Combobox<number, false>
|
||||||
|
placeholder={t('select_server')}
|
||||||
|
value={field.value}
|
||||||
|
options={servers.map((s) => ({
|
||||||
|
value: s.id,
|
||||||
|
label: `${s.name} (${s.server_addr})`,
|
||||||
|
}))}
|
||||||
|
onChange={(v) => handleServerChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='protocol'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('protocol')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Combobox<string, false>
|
||||||
|
placeholder={t('select_protocol')}
|
||||||
|
value={field.value}
|
||||||
|
options={availableProtocols.map((p) => ({
|
||||||
|
value: p.protocol,
|
||||||
|
label: `${p.protocol} (${p.port})`,
|
||||||
|
}))}
|
||||||
|
onChange={(v) => handleProtocolChange((v as ProtocolName) || null)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='server_addr'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('server_addr')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
onValueChange={(v) => form.setValue(field.name, v as string)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='port'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('port')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
type='number'
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
placeholder='1 - 65535'
|
||||||
|
onValueChange={(v) => form.setValue(field.name, Number(v))}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
<SheetFooter className='flex-row justify-end gap-2 pt-3'>
|
||||||
|
<Button variant='outline' disabled={loading}>
|
||||||
|
{t('cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={loading}
|
||||||
|
onClick={form.handleSubmit(
|
||||||
|
async (vals) => submit(vals),
|
||||||
|
(errors) => {
|
||||||
|
const key = Object.keys(errors)[0] as keyof typeof errors;
|
||||||
|
if (key) toast.error(String(errors[key]?.message));
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('confirm')}
|
||||||
|
</Button>
|
||||||
|
</SheetFooter>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
309
apps/admin/app/dashboard/nodes/page.tsx
Normal file
309
apps/admin/app/dashboard/nodes/page.tsx
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ProTable, ProTableActions } from '@/components/pro-table';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Badge } from '@workspace/ui/components/badge';
|
||||||
|
import { Button } from '@workspace/ui/components/button';
|
||||||
|
import { Switch } from '@workspace/ui/components/switch';
|
||||||
|
import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { useMemo, useRef, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import NodeForm, { type NodeFormValues } from './node-form';
|
||||||
|
|
||||||
|
type NodeItem = NodeFormValues & { id: number; enabled: boolean; sort: number };
|
||||||
|
|
||||||
|
let mock: NodeItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
enabled: false,
|
||||||
|
name: 'Node A',
|
||||||
|
server_id: 101,
|
||||||
|
protocol: 'shadowsocks',
|
||||||
|
server_addr: 'jp-1.example.com',
|
||||||
|
port: 443,
|
||||||
|
tags: ['hk', 'premium'],
|
||||||
|
sort: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
enabled: true,
|
||||||
|
name: 'Node B',
|
||||||
|
server_id: 102,
|
||||||
|
protocol: 'vless',
|
||||||
|
server_addr: 'hk-edge.example.com',
|
||||||
|
port: 8443,
|
||||||
|
tags: ['jp'],
|
||||||
|
sort: 2,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const list = async () => ({ list: mock, total: mock.length });
|
||||||
|
const create = async (v: NodeFormValues) => {
|
||||||
|
mock.push({
|
||||||
|
id: Date.now(),
|
||||||
|
enabled: false,
|
||||||
|
sort: 0,
|
||||||
|
...v,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const update = async (id: number, v: NodeFormValues) => {
|
||||||
|
mock = mock.map((x) => (x.id === id ? { ...x, ...v } : x));
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const remove = async (id: number) => {
|
||||||
|
mock = mock.filter((x) => x.id !== id);
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const setState = async (id: number, en: boolean) => {
|
||||||
|
mock = mock.map((x) => (x.id === id ? { ...x, enabled: en } : x));
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ProtocolName = 'shadowsocks' | 'vmess' | 'vless' | 'trojan' | 'hysteria2' | 'tuic' | 'anytls';
|
||||||
|
type ServerProtocolItem = { protocol: ProtocolName; enabled: boolean; config?: { port?: number } };
|
||||||
|
type ServerRow = { id: number; name: string; server_addr: string; protocols: ServerProtocolItem[] };
|
||||||
|
|
||||||
|
async function getServerListMock(): Promise<{ data: { list: ServerRow[] } }> {
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 101,
|
||||||
|
name: 'Tokyo-1',
|
||||||
|
server_addr: 'jp-1.example.com',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'shadowsocks', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'vless', enabled: true, config: { port: 8443 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 102,
|
||||||
|
name: 'HK-Edge',
|
||||||
|
server_addr: 'hk-edge.example.com',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'vmess', enabled: true, config: { port: 443 } },
|
||||||
|
{ protocol: 'vless', enabled: true, config: { port: 443 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NodesPage() {
|
||||||
|
const t = useTranslations('nodes');
|
||||||
|
const ref = useRef<ProTableActions>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const { data: serversResp } = useQuery({
|
||||||
|
queryKey: ['getServerListMock'],
|
||||||
|
queryFn: getServerListMock,
|
||||||
|
});
|
||||||
|
const servers: ServerRow[] = serversResp?.data?.list ?? [];
|
||||||
|
const serverMap = useMemo(() => {
|
||||||
|
const m = new Map<number, ServerRow>();
|
||||||
|
servers.forEach((s) => m.set(s.id, s));
|
||||||
|
return m;
|
||||||
|
}, [servers]);
|
||||||
|
|
||||||
|
const getServerName = (id?: number) => (id ? (serverMap.get(id)?.name ?? `#${id}`) : '—');
|
||||||
|
const getServerOriginAddr = (id?: number) => (id ? (serverMap.get(id)?.server_addr ?? '—') : '—');
|
||||||
|
const getProtocolOriginPort = (id?: number, proto?: string) => {
|
||||||
|
if (!id || !proto) return '—';
|
||||||
|
const hit = serverMap.get(id)?.protocols?.find((p) => p.protocol === proto);
|
||||||
|
const p = hit?.config?.port;
|
||||||
|
return typeof p === 'number' ? String(p) : '—';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ProTable<NodeItem, { search: string }>
|
||||||
|
action={ref}
|
||||||
|
header={{
|
||||||
|
title: t('pageTitle'),
|
||||||
|
toolbar: (
|
||||||
|
<NodeForm
|
||||||
|
trigger={t('create')}
|
||||||
|
title={t('drawerCreateTitle')}
|
||||||
|
loading={loading}
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
setLoading(true);
|
||||||
|
await create(values);
|
||||||
|
toast.success(t('created'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
setLoading(false);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
id: 'enabled',
|
||||||
|
header: t('enabled'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Switch
|
||||||
|
checked={row.original.enabled}
|
||||||
|
onCheckedChange={async (v) => {
|
||||||
|
await setState(row.original.id, v);
|
||||||
|
toast.success(v ? t('enabled_on') : t('enabled_off'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ accessorKey: 'name', header: t('name') },
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'server_addr_port',
|
||||||
|
header: t('server_addr_port'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Badge variant='outline'>
|
||||||
|
{(row.original.server_addr || '—') + ':' + (row.original.port ?? '—')}
|
||||||
|
</Badge>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'server_combined',
|
||||||
|
header: t('server'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
<Badge variant='outline'>
|
||||||
|
{getServerName(row.original.server_id)} ·{' '}
|
||||||
|
{getServerOriginAddr(row.original.server_id)}
|
||||||
|
</Badge>
|
||||||
|
<Badge>
|
||||||
|
{row.original.protocol || '—'} ·{' '}
|
||||||
|
{getProtocolOriginPort(row.original.server_id, row.original.protocol)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'tags',
|
||||||
|
header: t('tags'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex flex-wrap gap-1'>
|
||||||
|
{(row.original.tags || []).length === 0
|
||||||
|
? '—'
|
||||||
|
: row.original.tags.map((tg) => (
|
||||||
|
<Badge key={tg} variant='outline'>
|
||||||
|
{tg}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
params={[{ key: 'search' }]}
|
||||||
|
request={async (_pagination, filter) => {
|
||||||
|
const { list: items } = await list();
|
||||||
|
const kw = (filter?.search || '').toLowerCase().trim();
|
||||||
|
const filtered = kw
|
||||||
|
? items.filter((i) =>
|
||||||
|
[
|
||||||
|
i.name,
|
||||||
|
getServerName(i.server_id),
|
||||||
|
getServerOriginAddr(i.server_id),
|
||||||
|
`${i.server_addr}:${i.port ?? ''}`,
|
||||||
|
`${i.protocol}:${getProtocolOriginPort(i.server_id, i.protocol)}`,
|
||||||
|
...(i.tags || []),
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.some((v) => String(v).toLowerCase().includes(kw)),
|
||||||
|
)
|
||||||
|
: items;
|
||||||
|
return { list: filtered, total: filtered.length };
|
||||||
|
}}
|
||||||
|
actions={{
|
||||||
|
render: (row) => [
|
||||||
|
<NodeForm
|
||||||
|
key='edit'
|
||||||
|
trigger={t('edit')}
|
||||||
|
title={t('drawerEditTitle')}
|
||||||
|
loading={loading}
|
||||||
|
initialValues={row}
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
setLoading(true);
|
||||||
|
await update(row.id, values);
|
||||||
|
toast.success(t('updated'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
setLoading(false);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
<ConfirmButton
|
||||||
|
key='delete'
|
||||||
|
trigger={<Button variant='destructive'>{t('delete')}</Button>}
|
||||||
|
title={t('confirmDeleteTitle')}
|
||||||
|
description={t('confirmDeleteDesc')}
|
||||||
|
onConfirm={async () => {
|
||||||
|
await remove(row.id);
|
||||||
|
toast.success(t('deleted'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
}}
|
||||||
|
cancelText={t('cancel')}
|
||||||
|
confirmText={t('confirm')}
|
||||||
|
/>,
|
||||||
|
<Button
|
||||||
|
key='copy'
|
||||||
|
variant='outline'
|
||||||
|
onClick={async () => {
|
||||||
|
const { id, enabled, ...rest } = row;
|
||||||
|
await create(rest);
|
||||||
|
toast.success(t('copied'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('copy')}
|
||||||
|
</Button>,
|
||||||
|
],
|
||||||
|
batchRender(rows) {
|
||||||
|
return [
|
||||||
|
<ConfirmButton
|
||||||
|
key='delete'
|
||||||
|
trigger={<Button variant='destructive'>{t('delete')}</Button>}
|
||||||
|
title={t('confirmDeleteTitle')}
|
||||||
|
description={t('confirmDeleteDesc')}
|
||||||
|
onConfirm={async () => {
|
||||||
|
toast.success(t('deleted'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
}}
|
||||||
|
cancelText={t('cancel')}
|
||||||
|
confirmText={t('confirm')}
|
||||||
|
/>,
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSort={async (source, target, items) => {
|
||||||
|
const sourceIndex = items.findIndex((item) => String(item.id) === source);
|
||||||
|
const targetIndex = items.findIndex((item) => String(item.id) === target);
|
||||||
|
|
||||||
|
const originalSorts = items.map((item) => item.sort);
|
||||||
|
|
||||||
|
const [movedItem] = items.splice(sourceIndex, 1);
|
||||||
|
items.splice(targetIndex, 0, movedItem!);
|
||||||
|
|
||||||
|
const updatedItems = items.map((item, index) => {
|
||||||
|
const originalSort = originalSorts[index];
|
||||||
|
const newSort = originalSort !== undefined ? originalSort : item.sort;
|
||||||
|
return { ...item, sort: newSort };
|
||||||
|
});
|
||||||
|
|
||||||
|
const changedItems = updatedItems.filter((item, index) => {
|
||||||
|
return item.sort !== items[index]?.sort;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (changedItems.length > 0) {
|
||||||
|
// nodeSort({
|
||||||
|
// sort: changedItems.map((item) => ({ id: item.id, sort: item.sort })),
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
return updatedItems;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
189
apps/admin/app/dashboard/servers/form-scheme.ts
Normal file
189
apps/admin/app/dashboard/servers/form-scheme.ts
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
export const protocols = [
|
||||||
|
'shadowsocks',
|
||||||
|
'vmess',
|
||||||
|
'vless',
|
||||||
|
'trojan',
|
||||||
|
'hysteria2',
|
||||||
|
'tuic',
|
||||||
|
'anytls',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const nullableString = z.string().nullish();
|
||||||
|
const portScheme = z.number().max(65535).nullish();
|
||||||
|
|
||||||
|
const securityConfigScheme = z
|
||||||
|
.object({
|
||||||
|
sni: nullableString,
|
||||||
|
allow_insecure: z.boolean().nullable().default(false),
|
||||||
|
fingerprint: nullableString,
|
||||||
|
reality_private_key: nullableString,
|
||||||
|
reality_public_key: nullableString,
|
||||||
|
reality_short_id: nullableString,
|
||||||
|
reality_server_addr: nullableString,
|
||||||
|
reality_server_port: portScheme,
|
||||||
|
})
|
||||||
|
.nullish();
|
||||||
|
|
||||||
|
const transportConfigScheme = z
|
||||||
|
.object({
|
||||||
|
path: nullableString,
|
||||||
|
host: nullableString,
|
||||||
|
service_name: nullableString,
|
||||||
|
})
|
||||||
|
.nullish();
|
||||||
|
|
||||||
|
const shadowsocksScheme = z.object({
|
||||||
|
method: z.string(),
|
||||||
|
port: portScheme,
|
||||||
|
server_key: nullableString,
|
||||||
|
});
|
||||||
|
|
||||||
|
const vmessScheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
transport: z.string(),
|
||||||
|
transport_config: transportConfigScheme,
|
||||||
|
security: z.string(),
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
});
|
||||||
|
|
||||||
|
const vlessScheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
transport: z.string(),
|
||||||
|
transport_config: transportConfigScheme,
|
||||||
|
security: z.string(),
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
flow: nullableString,
|
||||||
|
});
|
||||||
|
|
||||||
|
const trojanScheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
transport: z.string(),
|
||||||
|
transport_config: transportConfigScheme,
|
||||||
|
security: z.string(),
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
});
|
||||||
|
|
||||||
|
const hysteria2Scheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
hop_ports: nullableString,
|
||||||
|
hop_interval: z.number().nullish(),
|
||||||
|
obfs_password: nullableString,
|
||||||
|
security: z.string(),
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
});
|
||||||
|
|
||||||
|
const tuicScheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
disable_sni: z.boolean().default(false),
|
||||||
|
reduce_rtt: z.boolean().default(false),
|
||||||
|
udp_relay_mode: z.string().default('native'),
|
||||||
|
congestion_controller: z.string().default('bbr'),
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
});
|
||||||
|
|
||||||
|
const anytlsScheme = z.object({
|
||||||
|
port: portScheme,
|
||||||
|
security_config: securityConfigScheme,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const protocolConfigScheme = z.discriminatedUnion('protocol', [
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('shadowsocks'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: shadowsocksScheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('vmess'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: vmessScheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('vless'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: vlessScheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('trojan'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: trojanScheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('hysteria2'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: hysteria2Scheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('tuic'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: tuicScheme,
|
||||||
|
}),
|
||||||
|
z.object({
|
||||||
|
protocol: z.literal('anytls'),
|
||||||
|
enabled: z.boolean().default(false),
|
||||||
|
config: anytlsScheme,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const formScheme = z.object({
|
||||||
|
name: z.string(),
|
||||||
|
server_addr: z.string(),
|
||||||
|
country: z.string().optional(),
|
||||||
|
city: z.string().optional(),
|
||||||
|
protocols: z.array(protocolConfigScheme).min(1),
|
||||||
|
});
|
||||||
|
|
||||||
|
export function getProtocolDefaultConfig(proto: (typeof protocols)[number]) {
|
||||||
|
switch (proto) {
|
||||||
|
case 'shadowsocks':
|
||||||
|
return { method: 'chacha20-ietf-poly1305', port: null, server_key: null };
|
||||||
|
case 'vmess':
|
||||||
|
return {
|
||||||
|
port: null,
|
||||||
|
transport: 'tcp',
|
||||||
|
transport_config: null,
|
||||||
|
security: 'none',
|
||||||
|
security_config: null,
|
||||||
|
};
|
||||||
|
case 'vless':
|
||||||
|
return {
|
||||||
|
port: null,
|
||||||
|
transport: 'tcp',
|
||||||
|
transport_config: null,
|
||||||
|
security: 'none',
|
||||||
|
security_config: null,
|
||||||
|
flow: null,
|
||||||
|
};
|
||||||
|
case 'trojan':
|
||||||
|
return {
|
||||||
|
port: null,
|
||||||
|
transport: 'tcp',
|
||||||
|
transport_config: null,
|
||||||
|
security: 'tls',
|
||||||
|
security_config: {},
|
||||||
|
};
|
||||||
|
case 'hysteria2':
|
||||||
|
return {
|
||||||
|
port: null,
|
||||||
|
hop_ports: null,
|
||||||
|
hop_interval: null,
|
||||||
|
obfs_password: null,
|
||||||
|
security: 'tls',
|
||||||
|
security_config: {},
|
||||||
|
};
|
||||||
|
case 'tuic':
|
||||||
|
return {
|
||||||
|
port: null,
|
||||||
|
disable_sni: false,
|
||||||
|
reduce_rtt: false,
|
||||||
|
udp_relay_mode: 'native',
|
||||||
|
congestion_controller: 'bbr',
|
||||||
|
security_config: {},
|
||||||
|
};
|
||||||
|
case 'anytls':
|
||||||
|
return { port: null, security_config: {} };
|
||||||
|
default:
|
||||||
|
return {} as any;
|
||||||
|
}
|
||||||
|
}
|
||||||
579
apps/admin/app/dashboard/servers/page.tsx
Normal file
579
apps/admin/app/dashboard/servers/page.tsx
Normal file
@ -0,0 +1,579 @@
|
|||||||
|
'use client';
|
||||||
|
import { UserDetail } from '@/app/dashboard/user/user-detail';
|
||||||
|
import { IpLink } from '@/components/ip-link';
|
||||||
|
import { ProTable, ProTableActions } from '@/components/pro-table';
|
||||||
|
import { getUserSubscribeById } from '@/services/admin/user';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Badge } from '@workspace/ui/components/badge';
|
||||||
|
import { Button } from '@workspace/ui/components/button';
|
||||||
|
import { Card, CardContent } from '@workspace/ui/components/card';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@workspace/ui/components/sheet';
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from '@workspace/ui/components/tooltip';
|
||||||
|
import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
|
||||||
|
import { cn } from '@workspace/ui/lib/utils';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { useRef, useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import ServerConfig from './server-config';
|
||||||
|
import ServerForm from './server-form';
|
||||||
|
|
||||||
|
type ProtocolName = 'shadowsocks' | 'vmess' | 'vless' | 'trojan' | 'hysteria2' | 'tuic' | 'anytls';
|
||||||
|
type ProtocolEntry = { protocol: ProtocolName; enabled: boolean; config: Record<string, unknown> };
|
||||||
|
|
||||||
|
interface ServerFormFields {
|
||||||
|
name: string;
|
||||||
|
server_addr: string;
|
||||||
|
country?: string;
|
||||||
|
city?: string;
|
||||||
|
protocols: ProtocolEntry[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type ServerStatus = {
|
||||||
|
online?: unknown;
|
||||||
|
cpu?: number;
|
||||||
|
mem?: number;
|
||||||
|
disk?: number;
|
||||||
|
updated_at?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ServerItem = ServerFormFields & { id: number; status?: ServerStatus; [key: string]: unknown };
|
||||||
|
|
||||||
|
const mockList: ServerItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Server A',
|
||||||
|
server_addr: '1.1.1.1',
|
||||||
|
country: 'US',
|
||||||
|
city: 'SFO',
|
||||||
|
protocols: [
|
||||||
|
{
|
||||||
|
protocol: 'shadowsocks',
|
||||||
|
enabled: true,
|
||||||
|
config: { method: 'aes-128-gcm', port: 443, server_key: null },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'trojan',
|
||||||
|
enabled: true,
|
||||||
|
config: { port: 8443, transport: 'tcp', security: 'tls' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'vmess',
|
||||||
|
enabled: false,
|
||||||
|
config: {
|
||||||
|
port: 1443,
|
||||||
|
transport: 'websocket',
|
||||||
|
transport_config: { path: '/ws', host: 'example.com' },
|
||||||
|
security: 'tls',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
status: {
|
||||||
|
online: { 1001: ['1.2.3.4'], 1002: ['5.6.7.8', '9.9.9.9'] },
|
||||||
|
cpu: 34,
|
||||||
|
mem: 62,
|
||||||
|
disk: 48,
|
||||||
|
updated_at: Date.now() / 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Server B',
|
||||||
|
server_addr: '2.2.2.2',
|
||||||
|
country: 'JP',
|
||||||
|
city: 'Tokyo',
|
||||||
|
protocols: [
|
||||||
|
{
|
||||||
|
protocol: 'vmess',
|
||||||
|
enabled: true,
|
||||||
|
config: { port: 2443, transport: 'tcp', security: 'none' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'hysteria2',
|
||||||
|
enabled: true,
|
||||||
|
config: { port: 3443, hop_ports: '443,8443,10443', hop_interval: 15, security: 'tls' },
|
||||||
|
},
|
||||||
|
{ protocol: 'tuic', enabled: false, config: { port: 4443 } },
|
||||||
|
],
|
||||||
|
status: {
|
||||||
|
online: { 2001: ['10.0.0.1'] },
|
||||||
|
cpu: 72,
|
||||||
|
mem: 81,
|
||||||
|
disk: 67,
|
||||||
|
updated_at: Date.now() / 1000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Server C',
|
||||||
|
server_addr: '3.3.3.3',
|
||||||
|
country: 'DE',
|
||||||
|
city: 'FRA',
|
||||||
|
protocols: [
|
||||||
|
{ protocol: 'anytls', enabled: true, config: { port: 80 } },
|
||||||
|
{
|
||||||
|
protocol: 'shadowsocks',
|
||||||
|
enabled: false,
|
||||||
|
config: { method: 'chacha20-ietf-poly1305', port: 8080 },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
status: { online: {}, cpu: 0, mem: 0, disk: 0, updated_at: 0 },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let mockData: ServerItem[] = [...mockList];
|
||||||
|
const getServerList = async () => ({ list: mockData, total: mockData.length });
|
||||||
|
const createServer = async (values: Omit<ServerItem, 'id'>) => {
|
||||||
|
mockData.push({
|
||||||
|
id: Date.now(),
|
||||||
|
name: '',
|
||||||
|
server_addr: '',
|
||||||
|
protocols: [],
|
||||||
|
...values,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const updateServer = async (id: number, values: Omit<ServerItem, 'id'>) => {
|
||||||
|
mockData = mockData.map((i) => (i.id === id ? { ...i, ...values } : i));
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const deleteServer = async (id: number) => {
|
||||||
|
mockData = mockData.filter((i) => i.id !== id);
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PROTOCOL_COLORS: Record<ProtocolName, string> = {
|
||||||
|
shadowsocks: 'bg-green-500',
|
||||||
|
vmess: 'bg-rose-500',
|
||||||
|
vless: 'bg-blue-500',
|
||||||
|
trojan: 'bg-yellow-500',
|
||||||
|
hysteria2: 'bg-purple-500',
|
||||||
|
tuic: 'bg-cyan-500',
|
||||||
|
anytls: 'bg-gray-500',
|
||||||
|
};
|
||||||
|
|
||||||
|
function getEnabledProtocols(p: ServerItem['protocols']) {
|
||||||
|
return Array.isArray(p) ? p.filter((x) => x.enabled) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProtocolBadge({
|
||||||
|
item,
|
||||||
|
t,
|
||||||
|
}: {
|
||||||
|
item: ServerItem['protocols'][number];
|
||||||
|
t: (key: string) => string;
|
||||||
|
}) {
|
||||||
|
const color = PROTOCOL_COLORS[item.protocol];
|
||||||
|
const port = (item?.config as any)?.port as number | undefined;
|
||||||
|
const extra: string[] = [];
|
||||||
|
if ((item.config as any)?.transport) extra.push(String((item.config as any).transport));
|
||||||
|
if ((item.config as any)?.security && (item.config as any).security !== 'none')
|
||||||
|
extra.push(String((item.config as any).security));
|
||||||
|
const label = `${item.protocol}${port ? ` (${port})` : ''}`;
|
||||||
|
const tipParts = [label, extra.length ? `· ${extra.join(' / ')}` : ''].filter(Boolean);
|
||||||
|
const tooltip = tipParts.join(' ');
|
||||||
|
return (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Badge variant='outline' className={cn('text-primary-foreground', color)}>
|
||||||
|
{label}
|
||||||
|
</Badge>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>{tooltip || t('notAvailable')}</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PctBar({ value }: { value: number }) {
|
||||||
|
const v = Math.max(0, Math.min(100, Math.round(value)));
|
||||||
|
return (
|
||||||
|
<div className='min-w-24'>
|
||||||
|
<div className='text-xs leading-none'>{v}%</div>
|
||||||
|
<div className='bg-muted h-1.5 w-full rounded'>
|
||||||
|
<div className='bg-primary h-1.5 rounded' style={{ width: `${v}%` }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RegionIpCell({
|
||||||
|
country,
|
||||||
|
city,
|
||||||
|
ip,
|
||||||
|
t,
|
||||||
|
}: {
|
||||||
|
country?: string;
|
||||||
|
city?: string;
|
||||||
|
ip: string;
|
||||||
|
t: (key: string) => string;
|
||||||
|
}) {
|
||||||
|
const region = [country, city].filter(Boolean).join(' / ') || t('notAvailable');
|
||||||
|
return (
|
||||||
|
<div className='flex items-center gap-1'>
|
||||||
|
<Badge variant='outline'>{region}</Badge>
|
||||||
|
<Badge variant='outline'>{ip}</Badge>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function UserSubscribeInfo({
|
||||||
|
userId,
|
||||||
|
type,
|
||||||
|
t,
|
||||||
|
}: {
|
||||||
|
userId: number;
|
||||||
|
type: 'account' | 'subscribeName' | 'subscribeId' | 'traffic' | 'expireTime';
|
||||||
|
t: (key: string) => string;
|
||||||
|
}) {
|
||||||
|
const { data } = useQuery({
|
||||||
|
enabled: userId !== 0,
|
||||||
|
queryKey: ['getUserSubscribeById', userId],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data } = await getUserSubscribeById({ id: userId });
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (!data) return <span className='text-muted-foreground'>--</span>;
|
||||||
|
if (type === 'account')
|
||||||
|
return data.user_id ? (
|
||||||
|
<UserDetail id={data.user_id} />
|
||||||
|
) : (
|
||||||
|
<span className='text-muted-foreground'>--</span>
|
||||||
|
);
|
||||||
|
if (type === 'subscribeName')
|
||||||
|
return data.subscribe?.name ? (
|
||||||
|
<span className='text-sm'>{data.subscribe.name}</span>
|
||||||
|
) : (
|
||||||
|
<span className='text-muted-foreground'>--</span>
|
||||||
|
);
|
||||||
|
if (type === 'subscribeId')
|
||||||
|
return data.id ? (
|
||||||
|
<span className='font-mono text-sm'>{data.id}</span>
|
||||||
|
) : (
|
||||||
|
<span className='text-muted-foreground'>--</span>
|
||||||
|
);
|
||||||
|
if (type === 'traffic') {
|
||||||
|
const used = (data.upload || 0) + (data.download || 0);
|
||||||
|
const total = data.traffic || 0;
|
||||||
|
return (
|
||||||
|
<div className='min-w-0 text-sm'>{`${(used / 1024 ** 3).toFixed(2)} GB / ${total > 0 ? (total / 1024 ** 3).toFixed(2) + ' GB' : t('unlimited')}`}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (type === 'expireTime') {
|
||||||
|
if (!data.expire_time) return <span className='text-muted-foreground'>--</span>;
|
||||||
|
const expired = data.expire_time < Date.now() / 1000;
|
||||||
|
return (
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
<span className='text-sm'>{new Date((data.expire_time || 0) * 1000).toLocaleString()}</span>
|
||||||
|
{expired && (
|
||||||
|
<Badge variant='destructive' className='w-fit px-1 py-0 text-xs'>
|
||||||
|
{t('expired')}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <span className='text-muted-foreground'>--</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeOnlineMap(online: unknown): { uid: string; ips: string[] }[] {
|
||||||
|
if (!online || typeof online !== 'object' || Array.isArray(online)) return [];
|
||||||
|
const m = online as Record<string, unknown>;
|
||||||
|
const rows = Object.entries(m).map(([uid, ips]) => {
|
||||||
|
if (Array.isArray(ips)) return { uid, ips: (ips as unknown[]).map(String) };
|
||||||
|
if (typeof ips === 'string') return { uid, ips: [ips] };
|
||||||
|
const o = ips as Record<string, unknown>;
|
||||||
|
if (Array.isArray(o?.ips)) return { uid, ips: (o.ips as unknown[]).map(String) };
|
||||||
|
return { uid, ips: [] };
|
||||||
|
});
|
||||||
|
return rows.filter((r) => r.ips.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function OnlineUsersCell({ status, t }: { status?: ServerStatus; t: (key: string) => string }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const rows = normalizeOnlineMap(status?.online);
|
||||||
|
const count = rows.length;
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<button className='hover:text-foreground text-muted-foreground flex items-center gap-2 bg-transparent p-0 text-sm'>
|
||||||
|
<Badge variant='secondary'>{count}</Badge>
|
||||||
|
<span>{t('onlineUsers')}</span>
|
||||||
|
</button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent className='sm:w=[900px] h-screen w-screen max-w-none sm:h-auto sm:max-w-[90vw]'>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{t('onlineUsers')}</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className='-mx-6 h-[calc(100vh-48px-16px)] overflow-y-auto px-6 py-4 sm:h-[calc(100dvh-48px-16px-env(safe-area-inset-top))]'>
|
||||||
|
<ProTable<
|
||||||
|
{
|
||||||
|
uid: string;
|
||||||
|
ips: string[];
|
||||||
|
},
|
||||||
|
Record<string, unknown>
|
||||||
|
>
|
||||||
|
header={{ hidden: true }}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
accessorKey: 'ips',
|
||||||
|
header: t('ipAddresses'),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const ips = row.original.ips;
|
||||||
|
return (
|
||||||
|
<div className='flex min-w-0 flex-col gap-1'>
|
||||||
|
{ips.map((ip, i) => (
|
||||||
|
<div
|
||||||
|
key={`${row.original.uid}-${ip}`}
|
||||||
|
className='whitespace-nowrap text-sm'
|
||||||
|
>
|
||||||
|
{i === 0 ? (
|
||||||
|
<IpLink ip={ip} className='font-medium' />
|
||||||
|
) : (
|
||||||
|
<IpLink ip={ip} className='text-muted-foreground' />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'user',
|
||||||
|
header: t('user'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='account' t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'subscription',
|
||||||
|
header: t('subscription'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeName' t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'subscribeId',
|
||||||
|
header: t('subscribeId'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeId' t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'traffic',
|
||||||
|
header: t('traffic'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='traffic' t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'expireTime',
|
||||||
|
header: t('expireTime'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<UserSubscribeInfo userId={Number(row.original.uid)} type='expireTime' t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
request={async () => ({ list: rows, total: rows.length })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ServersPage() {
|
||||||
|
const t = useTranslations('servers');
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const ref = useRef<ProTableActions>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='space-y-4'>
|
||||||
|
<Card>
|
||||||
|
<CardContent className='p-4'>
|
||||||
|
<ServerConfig />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<ProTable<ServerItem, { search: string }>
|
||||||
|
action={ref}
|
||||||
|
header={{
|
||||||
|
title: t('pageTitle'),
|
||||||
|
toolbar: (
|
||||||
|
<ServerForm
|
||||||
|
trigger={t('create')}
|
||||||
|
title={t('drawerCreateTitle')}
|
||||||
|
loading={loading}
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
setLoading(true);
|
||||||
|
await createServer(values as any);
|
||||||
|
toast.success(t('created'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
setLoading(false);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
accessorKey: 'id',
|
||||||
|
header: t('id'),
|
||||||
|
cell: ({ row }) => <Badge>{row.getValue('id')}</Badge>,
|
||||||
|
},
|
||||||
|
{ accessorKey: 'name', header: t('name') },
|
||||||
|
{
|
||||||
|
id: 'region_ip',
|
||||||
|
header: t('serverAddress'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<RegionIpCell
|
||||||
|
country={row.original.country as string}
|
||||||
|
city={row.original.city as string}
|
||||||
|
ip={row.original.server_addr as string}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'protocols',
|
||||||
|
header: t('protocols'),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const enabled = getEnabledProtocols(row.original.protocols);
|
||||||
|
if (!enabled.length) return t('noData');
|
||||||
|
return (
|
||||||
|
<div className='flex flex-wrap gap-1'>
|
||||||
|
{enabled.map((p, idx) => (
|
||||||
|
<ProtocolBadge key={idx} item={p} t={t} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'status',
|
||||||
|
header: t('status'),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const s = (row.original.status ?? {}) as ServerStatus;
|
||||||
|
const on = !!(
|
||||||
|
s.online &&
|
||||||
|
typeof s.online === 'object' &&
|
||||||
|
!Array.isArray(s.online) &&
|
||||||
|
Object.keys(s.online as Record<string, unknown>).length
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'inline-block h-2.5 w-2.5 rounded-full',
|
||||||
|
on ? 'bg-emerald-500' : 'bg-zinc-400',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className='text-sm'>{on ? t('online') : t('offline')}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'cpu',
|
||||||
|
header: t('cpu'),
|
||||||
|
cell: ({ row }) => <PctBar value={(row.original.status?.cpu as number) ?? 0} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'mem',
|
||||||
|
header: t('memory'),
|
||||||
|
cell: ({ row }) => <PctBar value={(row.original.status?.mem as number) ?? 0} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'disk',
|
||||||
|
header: t('disk'),
|
||||||
|
cell: ({ row }) => <PctBar value={(row.original.status?.disk as number) ?? 0} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'online_users',
|
||||||
|
header: t('onlineUsers'),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<OnlineUsersCell status={row.original.status as ServerStatus} t={t} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
params={[{ key: 'search' }]}
|
||||||
|
request={async (_pagination, filter) => {
|
||||||
|
const { list } = await getServerList();
|
||||||
|
const keyword = (filter?.search || '').toLowerCase().trim();
|
||||||
|
const filtered = keyword
|
||||||
|
? list.filter((item) =>
|
||||||
|
[item.name, item.server_addr, item.country, item.city]
|
||||||
|
.filter(Boolean)
|
||||||
|
.some((v) => String(v).toLowerCase().includes(keyword)),
|
||||||
|
)
|
||||||
|
: list;
|
||||||
|
return { list: filtered, total: filtered.length };
|
||||||
|
}}
|
||||||
|
actions={{
|
||||||
|
render: (row) => [
|
||||||
|
<ServerForm
|
||||||
|
key='edit'
|
||||||
|
trigger={t('edit')}
|
||||||
|
title={t('drawerEditTitle')}
|
||||||
|
initialValues={{
|
||||||
|
name: row.name as string,
|
||||||
|
server_addr: row.server_addr as string,
|
||||||
|
country: (row as any).country,
|
||||||
|
city: (row as any).city,
|
||||||
|
protocols: (row as ServerItem).protocols,
|
||||||
|
}}
|
||||||
|
loading={loading}
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
setLoading(true);
|
||||||
|
await updateServer(row.id as number, values as any);
|
||||||
|
toast.success(t('updated'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
setLoading(false);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
<ConfirmButton
|
||||||
|
key='delete'
|
||||||
|
trigger={<Button variant='destructive'>{t('delete')}</Button>}
|
||||||
|
title={t('confirmDeleteTitle')}
|
||||||
|
description={t('confirmDeleteDesc')}
|
||||||
|
onConfirm={async () => {
|
||||||
|
await deleteServer(row.id as number);
|
||||||
|
toast.success(t('deleted'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
}}
|
||||||
|
cancelText={t('cancel')}
|
||||||
|
confirmText={t('confirm')}
|
||||||
|
/>,
|
||||||
|
<Button
|
||||||
|
key='copy'
|
||||||
|
variant='outline'
|
||||||
|
onClick={async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const { id, ...others } = row as ServerItem;
|
||||||
|
await createServer(others as any);
|
||||||
|
toast.success(t('copied'));
|
||||||
|
ref.current?.refresh();
|
||||||
|
setLoading(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('copy')}
|
||||||
|
</Button>,
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
399
apps/admin/app/dashboard/servers/server-config.tsx
Normal file
399
apps/admin/app/dashboard/servers/server-config.tsx
Normal file
@ -0,0 +1,399 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getNodeConfig,
|
||||||
|
getNodeMultiplier,
|
||||||
|
setNodeMultiplier,
|
||||||
|
updateNodeConfig,
|
||||||
|
} from '@/services/admin/system';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { Button } from '@workspace/ui/components/button';
|
||||||
|
import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@workspace/ui/components/form';
|
||||||
|
import { Label } from '@workspace/ui/components/label';
|
||||||
|
import { ScrollArea } from '@workspace/ui/components/scroll-area';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@workspace/ui/components/sheet';
|
||||||
|
import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
|
||||||
|
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||||
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
||||||
|
import { DicesIcon } from 'lucide-react';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { uid } from 'radash';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { Cell, Legend, Pie, PieChart } from 'recharts';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const COLORS = [
|
||||||
|
'hsl(var(--chart-1))',
|
||||||
|
'hsl(var(--chart-2))',
|
||||||
|
'hsl(var(--chart-3))',
|
||||||
|
'hsl(var(--chart-4))',
|
||||||
|
'hsl(var(--chart-5))',
|
||||||
|
];
|
||||||
|
|
||||||
|
const MINUTES_IN_DAY = 1440;
|
||||||
|
|
||||||
|
function getTimeRangeData(slots: API.TimePeriod[]) {
|
||||||
|
const timePoints = slots
|
||||||
|
.filter((slot) => slot.start_time && slot.end_time)
|
||||||
|
.flatMap((slot) => {
|
||||||
|
const [startH = 0, startM = 0] = slot.start_time.split(':').map(Number);
|
||||||
|
const [endH = 0, endM = 0] = slot.end_time.split(':').map(Number);
|
||||||
|
const start = startH * 60 + startM;
|
||||||
|
let end = endH * 60 + endM;
|
||||||
|
if (end < start) end += MINUTES_IN_DAY;
|
||||||
|
return { start, end, multiplier: slot.multiplier };
|
||||||
|
})
|
||||||
|
.sort((a, b) => a.start - b.start);
|
||||||
|
|
||||||
|
const result: { name: string; value: number; multiplier: number }[] = [];
|
||||||
|
let currentMinute = 0;
|
||||||
|
|
||||||
|
timePoints.forEach((point) => {
|
||||||
|
if (point.start > currentMinute) {
|
||||||
|
result.push({
|
||||||
|
name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - ${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')}`,
|
||||||
|
value: point.start - currentMinute,
|
||||||
|
multiplier: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
result.push({
|
||||||
|
name: `${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')} - ${Math.floor((point.end / 60) % 24)}:${String(point.end % 60).padStart(2, '0')}`,
|
||||||
|
value: point.end - point.start,
|
||||||
|
multiplier: point.multiplier,
|
||||||
|
});
|
||||||
|
currentMinute = point.end % MINUTES_IN_DAY;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (currentMinute < MINUTES_IN_DAY) {
|
||||||
|
result.push({
|
||||||
|
name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - 24:00`,
|
||||||
|
value: MINUTES_IN_DAY - currentMinute,
|
||||||
|
multiplier: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeConfigSchema = z.object({
|
||||||
|
node_secret: z.string().optional(),
|
||||||
|
node_pull_interval: z.number().or(z.string().pipe(z.coerce.number())).optional(),
|
||||||
|
node_push_interval: z.number().or(z.string().pipe(z.coerce.number())).optional(),
|
||||||
|
});
|
||||||
|
type NodeConfigFormData = z.infer<typeof nodeConfigSchema>;
|
||||||
|
|
||||||
|
export default function ServerConfig() {
|
||||||
|
const t = useTranslations('servers');
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [timeSlots, setTimeSlots] = useState<API.TimePeriod[]>([]);
|
||||||
|
|
||||||
|
const { data: cfgResp, refetch: refetchCfg } = useQuery({
|
||||||
|
queryKey: ['getNodeConfig'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data } = await getNodeConfig();
|
||||||
|
return data.data as API.NodeConfig | undefined;
|
||||||
|
},
|
||||||
|
enabled: open,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: periodsResp, refetch: refetchPeriods } = useQuery({
|
||||||
|
queryKey: ['getNodeMultiplier'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data } = await getNodeMultiplier();
|
||||||
|
return (data.data?.periods || []) as API.TimePeriod[];
|
||||||
|
},
|
||||||
|
enabled: open,
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<NodeConfigFormData>({
|
||||||
|
resolver: zodResolver(nodeConfigSchema),
|
||||||
|
defaultValues: {
|
||||||
|
node_secret: '',
|
||||||
|
node_pull_interval: undefined,
|
||||||
|
node_push_interval: undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (cfgResp) {
|
||||||
|
form.reset({
|
||||||
|
node_secret: cfgResp.node_secret ?? '',
|
||||||
|
node_pull_interval: cfgResp.node_pull_interval as number | undefined,
|
||||||
|
node_push_interval: cfgResp.node_push_interval as number | undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [cfgResp, form]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (periodsResp) {
|
||||||
|
setTimeSlots(periodsResp);
|
||||||
|
}
|
||||||
|
}, [periodsResp]);
|
||||||
|
|
||||||
|
const chartTimeSlots = useMemo(() => getTimeRangeData(timeSlots), [timeSlots]);
|
||||||
|
const chartConfig = useMemo(() => {
|
||||||
|
return chartTimeSlots.reduce(
|
||||||
|
(acc, item, index) => {
|
||||||
|
acc[item.name] = {
|
||||||
|
label: item.name,
|
||||||
|
color: COLORS[index % COLORS.length] || 'hsl(var(--default-chart-color))',
|
||||||
|
};
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{} as Record<string, { label: string; color: string }>,
|
||||||
|
);
|
||||||
|
}, [chartTimeSlots]);
|
||||||
|
|
||||||
|
async function onSubmit(values: NodeConfigFormData) {
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await updateNodeConfig(values as API.NodeConfig);
|
||||||
|
toast.success(t('config.saveSuccess'));
|
||||||
|
await refetchCfg();
|
||||||
|
setOpen(false);
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function savePeriods() {
|
||||||
|
await setNodeMultiplier({ periods: timeSlots });
|
||||||
|
await refetchPeriods();
|
||||||
|
toast.success(t('config.saveSuccess'));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<div className='flex cursor-pointer items-center justify-between'>
|
||||||
|
<div className='flex items-center gap-3'>
|
||||||
|
<div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
|
||||||
|
<Icon icon='mdi:server-cog' className='text-primary h-5 w-5' />
|
||||||
|
</div>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<p className='font-medium'>{t('config.title')}</p>
|
||||||
|
<p className='text-muted-foreground text-sm'>{t('config.description')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Icon icon='mdi:chevron-right' className='size-6' />
|
||||||
|
</div>
|
||||||
|
</SheetTrigger>
|
||||||
|
|
||||||
|
<SheetContent className='w-[720px] max-w-full md:max-w-screen-md'>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{t('config.title')}</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
id='server-config-form'
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className='space-y-4 pt-4'
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='node_secret'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('config.communicationKey')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
placeholder={t('config.inputPlaceholder')}
|
||||||
|
value={field.value || ''}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
suffix={
|
||||||
|
<div className='bg-muted flex h-9 items-center px-3'>
|
||||||
|
<DicesIcon
|
||||||
|
onClick={() => {
|
||||||
|
const id = uid(32).toLowerCase();
|
||||||
|
const formatted = `${id.slice(0, 8)}-${id.slice(8, 12)}-${id.slice(12, 16)}-${id.slice(16, 20)}-${id.slice(20)}`;
|
||||||
|
form.setValue('node_secret', formatted);
|
||||||
|
}}
|
||||||
|
className='cursor-pointer'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t('config.communicationKeyDescription')}</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='node_pull_interval'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('config.nodePullInterval')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
type='number'
|
||||||
|
min={0}
|
||||||
|
suffix='S'
|
||||||
|
value={field.value as any}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
placeholder={t('config.inputPlaceholder')}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t('config.nodePullIntervalDescription')}</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name='node_push_interval'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('config.nodePushInterval')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
type='number'
|
||||||
|
min={0}
|
||||||
|
step={0.1}
|
||||||
|
value={field.value as any}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
placeholder={t('config.inputPlaceholder')}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t('config.nodePushIntervalDescription')}</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='mt-6 space-y-3'>
|
||||||
|
<Label className='text-base'>{t('config.dynamicMultiplier')}</Label>
|
||||||
|
<p className='text-muted-foreground text-sm'>
|
||||||
|
{t('config.dynamicMultiplierDescription')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className='flex flex-col-reverse gap-8 md:flex-row md:items-start'>
|
||||||
|
<div className='w-full md:w-1/2'>
|
||||||
|
<ArrayInput<API.TimePeriod>
|
||||||
|
fields={[
|
||||||
|
{ name: 'start_time', prefix: t('config.startTime'), type: 'time' },
|
||||||
|
{ name: 'end_time', prefix: t('config.endTime'), type: 'time' },
|
||||||
|
{
|
||||||
|
name: 'multiplier',
|
||||||
|
prefix: t('config.multiplier'),
|
||||||
|
type: 'number',
|
||||||
|
placeholder: '0',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
value={timeSlots}
|
||||||
|
onChange={setTimeSlots}
|
||||||
|
/>
|
||||||
|
<div className='mt-3 flex gap-2'>
|
||||||
|
<Button
|
||||||
|
size='sm'
|
||||||
|
variant='outline'
|
||||||
|
onClick={() => setTimeSlots(periodsResp || [])}
|
||||||
|
>
|
||||||
|
{t('config.reset')}
|
||||||
|
</Button>
|
||||||
|
<Button size='sm' onClick={savePeriods}>
|
||||||
|
{t('config.save')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='w-full md:w-1/2'>
|
||||||
|
<ChartContainer
|
||||||
|
config={chartConfig}
|
||||||
|
className='mx-auto aspect-[4/3] max-w-[400px]'
|
||||||
|
>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={chartTimeSlots}
|
||||||
|
cx='50%'
|
||||||
|
cy='50%'
|
||||||
|
labelLine={false}
|
||||||
|
outerRadius='80%'
|
||||||
|
fill='#8884d8'
|
||||||
|
dataKey='value'
|
||||||
|
label={({ percent, multiplier }) =>
|
||||||
|
`${(multiplier || 0)?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{chartTimeSlots.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<ChartTooltip
|
||||||
|
content={({ payload }) => {
|
||||||
|
if (payload && payload.length) {
|
||||||
|
const d = payload[0]?.payload as any;
|
||||||
|
return (
|
||||||
|
<div className='bg-background rounded-lg border p-2 shadow-sm'>
|
||||||
|
<div className='grid grid-cols-2 gap-2'>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<span className='text-muted-foreground text-[0.70rem] uppercase'>
|
||||||
|
{t('config.timeSlot')}
|
||||||
|
</span>
|
||||||
|
<span className='text-muted-foreground font-bold'>
|
||||||
|
{d.name || '—'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<span className='text-muted-foreground text-[0.70rem] uppercase'>
|
||||||
|
{t('config.multiplier')}
|
||||||
|
</span>
|
||||||
|
<span className='font-bold'>
|
||||||
|
{Number(d.multiplier).toFixed(2)}x
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Legend />
|
||||||
|
</PieChart>
|
||||||
|
</ChartContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
<SheetFooter className='flex-row justify-end gap-2 pt-3'>
|
||||||
|
<Button variant='outline' disabled={saving} onClick={() => setOpen(false)}>
|
||||||
|
{t('config.actions.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button disabled={saving} type='submit' form='server-config-form'>
|
||||||
|
<Icon icon='mdi:loading' className={saving ? 'mr-2 animate-spin' : 'hidden'} />
|
||||||
|
{t('config.actions.save')}
|
||||||
|
</Button>
|
||||||
|
</SheetFooter>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
858
apps/admin/app/dashboard/servers/server-form.tsx
Normal file
858
apps/admin/app/dashboard/servers/server-form.tsx
Normal file
@ -0,0 +1,858 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Button } from '@workspace/ui/components/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@workspace/ui/components/form';
|
||||||
|
import { ScrollArea } from '@workspace/ui/components/scroll-area';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@workspace/ui/components/select';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@workspace/ui/components/sheet';
|
||||||
|
import { Switch } from '@workspace/ui/components/switch';
|
||||||
|
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
||||||
|
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
||||||
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
||||||
|
import { cn } from '@workspace/ui/lib/utils';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useFieldArray, useForm, useWatch } from 'react-hook-form';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { formScheme, getProtocolDefaultConfig, protocols as PROTOCOLS } from './form-scheme';
|
||||||
|
|
||||||
|
interface ServerFormProps<T> {
|
||||||
|
onSubmit: (data: T) => Promise<boolean> | boolean;
|
||||||
|
initialValues?: T | any;
|
||||||
|
loading?: boolean;
|
||||||
|
trigger: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function titleCase(s: string) {
|
||||||
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeValues(raw: any) {
|
||||||
|
const map = new Map<string, any>();
|
||||||
|
const given = Array.isArray(raw?.protocols) ? raw.protocols : [];
|
||||||
|
for (const it of given) map.set(it?.protocol, it);
|
||||||
|
|
||||||
|
const normalized = {
|
||||||
|
name: raw?.name ?? '',
|
||||||
|
server_addr: raw?.server_addr ?? '',
|
||||||
|
country: raw?.country ?? '',
|
||||||
|
city: raw?.city ?? '',
|
||||||
|
protocols: PROTOCOLS.map((p) => {
|
||||||
|
const incoming = map.get(p);
|
||||||
|
const def = getProtocolDefaultConfig(p as any);
|
||||||
|
if (incoming) {
|
||||||
|
return {
|
||||||
|
protocol: p,
|
||||||
|
enabled: !!incoming.enabled,
|
||||||
|
config: { ...def, ...(incoming.config ?? {}) },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { protocol: p, enabled: false, config: def };
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
return normalized;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ServerForm<T extends { [x: string]: any }>({
|
||||||
|
onSubmit,
|
||||||
|
initialValues,
|
||||||
|
loading,
|
||||||
|
trigger,
|
||||||
|
title,
|
||||||
|
}: Readonly<ServerFormProps<T>>) {
|
||||||
|
const t = useTranslations('servers');
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const defaultValues = useMemo(
|
||||||
|
() =>
|
||||||
|
normalizeValues({
|
||||||
|
name: '',
|
||||||
|
server_addr: '',
|
||||||
|
country: '',
|
||||||
|
city: '',
|
||||||
|
protocols: [],
|
||||||
|
}),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const form = useForm<any>({
|
||||||
|
resolver: zodResolver(formScheme),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
const { control } = form;
|
||||||
|
useFieldArray({ control, name: 'protocols' });
|
||||||
|
|
||||||
|
const [activeProto, setActiveProto] = useState(PROTOCOLS[0]);
|
||||||
|
const activeIndex = useMemo(() => PROTOCOLS.findIndex((p) => p === activeProto), [activeProto]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialValues) {
|
||||||
|
const normalized = normalizeValues(initialValues);
|
||||||
|
form.reset(normalized);
|
||||||
|
const enabledFirst = normalized.protocols.find((p: any) => p.enabled)?.protocol;
|
||||||
|
setActiveProto((enabledFirst as any) || PROTOCOLS[0]);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [initialValues]);
|
||||||
|
|
||||||
|
async function handleSubmit(data: { [x: string]: any }) {
|
||||||
|
const ok = await onSubmit(data as unknown as T);
|
||||||
|
if (ok) setOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProtocolEditor({ idx, proto }: { idx: number; proto: string }) {
|
||||||
|
const transport = useWatch({ control, name: `protocols.${idx}.config.transport` as const });
|
||||||
|
const security = useWatch({ control, name: `protocols.${idx}.config.security` as const });
|
||||||
|
const method = useWatch({ control, name: `protocols.${idx}.config.method` as const });
|
||||||
|
const enabled = useWatch({ control, name: `protocols.${idx}.enabled` as const });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='grid gap-4 p-3'>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.enabled` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className='flex items-center justify-between gap-2'>
|
||||||
|
<FormLabel className='m-0'>{t('enabled')}</FormLabel>
|
||||||
|
<Switch
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
field.onChange(checked);
|
||||||
|
if (checked) {
|
||||||
|
form.setValue(
|
||||||
|
`protocols.${idx}.config` as const,
|
||||||
|
getProtocolDefaultConfig(proto as any),
|
||||||
|
);
|
||||||
|
if (['trojan', 'hysteria2'].includes(proto)) {
|
||||||
|
form.setValue(`protocols.${idx}.config.security` as const, 'tls');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{enabled && (
|
||||||
|
<>
|
||||||
|
{['shadowsocks'].includes(proto) && (
|
||||||
|
<div className='grid grid-cols-2 gap-2'>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.method` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('encryption_method')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Select
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={(value) => field.onChange(value)}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('select_encryption_method')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='aes-128-gcm'>aes-128-gcm</SelectItem>
|
||||||
|
<SelectItem value='aes-192-gcm'>aes-192-gcm</SelectItem>
|
||||||
|
<SelectItem value='aes-256-gcm'>aes-256-gcm</SelectItem>
|
||||||
|
<SelectItem value='chacha20-ietf-poly1305'>
|
||||||
|
chacha20-ietf-poly1305
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value='2022-blake3-aes-128-gcm'>
|
||||||
|
2022-blake3-aes-128-gcm
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value='2022-blake3-aes-256-gcm'>
|
||||||
|
2022-blake3-aes-256-gcm
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value='2022-blake3-chacha20-poly1305'>
|
||||||
|
2022-blake3-chacha20-poly1305
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.port` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('port')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
type='number'
|
||||||
|
step={1}
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
placeholder={t('port_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{[
|
||||||
|
'2022-blake3-aes-128-gcm',
|
||||||
|
'2022-blake3-aes-256-gcm',
|
||||||
|
'2022-blake3-chacha20-poly1305',
|
||||||
|
].includes(method as any) && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.server_key` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('server_key')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{['vmess', 'vless', 'trojan', 'hysteria2', 'tuic', 'anytls'].includes(proto) && (
|
||||||
|
<div
|
||||||
|
className={cn('flex gap-4 *:flex-1', {
|
||||||
|
'grid grid-cols-2': ['hysteria2', 'tuic'].includes(proto),
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.port` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('port')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
type='number'
|
||||||
|
step={1}
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
placeholder={t('port_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{proto === 'vless' && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.flow` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('flow')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='none'>NONE</SelectItem>
|
||||||
|
<SelectItem value='xtls-rprx-vision'>XTLS-RPRX-Vision</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{proto === 'hysteria2' && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.obfs_password` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('obfs_password')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('obfs_password_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.hop_ports` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('hop_ports')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('hop_ports_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.hop_interval` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('hop_interval')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
type='number'
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
suffix={t('unitSecondsShort')}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{proto === 'tuic' && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.udp_relay_mode` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('udp_relay_mode')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='native'>Native</SelectItem>
|
||||||
|
<SelectItem value='quic'>QUIC</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.congestion_controller` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('congestion_controller')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='bbr'>BBR</SelectItem>
|
||||||
|
<SelectItem value='cubic'>Cubic</SelectItem>
|
||||||
|
<SelectItem value='reno'>Reno</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className='flex gap-2'>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.disable_sni` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('disable_sni')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className='pt-2'>
|
||||||
|
<Switch
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={(checked) => field.onChange(checked)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.reduce_rtt` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('reduce_rtt')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className='pt-2'>
|
||||||
|
<Switch
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={(checked) => field.onChange(checked)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{['vmess', 'vless', 'trojan'].includes(proto) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className='flex flex-row items-center justify-between p-3'>
|
||||||
|
<CardTitle>{t('transport_title')}</CardTitle>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.transport` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className='!mt-0 min-w-32'>
|
||||||
|
<FormControl>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='tcp'>TCP</SelectItem>
|
||||||
|
<SelectItem value='websocket'>WebSocket</SelectItem>
|
||||||
|
{proto === 'vless' && <SelectItem value='http2'>HTTP/2</SelectItem>}
|
||||||
|
<SelectItem value='grpc'>gRPC</SelectItem>
|
||||||
|
{['vmess', 'vless'].includes(proto) && (
|
||||||
|
<SelectItem value='httpupgrade'>HTTP Upgrade</SelectItem>
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CardHeader>
|
||||||
|
{transport !== 'tcp' && (
|
||||||
|
<CardContent className='flex gap-4 p-3'>
|
||||||
|
{['websocket', 'http2', 'httpupgrade'].includes(transport as any) && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.transport_config.path` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('path')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.transport_config.host` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('host')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{transport === 'grpc' && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.transport_config.service_name` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('service_name')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{['vmess', 'vless', 'trojan', 'anytls', 'tuic', 'hysteria2'].includes(proto) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className='flex flex-row items-center justify-between p-3'>
|
||||||
|
<CardTitle>{t('security_title')}</CardTitle>
|
||||||
|
{['vmess', 'vless', 'trojan'].includes(proto) && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.security` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className='!mt-0 min-w-32'>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{['vmess', 'vless'].includes(proto) && (
|
||||||
|
<SelectItem value='none'>NONE</SelectItem>
|
||||||
|
)}
|
||||||
|
<SelectItem value='tls'>TLS</SelectItem>
|
||||||
|
{proto === 'vless' && (
|
||||||
|
<SelectItem value='reality'>Reality</SelectItem>
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
{(['anytls', 'tuic', 'hysteria2'].includes(proto) ||
|
||||||
|
(['vmess', 'vless', 'trojan'].includes(proto) && security !== 'none')) && (
|
||||||
|
<CardContent className='grid grid-cols-2 gap-4 p-3'>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.security_config.sni` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_sni')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{proto === 'vless' && security === 'reality' && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={
|
||||||
|
`protocols.${idx}.config.security_config.reality_server_addr` as const
|
||||||
|
}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_server_address')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('security_server_address_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={
|
||||||
|
`protocols.${idx}.config.security_config.reality_server_port` as const
|
||||||
|
}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_server_port')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
type='number'
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
placeholder={t('security_server_port_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={
|
||||||
|
`protocols.${idx}.config.security_config.reality_private_key` as const
|
||||||
|
}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_private_key')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('security_private_key_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={
|
||||||
|
`protocols.${idx}.config.security_config.reality_public_key` as const
|
||||||
|
}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_public_key')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('security_public_key_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.security_config.reality_short_id` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_short_id')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('security_short_id_placeholder')}
|
||||||
|
onValueChange={(v) => field.onChange(v)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{proto === 'vless' && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.security_config.fingerprint` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_fingerprint')}</FormLabel>
|
||||||
|
<Select value={field.value} onValueChange={(v) => field.onChange(v)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t('please_select')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value='chrome'>Chrome</SelectItem>
|
||||||
|
<SelectItem value='firefox'>Firefox</SelectItem>
|
||||||
|
<SelectItem value='safari'>Safari</SelectItem>
|
||||||
|
<SelectItem value='ios'>iOS</SelectItem>
|
||||||
|
<SelectItem value='android'>Android</SelectItem>
|
||||||
|
<SelectItem value='edge'>Edge</SelectItem>
|
||||||
|
<SelectItem value='360'>360</SelectItem>
|
||||||
|
<SelectItem value='qq'>QQ</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`protocols.${idx}.config.security_config.allow_insecure` as const}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('security_allow_insecure')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className='pt-2'>
|
||||||
|
<Switch
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={(checked) => field.onChange(checked)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
if (!initialValues) {
|
||||||
|
form.reset(defaultValues);
|
||||||
|
setActiveProto(PROTOCOLS[0]);
|
||||||
|
}
|
||||||
|
setOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{trigger}
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent className='w-[580px] max-w-full md:max-w-screen-md'>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{title}</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
|
||||||
|
<Form {...form}>
|
||||||
|
<form className='grid grid-cols-1 gap-2 px-6 pt-4'>
|
||||||
|
<div className='grid grid-cols-2 gap-2'>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name='name'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('name')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name='server_addr'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('server_addr')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name='country'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('country')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name='city'
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t('city')}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs
|
||||||
|
value={activeProto}
|
||||||
|
onValueChange={(v) => setActiveProto(v as any)}
|
||||||
|
className='w-full pt-3'
|
||||||
|
>
|
||||||
|
<TabsList className='h-full w-full flex-wrap md:flex-nowrap'>
|
||||||
|
{PROTOCOLS.map((p) => (
|
||||||
|
<TabsTrigger value={p} key={p} className='relative'>
|
||||||
|
<div className='flex items-center gap-2'>{titleCase(p)}</div>
|
||||||
|
</TabsTrigger>
|
||||||
|
))}
|
||||||
|
</TabsList>
|
||||||
|
</Tabs>
|
||||||
|
<ProtocolEditor idx={activeIndex} proto={activeProto as string} />
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</ScrollArea>
|
||||||
|
<SheetFooter className='flex-row justify-end gap-2 pt-3'>
|
||||||
|
<Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
|
||||||
|
{t('cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={loading}
|
||||||
|
onClick={form.handleSubmit(handleSubmit, () => {
|
||||||
|
toast.error(t('validation_failed'));
|
||||||
|
return false;
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />} {t('confirm')}
|
||||||
|
</Button>
|
||||||
|
</SheetFooter>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,28 +1,137 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import { navs } from '@/config/navs';
|
import { navs } from '@/config/navs';
|
||||||
import useGlobalStore from '@/config/use-global';
|
import useGlobalStore from '@/config/use-global';
|
||||||
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarContent,
|
SidebarContent,
|
||||||
SidebarGroup,
|
SidebarGroup,
|
||||||
SidebarGroupContent,
|
SidebarGroupContent,
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarHeader,
|
SidebarHeader,
|
||||||
SidebarMenu,
|
SidebarMenu,
|
||||||
SidebarMenuButton,
|
SidebarMenuButton,
|
||||||
SidebarMenuItem,
|
SidebarMenuItem,
|
||||||
|
useSidebar,
|
||||||
} from '@workspace/ui/components/sidebar';
|
} from '@workspace/ui/components/sidebar';
|
||||||
import { Icon } from '@workspace/ui/custom-components/icon';
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
||||||
|
import { cn } from '@workspace/ui/lib/utils';
|
||||||
import { useTranslations } from 'next-intl';
|
import { useTranslations } from 'next-intl';
|
||||||
import Image from 'next/legacy/image';
|
import Image from 'next/legacy/image';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
type Nav = (typeof navs)[number];
|
||||||
|
|
||||||
|
function hasChildren(obj: any): obj is { items: any[] } {
|
||||||
|
return obj && Array.isArray((obj as any).items) && (obj as any).items.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||||
const { common } = useGlobalStore();
|
const { common } = useGlobalStore();
|
||||||
const { site } = common;
|
const { site } = common;
|
||||||
const t = useTranslations('menu');
|
const t = useTranslations('menu');
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const { state, isMobile } = useSidebar();
|
||||||
|
|
||||||
|
const firstGroupTitle = (navs as typeof navs).find((n) => hasChildren(n))?.title ?? '';
|
||||||
|
|
||||||
|
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
|
||||||
|
const groups: Record<string, boolean> = {};
|
||||||
|
(navs as typeof navs).forEach((nav) => {
|
||||||
|
if (hasChildren(nav)) groups[nav.title] = nav.title === firstGroupTitle;
|
||||||
|
});
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleToggleGroup = (title: string) => {
|
||||||
|
setOpenGroups((prev) => {
|
||||||
|
const currentlyOpen = !!prev[title];
|
||||||
|
const next: Record<string, boolean> = {};
|
||||||
|
(navs as typeof navs).forEach((nav) => {
|
||||||
|
if (hasChildren(nav)) next[nav.title] = false;
|
||||||
|
});
|
||||||
|
next[title] = !currentlyOpen;
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isActiveUrl = (url: string) =>
|
||||||
|
url === '/dashboard' ? pathname === url : pathname.startsWith(url);
|
||||||
|
|
||||||
|
const isGroupActive = (nav: Nav) =>
|
||||||
|
(hasChildren(nav) && nav.items.some((i: any) => isActiveUrl(i.url))) ||
|
||||||
|
('url' in nav && nav.url ? isActiveUrl(nav.url as string) : false);
|
||||||
|
|
||||||
|
const renderCollapsedFlyout = (nav: Nav) => {
|
||||||
|
const ParentButton = (
|
||||||
|
<SidebarMenuButton
|
||||||
|
size='sm'
|
||||||
|
className='h-8 justify-center'
|
||||||
|
isActive={false}
|
||||||
|
aria-label={t(nav.title)}
|
||||||
|
>
|
||||||
|
{'url' in nav && nav.url ? (
|
||||||
|
<Link href={nav.url as string}>
|
||||||
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
|
<Icon icon={(nav as any).icon} className='size-4' />
|
||||||
|
) : null}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
|
<Icon icon={(nav as any).icon} className='size-4' />
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</SidebarMenuButton>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!hasChildren(nav)) return ParentButton;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HoverCard openDelay={40} closeDelay={200}>
|
||||||
|
<HoverCardTrigger asChild>{ParentButton}</HoverCardTrigger>
|
||||||
|
<HoverCardContent
|
||||||
|
side='right'
|
||||||
|
align='start'
|
||||||
|
sideOffset={10}
|
||||||
|
className='z-[9999] w-64 p-0'
|
||||||
|
avoidCollisions
|
||||||
|
collisionPadding={8}
|
||||||
|
>
|
||||||
|
<div className='flex items-center gap-2 border-b px-3 py-2'>
|
||||||
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
|
<Icon icon={(nav as any).icon} className='size-4' />
|
||||||
|
) : null}
|
||||||
|
<span className='text-muted-foreground truncate text-xs font-medium'>
|
||||||
|
{t(nav.title)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className='p-1'>
|
||||||
|
{nav.items.map((item: any) => (
|
||||||
|
<li key={item.title}>
|
||||||
|
<Link
|
||||||
|
href={item.url}
|
||||||
|
className={[
|
||||||
|
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
|
||||||
|
isActiveUrl(item.url)
|
||||||
|
? 'bg-accent text-accent-foreground'
|
||||||
|
: 'hover:bg-accent/60',
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
{item.icon && <Icon icon={item.icon} className='size-4' />}
|
||||||
|
<span className='truncate'>{t(item.title)}</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sidebar className='border-r-0' collapsible='icon' {...props}>
|
<Sidebar className='border-r-0' collapsible='icon' {...props}>
|
||||||
<SidebarHeader className='p-2'>
|
<SidebarHeader className='p-2'>
|
||||||
@ -49,39 +158,105 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
|
|||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
</SidebarHeader>
|
</SidebarHeader>
|
||||||
|
|
||||||
<SidebarContent className='py-2'>
|
<SidebarContent className='py-2'>
|
||||||
<SidebarMenu>
|
<SidebarMenu>
|
||||||
{navs.map((nav) => (
|
{!isMobile && state === 'collapsed'
|
||||||
<SidebarGroup key={nav.title} className='py-1'>
|
? (navs as typeof navs).map((nav) => (
|
||||||
{nav.items && (
|
<SidebarMenuItem key={nav.title} className='mx-auto'>
|
||||||
<SidebarGroupLabel className='py-1 text-xs'>{t(nav.title)}</SidebarGroupLabel>
|
{renderCollapsedFlyout(nav)}
|
||||||
)}
|
</SidebarMenuItem>
|
||||||
<SidebarGroupContent>
|
))
|
||||||
<SidebarMenu>
|
: (navs as typeof navs).map((nav) => {
|
||||||
{(nav.items || [nav]).map((item) => (
|
if (hasChildren(nav)) {
|
||||||
<SidebarMenuItem key={item.title}>
|
const isOpen = openGroups[nav.title] ?? false;
|
||||||
|
return (
|
||||||
|
<SidebarGroup key={nav.title} className={cn('py-1')}>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
asChild
|
|
||||||
size='sm'
|
size='sm'
|
||||||
tooltip={t(item.title)}
|
className={cn('mb-2 flex h-8 w-full items-center justify-between', {
|
||||||
className='h-8'
|
'bg-accent': isOpen,
|
||||||
isActive={
|
})}
|
||||||
item.url === '/dashboard'
|
onClick={() => handleToggleGroup(nav.title)}
|
||||||
? pathname === item.url
|
tabIndex={0}
|
||||||
: pathname.startsWith(item.url)
|
style={{ fontWeight: 500 }}
|
||||||
}
|
// isActive={isGroupActive(nav)}
|
||||||
>
|
>
|
||||||
<Link href={item.url}>
|
<span className='flex min-w-0 items-center gap-2'>
|
||||||
{item.icon && <Icon icon={item.icon} className='size-4' />}
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
<span className='text-sm'>{t(item.title)}</span>
|
<Icon icon={(nav as any).icon} className='size-4 shrink-0' />
|
||||||
</Link>
|
) : null}
|
||||||
|
<span className='truncate text-sm'>{t(nav.title)}</span>
|
||||||
|
</span>
|
||||||
|
<Icon
|
||||||
|
icon='lucide:chevron-down'
|
||||||
|
className={`ml-2 size-4 transition-transform ${isOpen ? '' : '-rotate-90'}`}
|
||||||
|
/>
|
||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</SidebarMenuItem>
|
{isOpen && (
|
||||||
))}
|
<SidebarGroupContent className='px-4'>
|
||||||
</SidebarMenu>
|
<SidebarMenu>
|
||||||
</SidebarGroupContent>
|
{nav.items.map((item: any) => (
|
||||||
</SidebarGroup>
|
<SidebarMenuItem key={item.title}>
|
||||||
))}
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
size='sm'
|
||||||
|
className='h-8'
|
||||||
|
tooltip={t(item.title)}
|
||||||
|
isActive={isActiveUrl(item.url)}
|
||||||
|
>
|
||||||
|
<Link href={item.url}>
|
||||||
|
{item.icon && <Icon icon={item.icon} className='size-4' />}
|
||||||
|
<span className='text-sm'>{t(item.title)}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
)}
|
||||||
|
</SidebarGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarGroup key={nav.title} className='py-1'>
|
||||||
|
<SidebarGroupContent>
|
||||||
|
<SidebarMenu>
|
||||||
|
<SidebarMenuItem>
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild={'url' in nav && !!(nav as any).url}
|
||||||
|
size='sm'
|
||||||
|
className='h-8'
|
||||||
|
tooltip={t(nav.title)}
|
||||||
|
isActive={
|
||||||
|
'url' in nav && (nav as any).url
|
||||||
|
? isActiveUrl((nav as any).url)
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{'url' in nav && (nav as any).url ? (
|
||||||
|
<Link href={(nav as any).url}>
|
||||||
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
|
<Icon icon={(nav as any).icon} className='size-4' />
|
||||||
|
) : null}
|
||||||
|
<span className='text-sm'>{t(nav.title)}</span>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{'icon' in nav && (nav as any).icon ? (
|
||||||
|
<Icon icon={(nav as any).icon} className='size-4' />
|
||||||
|
) : null}
|
||||||
|
<span className='text-sm'>{t(nav.title)}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
</SidebarContent>
|
</SidebarContent>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|||||||
@ -4,86 +4,33 @@ export const navs = [
|
|||||||
url: '/dashboard',
|
url: '/dashboard',
|
||||||
icon: 'flat-color-icons:globe',
|
icon: 'flat-color-icons:globe',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'System Management',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'System Config',
|
|
||||||
url: '/dashboard/system',
|
|
||||||
icon: 'flat-color-icons:services',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Auth Control',
|
|
||||||
url: '/dashboard/auth-control',
|
|
||||||
icon: 'flat-color-icons:lock-portrait',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Payment Config',
|
|
||||||
url: '/dashboard/payment',
|
|
||||||
icon: 'flat-color-icons:currency-exchange',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: 'ADS Config',
|
|
||||||
url: '/dashboard/ads',
|
|
||||||
icon: 'flat-color-icons:electrical-sensor',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'System Tool',
|
|
||||||
url: '/dashboard/tool',
|
|
||||||
icon: 'flat-color-icons:info',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Server',
|
title: 'Maintenance',
|
||||||
|
icon: 'flat-color-icons:data-protection',
|
||||||
items: [
|
items: [
|
||||||
{
|
|
||||||
title: 'Subscribe Config',
|
|
||||||
url: '/dashboard/subscribe',
|
|
||||||
icon: 'flat-color-icons:ruler',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Server Management',
|
title: 'Server Management',
|
||||||
url: '/dashboard/server',
|
url: '/dashboard/server',
|
||||||
icon: 'flat-color-icons:data-protection',
|
icon: 'flat-color-icons:data-protection',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Product Management',
|
title: 'Server Management',
|
||||||
url: '/dashboard/product',
|
url: '/dashboard/servers',
|
||||||
icon: 'flat-color-icons:shop',
|
icon: 'flat-color-icons:data-protection',
|
||||||
},
|
},
|
||||||
|
{ title: 'Node Management', url: '/dashboard/nodes', icon: 'flat-color-icons:mind-map' },
|
||||||
|
{ title: 'Subscribe Config', url: '/dashboard/subscribe', icon: 'flat-color-icons:ruler' },
|
||||||
|
{ title: 'Product Management', url: '/dashboard/product', icon: 'flat-color-icons:shop' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: 'Finance',
|
title: 'Commerce',
|
||||||
|
icon: 'flat-color-icons:sales-performance',
|
||||||
items: [
|
items: [
|
||||||
{
|
{ title: 'Order Management', url: '/dashboard/order', icon: 'flat-color-icons:todo-list' },
|
||||||
title: 'Order Management',
|
{ title: 'Coupon Management', url: '/dashboard/coupon', icon: 'flat-color-icons:bookmark' },
|
||||||
url: '/dashboard/order',
|
|
||||||
icon: 'flat-color-icons:todo-list',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Coupon Management',
|
|
||||||
url: '/dashboard/coupon',
|
|
||||||
icon: 'flat-color-icons:bookmark',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'User',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'User Management',
|
|
||||||
url: '/dashboard/user',
|
|
||||||
icon: 'flat-color-icons:conference-call',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'User Detail',
|
|
||||||
url: '/dashboard/user/:id',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Marketing Management',
|
title: 'Marketing Management',
|
||||||
url: '/dashboard/marketing',
|
url: '/dashboard/marketing',
|
||||||
@ -94,6 +41,19 @@ export const navs = [
|
|||||||
url: '/dashboard/announcement',
|
url: '/dashboard/announcement',
|
||||||
icon: 'flat-color-icons:advertising',
|
icon: 'flat-color-icons:advertising',
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'Users & Support',
|
||||||
|
icon: 'flat-color-icons:collaboration',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'User Management',
|
||||||
|
url: '/dashboard/user',
|
||||||
|
icon: 'flat-color-icons:conference-call',
|
||||||
|
items: [{ title: 'User Detail', url: '/dashboard/user/:id' }],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Ticket Management',
|
title: 'Ticket Management',
|
||||||
url: '/dashboard/ticket',
|
url: '/dashboard/ticket',
|
||||||
@ -106,6 +66,61 @@ export const navs = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'System',
|
||||||
|
icon: 'flat-color-icons:services',
|
||||||
|
items: [
|
||||||
|
{ title: 'System Config', url: '/dashboard/system', icon: 'flat-color-icons:services' },
|
||||||
|
{
|
||||||
|
title: 'Auth Control',
|
||||||
|
url: '/dashboard/auth-control',
|
||||||
|
icon: 'flat-color-icons:lock-portrait',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Payment Config',
|
||||||
|
url: '/dashboard/payment',
|
||||||
|
icon: 'flat-color-icons:currency-exchange',
|
||||||
|
},
|
||||||
|
{ title: 'ADS Config', url: '/dashboard/ads', icon: 'flat-color-icons:electrical-sensor' },
|
||||||
|
{ title: 'System Tool', url: '/dashboard/tool', icon: 'flat-color-icons:info' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// 日志与分析
|
||||||
|
{
|
||||||
|
title: 'Logs & Analytics',
|
||||||
|
icon: 'flat-color-icons:statistics',
|
||||||
|
items: [
|
||||||
|
{ title: 'Login', url: '/dashboard/log/login', icon: 'flat-color-icons:unlock' },
|
||||||
|
{ title: 'Register', url: '/dashboard/log/register', icon: 'flat-color-icons:contacts' },
|
||||||
|
{ title: 'Email', url: '/dashboard/log/email', icon: 'flat-color-icons:feedback' },
|
||||||
|
{ title: 'SMS', url: '/dashboard/log/sms', icon: 'flat-color-icons:sms' },
|
||||||
|
{ title: 'Subscribe', url: '/dashboard/log/subscribe', icon: 'flat-color-icons:workflow' },
|
||||||
|
{
|
||||||
|
title: 'Reset Subscribe',
|
||||||
|
url: '/dashboard/log/reset-subscribe',
|
||||||
|
icon: 'flat-color-icons:refresh',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Subscribe Traffic',
|
||||||
|
url: '/dashboard/log/subscribe-traffic',
|
||||||
|
icon: 'flat-color-icons:statistics',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Server Traffic',
|
||||||
|
url: '/dashboard/log/server-traffic',
|
||||||
|
icon: 'flat-color-icons:statistics',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Balance',
|
||||||
|
url: '/dashboard/log/balance',
|
||||||
|
icon: 'flat-color-icons:sales-performance',
|
||||||
|
},
|
||||||
|
{ title: 'Commission', url: '/dashboard/log/commission', icon: 'flat-color-icons:debt' },
|
||||||
|
{ title: 'Gift', url: '/dashboard/log/gift', icon: 'flat-color-icons:donate' },
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function findNavByUrl(url: string) {
|
export function findNavByUrl(url: string) {
|
||||||
@ -114,7 +129,6 @@ export function findNavByUrl(url: string) {
|
|||||||
const regex = new RegExp(`^${regexPattern}$`);
|
const regex = new RegExp(`^${regexPattern}$`);
|
||||||
return regex.test(path);
|
return regex.test(path);
|
||||||
}
|
}
|
||||||
|
|
||||||
function findNav(items: any[], url: string, path: any[] = []): any[] {
|
function findNav(items: any[], url: string, path: any[] = []): any[] {
|
||||||
for (const item of items) {
|
for (const item of items) {
|
||||||
if (item.url === url || (item.url && matchDynamicRoute(item.url, url))) {
|
if (item.url === url || (item.url && matchDynamicRoute(item.url, url))) {
|
||||||
@ -122,13 +136,10 @@ export function findNavByUrl(url: string) {
|
|||||||
}
|
}
|
||||||
if (item.items) {
|
if (item.items) {
|
||||||
const result = findNav(item.items, url, [...path, item]);
|
const result = findNav(item.items, url, [...path, item]);
|
||||||
if (result.length) {
|
if (result.length) return result;
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return findNav(navs, url);
|
return findNav(navs, url);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +1,41 @@
|
|||||||
{
|
{
|
||||||
"ADS Config": "ADS Config",
|
"ADS Config": "ADS Config",
|
||||||
"Announcement Management": "Announcement Management",
|
"Announcement Management": "Announcement Management",
|
||||||
"Application Management": "Application Management",
|
|
||||||
"Auth Control": "Auth Control",
|
"Auth Control": "Auth Control",
|
||||||
|
"Balance": "Balance",
|
||||||
|
"Commerce": "Commerce",
|
||||||
|
"Commission": "Commission",
|
||||||
"Coupon Management": "Coupon Management",
|
"Coupon Management": "Coupon Management",
|
||||||
"Dashboard": "Dashboard",
|
"Dashboard": "Dashboard",
|
||||||
|
|
||||||
"Document Management": "Document Management",
|
"Document Management": "Document Management",
|
||||||
"Finance": "Finance",
|
|
||||||
|
"Email": "Email",
|
||||||
|
"Gift": "Gift",
|
||||||
|
"Login": "Login",
|
||||||
|
"Logs & Analytics": "Logs & Analytics",
|
||||||
|
"Maintenance": "Maintenance",
|
||||||
"Marketing Management": "Marketing Management",
|
"Marketing Management": "Marketing Management",
|
||||||
|
"Node Management": "Node Management",
|
||||||
"Order Management": "Order Management",
|
"Order Management": "Order Management",
|
||||||
"Payment Config": "Payment Config",
|
"Payment Config": "Payment Config",
|
||||||
"Product Management": "Product Management",
|
"Product Management": "Product Management",
|
||||||
"Protocol Management": "Protocol Management",
|
|
||||||
"Rule Management": "Rule Management",
|
"Register": "Register",
|
||||||
"Server": "Server",
|
"Reset Subscribe": "Reset Subscribe",
|
||||||
|
"SMS": "SMS",
|
||||||
"Server Management": "Server Management",
|
"Server Management": "Server Management",
|
||||||
"Settings": "Settings",
|
"Server Traffic": "Server Traffic",
|
||||||
|
"Subscribe": "Subscribe",
|
||||||
"Subscribe Config": "Subscribe Config",
|
"Subscribe Config": "Subscribe Config",
|
||||||
|
"Subscribe Traffic": "Subscribe Traffic",
|
||||||
|
"System": "System",
|
||||||
"System Config": "System Config",
|
"System Config": "System Config",
|
||||||
"System Management": "System Management",
|
|
||||||
"System Tool": "System Tool",
|
"System Tool": "System Tool",
|
||||||
|
|
||||||
"Ticket Management": "Ticket Management",
|
"Ticket Management": "Ticket Management",
|
||||||
"User": "User",
|
|
||||||
"User Detail": "User Detail",
|
"User Detail": "User Detail",
|
||||||
"User Management": "User Management"
|
"User Management": "User Management",
|
||||||
|
"Users & Support": "Users & Support"
|
||||||
}
|
}
|
||||||
|
|||||||
37
apps/admin/locales/en-US/nodes.json
Normal file
37
apps/admin/locales/en-US/nodes.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"confirm": "Confirm",
|
||||||
|
"confirmDeleteDesc": "This action cannot be undone.",
|
||||||
|
"confirmDeleteTitle": "Delete this node?",
|
||||||
|
"copied": "Copied successfully",
|
||||||
|
"copy": "Copy",
|
||||||
|
"create": "Create",
|
||||||
|
"created": "Created successfully",
|
||||||
|
"delete": "Delete",
|
||||||
|
"deleted": "Deleted successfully",
|
||||||
|
"drawerCreateTitle": "Create Node",
|
||||||
|
"drawerEditTitle": "Edit Node",
|
||||||
|
"edit": "Edit",
|
||||||
|
"enabled": "Enabled",
|
||||||
|
"enabled_off": "Disabled",
|
||||||
|
"enabled_on": "Enabled",
|
||||||
|
"errors": {
|
||||||
|
"nameRequired": "Name is required",
|
||||||
|
"serverRequired": "Please select a server",
|
||||||
|
"serverAddrRequired": "Entry address is required",
|
||||||
|
"protocolRequired": "Please select a protocol",
|
||||||
|
"portRange": "Port must be 1–65535"
|
||||||
|
},
|
||||||
|
"name": "Name",
|
||||||
|
"pageTitle": "Nodes",
|
||||||
|
"port": "Port",
|
||||||
|
"protocol": "Protocol",
|
||||||
|
"select_protocol": "Search protocol…",
|
||||||
|
"select_server": "Search server…",
|
||||||
|
"server": "Server",
|
||||||
|
"server_addr": "Entry address",
|
||||||
|
"server_addr_port": "Address:Port",
|
||||||
|
"tags": "Tags",
|
||||||
|
"tags_placeholder": "Type and press Enter",
|
||||||
|
"updated": "Updated successfully"
|
||||||
|
}
|
||||||
102
apps/admin/locales/en-US/servers.json
Normal file
102
apps/admin/locales/en-US/servers.json
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
{
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"city": "City",
|
||||||
|
"config": {
|
||||||
|
"title": "Node configuration",
|
||||||
|
"description": "Manage node communication keys, pull/push intervals, and dynamic multipliers.",
|
||||||
|
"saveSuccess": "Saved successfully",
|
||||||
|
"communicationKey": "Communication key",
|
||||||
|
"inputPlaceholder": "Please enter",
|
||||||
|
"communicationKeyDescription": "Used for node authentication.",
|
||||||
|
"nodePullInterval": "Node pull interval",
|
||||||
|
"nodePullIntervalDescription": "How often the node pulls configuration (seconds).",
|
||||||
|
"nodePushInterval": "Node push interval",
|
||||||
|
"nodePushIntervalDescription": "How often the node pushes stats (seconds).",
|
||||||
|
"dynamicMultiplier": "Dynamic multiplier",
|
||||||
|
"dynamicMultiplierDescription": "Define time slots and multipliers to adjust traffic accounting.",
|
||||||
|
"startTime": "Start time",
|
||||||
|
"endTime": "End time",
|
||||||
|
"multiplier": "Multiplier",
|
||||||
|
"reset": "Reset",
|
||||||
|
"save": "Save",
|
||||||
|
"timeSlot": "Time slot",
|
||||||
|
"actions": {
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"save": "Save"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"confirm": "Confirm",
|
||||||
|
"confirmDeleteDesc": "This action cannot be undone.",
|
||||||
|
"confirmDeleteTitle": "Delete this server?",
|
||||||
|
"congestion_controller": "Congestion controller",
|
||||||
|
"copied": "Copied",
|
||||||
|
"copy": "Copy",
|
||||||
|
"country": "Country",
|
||||||
|
"cpu": "CPU",
|
||||||
|
"create": "Create",
|
||||||
|
"created": "Created successfully",
|
||||||
|
"delete": "Delete",
|
||||||
|
"deleted": "Deleted successfully",
|
||||||
|
"disable_sni": "Disable SNI",
|
||||||
|
"disk": "Disk",
|
||||||
|
"drawerCreateTitle": "Create Server",
|
||||||
|
"drawerEditTitle": "Edit Server",
|
||||||
|
"edit": "Edit",
|
||||||
|
"enabled": "Enabled",
|
||||||
|
"encryption_method": "Encryption method",
|
||||||
|
"expireTime": "Expire time",
|
||||||
|
"expired": "Expired",
|
||||||
|
"flow": "Flow",
|
||||||
|
"hop_interval": "Hop interval",
|
||||||
|
"hop_ports": "Hop ports",
|
||||||
|
"hop_ports_placeholder": "e.g. 443,8443,10443",
|
||||||
|
"host": "Host",
|
||||||
|
"id": "ID",
|
||||||
|
"ipAddresses": "IP addresses",
|
||||||
|
"memory": "Memory",
|
||||||
|
"name": "Name",
|
||||||
|
"noData": "No data",
|
||||||
|
"notAvailable": "N/A",
|
||||||
|
"obfs_password": "Obfuscation password",
|
||||||
|
"obfs_password_placeholder": "Enter obfuscation password",
|
||||||
|
"offline": "Offline",
|
||||||
|
"online": "Online",
|
||||||
|
"onlineUsers": "Online users",
|
||||||
|
"pageTitle": "Servers",
|
||||||
|
"path": "Path",
|
||||||
|
"please_select": "Please select",
|
||||||
|
"port": "Port",
|
||||||
|
"port_placeholder": "Enter port",
|
||||||
|
"protocols": "Protocols",
|
||||||
|
"reduce_rtt": "Reduce RTT",
|
||||||
|
"security_allow_insecure": "Allow insecure",
|
||||||
|
"security_fingerprint": "Fingerprint",
|
||||||
|
"security_private_key": "Reality private key",
|
||||||
|
"security_private_key_placeholder": "Enter private key",
|
||||||
|
"security_public_key": "Reality public key",
|
||||||
|
"security_public_key_placeholder": "Enter public key",
|
||||||
|
"security_server_address": "Reality server address",
|
||||||
|
"security_server_address_placeholder": "e.g. 1.2.3.4 or domain",
|
||||||
|
"security_server_port": "Reality server port",
|
||||||
|
"security_server_port_placeholder": "Enter port",
|
||||||
|
"security_short_id": "Reality short ID",
|
||||||
|
"security_short_id_placeholder": "Hex string (up to 16 chars)",
|
||||||
|
"security_sni": "SNI",
|
||||||
|
"security_title": "Security",
|
||||||
|
"select_encryption_method": "Select encryption method",
|
||||||
|
"serverAddress": "Server",
|
||||||
|
"server_addr": "Server address",
|
||||||
|
"server_key": "Server key",
|
||||||
|
"service_name": "Service name",
|
||||||
|
"status": "Status",
|
||||||
|
"subscribeId": "Subscription ID",
|
||||||
|
"subscription": "Subscription",
|
||||||
|
"traffic": "Traffic",
|
||||||
|
"transport_title": "Transport",
|
||||||
|
"udp_relay_mode": "UDP relay mode",
|
||||||
|
"unitSecondsShort": "s",
|
||||||
|
"unlimited": "Unlimited",
|
||||||
|
"updated": "Updated successfully",
|
||||||
|
"user": "User",
|
||||||
|
"validation_failed": "Validation failed. Please check the form."
|
||||||
|
}
|
||||||
@ -18,6 +18,8 @@ export default getRequestConfig(async () => {
|
|||||||
'ads': (await import(`./${locale}/ads.json`)).default,
|
'ads': (await import(`./${locale}/ads.json`)).default,
|
||||||
'payment': (await import(`./${locale}/payment.json`)).default,
|
'payment': (await import(`./${locale}/payment.json`)).default,
|
||||||
'server': (await import(`./${locale}/server.json`)).default,
|
'server': (await import(`./${locale}/server.json`)).default,
|
||||||
|
'servers': (await import(`./${locale}/servers.json`)).default,
|
||||||
|
'nodes': (await import(`./${locale}/nodes.json`)).default,
|
||||||
'product': (await import(`./${locale}/product.json`)).default,
|
'product': (await import(`./${locale}/product.json`)).default,
|
||||||
'order': (await import(`./${locale}/order.json`)).default,
|
'order': (await import(`./${locale}/order.json`)).default,
|
||||||
'coupon': (await import(`./${locale}/coupon.json`)).default,
|
'coupon': (await import(`./${locale}/coupon.json`)).default,
|
||||||
|
|||||||
@ -1,27 +1,41 @@
|
|||||||
{
|
{
|
||||||
"ADS Config": "ADS配置",
|
"ADS Config": "广告配置",
|
||||||
"Announcement Management": "公告管理",
|
"Announcement Management": "公告管理",
|
||||||
"Application Management": "应用管理",
|
|
||||||
"Auth Control": "认证控制",
|
"Auth Control": "认证控制",
|
||||||
|
"Balance": "余额变动",
|
||||||
|
"Commerce": "商务",
|
||||||
|
"Commission": "佣金记录",
|
||||||
"Coupon Management": "优惠券管理",
|
"Coupon Management": "优惠券管理",
|
||||||
"Dashboard": "仪表盘",
|
"Dashboard": "仪表盘",
|
||||||
|
|
||||||
"Document Management": "文档管理",
|
"Document Management": "文档管理",
|
||||||
"Finance": "财务",
|
|
||||||
|
"Email": "邮件日志",
|
||||||
|
"Gift": "赠送记录",
|
||||||
|
"Login": "登录日志",
|
||||||
|
"Logs & Analytics": "日志与分析",
|
||||||
|
"Maintenance": "运维",
|
||||||
"Marketing Management": "营销管理",
|
"Marketing Management": "营销管理",
|
||||||
|
"Node Management": "节点管理",
|
||||||
"Order Management": "订单管理",
|
"Order Management": "订单管理",
|
||||||
"Payment Config": "支付配置",
|
"Payment Config": "支付配置",
|
||||||
"Product Management": "产品管理",
|
"Product Management": "商品管理",
|
||||||
"Protocol Management": "协议管理",
|
|
||||||
"Rule Management": "规则管理",
|
"Register": "注册日志",
|
||||||
"Server": "服务",
|
"Reset Subscribe": "重置订阅",
|
||||||
|
"SMS": "短信日志",
|
||||||
"Server Management": "服务管理",
|
"Server Management": "服务管理",
|
||||||
"Settings": "设置",
|
"Server Traffic": "服务流量",
|
||||||
|
"Subscribe": "订阅日志",
|
||||||
"Subscribe Config": "订阅配置",
|
"Subscribe Config": "订阅配置",
|
||||||
|
"Subscribe Traffic": "订阅流量",
|
||||||
|
"System": "系统",
|
||||||
"System Config": "系统配置",
|
"System Config": "系统配置",
|
||||||
"System Management": "系统管理",
|
|
||||||
"System Tool": "系统工具",
|
"System Tool": "系统工具",
|
||||||
|
|
||||||
"Ticket Management": "工单管理",
|
"Ticket Management": "工单管理",
|
||||||
"User": "用户",
|
|
||||||
"User Detail": "用户详情",
|
"User Detail": "用户详情",
|
||||||
"User Management": "用户管理"
|
"User Management": "用户管理",
|
||||||
|
"Users & Support": "用户与支持"
|
||||||
}
|
}
|
||||||
|
|||||||
38
apps/admin/locales/zh-CN/nodes.json
Normal file
38
apps/admin/locales/zh-CN/nodes.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"cancel": "取消",
|
||||||
|
"confirm": "确定",
|
||||||
|
"confirmDeleteDesc": "此操作不可撤销。",
|
||||||
|
"confirmDeleteTitle": "删除该节点？",
|
||||||
|
"copied": "复制成功",
|
||||||
|
"copy": "复制",
|
||||||
|
"create": "新建",
|
||||||
|
"created": "创建成功",
|
||||||
|
"delete": "删除",
|
||||||
|
"deleted": "删除成功",
|
||||||
|
"drawerCreateTitle": "新建节点",
|
||||||
|
"drawerEditTitle": "编辑节点",
|
||||||
|
"edit": "编辑",
|
||||||
|
"enabled": "是否启用",
|
||||||
|
"enabled_off": "未启用",
|
||||||
|
"enabled_on": "已启用",
|
||||||
|
"errors": {
|
||||||
|
"nameRequired": "请输入名称",
|
||||||
|
"serverRequired": "请选择服务器",
|
||||||
|
"serverAddrRequired": "请输入入口地址",
|
||||||
|
"protocolRequired": "请选择协议",
|
||||||
|
"portRange": "端口范围 1–65535"
|
||||||
|
},
|
||||||
|
"name": "名称",
|
||||||
|
"pageTitle": "节点管理",
|
||||||
|
"port": "端口",
|
||||||
|
"protocol": "协议类型",
|
||||||
|
"select_protocol": "搜索协议…",
|
||||||
|
"select_server": "搜索服务器…",
|
||||||
|
"server": "服务器",
|
||||||
|
"server_addr": "入口地址",
|
||||||
|
"server_addr_port": "服务器地址:端口",
|
||||||
|
"tags": "标签",
|
||||||
|
|
||||||
|
"tags_placeholder": "输入后回车添加",
|
||||||
|
"updated": "更新成功"
|
||||||
|
}
|
||||||
102
apps/admin/locales/zh-CN/servers.json
Normal file
102
apps/admin/locales/zh-CN/servers.json
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
{
|
||||||
|
"cancel": "取消",
|
||||||
|
"city": "城市",
|
||||||
|
"config": {
|
||||||
|
"title": "节点配置",
|
||||||
|
"description": "管理节点通信密钥、拉取/推送间隔与动态倍率。",
|
||||||
|
"saveSuccess": "保存成功",
|
||||||
|
"communicationKey": "通信密钥",
|
||||||
|
"inputPlaceholder": "请输入",
|
||||||
|
"communicationKeyDescription": "用于节点鉴权。",
|
||||||
|
"nodePullInterval": "节点拉取间隔",
|
||||||
|
"nodePullIntervalDescription": "节点拉取配置的频率（秒）。",
|
||||||
|
"nodePushInterval": "节点推送间隔",
|
||||||
|
"nodePushIntervalDescription": "节点上报状态的频率（秒）。",
|
||||||
|
"dynamicMultiplier": "动态倍率",
|
||||||
|
"dynamicMultiplierDescription": "按时间段设置倍率，用于调节流量或计费。",
|
||||||
|
"startTime": "开始时间",
|
||||||
|
"endTime": "结束时间",
|
||||||
|
"multiplier": "倍率",
|
||||||
|
"reset": "重置",
|
||||||
|
"save": "保存",
|
||||||
|
"timeSlot": "时间段",
|
||||||
|
"actions": {
|
||||||
|
"cancel": "取消",
|
||||||
|
"save": "保存"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"confirm": "确认",
|
||||||
|
"confirmDeleteDesc": "该操作不可撤销。",
|
||||||
|
"confirmDeleteTitle": "确认删除该服务器？",
|
||||||
|
"congestion_controller": "拥塞控制",
|
||||||
|
"copied": "已复制",
|
||||||
|
"copy": "复制",
|
||||||
|
"country": "国家",
|
||||||
|
"cpu": "CPU",
|
||||||
|
"create": "新建",
|
||||||
|
"created": "创建成功",
|
||||||
|
"delete": "删除",
|
||||||
|
"deleted": "删除成功",
|
||||||
|
"disable_sni": "禁用 SNI",
|
||||||
|
"disk": "磁盘",
|
||||||
|
"drawerCreateTitle": "新建服务器",
|
||||||
|
"drawerEditTitle": "编辑服务器",
|
||||||
|
"edit": "编辑",
|
||||||
|
"enabled": "启用",
|
||||||
|
"encryption_method": "加密方式",
|
||||||
|
"expireTime": "到期时间",
|
||||||
|
"expired": "已过期",
|
||||||
|
"flow": "流控",
|
||||||
|
"hop_interval": "跳端口间隔",
|
||||||
|
"hop_ports": "跳端口",
|
||||||
|
"hop_ports_placeholder": "例如 443,8443,10443",
|
||||||
|
"host": "Host",
|
||||||
|
"id": "编号",
|
||||||
|
"ipAddresses": "IP 地址",
|
||||||
|
"memory": "内存",
|
||||||
|
"name": "名称",
|
||||||
|
"noData": "暂无数据",
|
||||||
|
"notAvailable": "—",
|
||||||
|
"obfs_password": "混淆密码",
|
||||||
|
"obfs_password_placeholder": "输入混淆密码",
|
||||||
|
"offline": "离线",
|
||||||
|
"online": "在线",
|
||||||
|
"onlineUsers": "在线人数",
|
||||||
|
"pageTitle": "服务器",
|
||||||
|
"path": "路径",
|
||||||
|
"please_select": "请选择",
|
||||||
|
"port": "端口",
|
||||||
|
"port_placeholder": "输入端口",
|
||||||
|
"protocols": "协议",
|
||||||
|
"reduce_rtt": "降低 RTT",
|
||||||
|
"security_allow_insecure": "允许不安全",
|
||||||
|
"security_fingerprint": "指纹",
|
||||||
|
"security_private_key": "Reality 私钥",
|
||||||
|
"security_private_key_placeholder": "输入私钥",
|
||||||
|
"security_public_key": "Reality 公钥",
|
||||||
|
"security_public_key_placeholder": "输入公钥",
|
||||||
|
"security_server_address": "Reality 回源地址",
|
||||||
|
"security_server_address_placeholder": "如 1.2.3.4 或域名",
|
||||||
|
"security_server_port": "Reality 回源端口",
|
||||||
|
"security_server_port_placeholder": "输入端口",
|
||||||
|
"security_short_id": "Reality Short ID",
|
||||||
|
"security_short_id_placeholder": "16 位内十六进制",
|
||||||
|
"security_sni": "SNI",
|
||||||
|
"security_title": "安全",
|
||||||
|
"select_encryption_method": "选择加密方式",
|
||||||
|
"serverAddress": "服务器",
|
||||||
|
"server_addr": "服务器地址",
|
||||||
|
"server_key": "服务器密钥",
|
||||||
|
"service_name": "服务名",
|
||||||
|
"status": "状态",
|
||||||
|
"subscribeId": "订阅 ID",
|
||||||
|
"subscription": "订阅",
|
||||||
|
"traffic": "流量",
|
||||||
|
"transport_title": "传输方式",
|
||||||
|
"udp_relay_mode": "UDP 转发模式",
|
||||||
|
"unitSecondsShort": "秒",
|
||||||
|
"unlimited": "不限",
|
||||||
|
"updated": "更新成功",
|
||||||
|
"user": "用户",
|
||||||
|
"validation_failed": "校验失败，请检查表单。"
|
||||||
|
}
|
||||||
46
apps/admin/services/admin/typings.d.ts
vendored
46
apps/admin/services/admin/typings.d.ts
vendored
@ -652,23 +652,15 @@ declare namespace API {
|
|||||||
type GetMessageLogListParams = {
|
type GetMessageLogListParams = {
|
||||||
page: number;
|
page: number;
|
||||||
size: number;
|
size: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform?: string;
|
search?: string;
|
||||||
to?: string;
|
|
||||||
subject?: string;
|
|
||||||
content?: string;
|
|
||||||
status?: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type GetMessageLogListRequest = {
|
type GetMessageLogListRequest = {
|
||||||
page: number;
|
page: number;
|
||||||
size: number;
|
size: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform?: string;
|
search?: string;
|
||||||
to?: string;
|
|
||||||
subject?: string;
|
|
||||||
content?: string;
|
|
||||||
status?: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type GetMessageLogListResponse = {
|
type GetMessageLogListResponse = {
|
||||||
@ -968,6 +960,23 @@ declare namespace API {
|
|||||||
user_id: number;
|
user_id: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type GetUserSubscribeResetTrafficLogsParams = {
|
||||||
|
page: number;
|
||||||
|
size: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type GetUserSubscribeResetTrafficLogsRequest = {
|
||||||
|
page: number;
|
||||||
|
size: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type GetUserSubscribeResetTrafficLogsResponse = {
|
||||||
|
list: ResetSubscribeTrafficLog[];
|
||||||
|
total: number;
|
||||||
|
};
|
||||||
|
|
||||||
type GetUserSubscribeTrafficLogsParams = {
|
type GetUserSubscribeTrafficLogsParams = {
|
||||||
page: number;
|
page: number;
|
||||||
size: number;
|
size: number;
|
||||||
@ -1015,14 +1024,13 @@ declare namespace API {
|
|||||||
|
|
||||||
type MessageLog = {
|
type MessageLog = {
|
||||||
id: number;
|
id: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform: string;
|
platform: string;
|
||||||
to: string;
|
to: string;
|
||||||
subject: string;
|
subject: string;
|
||||||
content: string;
|
content: Record<string, any>;
|
||||||
status: number;
|
status: number;
|
||||||
created_at: number;
|
created_at: number;
|
||||||
updated_at: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type MobileAuthenticateConfig = {
|
type MobileAuthenticateConfig = {
|
||||||
@ -1308,6 +1316,14 @@ declare namespace API {
|
|||||||
order_no: string;
|
order_no: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ResetSubscribeTrafficLog = {
|
||||||
|
id: number;
|
||||||
|
type: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
order_no?: string;
|
||||||
|
reset_at: number;
|
||||||
|
};
|
||||||
|
|
||||||
type ResetTrafficOrderRequest = {
|
type ResetTrafficOrderRequest = {
|
||||||
user_subscribe_id: number;
|
user_subscribe_id: number;
|
||||||
payment: number;
|
payment: number;
|
||||||
|
|||||||
@ -345,6 +345,24 @@ export async function getUserSubscribeLogs(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Get user subcribe reset traffic logs GET /v1/admin/user/subscribe/reset/logs */
|
||||||
|
export async function getUserSubscribeResetTrafficLogs(
|
||||||
|
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
|
||||||
|
params: API.GetUserSubscribeResetTrafficLogsParams,
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
return request<API.Response & { data?: API.GetUserSubscribeResetTrafficLogsResponse }>(
|
||||||
|
'/v1/admin/user/subscribe/reset/logs',
|
||||||
|
{
|
||||||
|
method: 'GET',
|
||||||
|
params: {
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
...(options || {}),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/** Get user subcribe traffic logs GET /v1/admin/user/subscribe/traffic_logs */
|
/** Get user subcribe traffic logs GET /v1/admin/user/subscribe/traffic_logs */
|
||||||
export async function getUserSubscribeTrafficLogs(
|
export async function getUserSubscribeTrafficLogs(
|
||||||
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
|
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
|
||||||
|
|||||||
13
apps/admin/services/common/typings.d.ts
vendored
13
apps/admin/services/common/typings.d.ts
vendored
@ -327,14 +327,13 @@ declare namespace API {
|
|||||||
|
|
||||||
type MessageLog = {
|
type MessageLog = {
|
||||||
id: number;
|
id: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform: string;
|
platform: string;
|
||||||
to: string;
|
to: string;
|
||||||
subject: string;
|
subject: string;
|
||||||
content: string;
|
content: Record<string, any>;
|
||||||
status: number;
|
status: number;
|
||||||
created_at: number;
|
created_at: number;
|
||||||
updated_at: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type MobileAuthenticateConfig = {
|
type MobileAuthenticateConfig = {
|
||||||
@ -618,6 +617,14 @@ declare namespace API {
|
|||||||
cf_token?: string;
|
cf_token?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ResetSubscribeTrafficLog = {
|
||||||
|
id: number;
|
||||||
|
type: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
order_no?: string;
|
||||||
|
reset_at: number;
|
||||||
|
};
|
||||||
|
|
||||||
type ResetTrafficOrderRequest = {
|
type ResetTrafficOrderRequest = {
|
||||||
user_subscribe_id: number;
|
user_subscribe_id: number;
|
||||||
payment: number;
|
payment: number;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
/* eslint-disable */
|
||||||
import request from '@/utils/request';
|
import request from '@/utils/request';
|
||||||
|
|
||||||
/** Get Ads GET /v1/common/ads */
|
/** Get Ads GET /v1/common/ads */
|
||||||
|
|||||||
13
apps/user/services/common/typings.d.ts
vendored
13
apps/user/services/common/typings.d.ts
vendored
@ -327,14 +327,13 @@ declare namespace API {
|
|||||||
|
|
||||||
type MessageLog = {
|
type MessageLog = {
|
||||||
id: number;
|
id: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform: string;
|
platform: string;
|
||||||
to: string;
|
to: string;
|
||||||
subject: string;
|
subject: string;
|
||||||
content: string;
|
content: Record<string, any>;
|
||||||
status: number;
|
status: number;
|
||||||
created_at: number;
|
created_at: number;
|
||||||
updated_at: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type MobileAuthenticateConfig = {
|
type MobileAuthenticateConfig = {
|
||||||
@ -618,6 +617,14 @@ declare namespace API {
|
|||||||
cf_token?: string;
|
cf_token?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ResetSubscribeTrafficLog = {
|
||||||
|
id: number;
|
||||||
|
type: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
order_no?: string;
|
||||||
|
reset_at: number;
|
||||||
|
};
|
||||||
|
|
||||||
type ResetTrafficOrderRequest = {
|
type ResetTrafficOrderRequest = {
|
||||||
user_subscribe_id: number;
|
user_subscribe_id: number;
|
||||||
payment: number;
|
payment: number;
|
||||||
|
|||||||
13
apps/user/services/user/typings.d.ts
vendored
13
apps/user/services/user/typings.d.ts
vendored
@ -342,14 +342,13 @@ declare namespace API {
|
|||||||
|
|
||||||
type MessageLog = {
|
type MessageLog = {
|
||||||
id: number;
|
id: number;
|
||||||
type: string;
|
type: number;
|
||||||
platform: string;
|
platform: string;
|
||||||
to: string;
|
to: string;
|
||||||
subject: string;
|
subject: string;
|
||||||
content: string;
|
content: Record<string, any>;
|
||||||
status: number;
|
status: number;
|
||||||
created_at: number;
|
created_at: number;
|
||||||
updated_at: number;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type MobileAuthenticateConfig = {
|
type MobileAuthenticateConfig = {
|
||||||
@ -728,6 +727,14 @@ declare namespace API {
|
|||||||
order_no: string;
|
order_no: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ResetSubscribeTrafficLog = {
|
||||||
|
id: number;
|
||||||
|
type: number;
|
||||||
|
user_subscribe_id: number;
|
||||||
|
order_no?: string;
|
||||||
|
reset_at: number;
|
||||||
|
};
|
||||||
|
|
||||||
type ResetTrafficOrderRequest = {
|
type ResetTrafficOrderRequest = {
|
||||||
user_subscribe_id: number;
|
user_subscribe_id: number;
|
||||||
payment: number;
|
payment: number;
|
||||||
|
|||||||
@ -30,6 +30,7 @@ import { ColumnToggle } from '@workspace/ui/custom-components/pro-table/column-t
|
|||||||
import { Pagination } from '@workspace/ui/custom-components/pro-table/pagination';
|
import { Pagination } from '@workspace/ui/custom-components/pro-table/pagination';
|
||||||
import { SortableRow } from '@workspace/ui/custom-components/pro-table/sortable-row';
|
import { SortableRow } from '@workspace/ui/custom-components/pro-table/sortable-row';
|
||||||
import { ProTableWrapper } from '@workspace/ui/custom-components/pro-table/wrapper';
|
import { ProTableWrapper } from '@workspace/ui/custom-components/pro-table/wrapper';
|
||||||
|
import { cn } from '@workspace/ui/lib/utils.js';
|
||||||
import { useSize } from 'ahooks';
|
import { useSize } from 'ahooks';
|
||||||
import { GripVertical, ListRestart, Loader, RefreshCcw } from 'lucide-react';
|
import { GripVertical, ListRestart, Loader, RefreshCcw } from 'lucide-react';
|
||||||
import React, { Fragment, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
import React, { Fragment, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
||||||
@ -258,7 +259,10 @@ export function ProTable<
|
|||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
<TableRow key={headerGroup.id}>
|
<TableRow key={headerGroup.id}>
|
||||||
{headerGroup.headers.map((header) => (
|
{headerGroup.headers.map((header) => (
|
||||||
<TableHead key={header.id} className={getTableHeaderClass(header.column.id)}>
|
<TableHead
|
||||||
|
key={header.id}
|
||||||
|
className={cn('!z-auto', getTableHeaderClass(header.column.id))}
|
||||||
|
>
|
||||||
<ColumnHeader
|
<ColumnHeader
|
||||||
header={header}
|
header={header}
|
||||||
text={{
|
text={{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user