S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(affiliate): Add Affiliate component with commission display and invite link functionality

Browse Source
This commit is contained in:
web@ppanel 2025-01-03 13:54:33 +07:00
parent fb0c510b93
commit 4aea4e811f
8 changed files with 134 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/admin/config/constants.ts
View File

@ -4,10 +4,10 @@ import packageJSON from '../package.json';
export const locales = packageJSON.i18n.outputLocales; export const locales = packageJSON.i18n.outputLocales;
export const defaultLocale = packageJSON.i18n.entry; export const defaultLocale = packageJSON.i18n.entry;
export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || defaultLocale; export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') ?? defaultLocale;
export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL'); export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL') ?? process.env.NEXT_PUBLIC_SITE_URL;
export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL'); export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL') ?? process.env.NEXT_PUBLIC_API_URL;
export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL'); export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL');
export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD'); export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD');

2
apps/admin/services/admin/index.ts
View File

@ -1,5 +1,5 @@
// @ts-ignore // @ts-ignore
// API 更新时间： // API 更新时间：
// API 唯一标识： // API 唯一标识：
import * as announcement from './announcement'; import * as announcement from './announcement';

16
apps/admin/utils/request.ts
View File

@ -1,7 +1,7 @@
import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants'; import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants';
import { getTranslations } from '@/locales/utils'; import { getTranslations } from '@/locales/utils';
import { isBrowser } from '@workspace/ui/utils'; import { isBrowser } from '@workspace/ui/utils';
import requset, { InternalAxiosRequestConfig } from 'axios'; import axios, { InternalAxiosRequestConfig } from 'axios';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getAuthorization, Logout } from './common'; import { getAuthorization, Logout } from './common';
@ -10,6 +10,7 @@ async function handleError(response: any) {
if ([40002, 40003, 40004].includes(code)) return Logout(); if ([40002, 40003, 40004].includes(code)) return Logout();
if (response?.config?.skipErrorHandler) return; if (response?.config?.skipErrorHandler) return;
if (!isBrowser()) return; if (!isBrowser()) return;
const t = await getTranslations('common'); const t = await getTranslations('common');
const message = const message =
t(`request.${code}`) !== `request.${code}` t(`request.${code}`) !== `request.${code}`
@ -19,21 +20,24 @@ async function handleError(response: any) {
toast.error(message); toast.error(message);
} }
requset.defaults.baseURL = NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL; const requset = axios.create({
// axios.defaults.withCredentials = true; baseURL: NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL,
// axios.defaults.timeout = 10000; // timeout: 10000,
// withCredentials: true,
});
requset.interceptors.request.use( requset.interceptors.request.use(
async ( async (
config: InternalAxiosRequestConfig & { config: InternalAxiosRequestConfig & {
Authorization?: string; Authorization?: string;
skipErrorHandler?: boolean;
}, },
) => { ) => {
const Authorization = getAuthorization(config.Authorization); const Authorization = getAuthorization(config.Authorization);
if (Authorization) config.headers.Authorization = Authorization; if (Authorization) config.headers.Authorization = Authorization;
return config; return config;
}, },
(error) => Promise.reject(error), (error) => Promise.reject(new Error(error)),
); );
requset.interceptors.response.use( requset.interceptors.response.use(
@ -47,7 +51,7 @@ requset.interceptors.response.use(
}, },
async (error) => { async (error) => {
await handleError(error); await handleError(error);
return Promise.reject(error); return Promise.reject(new Error(error));
}, },
); );

103
apps/user/app/(main)/(user)/affiliate/page.tsx
View File

