Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-06 03:30:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Add server form component with protocol configuration and localization support

Browse Source
This commit is contained in:
web 2025-08-23 09:10:05 -07:00
parent 26176a7afa
commit 217ddce60c
26 changed files with 3399 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/admin/app/dashboard/auth-control/forms/apple-form.tsx
View File

@ -61,6 +61,7 @@ export default function AppleForm() {
return data.data;
},
enabled: open,
});
const form = useForm<AppleFormData>({

2
apps/admin/app/dashboard/auth-control/forms/facebook-form.tsx
View File

@ -52,7 +52,7 @@ export default function FacebookForm() {
});
return data.data;
},
// 移除 enabled: open，现在默认加载数据
enabled: open,
});
const form = useForm<FacebookFormData>({

1
apps/admin/app/dashboard/auth-control/forms/github-form.tsx
View File

@ -53,6 +53,7 @@ export default function GithubForm() {
return data.data;
},
enabled: open,
});
const form = useForm<GithubFormData>({

1
apps/admin/app/dashboard/auth-control/forms/telegram-form.tsx
View File

@ -53,6 +53,7 @@ export default function TelegramForm() {
return data.data;
},
enabled: open,
});
const form = useForm<TelegramFormData>({

362
apps/admin/app/dashboard/nodes/node-form.tsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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>
);
}

205
apps/admin/components/sidebar-left.tsx
View File