@ -1,104 +1,5 @@
'use client'; import Affiliate from '@/components/affiliate';
import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import { ProList } from '@/components/pro-list';
import useGlobalStore from '@/config/use-global';
import { queryUserAffiliate } from '@/services/user/user';
import { Button } from '@workspace/ui/components/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@workspace/ui/components/card';
import { formatDate } from '@workspace/ui/utils';
import { Copy } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { toast } from 'sonner';
export default function Page() { export default function Page() {
const t = useTranslations('affiliate'); return <Affiliate />;
const { user, common } = useGlobalStore();
const [sum, setSum] = useState<number>();
return (
<div className='flex flex-col gap-4'>
<Card>
<CardHeader>
<CardTitle>{t('totalCommission')}</CardTitle>
<CardDescription>{t('commissionInfo')}</CardDescription>
</CardHeader>
<CardContent>
<div className='flex items-baseline gap-2'>
<span className='text-3xl font-bold'>
<Display type='currency' value={sum} />
</span>
<span className='text-muted-foreground text-sm'>
({t('commissionRate')}: {common?.invite?.referral_percentage}%)
</span>
</div>
</CardContent>
</Card>
<Card>
<CardHeader className='flex flex-row items-center justify-between space-y-0'>
<CardTitle className='text-lg font-medium'>{t('inviteCode')}</CardTitle>
</CardHeader>
<CardContent>
<div className='flex items-center justify-between'>
<code className='bg-muted rounded px-2 py-1 text-2xl font-bold'>
{user?.refer_code}
</code>
<CopyToClipboard
text={`${location.origin}/auth?invite=${user?.refer_code}`}
onCopy={(text, result) => {
if (result) {
toast.success(t('copySuccess'));
}
}}
>
<Button variant='secondary' size='sm' className='gap-2'>
<Copy className='h-4 w-4' />
{t('copyInviteLink')}
</Button>
</CopyToClipboard>
</div>
</CardContent>
</Card>
<ProList<API.UserAffiliate, Record<string, unknown>>
request={async (pagination, filter) => {
const response = await queryUserAffiliate({ ...pagination, ...filter });
setSum(response.data.data?.sum);
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
header={{
title: t('inviteRecords'),
}}
renderItem={(item) => {
return (
<Card className='overflow-hidden'>
<CardContent className='p-3 text-sm'>
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('userEmail')}</span>
<span>{item.email}</span>
</li>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('registrationTime')}</span>
<time>{formatDate(item.registered_at)}</time>
</li>
</ul>
</CardContent>
</Card>
);
}}
empty={<Empty />}
/>
</div>
);
} }

105
apps/user/components/affiliate/index.tsx Normal file
View File