@ -1,28 +1,137 @@
'use client';
import { navs } from '@/config/navs';
import useGlobalStore from '@/config/use-global';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@workspace/ui/components/sidebar';
import { Icon } from '@workspace/ui/custom-components/icon';
import { cn } from '@workspace/ui/lib/utils';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/image';
import Link from 'next/link';
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>) {
const { common } = useGlobalStore();
const { site } = common;
const t = useTranslations('menu');
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 (
<Sidebar className='border-r-0' collapsible='icon' {...props}>
<SidebarHeader className='p-2'>
@ -49,27 +158,52 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent className='py-2'>
<SidebarMenu>
{navs.map((nav) => (
<SidebarGroup key={nav.title} className='py-1'>
{nav.items && (
<SidebarGroupLabel className='py-1 text-xs'>{t(nav.title)}</SidebarGroupLabel>
)}
<SidebarGroupContent>
{!isMobile && state === 'collapsed'
? (navs as typeof navs).map((nav) => (
<SidebarMenuItem key={nav.title} className='mx-auto'>
{renderCollapsedFlyout(nav)}
</SidebarMenuItem>
))
: (navs as typeof navs).map((nav) => {
if (hasChildren(nav)) {
const isOpen = openGroups[nav.title] ?? false;
return (
<SidebarGroup key={nav.title} className={cn('py-1')}>
<SidebarMenuButton
size='sm'
className={cn('mb-2 flex h-8 w-full items-center justify-between', {
'bg-accent': isOpen,
})}
onClick={() => handleToggleGroup(nav.title)}
tabIndex={0}
style={{ fontWeight: 500 }}
// isActive={isGroupActive(nav)}
>
<span className='flex min-w-0 items-center gap-2'>
{'icon' in nav && (nav as any).icon ? (
<Icon icon={(nav as any).icon} className='size-4 shrink-0' />
) : 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>
{isOpen && (
<SidebarGroupContent className='px-4'>
<SidebarMenu>
{(nav.items || [nav]).map((item) => (
{nav.items.map((item: any) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
size='sm'
tooltip={t(item.title)}
className='h-8'
isActive={
item.url === '/dashboard'
? pathname === item.url
: pathname.startsWith(item.url)
}
tooltip={t(item.title)}
isActive={isActiveUrl(item.url)}
>
<Link href={item.url}>
{item.icon && <Icon icon={item.icon} className='size-4' />}
@ -80,8 +214,49 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
))}
</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>
</SidebarContent>
</Sidebar>

153
apps/admin/config/navs.ts
View File

@ -4,86 +4,33 @@ export const navs = [
url: '/dashboard',
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: [
{
title: 'Subscribe Config',
url: '/dashboard/subscribe',
icon: 'flat-color-icons:ruler',
},
{
title: 'Server Management',
url: '/dashboard/server',
icon: 'flat-color-icons:data-protection',
},
{
title: 'Product Management',
url: '/dashboard/product',
icon: 'flat-color-icons:shop',
title: 'Server Management',
url: '/dashboard/servers',
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: [
{
title: 'Order Management',
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: 'Order Management', url: '/dashboard/order', icon: 'flat-color-icons:todo-list' },
{ title: 'Coupon Management', url: '/dashboard/coupon', icon: 'flat-color-icons:bookmark' },
{
title: 'Marketing Management',
url: '/dashboard/marketing',
@ -94,6 +41,19 @@ export const navs = [
url: '/dashboard/announcement',
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',
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) {
@ -114,7 +129,6 @@ export function findNavByUrl(url: string) {
const regex = new RegExp(`^${regexPattern}$`);
return regex.test(path);
}
function findNav(items: any[], url: string, path: any[] = []): any[] {
for (const item of items) {
if (item.url === url || (item.url && matchDynamicRoute(item.url, url))) {
@ -122,13 +136,10 @@ export function findNavByUrl(url: string) {
}
if (item.items) {
const result = findNav(item.items, url, [...path, item]);
if (result.length) {
return result;
}
if (result.length) return result;
}
}
return [];
}
return findNav(navs, url);
}

32
apps/admin/locales/en-US/menu.json
View File

@ -1,27 +1,41 @@
{
"ADS Config": "ADS Config",
"Announcement Management": "Announcement Management",
"Application Management": "Application Management",
"Auth Control": "Auth Control",
"Balance": "Balance",
"Commerce": "Commerce",
"Commission": "Commission",
"Coupon Management": "Coupon Management",
"Dashboard": "Dashboard",
"Document Management": "Document Management",
"Finance": "Finance",
"Email": "Email",
"Gift": "Gift",
"Login": "Login",
"Logs & Analytics": "Logs & Analytics",
"Maintenance": "Maintenance",
"Marketing Management": "Marketing Management",
"Node Management": "Node Management",
"Order Management": "Order Management",
"Payment Config": "Payment Config",
"Product Management": "Product Management",
"Protocol Management": "Protocol Management",
"Rule Management": "Rule Management",
"Server": "Server",
"Register": "Register",
"Reset Subscribe": "Reset Subscribe",
"SMS": "SMS",
"Server Management": "Server Management",
"Settings": "Settings",
"Server Traffic": "Server Traffic",
"Subscribe": "Subscribe",
"Subscribe Config": "Subscribe Config",
"Subscribe Traffic": "Subscribe Traffic",
"System": "System",
"System Config": "System Config",
"System Management": "System Management",
"System Tool": "System Tool",
"Ticket Management": "Ticket Management",
"User": "User",
"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
View 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
View 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."
}

2
apps/admin/locales/request.ts
View File

@ -18,6 +18,8 @@ export default getRequestConfig(async () => {
'ads': (await import(`./${locale}/ads.json`)).default,
'payment': (await import(`./${locale}/payment.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,
'order': (await import(`./${locale}/order.json`)).default,
'coupon': (await import(`./${locale}/coupon.json`)).default,

36
apps/admin/locales/zh-CN/menu.json
View File

@ -1,27 +1,41 @@
{
"ADS Config": "ADS配置",
"ADS Config": "广告配置",
"Announcement Management": "公告管理",
"Application Management": "应用管理",
"Auth Control": "认证控制",
"Balance": "余额变动",
"Commerce": "商务",
"Commission": "佣金记录",
"Coupon Management": "优惠券管理",
"Dashboard": "仪表盘",
"Document Management": "文档管理",
"Finance": "财务",
"Email": "邮件日志",
"Gift": "赠送记录",
"Login": "登录日志",
"Logs & Analytics": "日志与分析",
"Maintenance": "运维",
"Marketing Management": "营销管理",
"Node Management": "节点管理",
"Order Management": "订单管理",
"Payment Config": "支付配置",
"Product Management": "产品管理",
"Protocol Management": "协议管理",
"Rule Management": "规则管理",
"Server": "服务",
"Product Management": "商品管理",
"Register": "注册日志",
"Reset Subscribe": "重置订阅",
"SMS": "短信日志",
"Server Management": "服务管理",
"Settings": "设置",
"Server Traffic": "服务流量",
"Subscribe": "订阅日志",
"Subscribe Config": "订阅配置",
"Subscribe Traffic": "订阅流量",
"System": "系统",
"System Config": "系统配置",
"System Management": "系统管理",
"System Tool": "系统工具",
"Ticket Management": "工单管理",
"User": "用户",
"User Detail": "用户详情",
"User Management": "用户管理"
"User Management": "用户管理",
"Users & Support": "用户与支持"
}

38
apps/admin/locales/zh-CN/nodes.json Normal file
View 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
View 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
View File

@ -652,23 +652,15 @@ declare namespace API {
type GetMessageLogListParams = {
page: number;
size: number;
type: string;
platform?: string;
to?: string;
subject?: string;
content?: string;
status?: number;
type: number;
search?: string;
};
type GetMessageLogListRequest = {
page: number;
size: number;
type: string;
platform?: string;
to?: string;
subject?: string;
content?: string;
status?: number;
type: number;
search?: string;
};
type GetMessageLogListResponse = {
@ -968,6 +960,23 @@ declare namespace API {
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 = {
page: number;
size: number;
@ -1015,14 +1024,13 @@ declare namespace API {
type MessageLog = {
id: number;
type: string;
type: number;
platform: string;
to: string;
subject: string;
content: string;
content: Record<string, any>;
status: number;
created_at: number;
updated_at: number;
};
type MobileAuthenticateConfig = {
@ -1308,6 +1316,14 @@ declare namespace API {
order_no: string;
};
type ResetSubscribeTrafficLog = {
id: number;
type: number;
user_subscribe_id: number;
order_no?: string;
reset_at: number;
};
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: number;

18
apps/admin/services/admin/user.ts
View File

@ -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 */
export async function getUserSubscribeTrafficLogs(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)

13
apps/admin/services/common/typings.d.ts vendored
View File

@ -327,14 +327,13 @@ declare namespace API {
type MessageLog = {
id: number;
type: string;
type: number;
platform: string;
to: string;
subject: string;
content: string;
content: Record<string, any>;
status: number;
created_at: number;
updated_at: number;
};
type MobileAuthenticateConfig = {
@ -618,6 +617,14 @@ declare namespace API {
cf_token?: string;
};
type ResetSubscribeTrafficLog = {
id: number;
type: number;
user_subscribe_id: number;
order_no?: string;
reset_at: number;
};
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: number;

2
apps/user/services/common/common.ts
View File

@ -1,5 +1,5 @@
// @ts-ignore
/* eslint-disable */
import request from '@/utils/request';
/** Get Ads GET /v1/common/ads */

13
apps/user/services/common/typings.d.ts vendored
View File

@ -327,14 +327,13 @@ declare namespace API {
type MessageLog = {
id: number;
type: string;
type: number;
platform: string;
to: string;
subject: string;
content: string;
content: Record<string, any>;
status: number;
created_at: number;
updated_at: number;
};
type MobileAuthenticateConfig = {
@ -618,6 +617,14 @@ declare namespace API {
cf_token?: string;
};
type ResetSubscribeTrafficLog = {
id: number;
type: number;
user_subscribe_id: number;
order_no?: string;
reset_at: number;
};
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: number;

13
apps/user/services/user/typings.d.ts vendored
View File

@ -342,14 +342,13 @@ declare namespace API {
type MessageLog = {
id: number;
type: string;
type: number;
platform: string;
to: string;
subject: string;
content: string;
content: Record<string, any>;
status: number;
created_at: number;
updated_at: number;
};
type MobileAuthenticateConfig = {
@ -728,6 +727,14 @@ declare namespace API {
order_no: string;
};
type ResetSubscribeTrafficLog = {
id: number;
type: number;
user_subscribe_id: number;
order_no?: string;
reset_at: number;
};
type ResetTrafficOrderRequest = {
user_subscribe_id: number;
payment: number;

6
packages/ui/src/custom-components/pro-table/pro-table.tsx
View File

@ -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 { SortableRow } from '@workspace/ui/custom-components/pro-table/sortable-row';
import { ProTableWrapper } from '@workspace/ui/custom-components/pro-table/wrapper';
import { cn } from '@workspace/ui/lib/utils.js';
import { useSize } from 'ahooks';
import { GripVertical, ListRestart, Loader, RefreshCcw } from 'lucide-react';
import React, { Fragment, useEffect, useImperativeHandle, useRef, useState } from 'react';
@ -258,7 +259,10 @@ export function ProTable<
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{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
header={header}
text={{