@ -0,0 +1,105 @@
'use client';
import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import { ProList } from '@/components/pro-list';
import useGlobalStore from '@/config/use-global';
import { queryUserAffiliate } from '@/services/user/user';
import { Button } from '@workspace/ui/components/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@workspace/ui/components/card';
import { formatDate } from '@workspace/ui/utils';
import { Copy } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { toast } from 'sonner';
export default function Affiliate() {
const t = useTranslations('affiliate');
const { user, common } = useGlobalStore();
const [sum, setSum] = useState<number>();
return (
<div className='flex flex-col gap-4'>
<Card>
<CardHeader>
<CardTitle>{t('totalCommission')}</CardTitle>
<CardDescription>{t('commissionInfo')}</CardDescription>
</CardHeader>
<CardContent>
<div className='flex items-baseline gap-2'>
<span className='text-3xl font-bold'>
<Display type='currency' value={sum} />
</span>
<span className='text-muted-foreground text-sm'>
({t('commissionRate')}: {common?.invite?.referral_percentage}%)
</span>
</div>
</CardContent>
</Card>
<Card>
<CardHeader className='flex flex-row items-center justify-between space-y-0'>
<CardTitle className='text-lg font-medium'>{t('inviteCode')}</CardTitle>
</CardHeader>
<CardContent>
<div className='flex items-center justify-between'>
<code className='bg-muted rounded px-2 py-1 text-2xl font-bold'>
{user?.refer_code}
</code>
<CopyToClipboard
text={`${location.origin}/auth?invite=${user?.refer_code}`}
onCopy={(text, result) => {
if (result) {
toast.success(t('copySuccess'));
}
}}
>
<Button variant='secondary' size='sm' className='gap-2'>
<Copy className='h-4 w-4' />
{t('copyInviteLink')}
</Button>
</CopyToClipboard>
</div>
</CardContent>
</Card>
<ProList<API.UserAffiliate, Record<string, unknown>>
request={async (pagination, filter) => {
const response = await queryUserAffiliate({ ...pagination, ...filter });
setSum(response.data.data?.sum);
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
header={{
title: t('inviteRecords'),
}}
renderItem={(item) => {
return (
<Card className='overflow-hidden'>
<CardContent className='p-3 text-sm'>
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('userEmail')}</span>
<span>{item.email}</span>
</li>
<li className='font-semibold'>
<span className='text-muted-foreground'>{t('registrationTime')}</span>
<time>{formatDate(item.registered_at)}</time>
</li>
</ul>
</CardContent>
</Card>
);
}}
empty={<Empty />}
/>
</div>
);
}

3
apps/user/components/subscribe/recharge.tsx
View File

@ -23,7 +23,7 @@ import Image from 'next/image';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react'; import { useEffect, useState, useTransition } from 'react';
export default function Recharge(props: ButtonProps) { export default function Recharge(props: Readonly<ButtonProps>) {
const t = useTranslations('subscribe'); const t = useTranslations('subscribe');
const { common } = useGlobalStore(); const { common } = useGlobalStore();
const { currency } = common; const { currency } = common;
@ -38,6 +38,7 @@ export default function Recharge(props: ButtonProps) {
}); });
const { data: paymentMethods } = useQuery({ const { data: paymentMethods } = useQuery({
enabled: open,
queryKey: ['getAvailablePaymentMethods'], queryKey: ['getAvailablePaymentMethods'],
queryFn: async () => { queryFn: async () => {
const { data } = await getAvailablePaymentMethods(); const { data } = await getAvailablePaymentMethods();

6
apps/user/config/constants.ts
View File

@ -4,10 +4,10 @@ import packageJSON from '../package.json';
export const locales = packageJSON.i18n.outputLocales; export const locales = packageJSON.i18n.outputLocales;
export const defaultLocale = packageJSON.i18n.entry; export const defaultLocale = packageJSON.i18n.entry;
export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0]; export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') ?? defaultLocale;
export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL'); export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL') ?? process.env.NEXT_PUBLIC_SITE_URL;
export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL'); export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL') ?? process.env.NEXT_PUBLIC_API_URL;
export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL'); export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL');
export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD'); export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD');

14
apps/user/utils/request.ts
View File

@ -1,7 +1,7 @@
import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants'; import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants';
import { getTranslations } from '@/locales/utils'; import { getTranslations } from '@/locales/utils';
import { isBrowser } from '@workspace/ui/utils'; import { isBrowser } from '@workspace/ui/utils';
import requset, { InternalAxiosRequestConfig } from 'axios'; import axios, { InternalAxiosRequestConfig } from 'axios';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getAuthorization, Logout } from './common'; import { getAuthorization, Logout } from './common';
@ -20,9 +20,11 @@ async function handleError(response: any) {
toast.error(message); toast.error(message);
} }
requset.defaults.baseURL = NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL; const requset = axios.create({
// axios.defaults.withCredentials = true; baseURL: NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL,
// axios.defaults.timeout = 10000; // timeout: 10000,
// withCredentials: true,
});
requset.interceptors.request.use( requset.interceptors.request.use(
async ( async (
@ -35,7 +37,7 @@ requset.interceptors.request.use(
if (Authorization) config.headers.Authorization = Authorization; if (Authorization) config.headers.Authorization = Authorization;
return config; return config;
}, },
(error) => Promise.reject(error), (error) => Promise.reject(new Error(error)),
); );
requset.interceptors.response.use( requset.interceptors.response.use(
@ -49,7 +51,7 @@ requset.interceptors.response.use(
}, },
async (error) => { async (error) => {
await handleError(error); await handleError(error);
return Promise.reject(error); return Promise.reject(new Error(error));
}, },
); );