🔖 chore(release): v1.3.0 [skip ci]

# [1.3.0](https://github.com/perfect-panel/ppanel-web/compare/v1.2.0...v1.3.0) (2025-08-15)

### ♻ Code Refactoring

* Refactoring and adding multiple features ([65c9b9f](https://github.com/perfect-panel/ppanel-web/commit/65c9b9f))

### ✨ Features

* **api**: Add getClient API endpoint to retrieve subscription applications ([7a279e6](https://github.com/perfect-panel/ppanel-web/commit/7a279e6))
* **marketing**: Add marketing management features and localization updates ([ea08de0](https://github.com/perfect-panel/ppanel-web/commit/ea08de0))
* **protocol**: Add template preview functionality with localization support ([0448d21](https://github.com/perfect-panel/ppanel-web/commit/0448d21))
* **subscribe**: Update subscription management localization and add new fields ([1d9b0a4](https://github.com/perfect-panel/ppanel-web/commit/1d9b0a4))

### 🐛 Bug Fixes

* **bun**: Update bun.lockb to reflect dependency changes ([bbcd018](https://github.com/perfect-panel/ppanel-web/commit/bbcd018))
* **editor**: Add Go template editor component and update related schemas ([9d9c3cd](https://github.com/perfect-panel/ppanel-web/commit/9d9c3cd))
* **editor**: Enhance Go Template Editor to support trimmed template tags and improve range/end matching ([641ed5e](https://github.com/perfect-panel/ppanel-web/commit/641ed5e))
* **editor**: Enhance Go Template Editor with schema support and improved completion ([5b21d8a](https://github.com/perfect-panel/ppanel-web/commit/5b21d8a))
* **enhaced-input**: Disable autocomplete for EnhancedInput component ([f190c68](https://github.com/perfect-panel/ppanel-web/commit/f190c68))
* **global**: Add user agent limit settings to subscription configuration ([822416d](https://github.com/perfect-panel/ppanel-web/commit/822416d))
* **locales**: Update 'conf' output format to use uppercase 'CONF' ([fce9119](https://github.com/perfect-panel/ppanel-web/commit/fce9119))
* **locales**: Update "userAccount" label to "user" in multiple localization files ([48415e9](https://github.com/perfect-panel/ppanel-web/commit/48415e9))
* **protocol-form**: Swap 'description' and 'user_agent' columns for improved clarity in the table ([72a4106](https://github.com/perfect-panel/ppanel-web/commit/72a4106))
* **protocol-form**: Update protocol options descriptions for clarity and add new security and transport options ([e5d4deb](https://github.com/perfect-panel/ppanel-web/commit/e5d4deb))
* **protocol**: Add 'conf' output format option and update translations ([292efdf](https://github.com/perfect-panel/ppanel-web/commit/292efdf))
* **protpcp-form**: Rename 'schema' to 'scheme' for consistency across the application ([6ab2ba9](https://github.com/perfect-panel/ppanel-web/commit/6ab2ba9))
* **register**: Update localization files to include trial subscription settings and descriptions ([33daa1f](https://github.com/perfect-panel/ppanel-web/commit/33daa1f))
* **system**: Add time unit translations for user registration settings in multiple languages ([296a6c1](https://github.com/perfect-panel/ppanel-web/commit/296a6c1))
* Update privacy policy and terms of service schemas to use correct field names ([0e6ba5b](https://github.com/perfect-panel/ppanel-web/commit/0e6ba5b))

.github/workflows/publish-release-assets.yml

@@ -66,7 +66,7 @@ jobs:
         id: version
         run: echo "PPANEL_VERSION=$(jq -r '.version' package.json)" >> $GITHUB_ENV
 
-      - name: Build and push Docker image for ppanel-user-web
+      - name: Build and push Docker image for ppanel-admin-web
         uses: docker/build-push-action@v6
         with:
           context: .

apps/admin/app/(auth)/email/auth-form.tsx

@@ -1,27 +1,24 @@
 'use client';
 
+import { resetPassword, userLogin, userRegister } from '@/services/common/auth';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
 import {
   NEXT_PUBLIC_DEFAULT_USER_EMAIL,
   NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
 } from '@/config/constants';
-import useGlobalStore from '@/config/use-global';
-import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
 import { getRedirectUrl, setAuthorization } from '@/utils/common';
-import { useTranslations } from 'next-intl';
+import LoginForm from './login-form';
-import { useRouter } from 'next/navigation';
+import RegisterForm from './register-form';
-import { ReactNode, useState, useTransition } from 'react';
+import ResetForm from './reset-form';
-import { toast } from 'sonner';
-import UserCheckForm from './user-check-form';
-import UserLoginForm from './user-login-form';
-import UserRegisterForm from './user-register-form';
-import UserResetForm from './user-reset-form';
 
-export default function UserAuthForm() {
+export default function EmailAuthForm() {
   const t = useTranslations('auth');
-  const { common } = useGlobalStore();
-  const { register } = common;
   const router = useRouter();
-  const [type, setType] = useState<'login' | 'register' | 'reset'>();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>('login');
   const [loading, startTransition] = useTransition();
   const [initialValues, setInitialValues] = useState<{
     email?: string;
@@ -41,44 +38,35 @@ export default function UserAuthForm() {
     startTransition(async () => {
       try {
         switch (type) {
-          case 'login':
+          case 'login': {
-            // eslint-disable-next-line no-case-declarations
             const login = await userLogin(params);
             toast.success(t('login.success'));
             onLogin(login.data.data?.token);
             break;
-          case 'register':
+          }
-            // eslint-disable-next-line no-case-declarations
+          case 'register': {
             const create = await userRegister(params);
             toast.success(t('register.success'));
             onLogin(create.data.data?.token);
             break;
+          }
           case 'reset':
             await resetPassword(params);
             toast.success(t('reset.success'));
             setType('login');
             break;
-          default:
-            if (type === 'reset') break;
-            // eslint-disable-next-line no-case-declarations
-            const response = await checkUser(params);
-            setInitialValues({
-              ...initialValues,
-              ...params,
-            });
-            setType(response.data.data?.exist ? 'login' : 'register');
-            break;
         }
       } catch (error) {
         /* empty */
       }
     });
   };
+
   let UserForm: ReactNode = null;
   switch (type) {
     case 'login':
       UserForm = (
-        <UserLoginForm
+        <LoginForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -89,7 +77,7 @@ export default function UserAuthForm() {
       break;
     case 'register':
       UserForm = (
-        <UserRegisterForm
+        <RegisterForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -100,7 +88,7 @@ export default function UserAuthForm() {
       break;
     case 'reset':
       UserForm = (
-        <UserResetForm
+        <ResetForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -109,15 +97,6 @@ export default function UserAuthForm() {
         />
       );
       break;
-    default:
-      UserForm = (
-        <UserCheckForm
-          loading={loading}
-          onSubmit={handleFormSubmit}
-          initialValues={initialValues}
-        />
-      );
-      break;
   }
 
   return (
@@ -128,34 +107,6 @@ export default function UserAuthForm() {
           {t(`${type || 'check'}.description`)}
         </div>
       </div>
-      {/* {!((type === 'register' && register.stop_register) || type === 'reset') && (
-        <>
-          <div className='mb-3 flex flex-wrap items-center justify-center gap-3 font-bold'>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:telegram' className='mr-2 size-5' />
-              Telegram
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:google' className='mr-2 size-5' />
-              Google
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:apple' className='mr-2 size-5' />
-              Apple
-            </Button>
-          </div>
-          <div
-            className={cn(
-              'my-14 flex h-0 items-center text-center',
-              'before:mr-4 before:block before:w-1/2 before:border-b-[1px]',
-              'after:ml-4 after:w-1/2 after:border-b-[1px]',
-            )}
-          >
-            <span className='text-muted-foreground w-[125px] text-sm'>{t('orWithEmail')}</span>
-          </div>
-        </>
-      )} */}
-
       {UserForm}
     </>
   );

apps/admin/app/(auth)/email/login-form.tsx

@@ -1,16 +1,16 @@
 import useGlobalStore from '@/config/use-global';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import CloudFlareTurnstile, { TurnstileRef } from '../turnstile';
 
-export default function UserLoginForm({
+export default function LoginForm({
   loading,
   onSubmit,
   initialValues,
@@ -21,14 +21,14 @@ export default function UserLoginForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.login');
   const { common } = useGlobalStore();
   const { verify } = common;
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
     cf_token:
       verify.enable_login_verify && verify.turnstile_site_key ? z.string() : z.string().optional(),
@@ -38,17 +38,26 @@ export default function UserLoginForm({
     defaultValues: initialValues,
   });
 
+  const turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
   return (
     <>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+        <form onSubmit={handleSubmit} className='grid gap-6'>
           <FormField
             control={form.control}
             name='email'
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -60,12 +69,7 @@ export default function UserLoginForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input
+                  <Input placeholder='Enter your password...' type='password' {...field} />
-                    disabled={loading}
-                    placeholder='Enter your password...'
-                    type='password'
-                    {...field}
-                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -78,7 +82,7 @@ export default function UserLoginForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <CloudFlareTurnstile id='login' {...field} />
+                    <CloudFlareTurnstile id='login' {...field} ref={turnstile} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -100,10 +104,10 @@ export default function UserLoginForm({
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('register');
           }}
         >
-          {t('switchAccount')}
+          {t('registerAccount')}
         </Button>
       </div>
     </>

apps/admin/app/(auth)/email/register-form.tsx

@@ -1,19 +1,18 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile, { TurnstileRef } from '../turnstile';
 
-export default function UserRegisterForm({
+export default function RegisterForm({
   loading,
   onSubmit,
   initialValues,
@@ -24,34 +23,36 @@ export default function UserRegisterForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.register');
   const { common } = useGlobalStore();
-  const { verify, register, invite } = common;
+  const { verify, auth, invite } = common;
 
-  const [targetDate, setTargetDate] = useState<number>();
+  const handleCheckUser = async (email: string) => {
-  const [, { seconds }] = useCountDown({
+    try {
-    targetDate,
+      if (!auth.email.enable_domain_suffix) return true;
-    onEnd: () => {
+      const domain = email.split('@')[1];
-      setTargetDate(undefined);
+      const isValid = auth.email?.domain_suffix_list.split('\n').includes(domain || '');
-    },
+      return isValid;
-  });
+    } catch (error) {
-  const handleSendCode = async () => {
+      console.log('Error checking user:', error);
-    await sendEmailCode({
+      return false;
-      email: initialValues.email,
+    }
-      type: 1,
-    });
-    setTargetDate(Date.now() + 60000);
   };
 
   const formSchema = z
     .object({
-      email: z.string(),
+      email: z
+        .string()
+        .email(t('email'))
+        .refine(handleCheckUser, {
+          message: t('whitelist'),
+        }),
       password: z.string(),
       repeat_password: z.string(),
-      code: register.enable_email_verify ? z.string() : z.string().nullish(),
+      code: auth.email.enable_verify ? z.string() : z.string().nullish(),
-      invite: invite.forced_invite ? z.string() : z.string().nullish(),
+      invite: invite.forced_invite ? z.string().min(1) : z.string().nullish(),
       cf_token:
         verify.enable_register_verify && verify.turnstile_site_key
           ? z.string()
@@ -66,28 +67,38 @@ export default function UserRegisterForm({
         });
       }
     });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       ...initialValues,
-      invite: sessionStorage.getItem('invite'),
+      invite: localStorage.getItem('invite') || '',
     },
   });
 
+  const turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
   return (
     <>
-      {register.stop_register ? (
+      {auth.register.stop_register ? (
         <Markdown>{t('message')}</Markdown>
       ) : (
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+          <form onSubmit={handleSubmit} className='grid gap-6'>
             <FormField
               control={form.control}
               name='email'
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                    <Input placeholder='Enter your email...' type='email' {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -99,12 +110,7 @@ export default function UserRegisterForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input
+                    <Input placeholder='Enter your password...' type='password' {...field} />
-                      disabled={loading}
-                      placeholder='Enter your password...'
-                      type='password'
-                      {...field}
-                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -127,7 +133,7 @@ export default function UserRegisterForm({
                 </FormItem>
               )}
             />
-            {register.enable_email_verify && (
+            {auth.email.enable_verify && (
               <FormField
                 control={form.control}
                 name='code'
@@ -142,9 +148,13 @@ export default function UserRegisterForm({
                           {...field}
                           value={field.value as string}
                         />
-                        <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
+                        <SendCode
-                          {seconds > 0 ? `${seconds}s` : t('get')}
+                          type='email'
-                        </Button>
+                          params={{
+                            ...form.getValues(),
+                            type: 1,
+                          }}
+                        />
                       </div>
                     </FormControl>
                     <FormMessage />
@@ -159,7 +169,7 @@ export default function UserRegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      disabled={loading}
+                      disabled={loading || !!localStorage.getItem('invite')}
                       placeholder={t('invite')}
                       {...field}
                       value={field.value || ''}
@@ -176,7 +186,7 @@ export default function UserRegisterForm({
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <CloudFlareTurnstile id='register' {...field} />
+                      <CloudFlareTurnstile id='register' {...field} ref={turnstile} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -191,13 +201,13 @@ export default function UserRegisterForm({
         </Form>
       )}
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/admin/app/(auth)/email/reset-form.tsx

@@ -1,18 +1,17 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
-import { useCountDown } from 'ahooks';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile, { TurnstileRef } from '../turnstile';
 
-export default function UserResetForm({
+export default function ResetForm({
   loading,
   onSubmit,
   initialValues,
@@ -23,32 +22,17 @@ export default function UserResetForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.reset');
 
   const { common } = useGlobalStore();
-  const { verify, register } = common;
+  const { verify, auth } = common;
-
-  const [targetDate, setTargetDate] = useState<number>();
-  const [, { seconds }] = useCountDown({
-    targetDate,
-    onEnd: () => {
-      setTargetDate(undefined);
-    },
-  });
-  const handleSendCode = async () => {
-    await sendEmailCode({
-      email: initialValues.email,
-      type: 2,
-    });
-    setTargetDate(Date.now() + 60000); // 60秒倒计时
-  };
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
-    code: register.enable_email_verify ? z.string() : z.string().nullish(),
+    code: auth?.email?.enable_verify ? z.string() : z.string().nullish(),
     cf_token:
       verify.enable_register_verify && verify.turnstile_site_key
         ? z.string()
@@ -59,17 +43,53 @@ export default function UserResetForm({
     defaultValues: initialValues,
   });
 
+  const turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
   return (
     <>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+        <form onSubmit={handleSubmit} className='grid gap-6'>
           <FormField
             control={form.control}
             name='email'
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='code'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <div className='flex items-center gap-2'>
+                    <Input
+                      disabled={loading}
+                      placeholder='Enter code...'
+                      type='text'
+                      {...field}
+                      value={field.value as string}
+                    />
+                    <SendCode
+                      type='email'
+                      params={{
+                        ...form.getValues(),
+                        type: 2,
+                      }}
+                    />
+                  </div>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -81,43 +101,12 @@ export default function UserResetForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input
+                  <Input placeholder='Enter your new password...' type='password' {...field} />
-                    disabled={loading}
-                    placeholder='Enter your password...'
-                    type='password'
-                    {...field}
-                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-
-          {register.enable_email_verify && (
-            <FormField
-              control={form.control}
-              name='code'
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <div className='flex items-center gap-2'>
-                      <Input
-                        disabled={loading}
-                        placeholder='Enter code...'
-                        type='text'
-                        {...field}
-                        value={field.value as string}
-                      />
-                      <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
-                        {seconds > 0 ? `${seconds}s` : t('get')}
-                      </Button>
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          )}
           {verify.enable_reset_password_verify && (
             <FormField
               control={form.control}
@@ -125,7 +114,7 @@ export default function UserResetForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <CloudFlareTurnstile id='reset' {...field} />
+                    <CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -139,13 +128,13 @@ export default function UserResetForm({
         </form>
       </Form>
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/admin/app/(auth)/page.tsx

@@ -8,13 +8,22 @@ import LoginLottie from '@workspace/ui/lotties/login.json';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
-import UserAuthForm from './user-auth-form';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import EmailAuthForm from './email/auth-form';
 
 export default function Page() {
   const t = useTranslations('auth');
-  const { common } = useGlobalStore();
+  const { common, user } = useGlobalStore();
   const { site } = common;
 
+  const router = useRouter();
+  useEffect(() => {
+    if (user) {
+      router.replace('/dashboard');
+    }
+  }, [router, user]);
+
   return (
     <main className='bg-muted/50 flex h-full min-h-screen items-center'>
       <div className='flex size-full flex-auto flex-col justify-center lg:flex-row'>
@@ -45,7 +54,7 @@ export default function Page() {
           <div className='lg:bg-background flex flex-col items-center rounded-2xl md:w-[600px] lg:flex-auto lg:p-10 lg:shadow'>
             <div className='flex flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
               <div className='flex flex-col justify-center pb-14 lg:flex-auto lg:pb-20'>
-                <UserAuthForm />
+                <EmailAuthForm />
               </div>
               <div className='flex items-center justify-end'>
                 {/* <div className='text-primary flex gap-5 text-sm font-semibold'>

apps/admin/app/(auth)/send-code.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { sendEmailCode, sendSmsCode } from '@/services/common/common';
+import { Button } from '@workspace/ui/components/button';
+import { useCountDown } from 'ahooks';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface SendCodeProps {
+  type: 'email' | 'phone';
+  params: {
+    email?: string;
+    type?: 1 | 2;
+    telephone_area_code?: string;
+    telephone?: string;
+  };
+}
+export default function SendCode({ type, params }: SendCodeProps) {
+  const t = useTranslations('auth');
+  const [targetDate, setTargetDate] = useState<number>();
+
+  const [, { seconds }] = useCountDown({
+    targetDate,
+    onEnd: () => {
+      setTargetDate(undefined);
+    },
+  });
+
+  const getEmailCode = async () => {
+    if (params.email && params.type) {
+      await sendEmailCode({
+        email: params.email,
+        type: params.type,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const getPhoneCode = async () => {
+    if (params.telephone && params.telephone_area_code && params.type) {
+      await sendSmsCode({
+        telephone: params.telephone,
+        telephone_area_code: params.telephone_area_code,
+        type: params.type,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const handleSendCode = async () => {
+    if (type === 'email') {
+      getEmailCode();
+    } else {
+      getPhoneCode();
+    }
+  };
+  const disabled =
+    seconds > 0 ||
+    (type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
+
+  return (
+    <Button type='button' onClick={handleSendCode} disabled={disabled}>
+      {seconds > 0 ? `${seconds}s` : t('get')}
+    </Button>
+  );
+}

apps/admin/app/(auth)/turnstile.tsx

@@ -1,26 +1,38 @@
 'use client';
 
-import useGlobalStore from '@/config/use-global';
 import { useLocale } from 'next-intl';
 import { useTheme } from 'next-themes';
-import { useEffect } from 'react';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
 import Turnstile, { useTurnstile } from 'react-turnstile';
 
-export default function CloudFlareTurnstile({
+import useGlobalStore from '@/config/use-global';
-  id,
+
-  value,
+export type TurnstileRef = {
-  onChange,
+  reset: () => void;
-}: {
+};
-  id?: string;
+
-  value?: null | string;
+const CloudFlareTurnstile = forwardRef<
-  onChange: (value?: string) => void;
+  TurnstileRef,
-}) {
+  {
+    id?: string;
+    value?: null | string;
+    onChange: (value?: string) => void;
+  }
+>(function CloudFlareTurnstile({ id, value, onChange }, ref) {
   const { common } = useGlobalStore();
   const { verify } = common;
   const { resolvedTheme } = useTheme();
   const locale = useLocale();
   const turnstile = useTurnstile();
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      reset: () => turnstile.reset(),
+    }),
+    [turnstile],
+  );
+
   useEffect(() => {
     if (value === '') {
       turnstile.reset();
@@ -51,4 +63,6 @@ export default function CloudFlareTurnstile({
       />
     )
   );
-}
+});
+
+export default CloudFlareTurnstile;

apps/admin/app/(auth)/user-check-form.tsx

@@ -1,109 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
-import { Button } from '@workspace/ui/components/button';
-import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
-import { Input } from '@workspace/ui/components/input';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-export default function UserCheckForm({
-  loading,
-  onSubmit,
-  initialValues,
-}: {
-  loading?: boolean;
-  onSubmit: (data: any) => void;
-  initialValues: any;
-}) {
-  const t = useTranslations('auth.check');
-  // const { common } = useGlobalStore();
-  // const { register } = common;
-  const formSchema = z.object({
-    email: z.string().email(t('email')),
-    // .refine(
-    //   (email) => {
-    //     if (!register.enable_email_domain_suffix) return true;
-    //     const domain = email.split('@')[1] as string;
-    //     return register.email_domain_suffix_list.split('\n').includes(domain);
-    //   },
-    //   {
-    //     message: t('whitelist'),
-    //   },
-    // ),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
-  });
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleEmailChange = (value: string) => {
-    form.setValue('email', value);
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    typingTimeoutRef.current = setTimeout(async () => {
-      const isValid = await form.trigger('email');
-      if (isValid) {
-        setIsSubmitting(true);
-        form.handleSubmit(onSubmit)();
-      } else {
-        setIsSubmitting(false);
-      }
-    }, 500);
-  };
-
-  useEffect(() => {
-    if (initialValues && initialValues.email) {
-      handleEmailChange(initialValues.email);
-    }
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
-        <FormField
-          control={form.control}
-          name='email'
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <Input
-                  disabled={loading}
-                  placeholder='Enter your email...'
-                  type='email'
-                  {...field}
-                  onChange={(e) => handleEmailChange(e.target.value)}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type='submit' disabled={!isSubmitting}>
-          {isSubmitting ? (
-            <>
-              <Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />
-              {t('checking')}
-            </>
-          ) : (
-            t('continue')
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/admin/app/dashboard/ads/ads-form.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const formSchema = z.object({
+  title: z.string(),
+  type: z.enum(['image', 'video']),
+  content: z.string(),
+  description: z.string(),
+  target_url: z.string().url(),
+  start_time: z.number(),
+  end_time: z.number(),
+});
+
+interface AdsFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function AdsForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: AdsFormProps<T>) {
+  const t = useTranslations('ads');
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+    } as any,
+  });
+
+  useEffect(() => {
+    form?.reset(initialValues);
+  }, [form, initialValues]);
+
+  const type = form.watch('type');
+  const startTime = form.watch('start_time');
+
+  const renderContentField = () => {
+    return (
+      <FormField
+        control={form.control}
+        name='content'
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('form.content')}</FormLabel>
+            <FormControl>
+              <EnhancedInput
+                placeholder={
+                  type === 'image'
+                    ? 'https://example.com/image.jpg'
+                    : 'https://example.com/video.mp4'
+                }
+                value={field.value}
+                onValueChange={(value) => {
+                  form.setValue('content', value);
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  };
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+    if (bool) setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='title'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.title')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterTitle')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='type'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.type')}</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        defaultValue={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        className='flex gap-4'
+                      >
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='image' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('form.typeImage')}</FormLabel>
+                        </FormItem>
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='video' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('form.typeVideo')}</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {renderContentField()}
+
+              <FormField
+                control={form.control}
+                name='description'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.description')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterDescription')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='target_url'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.targetUrl')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterTargetUrl')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='start_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.startTime')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='datetime-local'
+                        placeholder={t('form.enterStartTime')}
+                        value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
+                        min={Number(new Date().toISOString().slice(0, 16))}
+                        onValueChange={(value) => {
+                          const timestamp = value ? new Date(value).getTime() : 0;
+                          form.setValue(field.name, timestamp);
+                          const endTime = form.getValues('end_time');
+                          if (endTime && timestamp > endTime) {
+                            form.setValue('end_time', '');
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='end_time'
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>{t('form.endTime')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          type='datetime-local'
+                          placeholder={t('form.enterEndTime')}
+                          value={
+                            field.value ? new Date(field.value).toISOString().slice(0, 16) : ''
+                          }
+                          min={Number(
+                            startTime
+                              ? new Date(startTime).toISOString().slice(0, 16)
+                              : new Date().toISOString().slice(0, 16),
+                          )}
+                          disabled={!startTime}
+                          onValueChange={(value) => {
+                            const timestamp = value ? new Date(value).getTime() : 0;
+                            if (!startTime || timestamp < startTime) return;
+                            form.setValue(field.name, timestamp);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/ads/page.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { createAds, deleteAds, getAdsList, updateAds } from '@/services/admin/ads';
+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 { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import AdsForm from './ads-form';
+
+export default function Page() {
+  const t = useTranslations('ads');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.Ads, Record<string, unknown>>
+      action={ref}
+      header={{
+        toolbar: (
+          <AdsForm<API.CreateAdsRequest>
+            trigger={t('create')}
+            title={t('createAds')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createAds({
+                  ...values,
+                  status: 0,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      params={[
+        {
+          key: 'status',
+          placeholder: t('status'),
+          options: [
+            { label: t('enabled'), value: '1' },
+            { label: t('disabled'), value: '0' },
+          ],
+        },
+        {
+          key: 'search',
+        },
+      ]}
+      request={async (pagination, filters) => {
+        const { data } = await getAdsList({
+          ...pagination,
+          ...filters,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      columns={[
+        {
+          accessorKey: 'status',
+          header: t('status'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('status') === 1}
+                onCheckedChange={async (checked) => {
+                  await updateAds({
+                    ...row.original,
+                    status: checked ? 1 : 0,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'title',
+          header: t('title'),
+        },
+        {
+          accessorKey: 'type',
+          header: t('type'),
+          cell: ({ row }) => {
+            const type = row.original.type;
+            return <Badge>{type}</Badge>;
+          },
+        },
+        {
+          accessorKey: 'target_url',
+          header: t('targetUrl'),
+        },
+        {
+          accessorKey: 'description',
+          header: t('form.description'),
+        },
+        {
+          accessorKey: 'period',
+          header: t('validityPeriod'),
+          cell: ({ row }) => {
+            const { start_time, end_time } = row.original;
+            return (
+              <>
+                {formatDate(start_time)} - {formatDate(end_time)}
+              </>
+            );
+          },
+        },
+      ]}
+      actions={{
+        render: (row) => [
+          <AdsForm<API.UpdateAdsRequest>
+            key='edit'
+            trigger={t('edit')}
+            title={t('editAds')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateAds({ ...row, ...values });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteAds({ id: row.id });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/announcement/notice-form.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -20,6 +19,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -81,9 +81,13 @@ export default function AnnouncementForm<T extends Record<string, any>>({
         <SheetHeader>
           <SheetTitle>{title}</SheetTitle>
         </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+            <form
+              id='notice-form'
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className='space-y-4 pt-4'
+            >
               <FormField
                 control={form.control}
                 name='title'

apps/admin/app/dashboard/application/config.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import {
+  getApplication,
+  getApplicationConfig,
+  updateApplicationConfig,
+} from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Icon } from '@iconify/react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Textarea } from '@workspace/ui/components/textarea';
+import { Combobox } from '@workspace/ui/custom-components/combobox';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { DicesIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const formSchema = z.object({
+  app_id: z.number().optional(),
+  encryption_key: z.string().optional(),
+  encryption_method: z.string().optional(),
+  startup_picture: z.string().optional(),
+  startup_picture_skip_time: z.number().optional(),
+  domains: z.array(z.string()).optional(),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+
+export default function ConfigForm() {
+  const t = useTranslations('product.app');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      app_id: 0,
+      encryption_key: '',
+      encryption_method: '',
+      startup_picture: '',
+      startup_picture_skip_time: 0,
+      domains: [],
+    },
+  });
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getApplicationConfig'],
+    queryFn: async () => {
+      const { data } = await getApplicationConfig();
+      return data.data;
+    },
+  });
+
+  const { data: applications } = useQuery({
+    queryKey: ['getApplication'],
+    queryFn: async () => {
+      const { data } = await getApplication();
+      return data.data?.applications || [];
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: FormSchema) {
+    setLoading(true);
+    try {
+      await updateApplicationConfig({
+        ...values,
+        domains: values.domains?.filter((domain) => domain),
+      } as API.ApplicationConfig);
+      toast.success(t('updateSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      /* empty */
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant='outline'>
+          <Icon icon='mdi:cog' className='mr-2' />
+          {t('config')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('configApp')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
+          <Form {...form}>
+            <form className='space-y-4 py-4'>
+              <FormField
+                control={form.control}
+                name='app_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('selectApp')}</FormLabel>
+                    <FormDescription>{t('selectAppDescription')}</FormDescription>
+                    <FormControl>
+                      <Combobox
+                        {...field}
+                        options={
+                          applications?.map((app) => ({
+                            label: app.name,
+                            value: app.id,
+                          })) || []
+                        }
+                        value={field.value}
+                        onChange={(value) => form.setValue(field.name, value)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='encryption_key'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('communicationKey')}</FormLabel>
+                    <FormDescription>{t('communicationKeyDescription')}</FormDescription>
+                    <FormControl>
+                      <EnhancedInput
+                        value={field.value}
+                        onValueChange={(value) => form.setValue(field.name, value as string)}
+                        suffix={
+                          <div className='bg-muted flex h-9 items-center text-nowrap 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(field.name, formatted);
+                              }}
+                              className='cursor-pointer'
+                            />
+                          </div>
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='encryption_method'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('encryption')}</FormLabel>
+                    <FormDescription>{t('encryptionDescription')}</FormDescription>
+                    <FormControl>
+                      <Combobox
+                        options={[
+                          { label: 'none', value: 'none' },
+                          { label: 'AES', value: 'aes' },
+                        ]}
+                        value={field.value}
+                        onChange={(value) => form.setValue(field.name, value)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='startup_picture'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('startupPicture')}</FormLabel>
+                    <FormDescription>{t('startupPictureDescription')}</FormDescription>
+                    <FormControl>
+                      <EnhancedInput
+                        value={field.value}
+                        onValueChange={(value) => form.setValue(field.name, value as string)}
+                        suffix={
+                          <UploadImage
+                            className='bg-muted h-9 rounded-none border-none px-2'
+                            onChange={(value) => form.setValue('startup_picture', value as string)}
+                          />
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='startup_picture_skip_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('startupPictureSkip')}</FormLabel>
+                    <FormDescription>{t('startupPictureSkipDescription')}</FormDescription>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        type='number'
+                        min={0}
+                        suffix='S'
+                        value={field.value}
+                        onValueChange={(value) =>
+                          form.setValue('startup_picture_skip_time', Number(value))
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='domains'
+                render={({ field }) => (
+                  <FormItem className='px-1'>
+                    <FormLabel>{t('backupDomains')}</FormLabel>
+                    <FormDescription>{t('backupDomainsDescription')}</FormDescription>
+                    <FormControl>
+                      <Textarea
+                        className='h-28'
+                        placeholder='example.com'
+                        value={field.value?.join('\n')}
+                        onChange={(e) => {
+                          form.setValue(field.name, e.target.value.split('\n'));
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/application/form.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { getSubscribeType } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Icon } from '@iconify/react';
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { useTranslations } from 'next-intl';
+import { assign, shake } from 'radash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const platforms = ['windows', 'macos', 'linux', 'android', 'ios', 'harmony'];
+
+const defaultValues = {
+  subscribe_type: 'Clash',
+  name: '',
+  icon: '',
+  url: '',
+};
+
+const versionSchema = z.object({
+  url: z.string(),
+  version: z.string().optional(),
+  description: z.string().optional(),
+  is_default: z.boolean().optional(),
+});
+
+const formSchema = z.object({
+  icon: z.string(),
+  name: z.string(),
+  subscribe_type: z.string(),
+  platform: z.object({
+    windows: z.array(versionSchema).optional(),
+    macos: z.array(versionSchema).optional(),
+    linux: z.array(versionSchema).optional(),
+    android: z.array(versionSchema).optional(),
+    ios: z.array(versionSchema).optional(),
+    harmony: z.array(versionSchema).optional(),
+  }),
+});
+
+interface FormProps<T> {
+  trigger: React.ReactNode | string;
+  title: string;
+  initialValues?: Partial<T>;
+  onSubmit: (values: T) => Promise<boolean>;
+  loading?: boolean;
+}
+
+export default function SubscribeAppForm<
+  T extends API.CreateApplicationRequest | API.UpdateApplicationRequest,
+>({ trigger, title, loading, initialValues, onSubmit }: FormProps<T>) {
+  const t = useTranslations('product.app');
+  const [open, setOpen] = useState(false);
+
+  type FormSchema = z.infer<typeof formSchema>;
+
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: assign(
+      defaultValues,
+      shake(initialValues, (value) => value === null),
+    ),
+  });
+
+  useEffect(() => {
+    form.reset(
+      assign(
+        defaultValues,
+        shake(initialValues, (value) => value === null),
+      ),
+    );
+  }, [form, initialValues]);
+
+  const { data: subscribe_types } = useQuery<string[]>({
+    queryKey: ['getSubscribeType'],
+    queryFn: async () => {
+      const { data } = await getSubscribeType();
+      return data.data?.subscribe_types || [];
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        {typeof trigger === 'string' ? <Button>{trigger}</Button> : trigger}
+      </SheetTrigger>
+      <SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
+          <Form {...form}>
+            <form className='space-y-4 py-4'>
+              <div className='grid grid-cols-2 gap-4'>
+                <FormField
+                  control={form.control}
+                  name='icon'
+                  render={({ field }) => (
+                    <FormItem className='col-span-2'>
+                      <FormLabel>{t('appIcon')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          required
+                          suffix={
+                            <UploadImage
+                              className='bg-muted h-9 rounded-none border-none px-2'
+                              onChange={(value) => {
+                                form.setValue(field.name, value as string);
+                              }}
+                            />
+                          }
+                          value={field.value}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as string);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('appName')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          required
+                          type='text'
+                          value={field.value}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as string);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='subscribe_type'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('subscriptionProtocol')}</FormLabel>
+                      <FormControl>
+                        <Select value={field.value} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue placeholder={t('subscriptionProtocol')} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {subscribe_types?.map((type) => (
+                              <SelectItem key={type} value={type}>
+                                {type}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <FormItem>
+                <FormLabel>{t('platform')}</FormLabel>
+                <Tabs defaultValue={platforms[0]}>
+                  <TabsList>
+                    {platforms.map((platform) => (
+                      <TabsTrigger key={platform} value={platform} className='uppercase'>
+                        {platform}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                  {platforms.map((platform) => (
+                    <TabsContent key={platform} value={platform}>
+                      <FormField
+                        control={form.control}
+                        name={`platform.${platform as keyof FormSchema['platform']}`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <ArrayInput
+                                isReverse
+                                className='grid grid-cols-3 gap-4'
+                                fields={[
+                                  {
+                                    name: 'version',
+                                    type: 'text',
+                                    placeholder: t('version'),
+                                    defaultValue: '1.0.0',
+                                  },
+                                  {
+                                    name: 'description',
+                                    type: 'text',
+                                    placeholder: t('description'),
+                                  },
+                                  {
+                                    name: 'is_default',
+                                    type: 'boolean',
+                                    placeholder: t('defaultVersion'),
+                                  },
+                                  {
+                                    name: 'url',
+                                    type: 'text',
+                                    placeholder: t('downloadLink'),
+                                    className: 'col-span-3',
+                                  },
+                                ]}
+                                value={field.value}
+                                onChange={(value) => {
+                                  const filteredValue = value.filter((item) => item.url);
+
+                                  const newDefaultIndex = value.findIndex(
+                                    (item, idx) =>
+                                      item.is_default &&
+                                      (!field.value?.[idx] || !field.value[idx].is_default),
+                                  );
+
+                                  let finalValue = filteredValue;
+
+                                  if (newDefaultIndex >= 0 && filteredValue[newDefaultIndex]) {
+                                    finalValue = filteredValue.map((item, index) => ({
+                                      ...item,
+                                      is_default: index === newDefaultIndex,
+                                    }));
+                                  } else if (
+                                    !filteredValue.some((item) => item.is_default) &&
+                                    filteredValue.length > 0
+                                  ) {
+                                    finalValue = filteredValue.map((item, index) => ({
+                                      ...item,
+                                      is_default: index === 0,
+                                    }));
+                                  }
+
+                                  form.setValue(field.name, finalValue as any);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </TabsContent>
+                  ))}
+                </Tabs>
+              </FormItem>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            onClick={form.handleSubmit(async (values) => {
+              const success = await onSubmit(values as unknown as T);
+              if (success) setOpen(false);
+            })}
+            disabled={loading}
+          >
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/application/page.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createApplication,
+  deleteApplication,
+  getApplication,
+  updateApplication,
+} from '@/services/admin/system';
+import { Button } from '@workspace/ui/components/button';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { useTranslations } from 'next-intl';
+import Image from 'next/legacy/image';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import ConfigForm from './config';
+import SubscribeAppForm from './form';
+
+export default function SubscribeApp() {
+  const t = useTranslations('product.app');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.ApplicationResponseInfo, Record<string, unknown>>
+      action={ref}
+      header={{
+        title: t('appList'),
+        toolbar: (
+          <div className='flex items-center gap-2'>
+            <ConfigForm />
+            <SubscribeAppForm<API.CreateApplicationRequest>
+              trigger={t('create')}
+              title={t('createApp')}
+              loading={loading}
+              onSubmit={async (values) => {
+                setLoading(true);
+                try {
+                  await createApplication(values);
+                  toast.success(t('createSuccess'));
+                  ref.current?.refresh();
+                  setLoading(false);
+                  return true;
+                } catch (error) {
+                  setLoading(false);
+                  return false;
+                }
+              }}
+            />
+          </div>
+        ),
+      }}
+      request={async (_pagination, filters) => {
+        const { data } = await getApplication();
+        return {
+          list: data.data?.applications || [],
+          total: 0,
+        };
+      }}
+      columns={[
+        {
+          accessorKey: 'icon',
+          header: t('appIcon'),
+          cell: ({ row }) => (
+            <Image
+              src={row.getValue('icon')}
+              alt={row.getValue('name')}
+              className='h-8 w-8 rounded-md'
+              width={32}
+              height={32}
+            />
+          ),
+        },
+        {
+          accessorKey: 'name',
+          header: t('appName'),
+        },
+        {
+          accessorKey: 'subscribe_type',
+          header: t('subscriptionProtocol'),
+          cell: ({ row }) => row.getValue('subscribe_type'),
+        },
+      ]}
+      actions={{
+        render: (row) => [
+          <SubscribeAppForm<API.UpdateApplicationRequest>
+            key='edit'
+            trigger={<Button>{t('edit')}</Button>}
+            title={t('editApp')}
+            loading={loading}
+            initialValues={{
+              ...row,
+            }}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateApplication({
+                  ...values,
+                  id: row.id,
+                });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteApplication({ id: row.id! });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+        batchRender: (rows) => [
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('batchDelete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await Promise.all(rows.map((row) => deleteApplication({ id: row.id! })));
+              toast.success(t('deleteSuccess'));
+              ref.current?.reset();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,268 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const appleSchema = z.object({
+  enabled: z.boolean(),
+  config: z
+    .object({
+      team_id: z.string().optional(),
+      key_id: z.string().optional(),
+      client_id: z.string().optional(),
+      client_secret: z.string().optional(),
+      redirect_url: z.string().optional(),
+    })
+    .optional(),
+});
+
+type AppleFormData = z.infer<typeof appleSchema>;
+
+export default function AppleForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'apple'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'apple',
+      });
+
+      return data.data;
+    },
+  });
+
+  const form = useForm<AppleFormData>({
+    resolver: zodResolver(appleSchema),
+    defaultValues: {
+      enabled: false,
+      config: {
+        team_id: '',
+        key_id: '',
+        client_id: '',
+        client_secret: '',
+        redirect_url: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        config: {
+          team_id: data.config?.team_id || '',
+          key_id: data.config?.key_id || '',
+          client_id: data.config?.client_id || '',
+          client_secret: data.config?.client_secret || '',
+          redirect_url: data.config?.redirect_url || '',
+        },
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: AppleFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          ...values.config,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:apple' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('apple.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('apple.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('apple.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form id='apple-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-2 pt-4'>
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.team_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.teamId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='ABCDE1FGHI'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.teamIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.key_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.keyId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='ABC1234567'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.keyIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='com.your.app.service'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-20'
+                        placeholder={`-----BEGIN PRIVATE KEY-----\nMIGTAgEA...\n-----END PRIVATE KEY-----`}
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.redirect_url'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.redirectUri')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='https://your-domain.com'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.redirectUriDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='apple-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/device-form.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const deviceSchema = z.object({
+  id: z.number(),
+  method: z.string().default('device'),
+  enabled: z.boolean().default(false),
+  config: z
+    .object({
+      show_ads: z.boolean().optional(),
+      only_real_device: z.boolean().optional(),
+      enable_security: z.boolean().optional(),
+      security_secret: z.string().optional(),
+    })
+    .optional(),
+});
+
+type DeviceFormData = z.infer<typeof deviceSchema>;
+
+export default function DeviceForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'device'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'device',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<DeviceFormData>({
+    resolver: zodResolver(deviceSchema),
+    defaultValues: {
+      id: 0,
+      method: 'device',
+      enabled: false,
+      config: {
+        show_ads: false,
+        only_real_device: false,
+        enable_security: false,
+        security_secret: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: DeviceFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function generateSecurityKey() {
+    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('config.security_secret', formatted);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:devices' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('device.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('device.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('device.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='device-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.show_ads'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.showAds')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.showAdsDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.only_real_device'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.blockVirtualMachine')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.blockVirtualMachineDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.enable_security'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.enableSecurity')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.enableSecurityDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.security_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.communicationKey')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., 12345678-1234-1234-1234-123456789abc'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        suffix={
+                          <div className='bg-muted flex h-9 items-center text-nowrap px-3'>
+                            <Icon
+                              icon='mdi:dice-multiple'
+                              onClick={generateSecurityKey}
+                              className='size-4 cursor-pointer'
+                            />
+                          </div>
+                        }
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.communicationKeyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='device-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/email-logs-table.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { LogsTable } from '../log';
+
+export default function EmailLogsTable() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:email-newsletter' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('email.logs')}</p>
+              <p className='text-muted-foreground text-sm'>{t('email.logsDescription')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[800px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('email.logs')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <div className='px-6 pt-4'>
+            <LogsTable type='email' />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/email-settings-form.tsx

@@ -0,0 +1,627 @@
+'use client';
+
+import {
+  getAuthMethodConfig,
+  testEmailSend,
+  updateAuthMethodConfig,
+} from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { HTMLEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const emailSettingsSchema = z.object({
+  id: z.number(),
+  method: z.string().default('email'),
+  enabled: z.boolean().default(false),
+  config: z
+    .object({
+      enable_verify: z.boolean().default(false),
+      enable_domain_suffix: z.boolean().default(false),
+      domain_suffix_list: z.string().optional(),
+      verify_email_template: z.string().optional(),
+      expiration_email_template: z.string().optional(),
+      maintenance_email_template: z.string().optional(),
+      traffic_exceed_email_template: z.string().optional(),
+      platform: z.string().default('smtp'),
+      platform_config: z
+        .object({
+          host: z.string().optional(),
+          port: z.coerce.number().optional(),
+          ssl: z.boolean().default(false),
+          user: z.string().optional(),
+          pass: z.string().optional(),
+          from: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+});
+
+type EmailSettingsFormData = z.infer<typeof emailSettingsSchema>;
+
+export default function EmailSettingsForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [testEmail, setTestEmail] = useState<string>();
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'email'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'email',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<EmailSettingsFormData>({
+    resolver: zodResolver(emailSettingsSchema),
+    defaultValues: {
+      id: 0,
+      method: 'email',
+      enabled: false,
+      config: {
+        enable_verify: false,
+        enable_domain_suffix: false,
+        domain_suffix_list: '',
+        verify_email_template: '',
+        expiration_email_template: '',
+        maintenance_email_template: '',
+        traffic_exceed_email_template: '',
+        platform: 'smtp',
+        platform_config: {
+          host: '',
+          port: 587,
+          ssl: false,
+          user: '',
+          pass: '',
+          from: '',
+        },
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: EmailSettingsFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...values,
+        config: {
+          ...values.config,
+          platform: 'smtp',
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:email-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('email.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('email.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('email.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='email-settings-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <Tabs defaultValue='basic' className='space-y-2'>
+                <TabsList className='flex h-full w-full flex-wrap *:flex-auto md:flex-nowrap'>
+                  <TabsTrigger value='basic'>{t('email.basicSettings')}</TabsTrigger>
+                  <TabsTrigger value='smtp'>{t('email.smtpSettings')}</TabsTrigger>
+                  <TabsTrigger value='verify'>{t('email.verifyTemplate')}</TabsTrigger>
+                  <TabsTrigger value='expiration'>{t('email.expirationTemplate')}</TabsTrigger>
+                  <TabsTrigger value='maintenance'>{t('email.maintenanceTemplate')}</TabsTrigger>
+                  <TabsTrigger value='traffic'>{t('email.trafficTemplate')}</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value='basic' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='enabled'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.enable')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.enableDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.enable_verify'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.emailVerification')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.emailVerificationDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.enable_domain_suffix'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.emailSuffixWhitelist')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('email.emailSuffixWhitelistDescription')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.domain_suffix_list'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.whitelistSuffixes')}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            className='h-32'
+                            placeholder={t('email.whitelistSuffixesPlaceholder')}
+                            value={field.value}
+                            onChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.whitelistSuffixesDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='smtp' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.host'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpServerAddress')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpServerAddressDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.port'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpServerPort')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            placeholder='587'
+                            value={field.value?.toString()}
+                            onValueChange={(value) => field.onChange(Number(value))}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpServerPortDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.ssl'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpEncryptionMethod')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('email.smtpEncryptionMethodDescription')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.user'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpAccount')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpAccountDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.pass'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpPassword')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='password'
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpPasswordDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.from'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.senderAddress')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.senderAddressDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className='space-y-2 border-t pt-4'>
+                    <FormLabel>{t('email.sendTestEmail')}</FormLabel>
+                    <div className='flex items-center gap-2'>
+                      <EnhancedInput
+                        placeholder='test@example.com'
+                        type='email'
+                        value={testEmail}
+                        onValueChange={(value) => setTestEmail(value as string)}
+                      />
+                      <Button
+                        type='button'
+                        disabled={!testEmail || isFetching}
+                        onClick={async () => {
+                          if (!testEmail) return;
+                          try {
+                            await testEmailSend({ email: testEmail });
+                            toast.success(t('email.sendSuccess'));
+                          } catch {
+                            toast.error(t('email.sendFailure'));
+                          }
+                        }}
+                      >
+                        {t('email.sendTestEmail')}
+                      </Button>
+                    </div>
+                    <p className='text-muted-foreground text-xs'>
+                      {t('email.sendTestEmailDescription')}
+                    </p>
+                  </div>
+                </TabsContent>
+
+                <TabsContent value='verify' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.verify_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.verifyEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Type}}'}
+                              </code>
+                              <span>{t('email.templateVariables.type.description')}</span>
+                            </div>
+                            <div className='pl-6 text-orange-600 dark:text-orange-400'>
+                              💡 {t('email.templateVariables.type.conditionalSyntax')}
+                              <br />
+                              <code className='rounded bg-orange-50 px-1 text-xs dark:bg-orange-900/20'>
+                                {'{{if eq .Type 1}}...{{else}}...{{end}}'}
+                              </code>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Expire}}'}
+                              </code>
+                              <span>{t('email.templateVariables.expire.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Code}}'}
+                              </code>
+                              <span>{t('email.templateVariables.code.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='expiration' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.expiration_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.expirationEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.ExpireDate}}'}
+                              </code>
+                              <span>{t('email.templateVariables.expireDate.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='maintenance' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.maintenance_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.maintenanceEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.MaintenanceDate}}'}
+                              </code>
+                              <span>
+                                {t('email.templateVariables.maintenanceDate.description')}
+                              </span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.MaintenanceTime}}'}
+                              </code>
+                              <span>
+                                {t('email.templateVariables.maintenanceTime.description')}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='traffic' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.traffic_exceed_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.trafficExceedEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+              </Tabs>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='email-settings-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,198 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const facebookSchema = z.object({
+  enabled: z.boolean(),
+  client_id: z.string().optional(),
+  client_secret: z.string().optional(),
+});
+
+type FacebookFormData = z.infer<typeof facebookSchema>;
+
+export default function FacebookForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'facebook'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'facebook',
+      });
+      return data.data;
+    },
+    // 移除 enabled: open，现在默认加载数据
+  });
+
+  const form = useForm<FacebookFormData>({
+    resolver: zodResolver(facebookSchema),
+    defaultValues: {
+      enabled: false,
+      client_id: '',
+      client_secret: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        client_id: data.config?.client_id || '',
+        client_secret: data.config?.client_secret || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: FacebookFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          client_id: values.client_id,
+          client_secret: values.client_secret,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:facebook' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('facebook.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('facebook.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('facebook.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='facebook-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='1234567890123456'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='1234567890abcdef1234567890abcdef'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='facebook-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,198 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const githubSchema = z.object({
+  enabled: z.boolean(),
+  client_id: z.string().optional(),
+  client_secret: z.string().optional(),
+});
+
+type GithubFormData = z.infer<typeof githubSchema>;
+
+export default function GithubForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'github'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'github',
+      });
+
+      return data.data;
+    },
+  });
+
+  const form = useForm<GithubFormData>({
+    resolver: zodResolver(githubSchema),
+    defaultValues: {
+      enabled: false,
+      client_id: '',
+      client_secret: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        client_id: data.config?.client_id || '',
+        client_secret: data.config?.client_secret || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: GithubFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          client_id: values.client_id,
+          client_secret: values.client_secret,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:github' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('github.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('github.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('github.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='github-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., Iv1.1234567890abcdef'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., 1234567890abcdef1234567890abcdef12345678'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='github-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/google-form.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const googleSchema = z.object({
+  id: z.number(),
+  method: z.string().default('google'),
+  enabled: z.boolean().default(false),
+  config: z
+    .object({
+      client_id: z.string().optional(),
+      client_secret: z.string().optional(),
+    })
+    .optional(),
+});
+
+type GoogleFormData = z.infer<typeof googleSchema>;
+
+export default function GoogleForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'google'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'google',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<GoogleFormData>({
+    resolver: zodResolver(googleSchema),
+    defaultValues: {
+      id: 0,
+      method: 'google',
+      enabled: false,
+      config: {
+        client_id: '',
+        client_secret: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: GoogleFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:google' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('google.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('google.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('google.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='google-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='123456789-abc123def456.apps.googleusercontent.com'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='google-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/phone-logs-table.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { LogsTable } from '../log';
+
+export default function PhoneLogsTable() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:phone-log' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('phone.logs')}</p>
+              <p className='text-muted-foreground text-sm'>{t('phone.logsDescription')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[800px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('phone.logs')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <div className='px-6 pt-4'>
+            <LogsTable type='mobile' />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/forms/phone-settings-form.tsx

@@ -0,0 +1,505 @@
+'use client';
+
+import {
+  getAuthMethodConfig,
+  getSmsPlatform,
+  testSmsSend,
+  updateAuthMethodConfig,
+} from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Textarea } from '@workspace/ui/components/textarea';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import TagInput from '@workspace/ui/custom-components/tag-input';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const phoneSettingsSchema = z.object({
+  id: z.number(),
+  method: z.string().default('mobile'),
+  enabled: z.boolean().default(false),
+  config: z
+    .object({
+      enable_whitelist: z.boolean().optional(),
+      whitelist: z.array(z.string()).optional(),
+      platform: z.string().optional(),
+      platform_config: z
+        .object({
+          access: z.string().optional(),
+          endpoint: z.string().optional(),
+          secret: z.string().optional(),
+          template_code: z.string().optional(),
+          sign_name: z.string().optional(),
+          phone_number: z.string().optional(),
+          template: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+});
+
+type PhoneSettingsFormData = z.infer<typeof phoneSettingsSchema>;
+
+export default function PhoneSettingsForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [testParams, setTestParams] = useState<API.TestSmsSendRequest>({
+    telephone: '',
+    area_code: '1',
+  });
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'mobile'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'mobile',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const { data: platforms } = useQuery({
+    queryKey: ['getSmsPlatform'],
+    queryFn: async () => {
+      const { data } = await getSmsPlatform();
+      return data.data?.list;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<PhoneSettingsFormData>({
+    resolver: zodResolver(phoneSettingsSchema),
+    defaultValues: {
+      id: 0,
+      method: 'mobile',
+      enabled: false,
+      config: {
+        enable_whitelist: false,
+        whitelist: [],
+        platform: '',
+        platform_config: {
+          access: '',
+          endpoint: '',
+          secret: '',
+          template_code: 'code',
+          sign_name: '',
+          phone_number: '',
+          template: '',
+        },
+      },
+    },
+  });
+
+  const selectedPlatform = platforms?.find(
+    (platform) => platform.platform === form.watch('config.platform'),
+  );
+  const { platform_url, platform_field_description: platformConfig } = selectedPlatform ?? {};
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: PhoneSettingsFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:phone-settings' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('phone.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('phone.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('phone.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='phone-settings-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled={isFetching}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.enableTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.enable_whitelist'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.whitelistValidation')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.whitelistValidationTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.whitelist'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.whitelistAreaCode')}</FormLabel>
+                    <FormControl>
+                      <TagInput
+                        placeholder='1, 852, 886, 888'
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.whitelistAreaCodeTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.platform'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.platform')}</FormLabel>
+                    <div className='flex items-center gap-1'>
+                      <FormControl>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {platforms?.map((item) => (
+                              <SelectItem key={item.platform} value={item.platform}>
+                                {item.platform}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      {platform_url && (
+                        <Button size='sm' asChild>
+                          <Link href={platform_url} target='_blank'>
+                            {t('phone.applyPlatform')}
+                          </Link>
+                        </Button>
+                      )}
+                    </div>
+                    <FormDescription>{t('phone.platformTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.platform_config.access'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.accessLabel')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={isFetching}
+                        placeholder={t('phone.platformConfigTip', { key: platformConfig?.access })}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('phone.platformConfigTip', { key: platformConfig?.access })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {platformConfig?.endpoint && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.endpoint'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.endpointLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.endpoint,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.endpoint })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name='config.platform_config.secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.secretLabel')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='password'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={isFetching}
+                        placeholder={t('phone.platformConfigTip', { key: platformConfig?.secret })}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('phone.platformConfigTip', { key: platformConfig?.secret })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {platformConfig?.template_code && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.template_code'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.templateCodeLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.template_code,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.template_code })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.sign_name && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.sign_name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.signNameLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.sign_name,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.sign_name })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.phone_number && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.phone_number'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.phoneNumberLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.phone_number,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.phone_number })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.code_variable && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.template'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.template')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          value={field.value}
+                          onChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.placeholders.template', {
+                            code: platformConfig?.code_variable,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.templateTip', { code: platformConfig?.code_variable })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <div className='space-y-4 border-t pt-4'>
+                <div>
+                  <FormLabel>{t('phone.testSms')}</FormLabel>
+                  <p className='text-muted-foreground mb-3 text-sm'>{t('phone.testSmsTip')}</p>
+                  <div className='flex items-center gap-2'>
+                    <AreaCodeSelect
+                      value={testParams.area_code}
+                      onChange={(value) => {
+                        if (value.phone) {
+                          setTestParams((prev) => ({ ...prev, area_code: value.phone! }));
+                        }
+                      }}
+                    />
+                    <EnhancedInput
+                      placeholder={t('phone.testSmsPhone')}
+                      value={testParams.telephone}
+                      onValueChange={(value) => {
+                        setTestParams((prev) => ({ ...prev, telephone: value as string }));
+                      }}
+                    />
+                    <Button
+                      type='button'
+                      disabled={!testParams.telephone || !testParams.area_code || isFetching}
+                      onClick={async () => {
+                        if (isFetching || !testParams.telephone || !testParams.area_code) return;
+                        try {
+                          await testSmsSend(testParams);
+                          toast.success(t('phone.sendSuccess'));
+                        } catch {
+                          toast.error(t('phone.sendFailed'));
+                        }
+                      }}
+                    >
+                      {t('phone.testSms')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='phone-settings-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,198 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const telegramSchema = z.object({
+  enabled: z.boolean(),
+  bot: z.string().optional(),
+  bot_token: z.string().optional(),
+});
+
+type TelegramFormData = z.infer<typeof telegramSchema>;
+
+export default function TelegramForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'telegram'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'telegram',
+      });
+
+      return data.data;
+    },
+  });
+
+  const form = useForm<TelegramFormData>({
+    resolver: zodResolver(telegramSchema),
+    defaultValues: {
+      enabled: false,
+      bot: '',
+      bot_token: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        bot: data.config?.bot || '',
+        bot_token: data.config?.bot_token || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: TelegramFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          bot: values.bot,
+          bot_token: values.bot_token,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:telegram' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('telegram.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('telegram.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('telegram.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='telegram-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='bot'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='6123456789'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='bot_token'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='6123456789:AAHn_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='telegram-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/auth-control/log/index.tsx

@@ -0,0 +1,104 @@
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { getMessageLogList } from '@/services/admin/log';
+import { Badge } from '@workspace/ui/components/badge';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useRef } from 'react';
+
+export function LogsTable({ type }: { type: 'email' | 'mobile' }) {
+  const t = useTranslations('auth-control.log');
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<
+      API.MessageLog,
+      {
+        platform?: string;
+        to?: string;
+        subject?: string;
+        content?: string;
+        status?: number;
+      }
+    >
+      action={ref}
+      header={{
+        title: t(`${type}Log`),
+      }}
+      columns={[
+        {
+          accessorKey: 'id',
+          header: 'ID',
+        },
+        {
+          accessorKey: 'platform',
+          header: t('platform'),
+        },
+        {
+          accessorKey: 'to',
+          header: t('to'),
+        },
+        {
+          accessorKey: 'subject',
+          header: t('subject'),
+        },
+        {
+          accessorKey: 'content',
+          header: t('content'),
+        },
+        {
+          accessorKey: 'status',
+          header: t('status'),
+          cell: ({ row }) => {
+            const status = row.getValue('status');
+            const text = status === 1 ? t('sendSuccess') : t('sendFailed');
+            return <Badge variant={status === 1 ? 'default' : 'destructive'}>{text}</Badge>;
+          },
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('createdAt'),
+          cell: ({ row }) => formatDate(row.getValue('created_at')),
+        },
+        {
+          accessorKey: 'updated_at',
+          header: t('updatedAt'),
+          cell: ({ row }) => formatDate(row.getValue('updated_at')),
+        },
+      ]}
+      params={[
+        {
+          key: 'to',
+          placeholder: t('to'),
+        },
+        {
+          key: 'subject',
+          placeholder: t('subject'),
+        },
+        {
+          key: 'content',
+          placeholder: t('content'),
+        },
+        {
+          key: 'status',
+          placeholder: t('status'),
+          options: [
+            { label: t('sendSuccess'), value: '1' },
+            { label: t('sendFailed'), value: '0' },
+          ],
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getMessageLogList({
+          ...pagination,
+          ...filter,
+          status: filter.status === undefined ? undefined : Number(filter.status),
+          type: type,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/auth-control/page.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { useTranslations } from 'next-intl';
+import AppleForm from './forms/apple-form';
+import DeviceForm from './forms/device-form';
+import EmailLogsTable from './forms/email-logs-table';
+import EmailSettingsForm from './forms/email-settings-form';
+import FacebookForm from './forms/facebook-form';
+import GithubForm from './forms/github-form';
+import GoogleForm from './forms/google-form';
+import PhoneLogsTable from './forms/phone-logs-table';
+import PhoneSettingsForm from './forms/phone-settings-form';
+import TelegramForm from './forms/telegram-form';
+
+export default function Page() {
+  const t = useTranslations('auth-control');
+
+  // 定义表单配置
+  const formSections = [
+    {
+      title: t('communicationMethods'),
+      forms: [
+        { component: EmailSettingsForm },
+        { component: EmailLogsTable },
+        { component: PhoneSettingsForm },
+        { component: PhoneLogsTable },
+      ],
+    },
+    {
+      title: t('socialAuthMethods'),
+      forms: [
+        { component: AppleForm },
+        { component: GoogleForm },
+        { component: FacebookForm },
+        { component: GithubForm },
+        { component: TelegramForm },
+      ],
+    },
+    {
+      title: t('deviceAuthMethods'),
+      forms: [{ component: DeviceForm }],
+    },
+  ];
+
+  return (
+    <div className='space-y-8'>
+      {formSections.map((section, sectionIndex) => (
+        <div key={sectionIndex}>
+          <h2 className='mb-4 text-lg font-semibold'>{section.title}</h2>
+          <Table>
+            <TableBody>
+              {section.forms.map((form, formIndex) => {
+                const FormComponent = form.component;
+                return (
+                  <TableRow key={formIndex}>
+                    <TableCell>
+                      <FormComponent />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/admin/app/dashboard/coupon/coupon-form.tsx

@@ -2,7 +2,6 @@
 
 import { getSubscribeList } from '@/services/admin/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
@@ -26,6 +25,7 @@ import {
 import { Combobox } from '@workspace/ui/custom-components/combobox';
 import { DatePicker } from '@workspace/ui/custom-components/date-picker';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { unitConversion } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
@@ -235,7 +235,7 @@ export default function CouponForm<T extends Record<string, any>>({
               )}
               <FormField
                 control={form.control}
-                name='server'
+                name='subscribe'
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>{t('form.specifiedServer')}</FormLabel>
@@ -307,6 +307,7 @@ export default function CouponForm<T extends Record<string, any>>({
                       <EnhancedInput
                         placeholder={t('form.countPlaceholder')}
                         type='number'
+                        step={1}
                         {...field}
                         onValueChange={(value) => {
                           form.setValue(field.name, value);
@@ -327,6 +328,7 @@ export default function CouponForm<T extends Record<string, any>>({
                       <EnhancedInput
                         placeholder={t('form.userLimitPlaceholder')}
                         type='number'
+                        step={1}
                         {...field}
                         onValueChange={(value) => {
                           form.setValue(field.name, value);

apps/admin/app/dashboard/coupon/page.tsx

@@ -64,9 +64,6 @@ export default function Page() {
         ),
       }}
       params={[
-        {
-          key: 'search',
-        },
         {
           key: 'subscribe',
           placeholder: t('subscribe'),
@@ -75,6 +72,9 @@ export default function Page() {
             value: String(item.id),
           })),
         },
+        {
+          key: 'search',
+        },
       ]}
       request={async (pagination, filters) => {
         const { data } = await getCouponList({
@@ -96,9 +96,9 @@ export default function Page() {
                 defaultChecked={row.getValue('enable')}
                 onCheckedChange={async (checked) => {
                   await updateCoupon({
-                    ...row,
+                    ...row.original,
                     enable: checked,
-                  } as any);
+                  } as API.UpdateCouponRequest);
                   ref.current?.refresh();
                 }}
               />

apps/admin/app/dashboard/document/document-form.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -20,6 +19,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { TagInput } from '@workspace/ui/custom-components/tag-input';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';

apps/admin/app/dashboard/marketing/email/broadcast-form.tsx

@@ -0,0 +1,495 @@
+'use client';
+
+import { createBatchSendEmailTask, getPreSendEmailCount } from '@/services/admin/marketing';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export default function EmailBroadcastForm() {
+  const t = useTranslations('marketing');
+
+  // Define schema with internationalized error messages
+  const emailBroadcastSchema = z.object({
+    subject: z.string().min(1, t('subject') + ' ' + t('cannotBeEmpty')),
+    content: z.string().min(1, t('content') + ' ' + t('cannotBeEmpty')),
+    scope: z.string().default('all'),
+    register_start_time: z.string().optional(),
+    register_end_time: z.string().optional(),
+    additional: z
+      .string()
+      .optional()
+      .refine(
+        (value) => {
+          if (!value || value.trim() === '') return true;
+          const emails = value.split('\n').filter((email) => email.trim() !== '');
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          return emails.every((email) => emailRegex.test(email.trim()));
+        },
+        {
+          message: t('pleaseEnterValidEmailAddresses'),
+        },
+      ),
+    scheduled: z.string().optional(),
+    interval: z.number().min(0.1, t('emailIntervalMinimum')).optional(),
+    limit: z.number().min(1, t('dailyLimit')).optional(),
+  });
+
+  type EmailBroadcastFormData = z.infer<typeof emailBroadcastSchema>;
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [estimatedRecipients, setEstimatedRecipients] = useState<{
+    users: number;
+    additional: number;
+    total: number;
+  }>({ users: 0, additional: 0, total: 0 });
+
+  const form = useForm<EmailBroadcastFormData>({
+    resolver: zodResolver(emailBroadcastSchema),
+    defaultValues: {
+      subject: '',
+      content: '',
+      scope: 'all',
+      register_start_time: '',
+      register_end_time: '',
+      additional: '',
+      scheduled: '',
+      interval: 1,
+      limit: 1000,
+    },
+  });
+
+  // Calculate recipient count
+  const calculateRecipients = async () => {
+    const formData = form.getValues();
+
+    try {
+      // Call API to get actual recipient count
+      const scope = formData.scope || 'all';
+
+      // Convert dates to timestamps if they exist
+      let register_start_time: number = 0;
+      let register_end_time: number = 0;
+
+      if (formData.register_start_time) {
+        register_start_time = Math.floor(new Date(formData.register_start_time).getTime());
+      }
+
+      if (formData.register_end_time) {
+        register_end_time = Math.floor(new Date(formData.register_end_time).getTime());
+      }
+
+      const response = await getPreSendEmailCount({
+        scope,
+        register_start_time,
+        register_end_time,
+      });
+
+      const userCount = response.data?.data?.count || 0;
+
+      // Calculate additional email count
+      const additionalEmails = formData.additional || '';
+      const additionalCount = additionalEmails
+        .split('\n')
+        .filter((email: string) => email.trim() !== '').length;
+
+      const total = userCount + additionalCount;
+
+      setEstimatedRecipients({
+        users: userCount,
+        additional: additionalCount,
+        total,
+      });
+    } catch (error) {
+      console.error('Failed to get recipient count:', error);
+      // Set to 0 if API fails, don't use fallback simulation
+      const additionalEmails = formData.additional || '';
+      const additionalCount = additionalEmails
+        .split('\n')
+        .filter((email: string) => email.trim() !== '').length;
+
+      setEstimatedRecipients({
+        users: 0,
+        additional: additionalCount,
+        total: additionalCount,
+      });
+    }
+  };
+
+  // Listen to form changes
+  const watchedValues = form.watch();
+
+  // Use useEffect to respond to form changes
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      calculateRecipients();
+    }, 500); // Add debounce to avoid too frequent API calls
+
+    return () => clearTimeout(debounceTimer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    watchedValues.scope,
+    watchedValues.register_start_time,
+    watchedValues.register_end_time,
+    watchedValues.additional,
+  ]);
+
+  const onSubmit = async (data: EmailBroadcastFormData) => {
+    setLoading(true);
+    try {
+      // Validate scheduled send time
+      let scheduled: number | undefined;
+      if (data.scheduled && data.scheduled.trim() !== '') {
+        const scheduledDate = new Date(data.scheduled);
+        const now = new Date();
+        if (scheduledDate <= now) {
+          toast.error(t('scheduledSendTimeMustBeLater'));
+          return;
+        }
+        scheduled = Math.floor(scheduledDate.getTime());
+      }
+
+      let register_start_time: number = 0;
+      let register_end_time: number = 0;
+
+      if (data.register_start_time) {
+        register_start_time = Math.floor(new Date(data.register_start_time).getTime());
+      }
+
+      if (data.register_end_time) {
+        register_end_time = Math.floor(new Date(data.register_end_time).getTime());
+      }
+
+      // Prepare API request data
+      const requestData: API.CreateBatchSendEmailTaskRequest = {
+        subject: data.subject,
+        content: data.content,
+        scope: data.scope,
+        register_start_time,
+        register_end_time,
+        additional: data.additional || undefined,
+        scheduled,
+        interval: data.interval ? data.interval * 1000 : undefined, // Convert seconds to milliseconds
+        limit: data.limit,
+      };
+
+      // Call API to create batch send email task
+      await createBatchSendEmailTask(requestData);
+
+      if (!data.scheduled || data.scheduled.trim() === '') {
+        toast.success(t('emailBroadcastTaskCreatedSuccessfully'));
+      } else {
+        toast.success(t('emailAddedToScheduledQueue'));
+      }
+
+      form.reset();
+      setOpen(false);
+    } catch (error) {
+      console.error('Email broadcast failed:', error);
+      toast.error(t('sendFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:email-send' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('emailBroadcast')}</p>
+              <p className='text-muted-foreground text-sm'>
+                {t('createNewEmailBroadcastCampaign')}
+              </p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[700px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('createBroadcast')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='broadcast-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <Tabs defaultValue='content' className='space-y-2'>
+                <TabsList className='grid w-full grid-cols-2'>
+                  <TabsTrigger value='content'>{t('content')}</TabsTrigger>
+                  <TabsTrigger value='settings'>{t('sendSettings')}</TabsTrigger>
+                </TabsList>
+                {/* Email Content Tab */}
+                <TabsContent value='content' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='subject'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('subject')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={`${t('pleaseEnter')} ${t('subject').toLowerCase()}`}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='content'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('content')}</FormLabel>
+                        <FormControl>
+                          <MarkdownEditor
+                            value={field.value}
+                            onChange={(value) => {
+                              form.setValue(field.name, value || '');
+                            }}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('useMarkdownEditor')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                {/* Send Settings Tab */}
+                <TabsContent value='settings' className='space-y-2'>
+                  {/* Send scope and estimated recipients */}
+                  <div className='grid grid-cols-2 items-center gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='scope'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('sendScope')}</FormLabel>
+                          <Select onValueChange={field.onChange} value={field.value || 'all'}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder={t('selectSendScope')} />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value='all'>{t('allUsers')}</SelectItem>
+                              <SelectItem value='active'>{t('subscribedUsersOnly')}</SelectItem>
+                              <SelectItem value='expired'>
+                                {t('expiredSubscriptionUsersOnly')}
+                              </SelectItem>
+                              <SelectItem value='none'>{t('noSubscriptionUsersOnly')}</SelectItem>
+                              <SelectItem value='skip'>{t('specificUsersOnly')}</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormDescription>{t('sendScopeDescription')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* Estimated recipients info */}
+                    <div className='flex justify-end'>
+                      <div className='border-l-primary bg-primary/10 border-l-4 px-4 py-3 text-sm'>
+                        <span className='text-muted-foreground'>{t('estimatedRecipients')}: </span>
+                        <span className='text-primary text-lg font-medium'>
+                          {estimatedRecipients.total}
+                        </span>
+                        <span className='text-muted-foreground ml-2 text-xs'>
+                          ({t('users')}: {estimatedRecipients.users}, {t('additional')}:{' '}
+                          {estimatedRecipients.additional})
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className='grid grid-cols-2 gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='register_start_time'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('registrationStartDate')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='datetime-local'
+                              disabled={form.watch('scope') === 'skip'}
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('includeUsersRegisteredAfter')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='register_end_time'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('registrationEndDate')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='datetime-local'
+                              disabled={form.watch('scope') === 'skip'}
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('includeUsersRegisteredBefore')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  {/* Additional recipients */}
+                  <FormField
+                    control={form.control}
+                    name='additional'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('additionalRecipientEmails')}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder={`${t('pleaseEnter')}${t('additionalRecipientEmails').toLowerCase()}，${t('onePerLine')}，for example:\nexample1@domain.com\nexample2@domain.com\nexample3@domain.com`}
+                            className='min-h-[120px] font-mono text-sm'
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('additionalRecipientsDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Send time settings */}
+                  <FormField
+                    control={form.control}
+                    name='scheduled'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('scheduledSend')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='datetime-local'
+                            placeholder={t('leaveEmptyForImmediateSend')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('selectSendTime')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Send rate control */}
+                  <div className='grid grid-cols-2 gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='interval'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('emailInterval')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type='number'
+                              min={1}
+                              step={0.1}
+                              placeholder='1'
+                              {...field}
+                              onChange={(e) => field.onChange(parseFloat(e.target.value) || 1)}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('intervalTimeBetweenEmails')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='limit'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('dailySendLimit')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type='number'
+                              min={1}
+                              step={1}
+                              placeholder='1000'
+                              {...field}
+                              onChange={(e) => field.onChange(parseInt(e.target.value) || 1000)}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('maximumNumberPerDay')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex flex-row items-center justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button type='submit' form='broadcast-form' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 h-4 w-4 animate-spin' />}
+            {loading
+              ? t('processing')
+              : !form.watch('scheduled') || form.watch('scheduled')?.trim() === ''
+                ? t('sendNow')
+                : t('scheduleSend')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/marketing/email/task-manager.tsx

@@ -0,0 +1,302 @@
+'use client';
+
+import { ProTable } from '@/components/pro-table';
+import {
+  getBatchSendEmailTaskList,
+  getBatchSendEmailTaskStatus,
+  stopBatchSendEmailTask,
+} from '@/services/admin/marketing';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/ui/components/dialog';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export default function EmailTaskManager() {
+  const t = useTranslations('marketing');
+  const [refreshing, setRefreshing] = useState<Record<number, boolean>>({});
+  const [selectedTask, setSelectedTask] = useState<API.BatchSendEmailTask | null>(null);
+
+  // Get task status
+  const refreshTaskStatus = async (taskId: number) => {
+    setRefreshing((prev) => ({ ...prev, [taskId]: true }));
+    try {
+      const response = await getBatchSendEmailTaskStatus({
+        id: taskId,
+      });
+
+      const taskStatus = response.data?.data;
+      if (taskStatus) {
+        // Just show success message, ProTable will auto-refresh
+        toast.success(t('taskStatusRefreshed'));
+      }
+    } catch (error) {
+      console.error('Failed to refresh task status:', error);
+      toast.error(t('failedToRefreshTaskStatus'));
+    } finally {
+      setRefreshing((prev) => ({ ...prev, [taskId]: false }));
+    }
+  };
+
+  // Stop task
+  const stopTask = async (taskId: number) => {
+    try {
+      await stopBatchSendEmailTask({
+        id: taskId,
+      });
+
+      toast.success(t('taskStoppedSuccessfully'));
+      await refreshTaskStatus(taskId);
+    } catch (error) {
+      console.error('Failed to stop task:', error);
+      toast.error(t('failedToStopTask'));
+    }
+  };
+
+  const getStatusBadge = (status: number) => {
+    const statusConfig = {
+      0: { label: t('notStarted'), variant: 'secondary' as const },
+      1: { label: t('inProgress'), variant: 'default' as const },
+      2: { label: t('completed'), variant: 'default' as const },
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || {
+      label: `${t('status')} ${status}`,
+      variant: 'secondary' as const,
+    };
+
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+  };
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:email-multiple' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('emailTaskManager')}</p>
+              <p className='text-muted-foreground text-sm'>
+                {t('viewAndManageEmailBroadcastTasks')}
+              </p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[1000px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('emailBroadcastTasks')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-env(safe-area-inset-top))] px-6'>
+          <div className='mt-4 space-y-4'>
+            <ProTable<API.BatchSendEmailTask, API.GetBatchSendEmailTaskListParams>
+              columns={[
+                {
+                  accessorKey: 'subject',
+                  header: t('subject'),
+                  size: 200,
+                  cell: ({ row }) => (
+                    <div
+                      className='max-w-[200px] truncate font-medium'
+                      title={row.getValue('subject') as string}
+                    >
+                      {row.getValue('subject') as string}
+                    </div>
+                  ),
+                },
+                {
+                  accessorKey: 'scope',
+                  header: t('recipientType'),
+                  size: 120,
+                  cell: ({ row }) => {
+                    const scope = row.getValue('scope') as string;
+                    const scopeLabels = {
+                      all: t('allUsers'),
+                      active: t('subscribedUsers'),
+                      expired: t('expiredUsers'),
+                      none: t('nonSubscribers'),
+                      skip: t('specificUsers'),
+                    };
+                    return scopeLabels[scope as keyof typeof scopeLabels] || scope;
+                  },
+                },
+                {
+                  accessorKey: 'status',
+                  header: t('status'),
+                  size: 100,
+                  cell: ({ row }) => getStatusBadge(row.getValue('status') as number),
+                },
+                {
+                  accessorKey: 'progress',
+                  header: t('progress'),
+                  size: 150,
+                  cell: ({ row }) => {
+                    const task = row.original as API.BatchSendEmailTask;
+                    const progress = task.total > 0 ? (task.current / task.total) * 100 : 0;
+                    return (
+                      <div className='space-y-1'>
+                        <div className='flex justify-between text-sm'>
+                          <span>
+                            {task.current} / {task.total}
+                          </span>
+                          <span>{progress.toFixed(1)}%</span>
+                        </div>
+                        <div className='bg-muted h-2 overflow-hidden rounded-full'>
+                          <div
+                            className='bg-primary h-full transition-all duration-300'
+                            style={{ width: `${progress}%` }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  },
+                },
+                {
+                  accessorKey: 'created_at',
+                  header: t('createdAt'),
+                  size: 150,
+                  cell: ({ row }) => {
+                    const createdAt = row.getValue('created_at') as number;
+                    return formatDate(createdAt);
+                  },
+                },
+                {
+                  accessorKey: 'scheduled',
+                  header: t('sendTime'),
+                  size: 150,
+                  cell: ({ row }) => {
+                    const scheduled = row.getValue('scheduled') as number;
+                    return scheduled && scheduled > 0 ? formatDate(scheduled) : '--';
+                  },
+                },
+              ]}
+              request={async (pagination, filters) => {
+                const response = await getBatchSendEmailTaskList({
+                  ...filters,
+                  page: pagination.page,
+                  size: pagination.size,
+                });
+                return {
+                  list: response.data?.data?.list || [],
+                  total: response.data?.data?.total || 0,
+                };
+              }}
+              params={[
+                {
+                  key: 'status',
+                  placeholder: t('status'),
+                  options: [
+                    { label: t('notStarted'), value: '0' },
+                    { label: t('inProgress'), value: '1' },
+                    { label: t('completed'), value: '2' },
+                  ],
+                },
+                {
+                  key: 'scope',
+                  placeholder: t('sendScope'),
+                  options: [
+                    { label: t('allUsers'), value: 'all' },
+                    { label: t('subscribedUsers'), value: 'active' },
+                    { label: t('expiredUsers'), value: 'expired' },
+                    { label: t('nonSubscribers'), value: 'none' },
+                    { label: t('specificUsers'), value: 'skip' },
+                  ],
+                },
+              ]}
+              actions={{
+                render: (row) => {
+                  return [
+                    <Dialog key='view-content'>
+                      <DialogTrigger asChild>
+                        <Button
+                          variant='outline'
+                          size='icon'
+                          onClick={() => setSelectedTask(row as API.BatchSendEmailTask)}
+                        >
+                          <Icon icon='mdi:eye' />
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent className='max-h-[80vh] max-w-4xl'>
+                        <DialogHeader>
+                          <DialogTitle>{t('emailContent')}</DialogTitle>
+                        </DialogHeader>
+                        <ScrollArea className='h-[60vh] pr-4'>
+                          {selectedTask && (
+                            <div className='space-y-4'>
+                              <div>
+                                <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                  {t('subject')}
+                                </h4>
+                                <p className='font-medium'>{selectedTask.subject}</p>
+                              </div>
+                              <div>
+                                <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                  {t('content')}
+                                </h4>
+                                <div
+                                  className='prose prose-sm max-w-none'
+                                  dangerouslySetInnerHTML={{ __html: selectedTask.content }}
+                                />
+                              </div>
+                              {selectedTask.additional && (
+                                <div>
+                                  <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                    {t('additionalRecipients')}
+                                  </h4>
+                                  <p className='text-sm'>{selectedTask.additional}</p>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </ScrollArea>
+                      </DialogContent>
+                    </Dialog>,
+                    <Button
+                      key='refresh'
+                      variant='outline'
+                      size='icon'
+                      onClick={() => refreshTaskStatus(row.id)}
+                      disabled={refreshing[row.id]}
+                    >
+                      {refreshing[row.id] && (
+                        <Icon icon='mdi:loading' className='mr-2 h-3 w-3 animate-spin' />
+                      )}
+                      <Icon icon='mdi:refresh' className='h-3 w-3' />
+                    </Button>,
+                    ...([0, 1].includes(row.status)
+                      ? [
+                          <Button key='stop' variant='destructive' onClick={() => stopTask(row.id)}>
+                            {t('stop')}
+                          </Button>,
+                        ]
+                      : []),
+                  ];
+                },
+              }}
+            />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/marketing/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { useTranslations } from 'next-intl';
+import EmailBroadcastForm from './email/broadcast-form';
+import EmailTaskManager from './email/task-manager';
+
+export default function MarketingPage() {
+  const t = useTranslations('marketing');
+
+  const formSections = [
+    {
+      title: t('emailMarketing'),
+      forms: [{ component: EmailBroadcastForm }, { component: EmailTaskManager }],
+    },
+  ];
+
+  return (
+    <div className='space-y-8'>
+      {formSections.map((section, sectionIndex) => (
+        <div key={sectionIndex}>
+          <h2 className='mb-4 text-lg font-semibold'>{section.title}</h2>
+          <Table>
+            <TableBody>
+              {section.forms.map((form, formIndex) => {
+                const FormComponent = form.component;
+                return (
+                  <TableRow key={formIndex}>
+                    <TableCell>
+                      <FormComponent />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/admin/app/dashboard/order/page.tsx

@@ -17,7 +17,7 @@ import { cn } from '@workspace/ui/lib/utils';
 import { formatDate } from '@workspace/ui/utils';
 import { UserDetail } from '../user/user-detail';
 
-export default function Page() {
+export default function Page(props: any) {
   const t = useTranslations('order');
 
   const statusOptions = [
@@ -57,8 +57,13 @@ export default function Page() {
         {
           accessorKey: 'subscribe_id',
           header: t('subscribe'),
-          cell: ({ row }) =>
+          cell: ({ row }) => {
-            subscribeList?.find((item) => item.id === row.getValue('subscribe_id'))?.name,
+            const name = subscribeList?.find(
+              (item) => item.id === row.getValue('subscribe_id'),
+            )?.name;
+            const quantity = row.original.quantity;
+            return name ? `${name} × ${quantity}` : '';
+          },
         },
         {
           accessorKey: 'amount',
@@ -115,8 +120,8 @@ export default function Page() {
                 <Separator className='my-4' />
                 <ul className='grid gap-3'>
                   <li className='flex items-center justify-between'>
-                    <span className='text-muted-foreground'>支付方式</span>
+                    <span className='text-muted-foreground'>{t('method')}</span>
-                    <span>{t(`methods.${row.original.method}`)}</span>
+                    <span>{row.original?.payment?.name || row.original?.payment?.platform}</span>
                   </li>
                 </ul>
               </HoverCardContent>
@@ -160,7 +165,6 @@ export default function Page() {
         },
       ]}
       params={[
-        { key: 'search' },
         {
           key: 'status',
           placeholder: t('status.0'),
@@ -177,10 +181,20 @@ export default function Page() {
             value: String(item.id),
           })),
         },
-        { key: 'user_id', placeholder: `${t('user')}ID` },
+        { key: 'search' },
-      ]}
+      ].concat(
+        props.userId
+          ? []
+          : [
+              {
+                key: 'user_id',
+                placeholder: `${t('user')} ID`,
+                options: undefined,
+              },
+            ],
+      )}
       request={async (pagination, filter) => {
-        const { data } = await getOrderList({ ...pagination, ...filter });
+        const { data } = await getOrderList({ ...pagination, ...filter, user_id: props.userId });
         return {
           list: data.data?.list || [],
           total: data.data?.total || 0,

apps/admin/app/dashboard/payment/alipayf2f.tsx

@@ -1,256 +0,0 @@
-'use client';
-
-import { getAlipayF2FPaymentConfig, updateAlipayF2FPaymentConfig } from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function AlipayF2F() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAlipayF2FPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getAlipayF2FPaymentConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateAlipayF2FPaymentConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAlipayF2fRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={(checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.sandbox')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('alipayf2f.sandboxDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.config.sandbox}
-              onCheckedChange={(checked) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  sandbox: checked,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => updateConfig('name', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon_url}
-              onValueBlur={(value) => updateConfig('icon', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => updateConfig('domain', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              maxLength={3}
-              value={data?.fee_percent}
-              onValueBlur={(value) => updateConfig('fee_percent', value)}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.appId')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.app_id}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  app_id: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.privateKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.config.private_key}
-              onBlur={(e) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  private_key: e.target.value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.config.public_key}
-              onBlur={(e) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: e.target.value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.invoiceName')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('alipayf2f.invoiceNameDescription')}
-              value={data?.config.invoice_name}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  invoice_name: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/payment/epay.tsx

@@ -1,221 +0,0 @@
-'use client';
-
-import { getEpayPaymentConfig, updateEpayPaymentConfig } from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Epay() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getEpayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getEpayPaymentConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateEpayPaymentConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateEpayRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={(checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => updateConfig('name', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => updateConfig('icon', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => updateConfig('domain', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              maxLength={3}
-              value={data?.fee_percent}
-              onValueBlur={(value) => updateConfig('fee_percent', value)}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.url')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.url}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  url: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.pid')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.pid}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  pid: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.key')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.key}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  key: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/payment/page.tsx

@@ -1,34 +1,11 @@
 import Billing from '@/components/billing';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import PaymentTable from './payment-table';
-import AlipayF2F from './alipayf2f';
-import Epay from './epay';
-import StripeAlipay from './stripe-alipay';
-import StripeWeChatPay from './stripe-wechat-pay';
 
 export default async function Page() {
   return (
     <>
-      <Tabs defaultValue='Epay'>
+      <PaymentTable />
-        <TabsList className='h-full flex-wrap'>
+      <div className='mt-5 flex flex-col gap-3'>
-          <TabsTrigger value='Epay'>Epay</TabsTrigger>
-          <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
-          <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
-          <TabsTrigger value='AlipayF2F'>AlipayF2F</TabsTrigger>
-        </TabsList>
-        <TabsContent value='Epay'>
-          <Epay />
-        </TabsContent>
-        <TabsContent value='Stripe-Alipay'>
-          <StripeAlipay />
-        </TabsContent>
-        <TabsContent value='Strip-WeChatPay'>
-          <StripeWeChatPay />
-        </TabsContent>
-        <TabsContent value='AlipayF2F'>
-          <AlipayF2F />
-        </TabsContent>
-      </Tabs>
-      <div className='flex flex-col gap-3'>
         <Billing type='payment' />
       </div>
     </>

apps/admin/app/dashboard/payment/payment-form.tsx

@@ -0,0 +1,420 @@
+'use client';
+
+import useGlobalStore from '@/config/use-global';
+import { getPaymentPlatform } from '@/services/admin/payment';
+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 { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+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 { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { unitConversion } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+interface PaymentFormProps<T> {
+  trigger: React.ReactNode;
+  title: string;
+  loading?: boolean;
+  initialValues?: T;
+  onSubmit: (values: T) => Promise<boolean>;
+  isEdit?: boolean;
+}
+
+export default function PaymentForm<T>({
+  trigger,
+  title,
+  loading,
+  initialValues,
+  onSubmit,
+  isEdit,
+}: PaymentFormProps<T>) {
+  const t = useTranslations('payment');
+  const { common } = useGlobalStore();
+  const { currency } = common;
+  const [open, setOpen] = useState(false);
+
+  const { data: platformData } = useQuery({
+    queryKey: ['getPaymentPlatform'],
+    queryFn: async () => {
+      const { data } = await getPaymentPlatform();
+      return data?.data?.list || [];
+    },
+  });
+
+  const formSchema = z.object({
+    name: z.string().min(1, { message: t('nameRequired') }),
+    platform: z.string().optional(),
+    icon: z.string().optional(),
+    domain: z.string().optional(),
+    config: z.any(),
+    fee_mode: z.coerce.number().min(0).max(2),
+    fee_percent: z.coerce.number().optional(),
+    fee_amount: z.coerce.number().optional(),
+    description: z.string().optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      platform: '',
+      icon: '',
+      domain: '',
+      config: {},
+      fee_mode: 0,
+      fee_percent: 0,
+      fee_amount: 0,
+      ...(initialValues as any),
+    },
+  });
+
+  const feeMode = form.watch('fee_mode');
+  const platformValue = form.watch('platform');
+  const configValues = form.watch('config');
+
+  const currentPlatform = platformData?.find((p) => p.platform === platformValue);
+  const currentFieldDescriptions = currentPlatform?.platform_field_description || {};
+  const configFields = Object.keys(currentFieldDescriptions) || [];
+  const platformUrl = currentPlatform?.platform_url || '';
+
+  useEffect(() => {
+    if (feeMode === 0) {
+      form.setValue('fee_amount', 0);
+      form.setValue('fee_percent', 0);
+    } else if (feeMode === 1) {
+      form.setValue('fee_amount', 0);
+    } else if (feeMode === 2) {
+      form.setValue('fee_percent', 0);
+    }
+  }, [feeMode, form]);
+
+  const handleClose = () => {
+    form.reset();
+    setOpen(false);
+  };
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    const cleanedValues = { ...values };
+
+    if (values.fee_mode === 0) {
+      cleanedValues.fee_amount = undefined;
+      cleanedValues.fee_percent = undefined;
+    } else if (values.fee_mode === 1) {
+      cleanedValues.fee_amount = undefined;
+    } else if (values.fee_mode === 2) {
+      cleanedValues.fee_percent = undefined;
+    }
+
+    const success = await onSubmit(cleanedValues as unknown as T);
+    if (success) {
+      handleClose();
+    }
+  };
+
+  const openPlatformUrl = () => {
+    if (platformUrl) {
+      window.open(platformUrl, '_blank');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{trigger}</SheetTrigger>
+      <SheetContent className='w-[550px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6 px-6 pt-4'>
+              {/* 基本信息分组 */}
+              <div className='space-y-4'>
+                <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                  <FormField
+                    control={form.control}
+                    name='name'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('name')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('namePlaceholder')}
+                            value={field.value}
+                            onValueChange={(value) => form.setValue('name', value as string)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='icon'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('icon')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('iconPlaceholder')}
+                            value={field.value}
+                            onValueChange={(value) => form.setValue('icon', value as string)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <FormField
+                  control={form.control}
+                  name='domain'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('domain')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder='http(s)://example.com'
+                          value={field.value}
+                          onValueChange={(value) => form.setValue('domain', value as string)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className='space-y-4'>
+                <FormField
+                  control={form.control}
+                  name='fee_mode'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('handlingFee')}</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          onValueChange={(value) => field.onChange(parseInt(value))}
+                          value={field.value.toString()}
+                          className='flex flex-wrap gap-4'
+                        >
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='0' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>{t('noFee')}</FormLabel>
+                          </FormItem>
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='1' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>
+                              {t('percentFee')}
+                            </FormLabel>
+                          </FormItem>
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='2' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>{t('fixedFee')}</FormLabel>
+                          </FormItem>
+                        </RadioGroup>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {feeMode === 1 && (
+                  <div className='grid grid-cols-1 sm:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='fee_percent'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('feePercent')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='number'
+                              step='0.01'
+                              suffix='%'
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+
+                {feeMode === 2 && (
+                  <div className='grid grid-cols-1 sm:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='fee_amount'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('feeAmount')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='number'
+                              step='0.01'
+                              prefix={currency.currency_symbol}
+                              suffix={currency.currency_unit}
+                              value={unitConversion('centsToDollars', field.value)}
+                              onValueChange={(value) =>
+                                field.onChange(unitConversion('dollarsToCents', value))
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className='space-y-4'>
+                {(!platformValue || platformData?.find((p) => p.platform === platformValue)) && (
+                  <FormField
+                    control={form.control}
+                    name='platform'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('platform')}</FormLabel>
+                        <Select
+                          onValueChange={(value) => {
+                            form.setValue('platform', value as string);
+                            form.setValue('config', {});
+                          }}
+                          defaultValue={field.value}
+                          value={field.value}
+                          // @ts-expect-error
+                          disabled={isEdit && Boolean(initialValues?.platform)}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue placeholder={t('selectPlatform')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {platformData?.map((platform) => (
+                              <SelectItem key={platform.platform} value={platform.platform}>
+                                {platform.platform}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {platformUrl ? (
+                          <div className='mt-1 flex justify-end'>
+                            <Button
+                              variant='ghost'
+                              size='sm'
+                              className='h-6 px-2 text-xs'
+                              onClick={openPlatformUrl}
+                            >
+                              <Icon icon='tabler:external-link' className='mr-1 h-3 w-3' />
+                              {t('applyForPayment')}
+                            </Button>
+                          </div>
+                        ) : (
+                          <div className='mt-1 h-6'></div>
+                        )}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                {configFields.length > 0 && (
+                  <div className='mt-4 space-y-4'>
+                    {configFields.map((fieldKey) => (
+                      <FormItem key={fieldKey}>
+                        <FormLabel>{currentFieldDescriptions[fieldKey]}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('configPlaceholder', {
+                              field: currentFieldDescriptions[fieldKey],
+                            })}
+                            value={
+                              configValues && configValues[fieldKey] !== undefined
+                                ? configValues[fieldKey]
+                                : ''
+                            }
+                            disabled={fieldKey === 'webhook_secret'}
+                            onValueChange={(value) => {
+                              const newConfig = { ...configValues };
+                              newConfig[fieldKey] = value;
+                              form.setValue('config', newConfig);
+                            }}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    ))}
+                  </div>
+                )}
+
+                <FormField
+                  control={form.control}
+                  name='description'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('description')}</FormLabel>
+                      <FormControl>
+                        <MarkdownEditor
+                          value={field.value}
+                          onChange={(value) => form.setValue(field.name, value as string)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={handleClose}>
+            {t('cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('submit')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/payment/payment-table.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createPaymentMethod,
+  deletePaymentMethod,
+  getPaymentMethodList,
+  updatePaymentMethod,
+} from '@/services/admin/payment';
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
+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 { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import PaymentForm from './payment-form';
+
+export default function PaymentTable() {
+  const t = useTranslations('payment');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.PaymentConfig, { search: string }>
+      action={ref}
+      header={{
+        title: t('paymentManagement'),
+        toolbar: (
+          <PaymentForm<API.CreatePaymentMethodRequest>
+            trigger={<Button>{t('create')}</Button>}
+            title={t('createPayment')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createPaymentMethod({
+                  ...values,
+                  enable: false,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'enable',
+          header: t('enable'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                checked={Boolean(row.getValue('enable'))}
+                onCheckedChange={async (checked) => {
+                  await updatePaymentMethod({
+                    ...row.original,
+                    enable: checked,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'icon',
+          header: t('icon'),
+          cell: ({ row }) => {
+            const icon = row.getValue('icon') as string;
+            return (
+              <Avatar className='h-8 w-8'>
+                {icon ? <AvatarImage src={icon} alt={row.getValue('name')} /> : null}
+                <AvatarFallback>
+                  {(row.getValue('name') as string)?.charAt(0) || '?'}
+                </AvatarFallback>
+              </Avatar>
+            );
+          },
+        },
+        {
+          accessorKey: 'name',
+          header: t('name'),
+        },
+        {
+          accessorKey: 'platform',
+          header: t('platform'),
+          cell: ({ row }) => <Badge>{t(row.getValue('platform'))}</Badge>,
+        },
+        {
+          accessorKey: 'notify_url',
+          header: t('notify_url'),
+        },
+        {
+          accessorKey: 'fee',
+          header: t('handlingFee'),
+          cell: ({ row }) => {
+            const feeMode = row.original.fee_mode;
+            if (feeMode === 1) {
+              return <Badge>{row.original.fee_percent}%</Badge>;
+            } else if (feeMode === 2) {
+              return (
+                <Badge>
+                  <Display value={row.original.fee_amount} type='currency' />
+                </Badge>
+              );
+            }
+            return '--';
+          },
+        },
+      ]}
+      params={[
+        {
+          key: 'search',
+          placeholder: t('searchPlaceholder'),
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getPaymentMethodList({
+          ...pagination,
+          ...filter,
+        });
+        return {
+          list: data?.data?.list || [],
+          total: data?.data?.total || 0,
+        };
+      }}
+      actions={{
+        render: (row) => [
+          <PaymentForm<API.UpdatePaymentMethodRequest>
+            isEdit
+            key='edit'
+            trigger={<Button>{t('edit')}</Button>}
+            title={t('editPayment')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updatePaymentMethod({
+                  ...row,
+                  ...values,
+                });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deletePaymentMethod({
+                id: row.id,
+              });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+          <Button
+            key='copy'
+            variant='outline'
+            onClick={async () => {
+              setLoading(true);
+              try {
+                const { id, ...params } = row;
+                await createPaymentMethod({
+                  ...params,
+                  enable: false,
+                });
+                toast.success(t('copySuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          >
+            {t('copy')}
+          </Button>,
+        ],
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('batchDelete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteWarning')}
+              onConfirm={async () => {
+                for (const row of rows) {
+                  await deletePaymentMethod({ id: row.id });
+                }
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/payment/stripe-alipay.tsx

@@ -1,232 +0,0 @@
-'use client';
-
-import {
-  getStripeAlipayPaymentConfig,
-  updateStripeAlipayPaymentConfig,
-} from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Stripe() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getStripeAlipayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getStripeAlipayPaymentConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateStripeAlipayPaymentConfig({
-        ...data,
-        mark: 'stripe_alipay',
-        [key]: value,
-      } as any);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('aliPay')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={async (checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => {
-                updateConfig('name', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => {
-                updateConfig('icon', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => {
-                updateConfig('domain', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              value={data?.fee_percent}
-              onValueBlur={(value) => {
-                updateConfig('fee_percent', value);
-              }}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.public_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.secretKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.secret_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  secret_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.webhookSecret')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.webhook_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  webhook_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/payment/stripe-wechat-pay.tsx

@@ -1,232 +0,0 @@
-'use client';
-
-import {
-  getStripeWeChatPayPaymentConfig,
-  updateStripeWeChatPayPaymentConfig,
-} from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function StripeWeChatPay() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getStripeWeChatPayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getStripeWeChatPayPaymentConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateStripeWeChatPayPaymentConfig({
-        ...data,
-        mark: 'stripe_wechat_pay',
-        [key]: value,
-      } as any);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('wechatPay')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={async (checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => {
-                updateConfig('name', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => {
-                updateConfig('icon', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => {
-                updateConfig('domain', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              value={data?.fee_percent}
-              onValueBlur={(value) => {
-                updateConfig('fee_percent', value);
-              }}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.public_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.secretKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.secret_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  secret_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.webhookSecret')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.webhook_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  webhook_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/product/group/form.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -19,6 +18,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -44,7 +44,7 @@ export default function GroupForm<T extends Record<string, any>>({
   trigger,
   title,
 }: GroupFormProps<T>) {
-  const t = useTranslations('subscribe');
+  const t = useTranslations('product');
 
   const [open, setOpen] = useState(false);
   const form = useForm({

apps/admin/app/dashboard/product/group/table.tsx

@@ -14,10 +14,10 @@ import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
-import GroupForm from './group-form';
+import GroupForm from './form';
 
 const GroupTable = () => {
-  const t = useTranslations('subscribe');
+  const t = useTranslations('product');
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
 

apps/admin/app/dashboard/product/page.tsx

@@ -0,0 +1,25 @@
+import { getTranslations } from 'next-intl/server';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+
+import GroupTable from './group/table';
+import SubscribeTable from './subscribe-table';
+
+export default async function Page() {
+  const t = await getTranslations('product');
+
+  return (
+    <Tabs defaultValue='subscribe'>
+      <TabsList>
+        <TabsTrigger value='subscribe'>{t('tabs.subscribe')}</TabsTrigger>
+        <TabsTrigger value='group'>{t('tabs.subscribeGroup')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value='subscribe'>
+        <SubscribeTable />
+      </TabsContent>
+      <TabsContent value='group'>
+        <GroupTable />
+      </TabsContent>
+    </Tabs>
+  );
+}

apps/admin/app/dashboard/product/subscribe-form.tsx

@@ -0,0 +1,931 @@
+'use client';
+
+import { getNodeGroupList, getNodeList } from '@/services/admin/server';
+import { getSubscribeGroupList } from '@/services/admin/subscribe';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@workspace/ui/components/accordion';
+import { Button } from '@workspace/ui/components/button';
+import { Checkbox } from '@workspace/ui/components/checkbox';
+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 { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Combobox } from '@workspace/ui/custom-components/combobox';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
+import { JSONEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { evaluateWithPrecision, unitConversion } from '@workspace/ui/utils';
+import { CreditCard, Server, Settings } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { assign, shake } from 'radash';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+interface SubscribeFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+const defaultValues = {
+  inventory: 0,
+  speed_limit: 0,
+  device_limit: 0,
+  traffic: 0,
+  quota: 0,
+  discount: [],
+  server_group: [],
+  server: [],
+  unit_time: 'Month',
+  deduction_ratio: 0,
+  purchase_with_discount: false,
+  reset_cycle: 0,
+  renewal_reset: false,
+  deduction_mode: 'auto',
+};
+
+export default function SubscribeForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: Readonly<SubscribeFormProps<T>>) {
+  const t = useTranslations('product');
+  const [open, setOpen] = useState(false);
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const formSchema = z.object({
+    name: z.string(),
+    description: z.string().optional(),
+    unit_price: z.number(),
+    unit_time: z.string().default('Month'),
+    replacement: z.number().optional(),
+    discount: z
+      .array(
+        z.object({
+          quantity: z.number(),
+          discount: z.number(),
+        }),
+      )
+      .optional(),
+    inventory: z.number().optional().default(-1),
+    speed_limit: z.number().optional().default(0),
+    device_limit: z.number().optional().default(0),
+    traffic: z.number().optional().default(0),
+    quota: z.number().optional().default(0),
+    group_id: z.number().optional().nullish(),
+    server_group: z.array(z.number()).optional().default([]),
+    server: z.array(z.number()).optional().default([]),
+    deduction_ratio: z.number().optional().default(0),
+    allow_deduction: z.boolean().optional().default(false),
+    reset_cycle: z.number().optional().default(0),
+    renewal_reset: z.boolean().optional().default(false),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: assign(
+      defaultValues,
+      shake(initialValues, (value) => value === null) as Record<string, any>,
+    ),
+  });
+
+  const debouncedCalculateDiscount = useCallback(
+    (values: any[], fieldName: string, lastChangedField?: string, changedIndex?: number) => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+
+      updateTimeoutRef.current = setTimeout(() => {
+        const { unit_price } = form.getValues();
+        if (!unit_price || !values?.length) return;
+
+        let hasChanges = false;
+        const calculatedValues = values.map((item: any, index: number) => {
+          const result = { ...item };
+
+          if (changedIndex !== undefined && index !== changedIndex) {
+            return result;
+          }
+
+          const quantity = Number(item.quantity) || 0;
+          const discount = Number(item.discount) || 0;
+          const price = Number(item.price) || 0;
+
+          switch (lastChangedField) {
+            case 'quantity':
+            case 'discount':
+              if (quantity > 0 && discount > 0) {
+                const newPrice = evaluateWithPrecision(
+                  `${unit_price} * ${quantity} * ${discount} / 100`,
+                );
+                if (Math.abs(newPrice - price) > 0.01) {
+                  result.price = newPrice;
+                  hasChanges = true;
+                }
+              }
+              break;
+
+            case 'price':
+              if (quantity > 0 && price > 0) {
+                const newDiscount = evaluateWithPrecision(
+                  `${price} / ${quantity} / ${unit_price} * 100`,
+                );
+                if (Math.abs(newDiscount - discount) > 0.01) {
+                  result.discount = Math.min(100, Math.max(0, newDiscount));
+                  hasChanges = true;
+                }
+              } else if (discount > 0 && price > 0) {
+                const newQuantity = evaluateWithPrecision(
+                  `${price} / ${unit_price} / ${discount} * 100`,
+                );
+                if (Math.abs(newQuantity - quantity) > 0.01 && newQuantity > 0) {
+                  result.quantity = Math.max(1, Math.round(newQuantity));
+                  hasChanges = true;
+                }
+              }
+              break;
+
+            default:
+              if (quantity > 0 && discount > 0 && price === 0) {
+                result.price = evaluateWithPrecision(
+                  `${unit_price} * ${quantity} * ${discount} / 100`,
+                );
+                hasChanges = true;
+              } else if (quantity > 0 && price > 0 && discount === 0) {
+                const newDiscount = evaluateWithPrecision(
+                  `${price} / ${quantity} / ${unit_price} * 100`,
+                );
+                result.discount = Math.min(100, Math.max(0, newDiscount));
+                hasChanges = true;
+              } else if (discount > 0 && price > 0 && quantity === 0) {
+                const newQuantity = evaluateWithPrecision(
+                  `${price} / ${unit_price} / ${discount} * 100`,
+                );
+                if (newQuantity > 0) {
+                  result.quantity = Math.max(1, Math.round(newQuantity));
+                  hasChanges = true;
+                }
+              }
+              break;
+          }
+
+          return result;
+        });
+
+        if (hasChanges) {
+          form.setValue(fieldName, calculatedValues, { shouldDirty: true });
+        }
+      }, 300);
+    },
+    [form],
+  );
+
+  useEffect(() => {
+    form?.reset(
+      assign(defaultValues, shake(initialValues, (value) => value === null) as Record<string, any>),
+    );
+  }, [form, initialValues]);
+
+  useEffect(() => {
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+    if (bool) setOpen(false);
+  }
+
+  const { data: group } = useQuery({
+    queryKey: ['getSubscribeGroupList'],
+    queryFn: async () => {
+      const { data } = await getSubscribeGroupList();
+      return data.data?.list as API.SubscribeGroup[];
+    },
+  });
+
+  const { data: server } = useQuery({
+    queryKey: ['getNodeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getNodeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list;
+    },
+  });
+
+  const { data: server_groups } = useQuery({
+    queryKey: ['getNodeGroupList'],
+    queryFn: async () => {
+      const { data } = await getNodeGroupList();
+      return (data.data?.list || []) as API.ServerGroup[];
+    },
+  });
+
+  const unit_time = form.watch('unit_time');
+  const unit_price = form.watch('unit_price');
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[800px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='pt-4'>
+              <Tabs defaultValue='basic' className='w-full'>
+                <TabsList className='mb-6 grid w-full grid-cols-3'>
+                  <TabsTrigger value='basic' className='flex items-center gap-2'>
+                    <Settings className='h-4 w-4' />
+                    {t('form.basic')}
+                  </TabsTrigger>
+                  <TabsTrigger value='pricing' className='flex items-center gap-2'>
+                    <CreditCard className='h-4 w-4' />
+                    {t('form.pricing')}
+                  </TabsTrigger>
+                  <TabsTrigger value='servers' className='flex items-center gap-2'>
+                    <Server className='h-4 w-4' />
+                    {t('form.servers')}
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value='basic' className='space-y-4'>
+                  <div className='grid gap-6'>
+                    <div className='grid grid-cols-2 gap-4'>
+                      <FormField
+                        control={form.control}
+                        name='name'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.name')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                {...field}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name='group_id'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.groupId')}</FormLabel>
+                            <FormControl>
+                              <Combobox<number, false>
+                                placeholder={t('form.selectSubscribeGroup')}
+                                {...field}
+                                onChange={(value) => {
+                                  form.setValue(field.name, value || 0);
+                                }}
+                                options={group?.map((item) => ({
+                                  label: item.name,
+                                  value: item.id,
+                                }))}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+
+                    <div className='grid grid-cols-3 gap-4'>
+                      <FormField
+                        control={form.control}
+                        name='traffic'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.traffic')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                placeholder={t('form.noLimit')}
+                                type='number'
+                                {...field}
+                                formatInput={(value) => unitConversion('bytesToGb', value)}
+                                formatOutput={(value) => unitConversion('gbToBytes', value)}
+                                suffix='GB'
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name='speed_limit'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.speedLimit')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                placeholder={t('form.noLimit')}
+                                type='number'
+                                {...field}
+                                formatInput={(value) => unitConversion('bitsToMb', value)}
+                                formatOutput={(value) => unitConversion('mbToBits', value)}
+                                suffix='Mbps'
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name='device_limit'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.deviceLimit')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                placeholder={t('form.noLimit')}
+                                type='number'
+                                step={1}
+                                {...field}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+
+                    <div className='grid grid-cols-3 gap-4'>
+                      <FormField
+                        control={form.control}
+                        name='inventory'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.inventory')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                placeholder={t('form.noLimit')}
+                                type='number'
+                                step={1}
+                                value={field.value}
+                                min={0}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name='quota'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.quota')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                placeholder={t('form.noLimit')}
+                                type='number'
+                                step={1}
+                                {...field}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                    <FormField
+                      control={form.control}
+                      name='description'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <JSONEditor
+                              title={t('form.description')}
+                              value={field.value && JSON.parse(field.value)}
+                              onChange={(value) => {
+                                form.setValue(field.name, JSON.stringify(value));
+                              }}
+                              placeholder={{
+                                description: 'description',
+                                features: [
+                                  {
+                                    type: 'default',
+                                    icon: '',
+                                    label: 'label',
+                                  },
+                                ],
+                              }}
+                              schema={{
+                                type: 'object',
+                                properties: {
+                                  description: {
+                                    type: 'string',
+                                    description: 'A brief description of the item.',
+                                  },
+                                  features: {
+                                    type: 'array',
+                                    items: {
+                                      type: 'object',
+                                      properties: {
+                                        icon: {
+                                          type: 'string',
+                                          description:
+                                            "Enter an Iconify icon identifier (e.g., 'mdi:account').",
+                                          pattern: '^[a-z0-9]+:[a-z0-9-]+$',
+                                          examples: [
+                                            'uil:shield-check',
+                                            'uil:shield-exclamation',
+                                            'uil:database',
+                                            'uil:server',
+                                          ],
+                                        },
+                                        label: {
+                                          type: 'string',
+                                          description: 'The label describing the feature.',
+                                        },
+                                        type: {
+                                          type: 'string',
+                                          enum: ['default', 'success', 'destructive'],
+                                          description:
+                                            'The type of feature, limited to specific values.',
+                                        },
+                                      },
+                                    },
+                                    description: 'A list of feature objects.',
+                                  },
+                                },
+                                required: ['description', 'features'],
+                                additionalProperties: false,
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </TabsContent>
+
+                <TabsContent value='pricing' className='space-y-4'>
+                  <div className='grid gap-6'>
+                    <div className='grid grid-cols-4 gap-4'>
+                      <FormField
+                        control={form.control}
+                        name='unit_price'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.unitPrice')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                type='number'
+                                {...field}
+                                min={0}
+                                formatInput={(value) => unitConversion('centsToDollars', value)}
+                                formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name='unit_time'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.unitTime')}</FormLabel>
+                            <FormControl>
+                              <Combobox
+                                placeholder={t('form.selectUnitTime')}
+                                {...field}
+                                onChange={(value) => {
+                                  if (value) {
+                                    form.setValue(field.name, value);
+                                  }
+                                }}
+                                options={[
+                                  { label: t('form.NoLimit'), value: 'NoLimit' },
+                                  { label: t('form.Year'), value: 'Year' },
+                                  { label: t('form.Month'), value: 'Month' },
+                                  { label: t('form.Day'), value: 'Day' },
+                                  { label: t('form.Hour'), value: 'Hour' },
+                                  { label: t('form.Minute'), value: 'Minute' },
+                                ]}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name='replacement'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.replacement')}</FormLabel>
+                            <FormControl>
+                              <EnhancedInput
+                                type='number'
+                                {...field}
+                                min={0}
+                                formatInput={(value) => unitConversion('centsToDollars', value)}
+                                formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                                onValueChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name='reset_cycle'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>{t('form.resetCycle')}</FormLabel>
+                            <FormControl>
+                              <Combobox<number, false>
+                                placeholder={t('form.selectResetCycle')}
+                                {...field}
+                                onChange={(value) => {
+                                  if (typeof value === 'number') {
+                                    form.setValue(field.name, value);
+                                  }
+                                }}
+                                options={[
+                                  { label: t('form.noReset'), value: 0 },
+                                  { label: t('form.resetOn1st'), value: 1 },
+                                  { label: t('form.monthlyReset'), value: 2 },
+                                  { label: t('form.annualReset'), value: 3 },
+                                ]}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                    <FormField
+                      control={form.control}
+                      name='discount'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.discount')}</FormLabel>
+                          <FormControl>
+                            <ArrayInput<API.SubscribeDiscount & { price?: number }>
+                              fields={[
+                                {
+                                  name: 'quantity',
+                                  type: 'number',
+                                  step: 1,
+                                  min: 1,
+                                  suffix: unit_time && t(`form.${unit_time}`),
+                                },
+                                {
+                                  name: 'discount',
+                                  type: 'number',
+                                  min: 0.01,
+                                  max: 100,
+                                  step: 0.01,
+                                  placeholder: t('form.discountPercent'),
+                                  suffix: '%',
+                                },
+                                {
+                                  name: 'price',
+                                  placeholder: t('form.discount_price'),
+                                  type: 'number',
+                                  min: 0,
+                                  step: 0.01,
+                                  formatInput: (value) => unitConversion('centsToDollars', value),
+                                  formatOutput: (value) => unitConversion('dollarsToCents', value),
+                                },
+                              ]}
+                              value={field.value}
+                              onChange={(
+                                newValues: (API.SubscribeDiscount & { price?: number })[],
+                              ) => {
+                                const oldValues = field.value || [];
+                                let lastChangedField: string | undefined;
+                                let changedIndex: number | undefined;
+
+                                for (
+                                  let i = 0;
+                                  i < Math.max(newValues.length, oldValues.length);
+                                  i++
+                                ) {
+                                  const newItem = newValues[i] || {};
+                                  const oldItem = oldValues[i] || {};
+
+                                  if ((newItem as any).quantity !== (oldItem as any).quantity) {
+                                    lastChangedField = 'quantity';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                  if ((newItem as any).discount !== (oldItem as any).discount) {
+                                    lastChangedField = 'discount';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                  if ((newItem as any).price !== (oldItem as any).price) {
+                                    lastChangedField = 'price';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                }
+                                form.setValue(field.name, newValues, { shouldDirty: true });
+                                if (newValues?.length > 0) {
+                                  debouncedCalculateDiscount(
+                                    newValues,
+                                    field.name,
+                                    lastChangedField,
+                                    changedIndex,
+                                  );
+                                }
+                              }}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('form.discountDescription')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='deduction_ratio'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.deductionRatio')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='number'
+                              {...field}
+                              min={0}
+                              max={100}
+                              placeholder='Auto'
+                              suffix='%'
+                              onValueChange={(value) => {
+                                form.setValue(field.name, value);
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                          <FormDescription>{t('form.deductionRatioDescription')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='renewal_reset'
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className='flex items-center justify-between'>
+                            <div className='space-y-0.5'>
+                              <FormLabel>{t('form.renewalReset')}</FormLabel>
+                              <FormDescription>{t('form.renewalResetDescription')}</FormDescription>
+                            </div>
+                            <FormControl>
+                              <Switch checked={field.value} onCheckedChange={field.onChange} />
+                            </FormControl>
+                          </div>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='allow_deduction'
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className='flex items-center justify-between'>
+                            <div className='space-y-0.5'>
+                              <FormLabel>{t('form.purchaseWithDiscount')}</FormLabel>
+                              <FormDescription>
+                                {t('form.purchaseWithDiscountDescription')}
+                              </FormDescription>
+                            </div>
+                            <FormControl>
+                              <Switch
+                                checked={!!field.value}
+                                onCheckedChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </FormControl>
+                          </div>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </TabsContent>
+
+                <TabsContent value='servers' className='space-y-4'>
+                  <div className='space-y-6'>
+                    <FormField
+                      control={form.control}
+                      name='server_group'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.serverGroup')}</FormLabel>
+                          <FormControl>
+                            <Accordion type='single' collapsible className='w-full'>
+                              {server_groups?.map((group: API.ServerGroup) => {
+                                const value = field.value || [];
+
+                                return (
+                                  <AccordionItem key={group.id} value={String(group.id)}>
+                                    <AccordionTrigger>
+                                      <div className='flex items-center gap-2'>
+                                        <Checkbox
+                                          checked={value.includes(group.id!)}
+                                          onCheckedChange={(checked) => {
+                                            return checked
+                                              ? form.setValue(field.name, [...value, group.id])
+                                              : form.setValue(
+                                                  field.name,
+                                                  value.filter(
+                                                    (value: number) => value !== group.id,
+                                                  ),
+                                                );
+                                          }}
+                                        />
+                                        <Label>{group.name}</Label>
+                                      </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent>
+                                      <ul className='list-disc [&>li]:mt-2'>
+                                        {server
+                                          ?.filter(
+                                            (server: API.Server) => server.group_id === group.id,
+                                          )
+                                          ?.map((node: API.Server) => {
+                                            return (
+                                              <li
+                                                key={node.id}
+                                                className='flex items-center justify-between *:flex-1'
+                                              >
+                                                <span>{node.name}</span>
+                                                <span>{node.server_addr}</span>
+                                                <span className='text-right'>{node.protocol}</span>
+                                              </li>
+                                            );
+                                          })}
+                                      </ul>
+                                    </AccordionContent>
+                                  </AccordionItem>
+                                );
+                              })}
+                            </Accordion>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='server'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.server')}</FormLabel>
+                          <FormControl>
+                            <div className='flex flex-col gap-2'>
+                              {server
+                                ?.filter((item: API.Server) => !item.group_id)
+                                ?.map((item: API.Server) => {
+                                  const value = field.value || [];
+
+                                  return (
+                                    <div className='flex items-center gap-2' key={item.id}>
+                                      <Checkbox
+                                        checked={value.includes(item.id!)}
+                                        onCheckedChange={(checked) => {
+                                          return checked
+                                            ? form.setValue(field.name, [...value, item.id])
+                                            : form.setValue(
+                                                field.name,
+                                                value.filter((value: number) => value !== item.id),
+                                              );
+                                        }}
+                                      />
+                                      <Label className='flex w-full items-center justify-between *:flex-1'>
+                                        <span>{item.name}</span>
+                                        <span>{item.server_addr}</span>
+                                        <span className='text-right'>{item.protocol}</span>
+                                      </Label>
+                                    </div>
+                                  );
+                                })}
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('form.cancel')}
+          </Button>
+          <Button
+            disabled={loading}
+            onClick={form.handleSubmit(handleSubmit, (errors) => {
+              const keys = Object.keys(errors);
+              for (const key of keys) {
+                const formattedKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+                toast.error(`${t(`form.${formattedKey}`)} is ${errors[key]?.message}`);
+                return false;
+              }
+            })}
+          >
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/product/subscribe-table.tsx

@@ -22,7 +22,7 @@ import { toast } from 'sonner';
 import SubscribeForm from './subscribe-form';
 
 export default function SubscribeTable() {
-  const t = useTranslations('subscribe');
+  const t = useTranslations('product');
   const [loading, setLoading] = useState(false);
   const { data: groups } = useQuery({
     queryKey: ['getSubscribeGroupList', 'all'],
@@ -36,7 +36,7 @@ export default function SubscribeTable() {
   });
   const ref = useRef<ProTableActions>(null);
   return (
-    <ProTable<API.Subscribe, { group_id: number; query: string }>
+    <ProTable<API.SubscribeItem, { group_id: number; query: string }>
       action={ref}
       header={{
         toolbar: (
@@ -67,9 +67,6 @@ export default function SubscribeTable() {
         ),
       }}
       params={[
-        {
-          key: 'search',
-        },
         {
           key: 'group_id',
           placeholder: t('subscribeGroup'),
@@ -78,6 +75,9 @@ export default function SubscribeTable() {
             value: String(item.id),
           })),
         },
+        {
+          key: 'search',
+        },
       ]}
       request={async (pagination, filters) => {
         const { data } = await getSubscribeList({
@@ -133,7 +133,14 @@ export default function SubscribeTable() {
         {
           accessorKey: 'unit_price',
           header: t('unitPrice'),
-          cell: ({ row }) => <Display type='currency' value={row.getValue('unit_price')} />,
+          cell: ({ row }) => {
+            return (
+              <>
+                <Display type='currency' value={row.getValue('unit_price')} />/
+                {t(row.original.unit_time ? `form.${row.original.unit_time}` : 'form.Month')}
+              </>
+            );
+          },
         },
         {
           accessorKey: 'replacement',
@@ -176,10 +183,15 @@ export default function SubscribeTable() {
             return name ? <Badge variant='outline'>{name}</Badge> : '--';
           },
         },
+        {
+          accessorKey: 'sold',
+          header: t('sold'),
+          cell: ({ row }) => <Badge variant='outline'>{row.getValue('sold')}</Badge>,
+        },
       ]}
       actions={{
         render: (row) => [
-          <SubscribeForm<API.Subscribe>
+          <SubscribeForm<API.SubscribeItem>
             key='edit'
             trigger={t('edit')}
             title={t('editSubscribe')}
@@ -203,6 +215,21 @@ export default function SubscribeTable() {
               }
             }}
           />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteSubscribe({
+                id: row.id!,
+              });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
           <Button
             key='copy'
             variant='secondary'
@@ -214,7 +241,7 @@ export default function SubscribeTable() {
                   ...params,
                   show: false,
                   sell: false,
-                });
+                } as API.CreateSubscribeRequest);
                 toast.success(t('copySuccess'));
                 ref.current?.refresh();
                 setLoading(false);
@@ -227,21 +254,6 @@ export default function SubscribeTable() {
           >
             {t('copy')}
           </Button>,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('delete')}</Button>}
-            title={t('confirmDelete')}
-            description={t('deleteWarning')}
-            onConfirm={async () => {
-              await deleteSubscribe({
-                id: row.id,
-              });
-              toast.success(t('deleteSuccess'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('cancel')}
-            confirmText={t('confirm')}
-          />,
         ],
         batchRender: (rows) => [
           <ConfirmButton
@@ -251,7 +263,7 @@ export default function SubscribeTable() {
             description={t('deleteWarning')}
             onConfirm={async () => {
               await batchDeleteSubscribe({
-                ids: rows.map((item) => item.id),
+                ids: rows.map((item) => item.id) as number[],
               });
 
               toast.success(t('deleteSuccess'));
@@ -266,24 +278,24 @@ export default function SubscribeTable() {
         const sourceIndex = items.findIndex((item) => String(item.id) === source);
         const targetIndex = items.findIndex((item) => String(item.id) === target);
 
-        const originalSortMap = new Map(items.map((item) => [item.id, item.sort || item.id]));
+        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 = originalSortMap.get(item.id);
+          const originalSort = originalSorts[index];
           const newSort = originalSort !== undefined ? originalSort : item.sort;
           return { ...item, sort: newSort };
         });
 
-        const changedItems = updatedItems.filter(
+        const changedItems = updatedItems.filter((item, index) => {
-          (item) => originalSortMap.get(item.id) !== item.sort,
+          return item.sort !== items[index]?.sort;
-        );
+        });
 
         if (changedItems.length > 0) {
           subscribeSort({
-            sort: changedItems.map((item) => ({ id: item.id, sort: item.sort })),
+            sort: changedItems.map((item) => ({ id: item.id, sort: item.sort })) as API.SortItem[],
           });
         }
 

apps/admin/app/dashboard/server/form-schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-export const protocols = ['shadowsocks', 'vmess', 'vless', 'trojan', 'hysteria2', 'tuic'];
+export const protocols = ['shadowsocks', 'vmess', 'vless', 'trojan', 'hysteria2', 'tuic', 'anytls'];
 
 const nullableString = z.string().nullish();
 const portSchema = z.number().max(65535).nullish();
@@ -36,6 +36,7 @@ const baseProtocolSchema = z.object({
 const shadowsocksSchema = z.object({
   method: z.string(),
   port: portSchema,
+  server_key: nullableString,
 });
 
 const vmessSchema = baseProtocolSchema;
@@ -51,10 +52,20 @@ const hysteria2Schema = z.object({
   hop_ports: nullableString,
   hop_interval: z.number().nullish(),
   obfs_password: nullableString,
+  security: z.string(),
   security_config: securityConfigSchema,
 });
 
 const tuicSchema = z.object({
+  port: portSchema,
+  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: securityConfigSchema,
+});
+
+const anytlsSchema = z.object({
   port: portSchema,
   security_config: securityConfigSchema,
 });
@@ -84,17 +95,32 @@ const protocolConfigSchema = z.discriminatedUnion('protocol', [
     protocol: z.literal('tuic'),
     config: tuicSchema,
   }),
+  z.object({
+    protocol: z.literal('anytls'),
+    config: anytlsSchema,
+  }),
 ]);
 
 const baseFormSchema = z.object({
   name: z.string(),
+  tags: z.array(z.string()).nullish().default([]),
+  country: z.string().nullish(),
+  city: z.string().nullish(),
   server_addr: z.string(),
   speed_limit: z.number().nullish(),
   traffic_ratio: z.number().default(1),
   group_id: z.number().nullish(),
-  enable_relay: z.boolean().nullish().default(false),
+  relay_mode: z.string().nullish().default('none'),
-  relay_host: nullableString,
+  relay_node: z
-  relay_port: portSchema,
+    .array(
+      z.object({
+        host: z.string(),
+        port: portSchema,
+        prefix: z.string().nullish(),
+      }),
+    )
+    .nullish()
+    .default([]),
 });
 
 export const formSchema = z.intersection(baseFormSchema, protocolConfigSchema);

apps/admin/app/dashboard/server/group-form.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -21,6 +20,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -90,7 +90,7 @@ export default function GroupForm<T extends Record<string, any>>({
                 name='name'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('group.form.name')}</FormLabel>
+                    <FormLabel>{t('groupForm.name')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
                         {...field}
@@ -108,7 +108,7 @@ export default function GroupForm<T extends Record<string, any>>({
                 name='description'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('group.form.description')}</FormLabel>
+                    <FormLabel>{t('groupForm.description')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
                         {...field}
@@ -132,11 +132,11 @@ export default function GroupForm<T extends Record<string, any>>({
               setOpen(false);
             }}
           >
-            {t('group.form.cancel')}
+            {t('groupForm.cancel')}
           </Button>
           <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
             {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('group.form.confirm')}
+            {t('groupForm.confirm')}
           </Button>
         </SheetFooter>
       </SheetContent>

apps/admin/app/dashboard/server/node-config.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import {
+  getNodeConfig,
+  getNodeMultiplier,
+  setNodeMultiplier,
+  updateNodeConfig,
+} from '@/services/admin/system';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
+import { Label } from '@workspace/ui/components/label';
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { DicesIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useMemo, useState } from 'react';
+import { Cell, Legend, Pie, PieChart } from 'recharts';
+import { toast } from 'sonner';
+
+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; // 24 * 60
+
+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 = [];
+  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;
+}
+
+export default function NodeConfig() {
+  const t = useTranslations('server.config');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getNodeConfig'],
+    queryFn: async () => {
+      const { data } = await getNodeConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateNodeConfig({
+        ...data,
+        [key]: value,
+      } as API.NodeConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  const [timeSlots, setTimeSlots] = useState<API.TimePeriod[]>([]);
+
+  const { data: NodeMultiplier, refetch: refetchNodeMultiplier } = useQuery({
+    queryKey: ['getNodeMultiplier'],
+    queryFn: async () => {
+      const { data } = await getNodeMultiplier();
+      if (timeSlots.length === 0) {
+        setTimeSlots(data.data?.periods || []);
+      }
+      return data.data?.periods || [];
+    },
+  });
+
+  const chartTimeSlots = useMemo(() => {
+    return 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 }>,
+    );
+  }, [data]);
+
+  return (
+    <>
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Label>{t('communicationKey')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('communicationKeyDescription')}</p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <EnhancedInput
+                placeholder={t('inputPlaceholder')}
+                value={data?.node_secret}
+                onValueBlur={(value) => updateConfig('node_secret', value)}
+                suffix={
+                  <div className='bg-muted flex h-9 items-center text-nowrap 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)}`;
+                        updateConfig('node_secret', formatted);
+                      }}
+                      className='cursor-pointer'
+                    />
+                  </div>
+                }
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Label>{t('nodePullInterval')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('nodePullIntervalDescription')}</p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <EnhancedInput
+                type='number'
+                min={0}
+                onValueBlur={(value) => updateConfig('node_pull_interval', value)}
+                suffix='S'
+                value={data?.node_pull_interval}
+                placeholder={t('inputPlaceholder')}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Label>{t('nodePushInterval')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('nodePushIntervalDescription')}</p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <EnhancedInput
+                type='number'
+                min={0}
+                step={0.1}
+                value={data?.node_push_interval}
+                onValueBlur={(value) => updateConfig('node_push_interval', value)}
+                placeholder={t('inputPlaceholder')}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Label>{t('dynamicMultiplier')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('dynamicMultiplierDescription')}</p>
+            </TableCell>
+            <TableCell className='flex justify-end gap-2'>
+              <Button
+                size='sm'
+                variant='outline'
+                onClick={() => {
+                  setTimeSlots(NodeMultiplier || []);
+                }}
+              >
+                {t('reset')}
+              </Button>
+              <Button
+                size='sm'
+                onClick={() => {
+                  setNodeMultiplier({
+                    periods: timeSlots,
+                  }).then(async () => {
+                    const result = await refetchNodeMultiplier();
+                    if (result.data) setTimeSlots(result.data);
+                    toast.success(t('saveSuccess'));
+                  });
+                }}
+              >
+                {t('save')}
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <div className='flex flex-col-reverse gap-8 px-4 pt-6 md:flex-row md:items-start'>
+        <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={({ name, 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 data = payload[0]?.payload;
+                    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('timeSlot')}
+                            </span>
+                            <span className='text-muted-foreground font-bold'>
+                              {data.name || '其他'}
+                            </span>
+                          </div>
+                          <div className='flex flex-col'>
+                            <span className='text-muted-foreground text-[0.70rem] uppercase'>
+                              {t('multiplier')}
+                            </span>
+                            <span className='font-bold'>{data.multiplier.toFixed(2)}x</span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Legend />
+            </PieChart>
+          </ChartContainer>
+        </div>
+        <div className='w-full md:w-1/2'>
+          <ArrayInput<API.TimePeriod>
+            fields={[
+              {
+                name: 'start_time',
+                prefix: t('startTime'),
+                type: 'time',
+              },
+              { name: 'end_time', prefix: t('endTime'), type: 'time' },
+              { name: 'multiplier', prefix: t('multiplier'), type: 'number', placeholder: '0' },
+            ]}
+            value={timeSlots}
+            onChange={setTimeSlots}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

apps/admin/app/dashboard/server/node-detail.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { ProTable } 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 { Progress } from '@workspace/ui/components/progress';
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { formatBytes, formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface NodeDetailDialogProps {
+  node: API.Server;
+  children?: React.ReactNode;
+  trigger?: React.ReactNode;
+}
+
+// 统一的用户订阅信息组件
+function UserSubscribeInfo({
+  userId,
+  type,
+}: {
+  userId: number;
+  type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
+}) {
+  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>;
+
+  switch (type) {
+    case 'account':
+      if (!data.user_id) return <span className='text-muted-foreground'>--</span>;
+      return <UserDetail id={data.user_id} />;
+
+    case 'subscribeName':
+      if (!data.subscribe?.name) return <span className='text-muted-foreground'>--</span>;
+      return <span className='text-sm'>{data.subscribe.name}</span>;
+
+    case 'subscribeId':
+      if (!data.id) return <span className='text-muted-foreground'>--</span>;
+      return <span className='font-mono text-sm'>{data.id}</span>;
+
+    case 'trafficUsage': {
+      const usedTraffic = data.upload + data.download;
+      const totalTraffic = data.traffic || 0;
+      return (
+        <div className='min-w-0 text-sm'>
+          <div className='break-words'>
+            {formatBytes(usedTraffic)} / {totalTraffic > 0 ? formatBytes(totalTraffic) : '无限制'}
+          </div>
+        </div>
+      );
+    }
+
+    case 'expireTime': {
+      if (!data.expire_time) return <span className='text-muted-foreground'>--</span>;
+      const isExpired = data.expire_time < Date.now() / 1000;
+      return (
+        <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
+          <span className='text-sm'>{formatDate(data.expire_time)}</span>
+          {isExpired && (
+            <Badge variant='destructive' className='w-fit px-1 py-0 text-xs'>
+              过期
+            </Badge>
+          )}
+        </div>
+      );
+    }
+
+    default:
+      return <span className='text-muted-foreground'>--</span>;
+  }
+}
+
+export function NodeDetailDialog({ node, children, trigger }: NodeDetailDialogProps) {
+  const t = useTranslations('server.node');
+  const [open, setOpen] = useState(false);
+
+  const { status } = node;
+  const { online, cpu, mem, disk, updated_at } = status || {
+    online: {},
+    cpu: 0,
+    mem: 0,
+    disk: 0,
+    updated_at: 0,
+  };
+
+  const isOnline = updated_at > 0;
+  const onlineCount = (online && Object.keys(online).length) || 0;
+
+  // 转换在线用户数据为ProTable需要的格式
+  const onlineUsersData = Object.entries(online || {}).map(([uid, ips]) => ({
+    uid,
+    ips: ips as string[],
+    primaryIp: ips[0] || '',
+    allIps: (ips as string[]).join(', '),
+  }));
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        {trigger || (
+          <Button variant='outline' size='sm'>
+            {t('detail')}
+          </Button>
+        )}
+      </SheetTrigger>
+      <SheetContent className='w-full max-w-full sm:w-[600px] sm:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>
+            {t('nodeDetail')} - {node.name}
+          </SheetTitle>
+        </SheetHeader>
+        <div className='-mx-6 h-[calc(100dvh-48px-16px-env(safe-area-inset-top))] space-y-2 overflow-y-auto px-6 py-4'>
+          <h3 className='text-base font-medium'>{t('nodeStatus')}</h3>
+          <div className='space-y-3'>
+            <div className='flex w-full flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-3'>
+              <Badge variant={isOnline ? 'default' : 'destructive'} className='w-fit text-xs'>
+                {isOnline ? t('normal') : t('abnormal')}
+              </Badge>
+              <span className='text-muted-foreground'>
+                {t('onlineCount')}: {onlineCount}
+              </span>
+              {isOnline && (
+                <span className='text-muted-foreground text-xs sm:text-sm'>
+                  {t('lastUpdated')}: {formatDate(updated_at)}
+                </span>
+              )}
+            </div>
+
+            {isOnline && (
+              <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
+                <div className='space-y-1'>
+                  <div className='flex justify-between text-xs'>
+                    <span>CPU</span>
+                    <span>{cpu?.toFixed(1)}%</span>
+                  </div>
+                  <Progress value={cpu ?? 0} className='h-1.5' max={100} />
+                </div>
+                <div className='space-y-1'>
+                  <div className='flex justify-between text-xs'>
+                    <span>{t('memory')}</span>
+                    <span>{mem?.toFixed(1)}%</span>
+                  </div>
+                  <Progress value={mem ?? 0} className='h-1.5' max={100} />
+                </div>
+                <div className='space-y-1'>
+                  <div className='flex justify-between text-xs'>
+                    <span>{t('disk')}</span>
+                    <span>{disk?.toFixed(1)}%</span>
+                  </div>
+                  <Progress value={disk ?? 0} className='h-1.5' max={100} />
+                </div>
+              </div>
+            )}
+          </div>
+          {isOnline && onlineCount > 0 && (
+            <div>
+              <h3 className='mb-3 text-lg font-medium'>{t('onlineUsers')}</h3>
+              <div className='overflow-x-auto'>
+                <ProTable
+                  header={{
+                    hidden: true,
+                  }}
+                  columns={[
+                    {
+                      accessorKey: 'allIps',
+                      header: t('ipAddresses'),
+                      cell: ({ row }) => {
+                        const ips = row.original.ips;
+                        return (
+                          <div className='flex min-w-0 flex-col gap-1'>
+                            {ips.map((ip: string, index: number) => (
+                              <div key={ip} className='whitespace-nowrap text-sm'>
+                                {index === 0 ? (
+                                  <span className='font-medium'>{ip}</span>
+                                ) : (
+                                  <span className='text-muted-foreground'>{ip}</span>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        );
+                      },
+                    },
+                    {
+                      accessorKey: 'user',
+                      header: t('user'),
+                      cell: ({ row }) => (
+                        <UserSubscribeInfo userId={Number(row.original.uid)} type='account' />
+                      ),
+                    },
+                    {
+                      accessorKey: 'subscribeName',
+                      header: t('subscribeName'),
+                      cell: ({ row }) => (
+                        <UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeName' />
+                      ),
+                    },
+                    {
+                      accessorKey: 'subscribeId',
+                      header: t('subscribeId'),
+                      cell: ({ row }) => (
+                        <UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeId' />
+                      ),
+                    },
+                    {
+                      accessorKey: 'trafficUsage',
+                      header: t('trafficUsage'),
+                      cell: ({ row }) => (
+                        <UserSubscribeInfo userId={Number(row.original.uid)} type='trafficUsage' />
+                      ),
+                    },
+                    {
+                      accessorKey: 'expireTime',
+                      header: t('expireTime'),
+                      cell: ({ row }) => (
+                        <UserSubscribeInfo userId={Number(row.original.uid)} type='expireTime' />
+                      ),
+                    },
+                  ]}
+                  request={async () => ({
+                    list: onlineUsersData,
+                    total: onlineUsersData.length,
+                  })}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/server/node-status.tsx

@@ -1,99 +1,266 @@
 'use client';
 
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { getUserSubscribeById } from '@/services/admin/user';
+import { useQuery } from '@tanstack/react-query';
 import { Badge } from '@workspace/ui/components/badge';
 import { Progress } from '@workspace/ui/components/progress';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import {
-  Tooltip,
+  Sheet,
-  TooltipContent,
+  SheetContent,
-  TooltipProvider,
+  SheetHeader,
-  TooltipTrigger,
+  SheetTitle,
-} from '@workspace/ui/components/tooltip';
+  SheetTrigger,
-import { formatDate } from '@workspace/ui/utils';
+} from '@workspace/ui/components/sheet';
+import { formatBytes, formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 export function formatPercentage(value: number): string {
   return `${value.toFixed(1)}%`;
 }
 
-export function NodeStatusCell({ status }: { status: API.NodeStatus }) {
+// 统一的用户订阅信息组件
-  const t = useTranslations('server.node');
+function UserSubscribeInfo({
-
+  userId,
-  const {
+  type,
-    last_at,
+}: {
-    online_users,
+  userId: number;
-    status: serverStatus,
+  type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
-  } = status || {
+}) {
-    online_users: [],
+  const { data } = useQuery({
-    status: {
+    enabled: userId !== 0,
-      cpu: 0,
+    queryKey: ['getUserSubscribeById', userId],
-      mem: 0,
+    queryFn: async () => {
-      disk: 0,
+      const { data } = await getUserSubscribeById({ id: userId });
-      updated_at: 0,
+      return data.data;
     },
-    last_at: 0,
+  });
+
+  if (!data) return <span className='text-muted-foreground'>--</span>;
+
+  switch (type) {
+    case 'account':
+      if (!data.user_id) return <span className='text-muted-foreground'>--</span>;
+      return <UserDetail id={data.user_id} />;
+
+    case 'subscribeName':
+      if (!data.subscribe?.name) return <span className='text-muted-foreground'>--</span>;
+      return <span className='text-sm'>{data.subscribe.name}</span>;
+
+    case 'subscribeId':
+      if (!data.id) return <span className='text-muted-foreground'>--</span>;
+      return <span className='font-mono text-sm'>{data.id}</span>;
+
+    case 'trafficUsage': {
+      const usedTraffic = data.upload + data.download;
+      const totalTraffic = data.traffic || 0;
+      return (
+        <div className='min-w-0 text-sm'>
+          <div className='break-words'>
+            {formatBytes(usedTraffic)} / {totalTraffic > 0 ? formatBytes(totalTraffic) : '无限制'}
+          </div>
+        </div>
+      );
+    }
+
+    case 'expireTime': {
+      if (!data.expire_time) return <span className='text-muted-foreground'>--</span>;
+      const isExpired = data.expire_time < Date.now() / 1000;
+      return (
+        <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
+          <span className='text-sm'>{formatDate(data.expire_time)}</span>
+          {isExpired && (
+            <Badge variant='destructive' className='w-fit px-1 py-0 text-xs'>
+              过期
+            </Badge>
+          )}
+        </div>
+      );
+    }
+
+    default:
+      return <span className='text-muted-foreground'>--</span>;
+  }
+}
+
+export function NodeStatusCell({ status, node }: { status: API.NodeStatus; node?: API.Server }) {
+  const t = useTranslations('server.node');
+  const [open, setOpen] = useState(false);
+
+  const { online, cpu, mem, disk, updated_at } = status || {
+    online: {},
+    cpu: 0,
+    mem: 0,
+    disk: 0,
+    updated_at: 0,
   };
-  const isOnline = last_at > 0;
+
+  const isOnline = updated_at > 0;
   const badgeVariant = isOnline ? 'default' : 'destructive';
   const badgeText = isOnline ? t('normal') : t('abnormal');
-  const onlineCount = Array.isArray(online_users) ? online_users?.length : 0;
+  const onlineCount = (online && Object.keys(online).length) || 0;
+
+  // 转换在线用户数据为ProTable需要的格式
+  const onlineUsersData = Object.entries(online || {}).map(([uid, ips]) => ({
+    uid,
+    ips: ips as string[],
+    primaryIp: ips[0] || '',
+    allIps: (ips as string[]).join(', '),
+  }));
 
   return (
-    <TooltipProvider>
+    <>
-      <Tooltip>
+      <Sheet open={open} onOpenChange={setOpen}>
-        <TooltipTrigger asChild>
+        <SheetTrigger asChild>
-          <div className='flex items-center space-x-2 rounded-md'>
+          <button className='hover:text-foreground flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-sm transition-colors'>
             <Badge variant={badgeVariant}>{badgeText}</Badge>
-            <span className='text-sm font-medium'>
+            <span className='text-muted-foreground'>
               {t('onlineCount')}: {onlineCount}
             </span>
-          </div>
+          </button>
-        </TooltipTrigger>
+        </SheetTrigger>
-        <TooltipContent className='bg-muted text-foreground w-80'>
+        {node && (
-          <div className='space-y-4'>
+          <SheetContent className='h-screen w-screen max-w-none sm:h-auto sm:w-[800px] sm:max-w-[90vw]'>
-            <>
+            <SheetHeader>
-              <div className='space-y-2'>
+              <SheetTitle>
-                <div className='space-y-1'>
+                {t('nodeDetail')} - {node.name}
-                  <div className='flex justify-between text-xs'>
+              </SheetTitle>
-                    <span className='font-medium'>CPU</span>
+            </SheetHeader>
-                    <span>{formatPercentage(serverStatus?.cpu ?? 0)}</span>
+            <div className='-mx-6 h-[calc(100vh-48px-16px)] space-y-2 overflow-y-auto px-6 py-4 sm:h-[calc(100dvh-48px-16px-env(safe-area-inset-top))]'>
-                  </div>
+              <h3 className='text-base font-medium'>{t('nodeStatus')}</h3>
-                  <Progress value={(serverStatus?.cpu ?? 0) * 100} className='h-2' />
+              <div className='space-y-3'>
+                <div className='flex w-full flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-3'>
+                  <Badge variant={isOnline ? 'default' : 'destructive'} className='w-fit text-xs'>
+                    {isOnline ? t('normal') : t('abnormal')}
+                  </Badge>
+                  <span className='text-muted-foreground'>
+                    {t('onlineCount')}: {onlineCount}
+                  </span>
+                  {isOnline && (
+                    <span className='text-muted-foreground text-xs sm:text-sm'>
+                      {t('lastUpdated')}: {formatDate(updated_at)}
+                    </span>
+                  )}
                 </div>
-                <div className='space-y-1'>
+
-                  <div className='flex justify-between text-xs'>
+                {isOnline && (
-                    <span className='font-medium'>{t('memory')}</span>
+                  <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
-                    <span>{formatPercentage(serverStatus?.mem ?? 0)}</span>
+                    <div className='space-y-1'>
+                      <div className='flex justify-between text-xs'>
+                        <span>CPU</span>
+                        <span>{cpu?.toFixed(1)}%</span>
+                      </div>
+                      <Progress value={cpu ?? 0} className='h-1.5' max={100} />
+                    </div>
+                    <div className='space-y-1'>
+                      <div className='flex justify-between text-xs'>
+                        <span>{t('memory')}</span>
+                        <span>{mem?.toFixed(1)}%</span>
+                      </div>
+                      <Progress value={mem ?? 0} className='h-1.5' max={100} />
+                    </div>
+                    <div className='space-y-1'>
+                      <div className='flex justify-between text-xs'>
+                        <span>{t('disk')}</span>
+                        <span>{disk?.toFixed(1)}%</span>
+                      </div>
+                      <Progress value={disk ?? 0} className='h-1.5' max={100} />
+                    </div>
                   </div>
-                  <Progress value={(serverStatus?.mem ?? 0) * 100} className='h-2' />
+                )}
-                </div>
-                <div className='space-y-1'>
-                  <div className='flex justify-between text-xs'>
-                    <span className='font-medium'>{t('disk')}</span>
-                    <span>{formatPercentage(serverStatus?.disk ?? 0)}</span>
-                  </div>
-                  <Progress value={(serverStatus?.disk ?? 0) * 100} className='h-2' />
-                </div>
-              </div>
-              <div className='text-xs'>
-                {t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)}
               </div>
               {isOnline && onlineCount > 0 && (
-                <div className='space-y-2'>
+                <div>
-                  <h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4>
+                  <h3 className='mb-3 text-lg font-medium'>{t('onlineUsers')}</h3>
-                  <ScrollArea className='h-[400px] rounded-md border p-2'>
+                  <div className='overflow-x-auto'>
-                    {online_users.map((user, index) => (
+                    <ProTable
-                      <div key={user.uid} className='py-1 text-xs'>
+                      header={{
-                        {user.ip} (UID: {user.uid})
+                        hidden: true,
-                      </div>
+                      }}
-                    ))}
+                      columns={[
-                  </ScrollArea>
+                        {
+                          accessorKey: 'allIps',
+                          header: t('ipAddresses'),
+                          cell: ({ row }) => {
+                            const ips = row.original.ips;
+                            return (
+                              <div className='flex min-w-0 flex-col gap-1'>
+                                {ips.map((ip: string, index: number) => (
+                                  <div key={ip} className='whitespace-nowrap text-sm'>
+                                    {index === 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' />
+                          ),
+                        },
+                        {
+                          accessorKey: 'subscribeName',
+                          header: t('subscribeName'),
+                          cell: ({ row }) => (
+                            <UserSubscribeInfo
+                              userId={Number(row.original.uid)}
+                              type='subscribeName'
+                            />
+                          ),
+                        },
+                        {
+                          accessorKey: 'subscribeId',
+                          header: t('subscribeId'),
+                          cell: ({ row }) => (
+                            <UserSubscribeInfo
+                              userId={Number(row.original.uid)}
+                              type='subscribeId'
+                            />
+                          ),
+                        },
+                        {
+                          accessorKey: 'trafficUsage',
+                          header: t('trafficUsage'),
+                          cell: ({ row }) => (
+                            <UserSubscribeInfo
+                              userId={Number(row.original.uid)}
+                              type='trafficUsage'
+                            />
+                          ),
+                        },
+                        {
+                          accessorKey: 'expireTime',
+                          header: t('expireTime'),
+                          cell: ({ row }) => (
+                            <UserSubscribeInfo
+                              userId={Number(row.original.uid)}
+                              type='expireTime'
+                            />
+                          ),
+                        },
+                      ]}
+                      request={async () => ({
+                        list: onlineUsersData,
+                        total: onlineUsersData.length,
+                      })}
+                    />
+                  </div>
                 </div>
               )}
-            </>
+            </div>
-          </div>
+          </SheetContent>
-        </TooltipContent>
+        )}
-      </Tooltip>
+      </Sheet>
-    </TooltipProvider>
+    </>
   );
 }

apps/admin/app/dashboard/server/node-table.tsx

@@ -73,7 +73,7 @@ export default function NodeTable() {
       columns={[
         {
           accessorKey: 'id',
-          header: 'ID',
+          header: t('id'),
           cell: ({ row }) => (
             <TooltipProvider>
               <Tooltip>
@@ -87,6 +87,7 @@ export default function NodeTable() {
                       'bg-yellow-500': row.original.protocol === 'trojan',
                       'bg-purple-500': row.original.protocol === 'hysteria2',
                       'bg-cyan-500': row.original.protocol === 'tuic',
+                      'bg-gray-500': row.original.protocol === 'anytls',
                     })}
                   >
                     {row.getValue('id')}
@@ -116,13 +117,6 @@ export default function NodeTable() {
             );
           },
         },
-        {
-          accessorKey: 'status',
-          header: t('status'),
-          cell: ({ row }) => {
-            return <NodeStatusCell status={row.original?.status} />;
-          },
-        },
         {
           accessorKey: 'name',
           header: t('name'),
@@ -130,12 +124,29 @@ export default function NodeTable() {
         {
           accessorKey: 'server_addr',
           header: t('serverAddr'),
+          cell: ({ row }) => {
+            return (
+              <div className='flex gap-1'>
+                <Badge variant='outline'>
+                  {row.original.country} - {row.original.city}
+                </Badge>
+                <Badge variant='outline'>{row.getValue('server_addr')}</Badge>
+              </div>
+            );
+          },
+        },
+        {
+          accessorKey: 'status',
+          header: t('status'),
+          cell: ({ row }) => {
+            return <NodeStatusCell status={row.original?.status} node={row.original} />;
+          },
         },
         {
           accessorKey: 'speed_limit',
           header: t('speedLimit'),
           cell: ({ row }) => (
-            <Display type='traffic' value={row.getValue('speed_limit')} unlimited />
+            <Display type='trafficSpeed' value={row.getValue('speed_limit')} unlimited />
           ),
         },
         {
@@ -145,18 +156,33 @@ export default function NodeTable() {
         },
 
         {
-          accessorKey: 'groupId',
+          accessorKey: 'group_id',
           header: t('nodeGroup'),
           cell: ({ row }) => {
-            const name = groups?.find((group) => group.id === row.getValue('groupId'))?.name;
+            const name = groups?.find((group) => group.id === row.getValue('group_id'))?.name;
-            return name ? <Badge variant='outline'>{name}</Badge> : '--';
+            return name ? <Badge variant='outline'>{name}</Badge> : t('noData');
+          },
+        },
+        {
+          accessorKey: 'tags',
+          header: t('tags'),
+          cell: ({ row }) => {
+            const tags = (row.getValue('tags') as string[]) || [];
+            return tags.length > 0 ? (
+              <div className='flex gap-1'>
+                {tags.map((tag) => (
+                  <Badge key={tag} variant='outline'>
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              t('noData')
+            );
           },
         },
       ]}
       params={[
-        {
-          key: 'search',
-        },
         {
           key: 'group_id',
           placeholder: t('nodeGroup'),
@@ -165,6 +191,9 @@ export default function NodeTable() {
             value: String(item.id),
           })),
         },
+        {
+          key: 'search',
+        },
       ]}
       request={async (pagination, filter) => {
         const { data } = await getNodeList({
@@ -200,9 +229,24 @@ export default function NodeTable() {
               }
             }}
           />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteNode({
+                id: row.id,
+              });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
           <Button
             key='copy'
-            variant='secondary'
+            variant='outline'
             onClick={async () => {
               setLoading(true);
               try {
@@ -223,38 +267,23 @@ export default function NodeTable() {
           >
             {t('copy')}
           </Button>,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('delete')}</Button>}
-            title={t('confirmDelete')}
-            description={t('deleteWarning')}
-            onConfirm={async () => {
-              await deleteNode({
-                id: row.id,
-              });
-              toast.success(t('deleteSuccess'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('cancel')}
-            confirmText={t('confirm')}
-          />,
         ],
         batchRender(rows) {
           return [
             <ConfirmButton
               key='delete'
               trigger={<Button variant='destructive'>{t('delete')}</Button>}
-              title={t('group.confirmDelete')}
+              title={t('confirmDelete')}
-              description={t('group.deleteWarning')}
+              description={t('deleteWarning')}
               onConfirm={async () => {
                 await batchDeleteNode({
                   ids: rows.map((item) => item.id),
                 });
-                toast.success(t('group.deleteSuccess'));
+                toast.success(t('deleteSuccess'));
                 ref.current?.refresh();
               }}
-              cancelText={t('group.cancel')}
+              cancelText={t('cancel')}
-              confirmText={t('group.confirm')}
+              confirmText={t('confirm')}
             />,
           ];
         },
@@ -263,20 +292,20 @@ export default function NodeTable() {
         const sourceIndex = items.findIndex((item) => String(item.id) === source);
         const targetIndex = items.findIndex((item) => String(item.id) === target);
 
-        const originalSortMap = new Map(items.map((item) => [item.id, item.sort || item.id]));
+        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 = originalSortMap.get(item.id);
+          const originalSort = originalSorts[index];
           const newSort = originalSort !== undefined ? originalSort : item.sort;
           return { ...item, sort: newSort };
         });
 
-        const changedItems = updatedItems.filter(
+        const changedItems = updatedItems.filter((item, index) => {
-          (item) => originalSortMap.get(item.id) !== item.sort,
+          return item.sort !== items[index]?.sort;
-        );
+        });
 
         if (changedItems.length > 0) {
           nodeSort({

apps/admin/app/dashboard/server/page.tsx

@@ -2,6 +2,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/componen
 import { getTranslations } from 'next-intl/server';
 
 import GroupTable from './group-table';
+import NodeConfig from './node-config';
 import NodeTable from './node-table';
 
 export default async function Page() {
@@ -12,6 +13,7 @@ export default async function Page() {
       <TabsList>
         <TabsTrigger value='node'>{t('tabs.node')}</TabsTrigger>
         <TabsTrigger value='group'>{t('tabs.nodeGroup')}</TabsTrigger>
+        <TabsTrigger value='config'>{t('tabs.nodeConfig')}</TabsTrigger>
       </TabsList>
       <TabsContent value='node'>
         <NodeTable />
@@ -19,6 +21,9 @@ export default async function Page() {
       <TabsContent value='group'>
         <GroupTable />
       </TabsContent>
+      <TabsContent value='config'>
+        <NodeConfig />
+      </TabsContent>
     </Tabs>
   );
 }

apps/admin/app/dashboard/subscribe/config-form.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { getSubscribeConfig, updateSubscribeConfig } from '@/services/admin/system';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+
+const subscribeConfigSchema = z.object({
+  single_model: z.boolean().optional(),
+  pan_domain: z.boolean().optional(),
+  subscribe_path: z.string().optional(),
+  subscribe_domain: z.string().optional(),
+  user_agent_limit: z.boolean().optional(),
+  user_agent_list: z.string().optional(),
+});
+
+type SubscribeConfigFormData = z.infer<typeof subscribeConfigSchema>;
+
+export default function ConfigForm() {
+  const t = useTranslations('subscribe');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getSubscribeConfig'],
+    queryFn: async () => {
+      const { data } = await getSubscribeConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<SubscribeConfigFormData>({
+    resolver: zodResolver(subscribeConfigSchema),
+    defaultValues: {
+      single_model: false,
+      pan_domain: false,
+      subscribe_path: '',
+      subscribe_domain: '',
+      user_agent_limit: false,
+      user_agent_list: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: SubscribeConfigFormData) {
+    setLoading(true);
+    try {
+      await updateSubscribeConfig(values as API.SubscribeConfig);
+      toast.success(t('config.updateSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('config.updateError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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: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-[600px] 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='subscribe-config-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='single_model'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.singleSubscriptionMode')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.singleSubscriptionModeDescription')}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='pan_domain'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.wildcardResolution')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.wildcardResolutionDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='subscribe_path'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.subscriptionPath')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('config.subscriptionPathPlaceholder')}
+                        value={field.value}
+                        onValueBlur={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.subscriptionPathDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='subscribe_domain'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.subscriptionDomain')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={`${t('config.subscriptionDomainPlaceholder')}\nexample.com\nwww.example.com`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.subscriptionDomainDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='user_agent_limit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.userAgentLimit', { userAgent: 'User-Agent' })}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.userAgentLimitDescription', { userAgent: 'User-Agent' })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='user_agent_list'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('config.userAgentList', {
+                        userAgent: 'User-Agent',
+                      })}
+                    </FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={`${t('config.userAgentListPlaceholder', { userAgent: 'User-Agent' })}\nClashX\nClashForAndroid\nClash-verge`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.userAgentListDescription', { userAgent: 'User-Agent' })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='subscribe-config-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('actions.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/subscribe/page.tsx

@@ -1,25 +1,23 @@
-import { getTranslations } from 'next-intl/server';
+'use client';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Card, CardContent } from '@workspace/ui/components/card';
+import { useTranslations } from 'next-intl';
+import ConfigForm from './config-form';
+import { ProtocolForm } from './protocol-form';
 
-import GroupTable from './group-table';
+export default function SubscribePage() {
-import SubscribeTable from './subscribe-table';
+  const t = useTranslations('subscribe');
-
-export default async function Page() {
-  const t = await getTranslations('subscribe');
 
   return (
-    <Tabs defaultValue='subscribe'>
+    <div className='space-y-4'>
-      <TabsList>
+      <h2 className='text-lg font-semibold'>{t('config.title')}</h2>
-        <TabsTrigger value='subscribe'>{t('tabs.subscribe')}</TabsTrigger>
+      <Card>
-        <TabsTrigger value='group'>{t('tabs.subscribeGroup')}</TabsTrigger>
+        <CardContent className='p-4'>
-      </TabsList>
+          <ConfigForm />
-      <TabsContent value='subscribe'>
+        </CardContent>
-        <SubscribeTable />
+      </Card>
-      </TabsContent>
+
-      <TabsContent value='group'>
+      <ProtocolForm />
-        <GroupTable />
+    </div>
-      </TabsContent>
-    </Tabs>
   );
 }

apps/admin/app/dashboard/subscribe/protocol-form.tsx

@@ -0,0 +1,841 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createSubscribeApplication,
+  deleteSubscribeApplication,
+  getSubscribeApplicationList,
+  updateSubscribeApplication,
+} from '@/services/admin/application';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+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,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@workspace/ui/components/tooltip';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { GoTemplateEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { TemplatePreview } from './template-preview';
+
+const createClientFormSchema = (t: any) =>
+  z.object({
+    name: z.string().min(1, t('form.validation.nameRequired')),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+    user_agent: z.string().min(1, `User-Agent ${t('form.validation.userAgentRequiredSuffix')}`),
+    scheme: z.string().default(''),
+    template: z.string().default(''),
+    output_format: z.string().default(''),
+    download_link: z.object({
+      windows: z.string().optional(),
+      mac: z.string().optional(),
+      linux: z.string().optional(),
+      ios: z.string().optional(),
+      android: z.string().optional(),
+      harmony: z.string().optional(),
+    }),
+  });
+
+type ClientFormData = z.infer<ReturnType<typeof createClientFormSchema>>;
+
+export function ProtocolForm() {
+  const t = useTranslations('subscribe');
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewApplicationId, setPreviewApplicationId] = useState<number | null>(null);
+  const [editingClient, setEditingClient] = useState<API.SubscribeApplication | null>(null);
+  const tableRef = useRef<ProTableActions>(null);
+
+  const clientFormSchema = createClientFormSchema(t);
+
+  const form = useForm<ClientFormData>({
+    resolver: zodResolver(clientFormSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      icon: '',
+      user_agent: '',
+      scheme: '',
+      template: '',
+      output_format: '',
+      download_link: {
+        windows: '',
+        mac: '',
+        linux: '',
+        ios: '',
+        android: '',
+        harmony: '',
+      },
+    },
+  });
+
+  // API请求函数
+  const request = async (
+    pagination: { page: number; size: number },
+    filter: Record<string, unknown>,
+  ) => {
+    const { data } = await getSubscribeApplicationList({
+      page: pagination.page,
+      size: pagination.size,
+    });
+
+    return {
+      list: data.data?.list || [],
+      total: data.data?.total || 0,
+    };
+  };
+
+  // 表格列定义
+  const columns: ColumnDef<API.SubscribeApplication, any>[] = [
+    {
+      accessorKey: 'is_default',
+      header: t('table.columns.default'),
+      cell: ({ row }) => (
+        <Switch
+          checked={row.original.is_default || false}
+          onCheckedChange={async (checked) => {
+            await updateSubscribeApplication({
+              ...row.original,
+              proxy_template: '',
+              is_default: checked,
+            });
+            tableRef.current?.refresh();
+          }}
+        />
+      ),
+    },
+    {
+      accessorKey: 'name',
+      header: t('table.columns.name'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          {row.original.icon && (
+            <div className='relative h-6 w-6 flex-shrink-0'>
+              <Image
+                src={row.original.icon}
+                alt={row.original.name}
+                width={24}
+                height={24}
+                className='rounded object-contain'
+                onError={() => {
+                  console.log(`Failed to load image for ${row.original.name}`);
+                }}
+              />
+            </div>
+          )}
+          <span className='font-medium'>{row.original.name}</span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'user_agent',
+      header: 'User-Agent',
+      cell: ({ row }) => (
+        <div className='text-muted-foreground max-w-[150px] truncate font-mono text-sm'>
+          {row.original.user_agent}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'output_format',
+      header: t('table.columns.outputFormat'),
+      cell: ({ row }) => (
+        <Badge variant='secondary' className='text-xs'>
+          {t(`outputFormats.${row.original.output_format}`) || row.original.output_format}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: 'download_link',
+      header: t('table.columns.supportedPlatforms'),
+      cell: ({ row }) => {
+        return (
+          <div className='flex flex-wrap gap-1'>
+            {Object.entries(row.original.download_link || {}).map(([key, value]) => {
+              if (value) {
+                return (
+                  <Badge key={key} variant='secondary' className='text-xs'>
+                    {t(`platforms.${key}`)}
+                  </Badge>
+                );
+              }
+              return null;
+            })}
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'description',
+      header: t('table.columns.description'),
+      cell: ({ row }) => (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <div className='text-muted-foreground max-w-[200px] truncate text-sm'>
+                {row.original.description}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent className='max-w-xs'>
+              <p>{row.original.description}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ),
+    },
+  ];
+
+  const handleAdd = () => {
+    setEditingClient(null);
+    form.reset({
+      name: '',
+      description: '',
+      icon: '',
+      user_agent: '',
+      scheme: '',
+      template: '',
+      output_format: '',
+      download_link: {
+        windows: '',
+        mac: '',
+        linux: '',
+        ios: '',
+        android: '',
+        harmony: '',
+      },
+    });
+    setOpen(true);
+  };
+
+  const handleEdit = (client: API.SubscribeApplication) => {
+    setEditingClient(client);
+    form.reset(client);
+    setOpen(true);
+  };
+
+  const handleDelete = async (client: API.SubscribeApplication) => {
+    setLoading(true);
+    try {
+      await deleteSubscribeApplication({ id: client.id });
+      tableRef.current?.refresh();
+      toast.success(t('actions.deleteSuccess'));
+    } catch (error) {
+      console.error('Failed to delete client:', error);
+      toast.error(t('actions.deleteFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBatchDelete = async (clients: API.SubscribeApplication[]) => {
+    setLoading(true);
+    try {
+      await Promise.all(clients.map((client) => deleteSubscribeApplication({ id: client.id })));
+      tableRef.current?.refresh();
+      toast.success(t('actions.batchDeleteSuccess', { count: clients.length }));
+    } catch (error) {
+      console.error('Failed to batch delete clients:', error);
+      toast.error(t('actions.deleteFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSubmit = async (data: ClientFormData) => {
+    setLoading(true);
+    try {
+      if (editingClient) {
+        await updateSubscribeApplication({
+          ...data,
+          proxy_template: '',
+          is_default: editingClient.is_default,
+          id: editingClient.id,
+        });
+        toast.success(t('actions.updateSuccess'));
+      } else {
+        await createSubscribeApplication({
+          ...data,
+          is_default: false,
+        });
+        toast.success(t('actions.createSuccess'));
+      }
+
+      setOpen(false);
+      tableRef.current?.refresh();
+    } catch (error) {
+      console.error('Failed to save client:', error);
+      toast.error(t('actions.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ProTable<API.SubscribeApplication, Record<string, unknown>>
+        action={tableRef}
+        columns={columns}
+        request={request}
+        header={{
+          title: <h2 className='text-lg font-semibold'>{t('protocol.title')}</h2>,
+          toolbar: <Button onClick={handleAdd}>{t('actions.add')}</Button>,
+        }}
+        actions={{
+          render: (row) => [
+            <TemplatePreview
+              key='preview'
+              applicationId={row.id}
+              output_format={row.output_format}
+            />,
+            <Button
+              key='edit'
+              onClick={() => handleEdit(row as unknown as API.SubscribeApplication)}
+            >
+              {t('actions.edit')}
+            </Button>,
+            <ConfirmButton
+              key='delete'
+              trigger={
+                <Button variant='destructive' disabled={loading}>
+                  {t('actions.delete')}
+                </Button>
+              }
+              title={t('actions.confirmDelete')}
+              description={t('actions.deleteWarning')}
+              onConfirm={() => handleDelete(row as unknown as API.SubscribeApplication)}
+              cancelText={t('actions.cancel')}
+              confirmText={t('actions.confirm')}
+            />,
+          ],
+          batchRender: (rows) => [
+            <ConfirmButton
+              key='batchDelete'
+              trigger={<Button variant='destructive'>{t('actions.batchDelete')}</Button>}
+              title={t('actions.confirmDelete')}
+              description={t('actions.batchDeleteWarning', { count: rows.length })}
+              onConfirm={() => handleBatchDelete(rows as unknown as API.SubscribeApplication[])}
+              cancelText={t('actions.cancel')}
+              confirmText={t('actions.confirm')}
+            />,
+          ],
+        }}
+      />
+
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className='w-[580px] max-w-full md:max-w-screen-md'>
+          <SheetHeader>
+            <SheetTitle>{editingClient ? t('form.editTitle') : t('form.addTitle')}</SheetTitle>
+          </SheetHeader>
+          <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
+            <Form {...form}>
+              <form className='space-y-6 py-4'>
+                <Tabs defaultValue='basic' className='w-full'>
+                  <TabsList className='grid w-full grid-cols-3'>
+                    <TabsTrigger value='basic'>{t('form.tabs.basic')}</TabsTrigger>
+                    <TabsTrigger value='template'>{t('form.tabs.template')}</TabsTrigger>
+                    <TabsTrigger value='download'>{t('form.tabs.download')}</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value='basic' className='space-y-4'>
+                    <FormField
+                      control={form.control}
+                      name='icon'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.icon')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='text'
+                              placeholder='https://example.com/icon.png'
+                              suffix={
+                                <UploadImage
+                                  className='bg-muted h-9 rounded-none border-none px-2'
+                                  onChange={(value) => {
+                                    form.setValue(field.name, value as string);
+                                  }}
+                                />
+                              }
+                              value={field.value}
+                              onValueChange={(value) => {
+                                form.setValue(field.name, value as string);
+                              }}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.icon')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='name'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.name')}</FormLabel>
+                          <FormControl>
+                            <Input placeholder='Clash for Windows' {...field} />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.name')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='user_agent'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>User-Agent</FormLabel>
+                          <FormControl>
+                            <Input placeholder='Clash' {...field} />
+                          </FormControl>
+                          <FormDescription>
+                            {t('form.descriptions.userAgentPrefix')}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='description'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.description')}</FormLabel>
+                          <FormControl>
+                            <Textarea placeholder={t('form.descriptions.description')} {...field} />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.description')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value='template' className='space-y-4'>
+                    <FormField
+                      control={form.control}
+                      name='output_format'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.outputFormat')}</FormLabel>
+                          <FormControl>
+                            <Select value={field.value} onValueChange={field.onChange}>
+                              <SelectTrigger>
+                                <SelectValue placeholder='Select ...' />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value='base64'>{t('outputFormats.base64')}</SelectItem>
+                                <SelectItem value='yaml'>{t('outputFormats.yaml')}</SelectItem>
+                                <SelectItem value='json'>{t('outputFormats.json')}</SelectItem>
+                                <SelectItem value='conf'>{t('outputFormats.conf')}</SelectItem>
+                                <SelectItem value='plain'>{t('outputFormats.plain')}</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.outputFormat')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='scheme'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='flex items-center gap-2'>
+                            {t('form.fields.scheme')}
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                  }}
+                                >
+                                  <Icon
+                                    icon='mdi:help-circle-outline'
+                                    className='text-muted-foreground h-4 w-4'
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent
+                                  side='right'
+                                  className='bg-secondary text-secondary-foreground max-w-md'
+                                >
+                                  <div className='space-y-2 text-sm'>
+                                    <div className='font-medium'>
+                                      {t('form.descriptions.scheme.title')}
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.scheme.variables')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>{'${url}'}</code> -{' '}
+                                          {t('form.descriptions.scheme.urlVariable')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>{'${name}'}</code> -{' '}
+                                          {t('form.descriptions.scheme.nameVariable')}
+                                        </li>
+                                      </ul>
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.scheme.functions')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${encodeURIComponent(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.urlEncoding')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${window.btoa(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.base64Encoding')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${JSON.stringify(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.jsonStringify')}
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder='clash://install-config?url=${url}&name=${name}'
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='template'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='flex items-center gap-2'>
+                            {t('form.fields.template')}
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                  }}
+                                >
+                                  <Icon
+                                    icon='mdi:help-circle-outline'
+                                    className='text-muted-foreground h-4 w-4'
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent
+                                  side='right'
+                                  className='bg-secondary text-secondary-foreground max-w-md'
+                                >
+                                  <div className='space-y-2 text-sm'>
+                                    <div className='font-medium'>
+                                      {t('form.descriptions.template.title')}
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.template.variables')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>.SiteName</code> -{' '}
+                                          {t('form.descriptions.template.siteName')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.SubscribeName</code> -{' '}
+                                          {t('form.descriptions.template.subscribeName')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.Proxies</code> -{' '}
+                                          {t('form.descriptions.template.nodes')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.UserInfo</code> -{' '}
+                                          {t('form.descriptions.template.userInfo')}
+                                        </li>
+                                      </ul>
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.template.functions')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'{{range .Proxies}}...{{end}}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.template.range')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'{{if .condition}}...{{end}}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.template.if')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>{'{{sprig_func}}'}</code> -{' '}
+                                          {t('form.descriptions.template.sprig')}
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <GoTemplateEditor
+                              showLineNumbers
+                              schema={{
+                                SiteName: { type: 'string', description: 'Site name' },
+                                SubscribeName: { type: 'string', description: 'Subscribe name' },
+                                Proxies: {
+                                  type: 'array',
+                                  description: 'Array of proxy nodes',
+                                  items: {
+                                    type: 'object',
+                                    properties: {
+                                      Name: { type: 'string', description: 'Node name' },
+                                      Server: { type: 'string', description: 'Server host' },
+                                      Port: { type: 'number', description: 'Server port' },
+                                      Type: { type: 'string', description: 'Proxy type' },
+                                      Tags: {
+                                        type: 'array',
+                                        description: 'Node tags',
+                                        items: { type: 'string' },
+                                      },
+                                      // Security Options
+                                      Security: {
+                                        type: 'string',
+                                        description: 'Security protocol',
+                                      },
+                                      SNI: {
+                                        type: 'string',
+                                        description: 'Server Name Indication for TLS',
+                                      },
+                                      AllowInsecure: {
+                                        type: 'boolean',
+                                        description:
+                                          'Allow insecure connections (skip certificate verification)',
+                                      },
+                                      Fingerprint: {
+                                        type: 'string',
+                                        description: 'Client fingerprint for TLS connections',
+                                      },
+                                      RealityServerAddr: {
+                                        type: 'string',
+                                        description: 'Reality server address',
+                                      },
+                                      RealityServerPort: {
+                                        type: 'number',
+                                        description: 'Reality server port',
+                                      },
+                                      RealityPrivateKey: {
+                                        type: 'string',
+                                        description: 'Reality private key for authentication',
+                                      },
+                                      RealityPublicKey: {
+                                        type: 'string',
+                                        description: 'Reality public key for authentication',
+                                      },
+                                      RealityShortId: {
+                                        type: 'string',
+                                        description: 'Reality short ID for authentication',
+                                      },
+                                      // Transport Options
+                                      Transport: {
+                                        type: 'string',
+                                        description: 'Transport protocol (e.g., ws, http, grpc)',
+                                      },
+                                      Host: {
+                                        type: 'string',
+                                        description: 'For WebSocket/HTTP/HTTPS',
+                                      },
+                                      Path: { type: 'string', description: 'For HTTP/HTTPS' },
+                                      ServiceName: {
+                                        type: 'string',
+                                        description: 'For gRPC',
+                                      },
+                                      // Shadowsocks Options
+                                      Method: { type: 'string', description: 'Encryption method' },
+                                      ServerKey: {
+                                        type: 'string',
+                                        description: 'For Shadowsocks 2022',
+                                      },
+                                      // Vmess/Vless/Trojan Options
+                                      Flow: {
+                                        type: 'string',
+                                        description: 'Flow for Vmess/Vless/Trojan',
+                                      },
+                                      // Hysteria2 Options
+                                      HopPorts: {
+                                        type: 'string',
+                                        description: 'Comma-separated list of hop ports',
+                                      },
+                                      HopInterval: {
+                                        type: 'number',
+                                        description: 'Interval for hop ports in seconds',
+                                      },
+                                      ObfsPassword: {
+                                        type: 'string',
+                                        description: 'Obfuscation password for Hysteria2',
+                                      },
+                                      // Tuic Options
+                                      DisableSNI: {
+                                        type: 'boolean',
+                                        description: 'Disable SNI',
+                                      },
+                                      ReduceRtt: {
+                                        type: 'boolean',
+                                        description: 'Reduce RTT',
+                                      },
+                                      UDPRelayMode: {
+                                        type: 'string',
+                                        description: 'UDP relay mode (e.g., "full", "partial")',
+                                      },
+                                      CongestionController: {
+                                        type: 'string',
+                                        description: 'Congestion controller (e.g., "cubic", "bbr")',
+                                      },
+                                    },
+                                  },
+                                },
+                                UserInfo: {
+                                  type: 'object',
+                                  description: 'User information',
+                                  properties: {
+                                    Password: { type: 'string', description: 'User password' },
+                                    ExpiredAt: { type: 'string', description: 'Expiration date' },
+                                    Download: { type: 'number', description: 'Downloaded bytes' },
+                                    Upload: { type: 'number', description: 'Uploaded bytes' },
+                                    Traffic: { type: 'number', description: 'Total traffic bytes' },
+                                    SubscribeURL: {
+                                      type: 'string',
+                                      description: 'Subscription URL',
+                                    },
+                                  },
+                                },
+                              }}
+                              enableSprig
+                              value={field.value || ''}
+                              onChange={(value) => field.onChange(value)}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value='download' className='space-y-4'>
+                    <div className='space-y-4'>
+                      <div className='grid gap-3'>
+                        {['windows', 'mac', 'linux', 'ios', 'android', 'harmony'].map((key) => (
+                          <FormField
+                            key={key}
+                            control={form.control}
+                            name={
+                              `download_link.${key}` as `download_link.${keyof ClientFormData['download_link']}`
+                            }
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>{t(`platforms.${key}`)}</FormLabel>
+                                <FormControl>
+                                  <Input {...field} />
+                                </FormControl>
+                                <FormDescription>
+                                  {t(`platforms.${key}`)} {t('form.descriptions.downloadLink')}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </form>
+            </Form>
+          </ScrollArea>
+          <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+            <Button variant='outline' onClick={() => setOpen(false)}>
+              {t('actions.cancel')}
+            </Button>
+            <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
+              {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+              {editingClient ? t('actions.update') : t('actions.add')}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

apps/admin/app/dashboard/subscribe/subscribe-form.tsx

@@ -1,648 +0,0 @@
-import { getNodeGroupList, getNodeList } from '@/services/admin/server';
-import { getSubscribeGroupList } from '@/services/admin/subscribe';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
-import { useQuery } from '@tanstack/react-query';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@workspace/ui/components/accordion';
-import { Button } from '@workspace/ui/components/button';
-import { Checkbox } from '@workspace/ui/components/checkbox';
-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 { Combobox } from '@workspace/ui/custom-components/combobox';
-import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
-import { JSONEditor } from '@workspace/ui/custom-components/editor';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { evaluateWithPrecision, unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { assign, shake } from 'radash';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-interface SubscribeFormProps<T> {
-  onSubmit: (data: T) => Promise<boolean> | boolean;
-  initialValues?: T;
-  loading?: boolean;
-  trigger: string;
-  title: string;
-}
-
-const defaultValues = {
-  inventory: -1,
-  speed_limit: 0,
-  device_limit: 0,
-  traffic: 0,
-  quota: 0,
-  discount: [],
-  server_group: [],
-  server: [],
-  unit_time: 'Month',
-};
-
-export default function SubscribeForm<T extends Record<string, any>>({
-  onSubmit,
-  initialValues,
-  loading,
-  trigger,
-  title,
-}: SubscribeFormProps<T>) {
-  const t = useTranslations('subscribe');
-
-  const [open, setOpen] = useState(false);
-
-  const formSchema = z.object({
-    name: z.string(),
-    description: z.string().optional(),
-    unit_price: z.number(),
-    unit_time: z.string().default('Month'),
-    replacement: z.number().optional(),
-    discount: z
-      .array(
-        z.object({
-          quantity: z.number(),
-          discount: z.number(),
-        }),
-      )
-      .optional(),
-    inventory: z.number().optional(),
-    speed_limit: z.number().optional(),
-    device_limit: z.number().optional(),
-    traffic: z.number().optional(),
-    quota: z.number().optional(),
-    group_id: z.number().optional().nullish(),
-    server_group: z.array(z.number()).optional(),
-    server: z.array(z.number()).optional(),
-  });
-
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-    defaultValues: assign(
-      defaultValues,
-      shake(initialValues, (value) => value === null) as Record<string, any>,
-    ),
-  });
-  useEffect(() => {
-    form?.reset(
-      assign(defaultValues, shake(initialValues, (value) => value === null) as Record<string, any>),
-    );
-  }, [form, initialValues]);
-
-  async function handleSubmit(data: { [x: string]: any }) {
-    const bool = await onSubmit(data as T);
-
-    if (bool) setOpen(false);
-  }
-  const { data: group } = useQuery({
-    queryKey: ['getSubscribeGroupList'],
-    queryFn: async () => {
-      const { data } = await getSubscribeGroupList();
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
-
-  const { data: server } = useQuery({
-    queryKey: ['getNodeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getNodeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list;
-    },
-  });
-
-  const { data: server_groups } = useQuery({
-    queryKey: ['getNodeGroupList'],
-    queryFn: async () => {
-      const { data } = await getNodeGroupList();
-      return (data.data?.list || []) as API.ServerGroup[];
-    },
-  });
-
-  const unit_time = form.watch('unit_time');
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button
-          onClick={() => {
-            form.reset();
-            setOpen(true);
-          }}
-        >
-          {trigger}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className='w-screen max-w-full md:max-w-full'>
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(handleSubmit)}
-              className='grid gap-4 px-6 pt-4 lg:grid-cols-3'
-            >
-              <div className='flex flex-col gap-4'>
-                <FormField
-                  control={form.control}
-                  name='name'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.name')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='description'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <JSONEditor
-                          title={t('form.description')}
-                          value={field.value && JSON.parse(field.value)}
-                          onChange={(value) => {
-                            form.setValue(field.name, JSON.stringify(value));
-                          }}
-                          placeholder={{
-                            description: 'description',
-                            features: [
-                              {
-                                type: 'default',
-                                icon: '',
-                                label: 'label',
-                              },
-                            ],
-                          }}
-                          schema={{
-                            type: 'object',
-                            properties: {
-                              description: {
-                                type: 'string',
-                                description: 'A brief description of the item.',
-                              },
-                              features: {
-                                type: 'array',
-                                items: {
-                                  type: 'object',
-                                  properties: {
-                                    icon: {
-                                      type: 'string',
-                                      description:
-                                        "Enter an Iconify icon identifier (e.g., 'mdi:account').",
-                                      pattern: '^[a-z0-9]+:[a-z0-9-]+$',
-                                      examples: [
-                                        'uil:shield-check',
-                                        'uil:shield-exclamation',
-                                        'uil:database',
-                                        'uil:server',
-                                        'Visit https://icon-sets.iconify.design to browse available icons.',
-                                      ],
-                                    },
-                                    label: {
-                                      type: 'string',
-                                      description: 'The label describing the feature.',
-                                    },
-                                    type: {
-                                      type: 'string',
-                                      enum: ['default', 'success', 'destructive'],
-                                      description:
-                                        'The type of feature, limited to specific values.',
-                                    },
-                                  },
-                                },
-                                description: 'A list of feature objects.',
-                              },
-                            },
-                            required: ['description', 'features'],
-                            additionalProperties: false,
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <div className='flex flex-col gap-4'>
-                <div className='grid grid-cols-3 gap-4'>
-                  <FormField
-                    control={form.control}
-                    name='unit_price'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.unitPrice')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            type='number'
-                            {...field}
-                            min={0}
-                            formatInput={(value) => unitConversion('centsToDollars', value)}
-                            formatOutput={(value) => unitConversion('dollarsToCents', value)}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='unit_time'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.unitTime')}</FormLabel>
-                        <FormControl>
-                          <Combobox
-                            placeholder={t('form.selectUnitTime')}
-                            {...field}
-                            onChange={(value) => {
-                              if (value) {
-                                form.setValue(field.name, value);
-                              }
-                            }}
-                            options={[
-                              { label: t('form.Year'), value: 'Year' },
-                              { label: t('form.Month'), value: 'Month' },
-                              { label: t('form.Day'), value: 'Day' },
-                              { label: t('form.Hour'), value: 'Hour' },
-                              { label: t('form.Minute'), value: 'Minute' },
-                            ]}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='replacement'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.replacement')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            type='number'
-                            {...field}
-                            min={0}
-                            formatInput={(value) => unitConversion('centsToDollars', value)}
-                            formatOutput={(value) => unitConversion('dollarsToCents', value)}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name='traffic'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.traffic')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            placeholder={t('form.noLimit')}
-                            type='number'
-                            {...field}
-                            formatInput={(value) => unitConversion('bytesToGb', value)}
-                            formatOutput={(value) => unitConversion('gbToBytes', value)}
-                            suffix='GB'
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='speed_limit'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.speedLimit')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            placeholder={t('form.noLimit')}
-                            type='number'
-                            {...field}
-                            formatInput={(value) => unitConversion('bitsToMb', value)}
-                            formatOutput={(value) => unitConversion('mbToBits', value)}
-                            suffix='MB'
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='device_limit'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.deviceLimit')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            placeholder={t('form.noLimit')}
-                            type='number'
-                            {...field}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='inventory'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.inventory')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            placeholder={`-1 ${t('form.noLimit')}`}
-                            type='number'
-                            {...field}
-                            min={-1}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='quota'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.quota')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            placeholder={t('form.noLimit')}
-                            type='number'
-                            {...field}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='group_id'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.subscribeGroup')}</FormLabel>
-                        <FormControl>
-                          <Combobox<number, false>
-                            placeholder={t('form.selectSubscribeGroup')}
-                            {...field}
-                            onChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                            options={group?.map((item) => ({
-                              label: item.name,
-                              value: item.id,
-                            }))}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <div className='col-span-3'>
-                    <FormField
-                      control={form.control}
-                      name='discount'
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('form.discount')}</FormLabel>
-                          <FormControl>
-                            <ArrayInput<API.SubscribeDiscount>
-                              fields={[
-                                {
-                                  name: 'quantity',
-                                  type: 'number',
-                                  min: 1,
-                                  suffix: unit_time && t(`form.${unit_time}`),
-                                },
-                                {
-                                  name: 'discount',
-                                  type: 'number',
-                                  min: 1,
-                                  max: 100,
-                                  placeholder: t('form.discountPercent'),
-                                  suffix: '%',
-                                  calculateValue: function (data) {
-                                    const { unit_price } = form.getValues();
-                                    return {
-                                      ...data,
-                                      price: evaluateWithPrecision(
-                                        `${unit_price} * ${data.quantity} * ${data.discount} / 100`,
-                                      ),
-                                    };
-                                  },
-                                },
-                                {
-                                  name: 'price',
-                                  placeholder: t('form.discount_price'),
-                                  type: 'number',
-                                  min: 0,
-                                  formatInput: (value) => unitConversion('centsToDollars', value),
-                                  formatOutput: (value) => unitConversion('dollarsToCents', value),
-                                  internal: true,
-                                  calculateValue: function (data) {
-                                    const { unit_price } = form.getValues();
-                                    return {
-                                      ...data,
-                                      discount: evaluateWithPrecision(
-                                        `${data.price} / ${data.quantity} / ${unit_price} * 100`,
-                                      ),
-                                    };
-                                  },
-                                },
-                              ]}
-                              value={field.value}
-                              onChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </FormControl>
-                          <FormDescription>{t('form.discountDescription')}</FormDescription>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className='flex flex-col gap-4'>
-                <FormField
-                  control={form.control}
-                  name='server_group'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.serverGroup')}</FormLabel>
-                      <FormControl>
-                        <Accordion type='single' collapsible className='w-full'>
-                          {server_groups?.map((group: API.ServerGroup) => {
-                            const value = field.value || [];
-
-                            return (
-                              <AccordionItem key={group.id} value={String(group.id)}>
-                                <AccordionTrigger>
-                                  <div className='flex items-center gap-2'>
-                                    <Checkbox
-                                      checked={value.includes(group.id!)}
-                                      onCheckedChange={(checked) => {
-                                        return checked
-                                          ? form.setValue(field.name, [...value, group.id])
-                                          : form.setValue(
-                                              field.name,
-                                              value.filter((value: number) => value !== group.id),
-                                            );
-                                      }}
-                                    />
-                                    <Label>{group.name}</Label>
-                                  </div>
-                                </AccordionTrigger>
-                                <AccordionContent>
-                                  <ul className='list-disc [&>li]:mt-2'>
-                                    {server
-                                      ?.filter((server: API.Server) => server.group_id === group.id)
-                                      ?.map((node: API.Server) => {
-                                        return (
-                                          <li
-                                            key={node.id}
-                                            className='flex items-center justify-between *:flex-1'
-                                          >
-                                            <span>{node.name}</span>
-                                            <span>{node.server_addr}</span>
-                                            <span className='text-right'>{node.protocol}</span>
-                                          </li>
-                                        );
-                                      })}
-                                  </ul>
-                                </AccordionContent>
-                              </AccordionItem>
-                            );
-                          })}
-                        </Accordion>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='server'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.server')}</FormLabel>
-                      <FormControl>
-                        <div className='flex flex-col gap-2'>
-                          {server
-                            ?.filter((item: API.Server) => !item.group_id)
-                            ?.map((item: API.Server) => {
-                              const value = field.value || [];
-
-                              return (
-                                <div className='flex items-center gap-2' key={item.id}>
-                                  <Checkbox
-                                    checked={value.includes(item.id!)}
-                                    onCheckedChange={(checked) => {
-                                      return checked
-                                        ? form.setValue(field.name, [...value, item.id])
-                                        : form.setValue(
-                                            field.name,
-                                            value.filter((value: number) => value !== item.id),
-                                          );
-                                    }}
-                                  />
-                                  <Label className='flex w-full items-center justify-between *:flex-1'>
-                                    <span>{item.name}</span>
-                                    <span>{item.server_addr}</span>
-                                    <span className='text-right'>{item.protocol}</span>
-                                  </Label>
-                                </div>
-                              );
-                            })}
-                        </div>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button
-            variant='outline'
-            disabled={loading}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t('form.cancel')}
-          </Button>
-          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('form.confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/admin/app/dashboard/subscribe/template-preview.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { previewSubscribeTemplate } from '@/services/admin/application';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { Markdown } from '@workspace/ui/custom-components/markdown';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface TemplatePreviewProps {
+  applicationId: number;
+  output_format?: string;
+}
+
+export function TemplatePreview({ applicationId, output_format }: TemplatePreviewProps) {
+  const t = useTranslations('subscribe.templatePreview');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['previewSubscribeTemplate', applicationId],
+    queryFn: () => previewSubscribeTemplate({ id: applicationId }, { skipErrorHandler: true }),
+    enabled: isOpen && !!applicationId,
+    retry: false,
+  });
+
+  const originalContent = data?.data?.data?.template || '';
+  const errorMessage = (error as any)?.data?.msg || error?.message || t('failed');
+  const displayContent = originalContent || (error ? errorMessage : '');
+
+  const getDecodedContent = () => {
+    if (output_format === 'base64' && originalContent) {
+      try {
+        return atob(originalContent);
+      } catch {
+        return t('base64.decodeError');
+      }
+    }
+    return '';
+  };
+
+  const getDisplayContent = () => {
+    switch (output_format) {
+      case 'base64':
+        return `\`\`\`base64\n# ${t('base64.originalContent')}\n${displayContent}\n\n# ${t('base64.decodedContent')}\n${getDecodedContent()}\n\`\`\``;
+      case 'yaml':
+        return `\`\`\`yaml\n${displayContent}\n\`\`\``;
+      case 'json':
+        return `\`\`\`json\n${displayContent}\n\`\`\``;
+      case 'conf':
+        return `\`\`\`ini\n${displayContent}\n\`\`\``;
+      case 'plain':
+        return `\`\`\`text\n${displayContent}\n\`\`\``;
+      default:
+        return displayContent;
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setIsOpen(newOpen);
+  };
+
+  return (
+    <>
+      <Button variant='ghost' size='sm' onClick={() => setIsOpen(true)}>
+        <Icon icon='mdi:eye' className='mr-2 h-4 w-4' />
+        {t('preview')}
+      </Button>
+      <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+        <SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'>
+          <SheetHeader>
+            <SheetTitle>{t('title')}</SheetTitle>
+          </SheetHeader>
+          {isLoading ? (
+            <div className='flex items-center justify-center'>
+              <Icon icon='mdi:loading' className='h-6 w-6 animate-spin' />
+              <span className='ml-2'>{t('loading')}</span>
+            </div>
+          ) : (
+            <div className='*:text-sm [&_pre>div>div+div]:max-h-[calc(100dvh-48px-36px-36px)] [&_pre>div>div+div]:overflow-auto'>
+              <Markdown>{getDisplayContent()}</Markdown>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

apps/admin/app/dashboard/system/basic-settings/currency-form.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { getCurrencyConfig, updateCurrencyConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+// Constants
+const EXCHANGE_RATE_HOST_URL = 'https://exchangerate.host';
+
+const currencySchema = z.object({
+  access_key: z.string().optional(),
+  currency_unit: z.string().min(1),
+  currency_symbol: z.string().min(1),
+});
+
+type CurrencyFormData = z.infer<typeof currencySchema>;
+
+export default function CurrencyConfig() {
+  const t = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getCurrencyConfig'],
+    queryFn: async () => {
+      const { data } = await getCurrencyConfig();
+      return data.data;
+    },
+    enabled: open, // Only request data when the modal is open
+  });
+
+  const form = useForm<CurrencyFormData>({
+    resolver: zodResolver(currencySchema),
+    defaultValues: {
+      access_key: '',
+      currency_unit: 'USD',
+      currency_symbol: '$',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: CurrencyFormData) {
+    setLoading(true);
+    try {
+      await updateCurrencyConfig(values as API.CurrencyConfig);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:currency-usd' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('currency.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('currency.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('currency.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='currency-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='access_key'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('currency.accessKey')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('currency.accessKeyPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('currency.accessKeyDescription', { url: EXCHANGE_RATE_HOST_URL })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='currency_unit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('currency.currencyUnit')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('currency.currencyUnitPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('currency.currencyUnitDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='currency_symbol'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('currency.currencySymbol')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('currency.currencySymbolPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('currency.currencySymbolDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='currency-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/basic-settings/privacy-policy-form.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { getPrivacyPolicyConfig, updatePrivacyPolicyConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const privacyPolicySchema = z.object({
+  privacy_policy: z.string().optional(),
+});
+
+type PrivacyPolicyFormData = z.infer<typeof privacyPolicySchema>;
+
+export default function PrivacyPolicyConfig() {
+  const t = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getPrivacyPolicyConfig'],
+    queryFn: async () => {
+      const { data } = await getPrivacyPolicyConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<PrivacyPolicyFormData>({
+    resolver: zodResolver(privacyPolicySchema),
+    defaultValues: {
+      privacy_policy: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        privacy_policy: data.privacy_policy || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: PrivacyPolicyFormData) {
+    setLoading(true);
+    try {
+      await updatePrivacyPolicyConfig(values as API.PrivacyPolicyConfig);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:shield-account-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('privacyPolicy.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('privacyPolicy.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('privacyPolicy.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='privacy-policy-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='privacy_policy'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('privacyPolicy.title')}</FormLabel>
+                    <FormControl>
+                      <MarkdownEditor value={field.value || ''} onChange={field.onChange} />
+                    </FormControl>
+                    <FormDescription>{t('privacyPolicy.description')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='privacy-policy-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/basic-settings/site-form.tsx

@@ -0,0 +1,304 @@
+'use client';
+
+import { getSiteConfig, updateSiteConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Textarea } from '@workspace/ui/components/textarea';
+import { JSONEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const siteSchema = z.object({
+  site_logo: z.string().optional(),
+  site_name: z.string().min(1),
+  site_desc: z.string().optional(),
+  keywords: z.string().optional(),
+  custom_html: z.string().optional(),
+  host: z.string().optional(),
+  custom_data: z.any().optional(),
+});
+
+type SiteFormData = z.infer<typeof siteSchema>;
+
+export default function SiteConfig() {
+  const t = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getSiteConfig'],
+    queryFn: async () => {
+      const { data } = await getSiteConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<SiteFormData>({
+    resolver: zodResolver(siteSchema),
+    defaultValues: {
+      site_logo: '',
+      site_name: '',
+      site_desc: '',
+      keywords: '',
+      custom_html: '',
+      host: '',
+      custom_data: {},
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: SiteFormData) {
+    setLoading(true);
+    try {
+      await updateSiteConfig(values as API.SiteConfig);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:web' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('site.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('site.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('site.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form id='site-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-2 pt-4'>
+              <FormField
+                control={form.control}
+                name='site_logo'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.logo')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('site.logoPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        suffix={
+                          <UploadImage
+                            className='bg-muted h-9 rounded-none border-none px-2'
+                            onChange={(value) => {
+                              field.onChange(value);
+                            }}
+                          />
+                        }
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.logoDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='site_name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.siteName')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('site.siteNamePlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.siteNameDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='site_desc'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.siteDesc')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('site.siteDescPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.siteDescDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='keywords'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.keywords')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('site.keywordsPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.keywordsDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='custom_html'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.customHtml')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={t('site.customHtmlDescription')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.customHtmlDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='host'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.siteDomain')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={`${t('site.siteDomainPlaceholder')}\nexample.com\nwww.example.com`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.siteDomainDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='custom_data'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('site.customData')}</FormLabel>
+                    <FormControl>
+                      <JSONEditor
+                        schema={{
+                          type: 'object',
+                          additionalProperties: true,
+                          properties: {
+                            website: { type: 'string', title: 'Website' },
+                            contacts: {
+                              type: 'object',
+                              title: 'Contacts',
+                              additionalProperties: true,
+                              properties: {
+                                email: { type: 'string', title: 'Email' },
+                                telephone: { type: 'string', title: 'Telephone' },
+                                address: { type: 'string', title: 'Address' },
+                              },
+                            },
+                            community: {
+                              type: 'object',
+                              title: 'Community',
+                              additionalProperties: true,
+                              properties: {
+                                telegram: { type: 'string', title: 'Telegram' },
+                                twitter: { type: 'string', title: 'Twitter' },
+                                discord: { type: 'string', title: 'Discord' },
+                                instagram: { type: 'string', title: 'Instagram' },
+                                linkedin: { type: 'string', title: 'Linkedin' },
+                                facebook: { type: 'string', title: 'Facebook' },
+                                github: { type: 'string', title: 'Github' },
+                              },
+                            },
+                          },
+                        }}
+                        value={field.value}
+                        onBlur={(value) => field.onChange(value)}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('site.customDataDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='site-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/basic-settings/tos-form.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { getTosConfig, updateTosConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const tosSchema = z.object({
+  tos_content: z.string().optional(),
+});
+
+type TosFormData = z.infer<typeof tosSchema>;
+
+export default function TosConfig() {
+  const t = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getTosConfig'],
+    queryFn: async () => {
+      const { data } = await getTosConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<TosFormData>({
+    resolver: zodResolver(tosSchema),
+    defaultValues: {
+      tos_content: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        tos_content: data.tos_content || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: TosFormData) {
+    setLoading(true);
+    try {
+      await updateTosConfig(values as API.TosConfig);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:file-document-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('tos.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('tos.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('tos.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form id='tos-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-2 pt-4'>
+              <FormField
+                control={form.control}
+                name='tos_content'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('tos.title')}</FormLabel>
+                    <FormControl>
+                      <MarkdownEditor value={field.value || ''} onChange={field.onChange} />
+                    </FormControl>
+                    <FormDescription>{t('tos.description')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='tos-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/currency.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import { getCurrencyConfig, updateCurrencyConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Site() {
-  const t = useTranslations('system.currency');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getCurrencyConfig'],
-    queryFn: async () => {
-      const { data } = await getCurrencyConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateCurrencyConfig({
-        ...data,
-        [key]: value,
-      } as API.CurrencyConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('accessKey')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('accessKeyDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              value={data?.access_key}
-              onValueBlur={(value) => updateConfig('access_key', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('currencyUnit')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('currencyUnitDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='USD'
-              value={data?.currency_unit}
-              onValueBlur={(value) => updateConfig('currency_unit', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('currencySymbol')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('currencySymbolDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='$'
-              value={data?.currency_symbol}
-              onValueBlur={(value) => updateConfig('currency_symbol', value)}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/email.tsx

@@ -1,150 +0,0 @@
-'use client';
-
-import { getEmailSmtpConfig, testEmailSmtp, updateEmailSmtpConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { HTMLEditor } from '@workspace/ui/custom-components/editor';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-export default function Email() {
-  const t = useTranslations('system.email');
-
-  const { data, refetch, isFetching } = useQuery({
-    queryKey: ['getEmailSmtpConfig'],
-    queryFn: async () => {
-      const { data } = await getEmailSmtpConfig();
-      return data.data;
-    },
-  });
-
-  const [email, setEmail] = useState<string>();
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateEmailSmtpConfig({
-        ...data,
-        [key]: value,
-      } as API.EmailSmtpConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <>
-      <Table>
-        <TableBody>
-          {[
-            {
-              key: 'email_smtp_host',
-              label: t('smtpServerAddress'),
-              description: t('smtpServerAddressDescription'),
-            },
-            {
-              key: 'email_smtp_port',
-              label: t('smtpServerPort'),
-              description: t('smtpServerPortDescription'),
-              type: 'number',
-            },
-            {
-              key: 'email_smtp_ssl',
-              label: t('smtpEncryptionMethod'),
-              description: t('smtpEncryptionMethodDescription'),
-              component: 'switch',
-            },
-            {
-              key: 'email_smtp_user',
-              label: t('smtpAccount'),
-              description: t('smtpAccountDescription'),
-            },
-            {
-              key: 'email_smtp_pass',
-              label: t('smtpPassword'),
-              description: t('smtpPasswordDescription'),
-              type: 'password',
-            },
-            {
-              key: 'email_smtp_from',
-              label: t('senderAddress'),
-              description: t('senderAddressDescription'),
-            },
-          ].map(({ key, label, description, type = 'text', component = 'input' }) => (
-            <TableRow key={key}>
-              <TableCell>
-                <Label>{label}</Label>
-                <p className='text-muted-foreground text-xs'>{description}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                {component === 'input' ? (
-                  <EnhancedInput
-                    placeholder={t('inputPlaceholder')}
-                    value={data?.[key]}
-                    type={type}
-                    onValueBlur={(value) => updateConfig(key, value)}
-                  />
-                ) : (
-                  <Switch
-                    checked={data?.[key]}
-                    onCheckedChange={(checked) => updateConfig(key, checked)}
-                  />
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-          <TableRow>
-            <TableCell>
-              <Label>{t('sendTestEmail')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('sendTestEmailDescription')}</p>
-            </TableCell>
-            <TableCell className='flex items-center gap-2 text-right'>
-              <EnhancedInput
-                placeholder={t('inputPlaceholder')}
-                value={email}
-                onValueChange={(value) => setEmail(value as string)}
-              />
-              <Button
-                disabled={!email}
-                onClick={async () => {
-                  if (isFetching || !email) return;
-                  try {
-                    await testEmailSmtp({ email });
-                    toast.success(t('sendSuccess'));
-                  } catch {
-                    toast.error(t('sendFailure'));
-                  }
-                }}
-              >
-                {t('sendTestEmail')}
-              </Button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <div className='grid grid-cols-1 gap-4 py-4 md:grid-cols-3'>
-        {['verify_email_template', 'expiration_email_template', 'maintenance_email_template'].map(
-          (templateKey) => (
-            <HTMLEditor
-              key={templateKey}
-              title={t(`${templateKey}`)}
-              description={t(`${templateKey}Description`, { after: '{{', before: '}}' })}
-              placeholder={t('inputPlaceholder')}
-              value={data?.[templateKey]}
-              onBlur={(value) => {
-                updateConfig(templateKey, value);
-              }}
-            />
-          ),
-        )}
-      </div>
-    </>
-  );
-}

apps/admin/app/dashboard/system/invite.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { getInviteConfig, updateInviteConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Invite() {
-  const t = useTranslations('system.invite');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getInviteConfig'],
-    queryFn: async () => {
-      const { data } = await getInviteConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateInviteConfig({
-        ...data,
-        [key]: value,
-      } as API.InviteConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enableForcedInvite')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableForcedInviteDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.forced_invite}
-              onCheckedChange={(checked) => {
-                updateConfig('forced_invite', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('inviteCommissionPercentage')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('inviteCommissionPercentageDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.referral_percentage}
-              type='number'
-              min={0}
-              max={100}
-              suffix='%'
-              onValueBlur={(value) => updateConfig('referral_percentage', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('commissionFirstTimeOnly')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('commissionFirstTimeOnlyDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.only_first_purchase}
-              onCheckedChange={(checked) => {
-                updateConfig('only_first_purchase', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/node.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import { getNodeConfig, updateNodeConfig } from '@/services/admin/system';
-import { Icon } from '@iconify/react';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { nanoid } from 'nanoid';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Node() {
-  const t = useTranslations('system.node');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getNodeConfig'],
-    queryFn: async () => {
-      const { data } = await getNodeConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateNodeConfig({
-        ...data,
-        [key]: value,
-      } as API.NodeConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('communicationKey')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('communicationKeyDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.node_secret}
-              onValueBlur={(value) => updateConfig('node_secret', value)}
-              suffix={
-                <Icon
-                  icon='uil:arrow-random'
-                  onClick={() => {
-                    updateConfig('node_secret', nanoid());
-                  }}
-                />
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('nodePullInterval')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('nodePullIntervalDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              type='number'
-              min={0}
-              onValueBlur={(value) => updateConfig('node_pull_interval', value)}
-              suffix='S'
-              value={data?.node_pull_interval}
-              placeholder={t('inputPlaceholder')}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('nodePushInterval')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('nodePushIntervalDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              type='number'
-              min={0}
-              value={data?.node_push_interval}
-              onValueBlur={(value) => updateConfig('node_push_interval', value)}
-              placeholder={t('inputPlaceholder')}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/page.tsx

@@ -1,64 +1,62 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+'use client';
-import { getTranslations } from 'next-intl/server';
 
-import Currency from './currency';
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import Email from './email';
+import { useTranslations } from 'next-intl';
-import Invite from './invite';
+import CurrencyForm from './basic-settings/currency-form';
-import Node from './node';
+import PrivacyPolicyForm from './basic-settings/privacy-policy-form';
-import Register from './register';
+import SiteForm from './basic-settings/site-form';
-import Site from './site';
+import TosForm from './basic-settings/tos-form';
-import Subscription from './subscription';
+import InviteForm from './user-security/invite-form';
-import Telegram from './telegram';
+import RegisterForm from './user-security/register-form';
-import Tos from './tos';
+import VerifyCodeForm from './user-security/verify-code-form';
-import Verify from './verify';
+import VerifyForm from './user-security/verify-form';
 
-export default async function Page() {
+export default function Page() {
-  const t = await getTranslations('system');
+  const t = useTranslations('system');
+
+  // 定义表单配置
+  const formSections = [
+    {
+      title: t('basicSettings'),
+      forms: [
+        { component: SiteForm },
+        { component: CurrencyForm },
+        { component: TosForm },
+        { component: PrivacyPolicyForm },
+      ],
+    },
+    {
+      title: t('userSecuritySettings'),
+      forms: [
+        { component: RegisterForm },
+        { component: InviteForm },
+        { component: VerifyForm },
+        { component: VerifyCodeForm },
+      ],
+    },
+  ];
 
   return (
-    <Tabs defaultValue='site'>
+    <div className='space-y-8'>
-      <TabsList className='h-full flex-wrap'>
+      {formSections.map((section, sectionIndex) => (
-        <TabsTrigger value='site'>{t('tabs.site')}</TabsTrigger>
+        <div key={sectionIndex}>
-        <TabsTrigger value='currency'>{t('tabs.currency')}</TabsTrigger>
+          <h2 className='mb-4 text-lg font-semibold'>{section.title}</h2>
-        <TabsTrigger value='subscription'>{t('tabs.subscription')}</TabsTrigger>
+          <Table>
-        <TabsTrigger value='register'>{t('tabs.register')}</TabsTrigger>
+            <TableBody>
-        <TabsTrigger value='verify'>{t('tabs.verify')}</TabsTrigger>
+              {section.forms.map((form, formIndex) => {
-        <TabsTrigger value='email'>{t('tabs.email')}</TabsTrigger>
+                const FormComponent = form.component;
-        <TabsTrigger value='node'>{t('tabs.node')}</TabsTrigger>
+                return (
-        <TabsTrigger value='invite'>{t('tabs.invite')}</TabsTrigger>
+                  <TableRow key={formIndex}>
-        <TabsTrigger value='telegram'>{t('tabs.telegram')}</TabsTrigger>
+                    <TableCell>
-        <TabsTrigger value='tos'>{t('tabs.tos')}</TabsTrigger>
+                      <FormComponent />
-      </TabsList>
+                    </TableCell>
-      <TabsContent value='site'>
+                  </TableRow>
-        <Site />
+                );
-      </TabsContent>
+              })}
-      <TabsContent value='currency'>
+            </TableBody>
-        <Currency />
+          </Table>
-      </TabsContent>
+        </div>
-      <TabsContent value='subscription'>
+      ))}
-        <Subscription />
+    </div>
-      </TabsContent>
-      <TabsContent value='register'>
-        <Register />
-      </TabsContent>
-      <TabsContent value='verify'>
-        <Verify />
-      </TabsContent>
-      <TabsContent value='email'>
-        <Email />
-      </TabsContent>
-      <TabsContent value='node'>
-        <Node />
-      </TabsContent>
-      <TabsContent value='invite'>
-        <Invite />
-      </TabsContent>
-      <TabsContent value='telegram'>
-        <Telegram />
-      </TabsContent>
-      <TabsContent value='tos'>
-        <Tos />
-      </TabsContent>
-    </Tabs>
   );
 }

apps/admin/app/dashboard/system/register.tsx

@@ -1,163 +0,0 @@
-'use client';
-
-import { getRegisterConfig, updateRegisterConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Register() {
-  const t = useTranslations('system.register');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getRegisterConfig'],
-    queryFn: async () => {
-      const { data } = await getRegisterConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateRegisterConfig({
-        ...data,
-        [key]: value,
-      } as API.RegisterConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stopNewUserRegistration')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('stopNewUserRegistrationDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.stop_register}
-              onCheckedChange={(checked) => {
-                updateConfig('stop_register', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('emailVerification')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('emailVerificationDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_email_verify}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_email_verify', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('emailSuffixWhitelist')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('emailSuffixWhitelistDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_email_domain_suffix}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_email_domain_suffix', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('whitelistSuffixes')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('whitelistSuffixesDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              className='h-52'
-              placeholder={t('whitelistSuffixesPlaceholder')}
-              defaultValue={data?.email_domain_suffix_list}
-              onBlur={(e) => {
-                updateConfig('email_domain_suffix_list', e.target.value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('ipRegistrationLimit')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('ipRegistrationLimitDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_ip_register_limit}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_ip_register_limit', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('registrationLimitCount')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('registrationLimitCountDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              type='number'
-              min={0}
-              value={data?.ip_register_limit}
-              onValueBlur={(value) => updateConfig('ip_register_limit', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('penaltyTime')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('penaltyTimeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              type='number'
-              min={0}
-              value={data?.ip_register_limit_duration}
-              onValueBlur={(value) => updateConfig('ip_register_limit_duration', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('trialRegistration')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('trialRegistrationDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_trial}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_trial', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/site.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import { getSiteConfig, updateSiteConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Site() {
-  const t = useTranslations('system.site');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getSiteConfig'],
-    queryFn: async () => {
-      const { data } = await getSiteConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateSiteConfig({
-        ...data,
-        [key]: value,
-      } as API.SiteConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('logo')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('logoDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('logoPlaceholder')}
-              value={data?.site_logo}
-              onValueBlur={(value) => updateConfig('site_logo', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('siteName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('siteNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('siteNamePlaceholder')}
-              value={data?.site_name}
-              onValueBlur={(value) => updateConfig('site_name', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('siteDesc')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('siteDescDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('siteDescPlaceholder')}
-              value={data?.site_desc}
-              onValueBlur={(value) => updateConfig('site_desc', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('siteDomain')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('siteDomainDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              className='h-52'
-              placeholder={t('siteDomainPlaceholder')}
-              defaultValue={data?.host}
-              onBlur={(e) => {
-                updateConfig('host', e.target.value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/subscription.tsx

@@ -1,340 +0,0 @@
-'use client';
-
-import { useQuery } from '@tanstack/react-query';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
-
-import {
-  createApplication,
-  deleteApplication,
-  getApplication,
-  getSubscribeConfig,
-  getSubscribeType,
-  updateApplication,
-  updateSubscribeConfig,
-} from '@/services/admin/system';
-import { Button } from '@workspace/ui/components/button';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-
-function compareData(
-  originalData: API.ApplicationResponse,
-  modifiedData: API.ApplicationResponse,
-): {
-  added: API.Application[];
-  deleted: API.Application[];
-  updated: API.Application[];
-} {
-  const added: API.Application[] = [];
-  const deleted: API.Application[] = [];
-  const updated: API.Application[] = [];
-
-  const findById = (array: API.Application[], id: number): API.Application | undefined => {
-    return array.find((item) => item.id === id);
-  };
-
-  const isUpdated = (original: API.Application, modified: API.Application): boolean => {
-    return (
-      original.name !== modified.name ||
-      original.platform !== modified.platform ||
-      original.subscribe_type !== modified.subscribe_type ||
-      original.url !== modified.url ||
-      original.icon !== modified.icon
-    );
-  };
-
-  Object.values(originalData).forEach((platformData) => {
-    platformData.forEach((originalApp) => {
-      const modifiedApp = findById(
-        modifiedData[originalApp.platform as API.CreateApplicationRequest['platform']],
-        originalApp.id,
-      );
-
-      if (!modifiedApp) {
-        deleted.push(originalApp);
-      } else if (isUpdated(originalApp, modifiedApp)) {
-        updated.push(modifiedApp);
-      }
-    });
-  });
-
-  Object.values(modifiedData).forEach((platformData) => {
-    platformData.forEach((modifiedApp) => {
-      if (
-        !findById(
-          originalData[modifiedApp.platform as API.CreateApplicationRequest['platform']],
-          modifiedApp.id,
-        )
-      ) {
-        added.push(modifiedApp);
-      }
-    });
-  });
-
-  return { added, deleted, updated };
-}
-
-export default function Subscription() {
-  const t = useTranslations('system.subscription');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getSubscribeConfig'],
-    queryFn: async () => {
-      const { data } = await getSubscribeConfig();
-
-      return data.data;
-    },
-  });
-
-  const { data: apps, refetch: appsRefetch } = useQuery({
-    queryKey: ['getApplication'],
-    queryFn: async () => {
-      const { data } = await getApplication();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateSubscribeConfig({
-        ...data,
-        [key]: value,
-      } as API.SubscribeConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  const { data: subscribe_types } = useQuery<string[]>({
-    queryKey: ['getSubscribeType'],
-    queryFn: async () => {
-      const { data } = await getSubscribeType();
-
-      return data.data?.subscribe_types || [];
-    },
-  });
-  const [app, setApp] = useState<API.ApplicationResponse>();
-  const appTypes = Object.keys(apps || {}) as (keyof API.ApplicationResponse)[];
-
-  useEffect(() => {
-    if (!app) setApp(apps);
-  }, [app, apps]);
-
-  return (
-    <>
-      <Table>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <Label>{t('singleSubscriptionMode')}</Label>
-              <p className='text-muted-foreground text-xs'>
-                {t('singleSubscriptionModeDescription')}
-              </p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <Switch
-                checked={data?.single_model}
-                onCheckedChange={(checked) => {
-                  updateConfig('single_model', checked);
-                }}
-              />
-            </TableCell>
-          </TableRow>
-
-          <TableRow>
-            <TableCell>
-              <Label>{t('wildcardResolution')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('wildcardResolutionDescription')}</p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <Switch
-                checked={data?.pan_domain}
-                onCheckedChange={(checked) => {
-                  updateConfig('pan_domain', checked);
-                }}
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Label>{t('subscriptionPath')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('subscriptionPathDescription')}</p>
-            </TableCell>
-            <TableCell className='flex items-center gap-2 text-right'>
-              <EnhancedInput
-                placeholder={t('subscriptionPathPlaceholder')}
-                value={data?.subscribe_path}
-                onValueBlur={(value) => updateConfig('subscribe_path', value)}
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className='align-top'>
-              <Label>{t('subscriptionDomain')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('subscriptionDomainDescription')}</p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <Textarea
-                className='h-52'
-                placeholder={t('subscriptionDomainPlaceholder')}
-                defaultValue={data?.subscribe_domain}
-                onBlur={(e) => {
-                  updateConfig('subscribe_domain', e.target.value);
-                }}
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Label>{t('app')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('appDescription')}</p>
-            </TableCell>
-            <TableCell className='flex justify-end gap-2'>
-              <Button
-                size='sm'
-                variant='outline'
-                onClick={() => {
-                  setApp(apps);
-                }}
-              >
-                {t('reset')}
-              </Button>
-              <Button
-                size='sm'
-                onClick={() => {
-                  const { added, deleted, updated } = compareData(apps!, app!);
-
-                  added.forEach(async (item) => {
-                    await createApplication(item as API.CreateApplicationRequest);
-                  });
-                  deleted.forEach(async (item) => {
-                    await deleteApplication({
-                      id: item.id,
-                    });
-                  });
-                  updated.forEach(async (item) => {
-                    await updateApplication(item);
-                  });
-                  toast.success(t('saveSuccess'));
-                  appsRefetch();
-                }}
-              >
-                {t('save')}
-              </Button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <Tabs defaultValue='windows'>
-        <TabsList className='h-full flex-wrap'>
-          {appTypes.map((type) => {
-            return (
-              <TabsTrigger value={type} key={type} className='uppercase'>
-                {type}
-              </TabsTrigger>
-            );
-          })}
-        </TabsList>
-        {appTypes.map((type) => {
-          const list = (app?.[type] || []) as API.Application[];
-          const updatedList = (key: string, value: string, index: number) => {
-            const newList = list.map((item, i) => (i === index ? { ...item, [key]: value } : item));
-
-            setApp({
-              ...app,
-              [type]: newList,
-            } as API.ApplicationResponse);
-          };
-
-          return (
-            <TabsContent value={type} key={type} className='mt-4 space-y-4'>
-              {list.map((item, index) => {
-                return (
-                  <div className='flex flex-col items-center gap-2 lg:flex-row' key={index}>
-                    <Select
-                      value={item.subscribe_type}
-                      onValueChange={(value) => {
-                        updatedList('subscribe_type', value, index);
-                      }}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder={t('subscriptionProtocol')} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {subscribe_types?.map((item) => (
-                          <SelectItem key={item} value={item}>
-                            {item}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <EnhancedInput
-                      placeholder={t('appName')}
-                      value={item.name}
-                      onValueChange={(value) => updatedList('name', value as string, index)}
-                    />
-                    <EnhancedInput
-                      placeholder={t('appIcon')}
-                      value={item.icon}
-                      onValueChange={(value) => updatedList('icon', value as string, index)}
-                    />
-                    <EnhancedInput
-                      placeholder={t('appDownloadURL')}
-                      value={item.url}
-                      onValueChange={(value) => updatedList('url', value as string, index)}
-                    />
-                    <Button
-                      variant='destructive'
-                      size='sm'
-                      onClick={() => {
-                        setApp({
-                          ...app,
-                          [type]: list.filter((l, i) => i !== index),
-                        } as API.ApplicationResponse);
-                      }}
-                    >
-                      {t('delete')}
-                    </Button>
-                  </div>
-                );
-              })}
-              <Button
-                className='w-full'
-                variant='outline'
-                onClick={() => {
-                  setApp({
-                    ...app,
-                    [type]: [
-                      ...list,
-                      {
-                        platform: type,
-                      },
-                    ],
-                  } as API.ApplicationResponse);
-                }}
-              >
-                {t('add')}
-              </Button>
-            </TabsContent>
-          );
-        })}
-      </Tabs>
-    </>
-  );
-}

apps/admin/app/dashboard/system/telegram.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import { getTelegramConfig, updateTelegramConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Telegram() {
-  const t = useTranslations('system.telegram');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getTelegramConfig'],
-    queryFn: async () => {
-      const { data } = await getTelegramConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateTelegramConfig({
-        ...data,
-        [key]: value,
-      } as API.TelegramConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('webhookDomain')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('webhookDomainDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholderWebhookDomain')}
-              value={data?.telegram_web_hook_domain}
-              onValueBlur={(value) => updateConfig('telegram_web_hook_domain', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('botToken')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('botTokenDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholderBotToken')}
-              value={data?.telegram_bot_token}
-              onValueBlur={(value) => updateConfig('telegram_bot_token', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enableBotNotifications')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('enableBotNotificationsDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.telegram_notify}
-              onCheckedChange={(checked) => {
-                updateConfig('telegram_notify', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('groupURL')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('groupURLDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholderGroupURL')}
-              value={data?.telegram_group_url}
-              onValueBlur={(value) => updateConfig('telegram_group_url', value)}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/system/tos.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import { getTosConfig, updateTosConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Tos() {
-  const t = useTranslations('system.tos');
-  const { data, refetch, isFetched } = useQuery({
-    queryKey: ['getTosConfig'],
-    queryFn: async () => {
-      const { data } = await getTosConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateTosConfig({
-        ...data,
-        [key]: value,
-      } as API.TosConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    isFetched && (
-      <div className='h-[calc(100dvh-132px-env(safe-area-inset-top))] overflow-hidden'>
-        <MarkdownEditor
-          title={t('title')}
-          value={data?.tos_content}
-          onBlur={(value) => {
-            if (data?.tos_content !== value) {
-              updateConfig('tos_content', value);
-            }
-          }}
-        />
-      </div>
-    )
-  );
-}

apps/admin/app/dashboard/system/user-security/invite-form.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { getInviteConfig, updateInviteConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const inviteSchema = z.object({
+  forced_invite: z.boolean().optional(),
+  referral_percentage: z.number().optional(),
+  only_first_purchase: z.boolean().optional(),
+});
+
+type InviteFormData = z.infer<typeof inviteSchema>;
+
+export default function InviteConfig() {
+  const t = useTranslations('system.invite');
+  const systemT = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getInviteConfig'],
+    queryFn: async () => {
+      const { data } = await getInviteConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<InviteFormData>({
+    resolver: zodResolver(inviteSchema),
+    defaultValues: {
+      forced_invite: false,
+      referral_percentage: 0,
+      only_first_purchase: false,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: InviteFormData) {
+    setLoading(true);
+    try {
+      await updateInviteConfig(values as API.InviteConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:account-multiple-plus-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='invite-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='forced_invite'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('forcedInvite')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('forcedInviteDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='referral_percentage'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('referralPercentage')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('inputPlaceholder')}
+                        value={field.value}
+                        type='number'
+                        min={0}
+                        max={100}
+                        suffix='%'
+                        onValueBlur={(value) => field.onChange(Number(value))}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('referralPercentageDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='only_first_purchase'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('onlyFirstPurchase')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('onlyFirstPurchaseDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {systemT('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='invite-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {systemT('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/user-security/register-form.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { getRegisterConfig, updateRegisterConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { Combobox } from '@workspace/ui/custom-components/combobox';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const registerSchema = z.object({
+  stop_register: z.boolean().optional(),
+  enable_trial: z.boolean().optional(),
+  trial_subscribe: z.number().optional(),
+  trial_time: z.number().optional(),
+  trial_time_unit: z.string().optional(),
+  enable_ip_register_limit: z.boolean().optional(),
+  ip_register_limit: z.number().optional(),
+  ip_register_limit_duration: z.number().optional(),
+});
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+export default function RegisterConfig() {
+  const t = useTranslations('system.register');
+  const systemT = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getRegisterConfig'],
+    queryFn: async () => {
+      const { data } = await getRegisterConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const { data: subscribe } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.Subscribe[];
+    },
+    enabled: open,
+  });
+
+  const form = useForm<RegisterFormData>({
+    resolver: zodResolver(registerSchema),
+    defaultValues: {
+      stop_register: false,
+      enable_trial: false,
+      trial_subscribe: undefined,
+      trial_time: 0,
+      trial_time_unit: 'day',
+      enable_ip_register_limit: false,
+      ip_register_limit: 1,
+      ip_register_limit_duration: 1,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: RegisterFormData) {
+    setLoading(true);
+    try {
+      await updateRegisterConfig(values as API.RegisterConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:account-plus-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='register-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='stop_register'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('stopNewUserRegistration')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('stopNewUserRegistrationDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_ip_register_limit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('ipRegistrationLimit')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('ipRegistrationLimitDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {form.watch('enable_ip_register_limit') && (
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <FormField
+                    control={form.control}
+                    name='ip_register_limit'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('registrationLimitCount')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('inputPlaceholder')}
+                            value={field.value}
+                            type='number'
+                            min={1}
+                            onValueBlur={(value) => field.onChange(Number(value))}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('registrationLimitCountDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='ip_register_limit_duration'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('registrationLimitExpire')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('inputPlaceholder')}
+                            value={field.value}
+                            type='number'
+                            min={1}
+                            suffix={t('minute')}
+                            onValueBlur={(value) => field.onChange(Number(value))}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('registrationLimitExpireDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              )}
+
+              <FormField
+                control={form.control}
+                name='enable_trial'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('enableTrial')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('enableTrialDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {form.watch('enable_trial') && (
+                <>
+                  <FormField
+                    control={form.control}
+                    name='trial_time'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('trialConfig')}</FormLabel>
+                        <FormControl>
+                          <div className='flex gap-2'>
+                            <EnhancedInput
+                              placeholder={t('inputPlaceholder')}
+                              value={field.value}
+                              type='number'
+                              min={0}
+                              onValueBlur={(value) => field.onChange(Number(value))}
+                              className='flex-1'
+                              prefix={
+                                <FormField
+                                  control={form.control}
+                                  name='trial_subscribe'
+                                  render={({ field }) => (
+                                    <Combobox
+                                      placeholder={t('selectPlaceholder')}
+                                      value={field.value}
+                                      onChange={(value: number) => {
+                                        if (value) {
+                                          field.onChange(value);
+                                        }
+                                      }}
+                                      options={
+                                        subscribe?.map((item) => ({
+                                          label: item.name,
+                                          value: item.id,
+                                        })) || []
+                                      }
+                                      className='bg-secondary w-32 rounded-r-none'
+                                    />
+                                  )}
+                                />
+                              }
+                              suffix={
+                                <FormField
+                                  control={form.control}
+                                  name='trial_time_unit'
+                                  render={({ field: unitField }) => (
+                                    <Combobox
+                                      placeholder={t('selectPlaceholder')}
+                                      value={unitField.value}
+                                      onChange={(value: string) => {
+                                        unitField.onChange(value);
+                                      }}
+                                      options={[
+                                        { label: t('none'), value: 'None' },
+                                        { label: t('year'), value: 'Year' },
+                                        { label: t('month'), value: 'Month' },
+                                        { label: t('day'), value: 'Day' },
+                                        { label: t('hour'), value: 'Hour' },
+                                        { label: t('minute'), value: 'Minute' },
+                                      ]}
+                                      className='bg-secondary w-32 rounded-l-none'
+                                    />
+                                  )}
+                                />
+                              }
+                            />
+                          </div>
+                        </FormControl>
+                        <FormDescription>{t('trialConfigDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </>
+              )}
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {systemT('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='register-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {systemT('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/user-security/verify-code-form.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { getVerifyCodeConfig, updateVerifyCodeConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const verifyCodeSchema = z.object({
+  verify_code_expire_time: z.number().optional(),
+  verify_code_interval: z.number().optional(),
+  verify_code_limit: z.number().optional(),
+});
+
+type VerifyCodeFormData = z.infer<typeof verifyCodeSchema>;
+
+export default function VerifyCodeConfig() {
+  const t = useTranslations('system.verifyCode');
+  const systemT = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getVerifyCodeConfig'],
+    queryFn: async () => {
+      const { data } = await getVerifyCodeConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<VerifyCodeFormData>({
+    resolver: zodResolver(verifyCodeSchema),
+    defaultValues: {
+      verify_code_expire_time: 300,
+      verify_code_interval: 60,
+      verify_code_limit: 10,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: VerifyCodeFormData) {
+    setLoading(true);
+    try {
+      await updateVerifyCodeConfig(values as API.VerifyCodeConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:message-text-clock-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='verify-code-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='verify_code_expire_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('expireTime')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('inputPlaceholder')}
+                        value={field.value}
+                        type='number'
+                        min={60}
+                        suffix={t('seconds')}
+                        onValueBlur={(value) => field.onChange(Number(value))}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('expireTimeDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='verify_code_interval'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('interval')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('inputPlaceholder')}
+                        value={field.value}
+                        type='number'
+                        min={30}
+                        suffix={t('seconds')}
+                        onValueBlur={(value) => field.onChange(Number(value))}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('intervalDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='verify_code_limit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('dailyLimit')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('inputPlaceholder')}
+                        value={field.value}
+                        type='number'
+                        min={1}
+                        suffix={t('times')}
+                        onValueBlur={(value) => field.onChange(Number(value))}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('dailyLimitDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {systemT('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='verify-code-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {systemT('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/user-security/verify-form.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { getVerifyConfig, updateVerifyConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const verifySchema = z.object({
+  turnstile_site_key: z.string().optional(),
+  turnstile_secret: z.string().optional(),
+  enable_register_verify: z.boolean().optional(),
+  enable_login_verify: z.boolean().optional(),
+  enable_password_verify: z.boolean().optional(),
+});
+
+type VerifyFormData = z.infer<typeof verifySchema>;
+
+export default function VerifyConfig() {
+  const t = useTranslations('system.verify');
+  const systemT = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getVerifyConfig'],
+    queryFn: async () => {
+      const { data } = await getVerifyConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<VerifyFormData>({
+    resolver: zodResolver(verifySchema),
+    defaultValues: {
+      turnstile_site_key: '',
+      turnstile_secret: '',
+      enable_register_verify: false,
+      enable_login_verify: false,
+      enable_password_verify: false,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: VerifyFormData) {
+    setLoading(true);
+    try {
+      await updateVerifyConfig(values as API.VerifyConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <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:shield-check-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='verify-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='turnstile_site_key'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('turnstileSiteKey')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('turnstileSiteKeyPlaceholder')}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('turnstileSiteKeyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='turnstile_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('turnstileSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('turnstileSecretPlaceholder')}
+                        value={field.value}
+                        type='password'
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('turnstileSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_register_verify'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('enableRegisterVerify')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('enableRegisterVerifyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_login_verify'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('enableLoginVerify')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('enableLoginVerifyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_password_verify'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('enablePasswordVerify')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('enablePasswordVerifyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {systemT('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='verify-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {systemT('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/verify.tsx

@@ -1,115 +0,0 @@
-'use client';
-
-import { getVerifyConfig, updateVerifyConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Verify() {
-  const t = useTranslations('system.verify');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getVerifyConfig'],
-    queryFn: async () => {
-      const { data } = await getVerifyConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateVerifyConfig({
-        ...data,
-        [key]: value,
-      } as API.VerifyConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('turnstileSiteKey')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('turnstileSiteKeyDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.turnstile_site_key}
-              onValueBlur={(value) => updateConfig('turnstile_site_key', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('turnstileSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('turnstileSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.turnstile_secret}
-              onValueBlur={(value) => updateConfig('turnstile_secret', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('registrationVerificationCode')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('registrationVerificationCodeDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_register_verify}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_register_verify', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('loginVerificationCode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('loginVerificationCodeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_login_verify}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_login_verify', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('resetPasswordVerificationCode')}</Label>
-            <p className='text-muted-foreground text-xs'>
-              {t('resetPasswordVerificationCodeDescription')}
-            </p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable_reset_password_verify}
-              onCheckedChange={(checked) => {
-                updateConfig('enable_reset_password_verify', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}

apps/admin/app/dashboard/ticket/page.tsx

@@ -7,7 +7,6 @@ import {
   getTicketList,
   updateTicketStatus,
 } from '@/services/admin/ticket';
-import { Icon } from '@iconify/react';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
@@ -22,6 +21,7 @@ import { Input } from '@workspace/ui/components/input';
 import { Label } from '@workspace/ui/components/label';
 import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { cn } from '@workspace/ui/lib/utils';
 import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
@@ -172,7 +172,7 @@ export default function Page() {
             <DrawerDescription>{ticket?.description}</DrawerDescription>
           </DrawerHeader>
           <ScrollArea className='h-full overflow-hidden' ref={scrollRef}>
-            <div className='flex h-screen flex-col gap-4 p-4'>
+            <div className='flex h-full flex-col gap-4 p-4'>
               {ticket?.follow?.map((item) => (
                 <div
                   key={item.id}

apps/admin/app/dashboard/tool/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { getSystemLog, restartSystem } from '@/services/admin/tool';
+import { getSystemLog, getVersion, restartSystem } from '@/services/admin/tool';
-import { Icon } from '@iconify/react';
 import { useQuery } from '@tanstack/react-query';
 import {
   Accordion,
@@ -11,7 +10,6 @@ import {
 } from '@workspace/ui/components/accordion';
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -30,8 +28,11 @@ import {
   CardTitle,
 } from '@workspace/ui/components/card';
 import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
+import packageJson from '../../../../../package.json';
 
 const getLogLevelColor = (level: string) => {
   const colorMap: { [key: string]: string } = {
@@ -59,6 +60,91 @@ export default function Page() {
   const [openRestart, setOpenRestart] = useState(false);
   const [isRestarting, setIsRestarting] = useState(false);
 
+  const { data: latestReleases } = useQuery({
+    queryKey: ['getLatestReleases'],
+    queryFn: async () => {
+      try {
+        const [webResponse, serverResponse] = await Promise.all([
+          fetch('https://api.github.com/repos/perfect-panel/ppanel-web/releases/latest'),
+          fetch('https://api.github.com/repos/perfect-panel/server/releases/latest'),
+        ]);
+
+        const webData = webResponse.ok ? await webResponse.json() : null;
+        const serverData = serverResponse.ok ? await serverResponse.json() : null;
+
+        return {
+          web: webData
+            ? {
+                version: webData.tag_name,
+                url: webData.html_url,
+                publishedAt: webData.published_at,
+              }
+            : null,
+          server: serverData
+            ? {
+                version: serverData.tag_name,
+                url: serverData.html_url,
+                publishedAt: serverData.published_at,
+              }
+            : null,
+        };
+      } catch (error) {
+        console.error('Failed to fetch latest releases:', error);
+        return { web: null, server: null };
+      }
+    },
+    staleTime: 60 * 60 * 1000,
+    retry: 1,
+    retryDelay: 10000,
+  });
+
+  // 检查是否有新版本
+  const hasNewVersion =
+    latestReleases?.web && packageJson.version !== latestReleases.web.version.replace(/^v/, '');
+
+  const { data: systemInfo } = useQuery({
+    queryKey: ['getVersion'],
+    queryFn: async () => {
+      const { data } = await getVersion();
+
+      const versionString = data.data?.version || '';
+      const releaseVersionRegex = /^[Vv]?\d+\.\d+\.\d+$/;
+      const timeMatch = versionString.match(/\(([^)]+)\)/);
+      const timeInBrackets = timeMatch ? timeMatch[1] : '';
+
+      const versionWithoutTime = versionString.replace(/\([^)]*\)/, '').trim();
+      const isDevelopment = !releaseVersionRegex.test(versionWithoutTime);
+
+      let baseVersion = versionWithoutTime;
+      let versionSuffix = '';
+      let lastUpdated = '';
+
+      if (isDevelopment && versionWithoutTime.includes('-')) {
+        const parts = versionWithoutTime.split('-');
+        baseVersion = parts[0] || versionWithoutTime;
+        versionSuffix = parts.slice(1).join('-');
+      }
+
+      lastUpdated = formatDate(new Date(timeInBrackets || Date.now())) || '';
+
+      const displayVersion =
+        baseVersion.startsWith('V') || baseVersion.startsWith('v')
+          ? baseVersion
+          : `V${baseVersion}`;
+
+      return {
+        isRelease: !isDevelopment,
+        version: displayVersion,
+        lastUpdated,
+      };
+    },
+  });
+
+  const hasServerNewVersion =
+    latestReleases?.server &&
+    systemInfo &&
+    systemInfo.version.replace(/^V/, '') !== latestReleases.server.version.replace(/^v/, '');
+
   return (
     <Card className='border-none'>
       <CardHeader className='flex flex-col items-start justify-between sm:flex-row sm:items-center'>
@@ -67,7 +153,7 @@ export default function Page() {
           <CardDescription>{t('viewLogsAndManage')}</CardDescription>
         </div>
         <div className='mt-4 flex flex-col space-y-2 sm:mt-0 sm:flex-row sm:space-x-2 sm:space-y-0'>
-          <AlertDialog>
+          {/* <AlertDialog>
             <AlertDialogTrigger asChild>
               <Button>{t('systemUpgrade')}</Button>
             </AlertDialogTrigger>
@@ -81,7 +167,7 @@ export default function Page() {
                 <AlertDialogAction>{t('confirmUpgrade')}</AlertDialogAction>
               </AlertDialogFooter>
             </AlertDialogContent>
-          </AlertDialog>
+          </AlertDialog> */}
           <AlertDialog open={openRestart} onOpenChange={setOpenRestart}>
             <AlertDialogTrigger asChild>
               <Button variant='destructive'>{t('systemReboot')}</Button>
@@ -112,13 +198,88 @@ export default function Page() {
         </div>
       </CardHeader>
       <CardContent>
-        <div className='space-y-6'>
+        <div className='space-y-4'>
-          <div className='flex items-center justify-between'>
+          {/* 版本信息紧凑显示 */}
-            <div className='text-lg font-semibold'>
+          <div className='flex flex-col space-y-2 sm:flex-row sm:space-x-3 sm:space-y-0'>
-              {t('currentVersion')} <span>V1.0.0</span>
+            {/* 用户端/管理端版本 */}
+            <div className='bg-muted/30 flex flex-1 items-center justify-between rounded-md p-2'>
+              <div className='flex items-center'>
+                <Icon icon='mdi:web' className='mr-2 h-4 w-4 text-green-600' />
+                <div className='flex items-center space-x-2'>
+                  <span className='text-xs font-medium'>{t('webVersion')}</span>
+                  <Badge variant='default' className='px-1.5 py-0.5 text-xs'>
+                    V{packageJson.version}
+                  </Badge>
+                  {hasNewVersion && (
+                    <Badge variant='destructive' className='animate-pulse px-1.5 py-0.5 text-xs'>
+                      {t('newVersionAvailable')}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+              {hasNewVersion && (
+                <Button
+                  variant='outline'
+                  size='sm'
+                  className='h-6 px-2 text-xs'
+                  onClick={() =>
+                    window.open(
+                      latestReleases?.web?.url ||
+                        'https://github.com/perfect-panel/ppanel-web/releases',
+                      '_blank',
+                    )
+                  }
+                >
+                  <Icon icon='mdi:open-in-new' className='mr-1 h-3 w-3' />
+                  {t('viewNewVersion')}
+                </Button>
+              )}
             </div>
-            <div className='text-muted-foreground text-sm'>
+
-              {t('lastUpdated')} <span>2024-12-16 12:00:00</span>
+            {/* 服务端版本 */}
+            <div className='bg-muted/30 flex flex-1 items-center justify-between rounded-md p-2'>
+              <div className='flex items-center'>
+                <Icon icon='mdi:server' className='mr-2 h-4 w-4 text-blue-600' />
+                <div className='flex items-center space-x-2'>
+                  <span className='text-xs font-medium'>{t('serverVersion')}</span>
+                  <Badge
+                    variant={!systemInfo?.isRelease ? 'destructive' : 'default'}
+                    className='px-1.5 py-0.5 text-xs'
+                  >
+                    {systemInfo?.version || 'V1.0.0'}
+                    {!systemInfo?.isRelease && (
+                      <span className='ml-1'>{t('developmentVersion')}</span>
+                    )}
+                  </Badge>
+                  {hasServerNewVersion && (
+                    <Badge variant='destructive' className='animate-pulse px-1.5 py-0.5 text-xs'>
+                      {t('newVersionAvailable')}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+              <div className='flex items-center space-x-2'>
+                {hasServerNewVersion && (
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    className='h-6 px-2 text-xs'
+                    onClick={() =>
+                      window.open(
+                        latestReleases?.server?.url ||
+                          'https://github.com/perfect-panel/server/releases',
+                        '_blank',
+                      )
+                    }
+                  >
+                    <Icon icon='mdi:open-in-new' className='mr-1 h-3 w-3' />
+                    {t('viewNewVersion')}
+                  </Button>
+                )}
+                <div className='text-muted-foreground hidden text-right text-xs sm:block'>
+                  <div className='font-mono'>{systemInfo?.lastUpdated || '--'}</div>
+                </div>
+              </div>
             </div>
           </div>
           <Card className='overflow-hidden'>
@@ -146,20 +307,20 @@ export default function Page() {
                       <AccordionItem key={index} value={`item-${index}`} className='px-4'>
                         <AccordionTrigger className='hover:no-underline'>
                           <div className='flex w-full flex-col items-start space-y-2 sm:flex-row sm:items-center sm:space-x-4 sm:space-y-0'>
-                            <Badge
+                            <span className='text-xs font-medium sm:text-sm'>{log.timestamp}</span>
-                              variant='outline'
-                              className={`${getLogLevelColor(log.level)} mb-2 sm:mb-0`}
-                            >
-                              {log.level}
-                            </Badge>
-                            <span className='text-xs font-medium sm:text-sm'>{log.time}</span>
-                            <span className='text-muted-foreground flex-1 truncate text-xs sm:text-sm'>
-                              {log.message}
-                            </span>
                           </div>
                         </AccordionTrigger>
                         <AccordionContent className='px-2'>
-                          <div className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'>
+                          {Object.entries(log).map(([key, value]) => (
+                            <div
+                              key={key}
+                              className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'
+                            >
+                              <span className='font-medium'>{key}:</span>
+                              <span className='break-all'>{value as string}</span>
+                            </div>
+                          ))}
+                          {/* <div className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'>
                             <div className='font-medium'>{t('ip')}:</div>
                             <div>{log.ip}</div>
                             <div className='font-medium'>{t('request')}:</div>
@@ -174,7 +335,7 @@ export default function Page() {
                             <div className='break-all'>{log.query || t('none')}</div>
                             <div className='font-medium'>{t('userAgent')}:</div>
                             <div className='break-all'>{log['user-agent']}</div>
-                          </div>
+                          </div> */}
                         </AccordionContent>
                       </AccordionItem>
                     ))}

apps/admin/app/dashboard/user/[id]/page.tsx

@@ -0,0 +1,33 @@
+import UserOrderList from '@/app/dashboard/order/page';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { getTranslations } from 'next-intl/server';
+import UserLoginHistory from './user-login-history';
+import { UserProfileForm } from './user-profile';
+import UserSubscription from './user-subscription';
+
+export default async function Page({ params }: { params: Promise<{ id: number }> }) {
+  const t = await getTranslations('user');
+  const { id } = await params;
+  return (
+    <Tabs defaultValue='profile'>
+      <TabsList>
+        <TabsTrigger value='profile'>{t('userProfile')}</TabsTrigger>
+        <TabsTrigger value='subscriptions'>{t('userSubscriptions')}</TabsTrigger>
+        <TabsTrigger value='orders'>{t('userOrders')}</TabsTrigger>
+        <TabsTrigger value='logs'>{t('userLogs')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value='profile'>
+        <UserProfileForm />
+      </TabsContent>
+      <TabsContent value='subscriptions'>
+        <UserSubscription userId={id} />
+      </TabsContent>
+      <TabsContent value='orders'>
+        <UserOrderList userId={id} />
+      </TabsContent>
+      <TabsContent value='logs'>
+        <UserLoginHistory />
+      </TabsContent>
+    </Tabs>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-login-history/index.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { getUserLoginLogs } from '@/services/admin/user';
+import { Badge } from '@workspace/ui/components/badge';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+
+export default function UserLoginHistory() {
+  const t = useTranslations('user');
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <ProTable<API.UserLoginLog, Record<string, unknown>>
+      columns={[
+        {
+          accessorKey: 'success',
+          header: t('loginStatus'),
+          cell: ({ row }) => (
+            <Badge variant={row.getValue('success') ? 'default' : 'destructive'}>
+              {row.getValue('success') ? t('success') : t('failed')}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: 'login_ip',
+          header: t('loginIp'),
+          cell: ({ row }) => <IpLink ip={row.getValue('login_ip')} />,
+        },
+        {
+          accessorKey: 'user_agent',
+          header: t('userAgent'),
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('loginTime'),
+          cell: ({ row }) => formatDate(row.getValue('created_at')),
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getUserLoginLogs({
+          user_id: Number(id),
+          ...pagination,
+          ...filter,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/user/[id]/user-profile/auth-methods-form.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import {
+  createUserAuthMethod,
+  deleteUserAuthMethod,
+  updateUserAuthMethod,
+} from '@/services/admin/user';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export function AuthMethodsForm({ user, refetch }: { user: API.User; refetch: () => void }) {
+  const t = useTranslations('user');
+
+  const [emailChanges, setEmailChanges] = useState<Record<string, string>>({});
+
+  const handleRemoveAuth = async (authType: string) => {
+    await deleteUserAuthMethod({
+      user_id: user.id,
+      auth_type: authType,
+    });
+    toast.success(t('deleteSuccess'));
+  };
+
+  const handleUpdateEmail = async (email: string) => {
+    await updateUserAuthMethod({
+      user_id: user.id,
+      auth_type: 'email',
+      auth_identifier: email,
+    });
+    toast.success(t('updateSuccess'));
+    refetch();
+  };
+
+  const handleCreateEmail = async (email: string) => {
+    await createUserAuthMethod({
+      user_id: user.id,
+      auth_type: 'email',
+      auth_identifier: email,
+    });
+    toast.success(t('createSuccess'));
+    refetch();
+  };
+
+  const handleEmailChange = (authType: string, value: string) => {
+    setEmailChanges((prev) => ({
+      ...prev,
+      [authType]: value,
+    }));
+  };
+
+  const emailMethod = user.auth_methods.find((method) => method.auth_type === 'email');
+  const otherMethods = user.auth_methods.filter((method) => method.auth_type !== 'email');
+
+  const defaultEmailMethod = {
+    auth_type: 'email',
+    auth_identifier: '',
+    verified: false,
+    ...emailMethod,
+  };
+
+  const isEmailExists = !!emailMethod;
+  const handleEmailAction = () => {
+    const email = emailChanges['email'];
+    if (isEmailExists) {
+      handleUpdateEmail(email as string);
+    } else {
+      handleCreateEmail(email as string);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('authMethodsTitle')}</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        <div className='space-y-6'>
+          <Card className='border-none shadow-none'>
+            <CardContent className='space-y-3 p-0'>
+              <div className='flex items-center justify-between'>
+                <div className='font-medium uppercase'>email</div>
+                <Badge variant={defaultEmailMethod.verified ? 'default' : 'destructive'}>
+                  {defaultEmailMethod.verified ? t('verified') : t('unverified')}
+                </Badge>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='flex-1'>
+                  <EnhancedInput
+                    value={defaultEmailMethod.auth_identifier}
+                    placeholder={t('pleaseEnterEmail')}
+                    onValueChange={(value) => handleEmailChange('email', value as string)}
+                  />
+                </div>
+                <Button
+                  onClick={handleEmailAction}
+                  disabled={
+                    !emailChanges['email'] ||
+                    (isEmailExists && emailChanges['email'] === defaultEmailMethod.auth_identifier)
+                  }
+                >
+                  {isEmailExists ? t('update') : t('add')}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {otherMethods.map((method) => (
+            <Card key={method.auth_type} className='border-none shadow-none'>
+              <CardContent className='space-y-3 p-0'>
+                <div className='flex items-center justify-between'>
+                  <div className='font-medium uppercase'>{method.auth_type}</div>
+                  <Badge variant={method.verified ? 'default' : 'destructive'}>
+                    {method.verified ? t('verified') : t('unverified')}
+                  </Badge>
+                </div>
+                <div className='flex items-center gap-4'>
+                  <div className='flex-1'>
+                    <div className='text-muted-foreground text-sm'>{method.auth_identifier}</div>
+                  </div>
+                  <Button
+                    variant='destructive'
+                    size='sm'
+                    onClick={() => handleRemoveAuth(method.auth_type)}
+                  >
+                    {t('remove')}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-profile/basic-info-form.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import useGlobalStore from '@/config/use-global';
+import { updateUserBasicInfo } from '@/services/admin/user';
+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 { Input } from '@workspace/ui/components/input';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { unitConversion } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+
+const basicInfoSchema = z.object({
+  avatar: z.string().optional(),
+  balance: z.number().optional(),
+  commission: z.number().optional(),
+  gift_amount: z.number().optional(),
+  refer_code: z.string().optional(),
+  referer_id: z.number().optional(),
+  is_admin: z.boolean().optional(),
+  password: z.string().optional(),
+  enable: z.boolean(),
+});
+
+type BasicInfoValues = z.infer<typeof basicInfoSchema>;
+
+export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () => void }) {
+  const t = useTranslations('user');
+
+  const { common } = useGlobalStore();
+  const { currency } = common;
+
+  const form = useForm<BasicInfoValues>({
+    resolver: zodResolver(basicInfoSchema),
+    defaultValues: {
+      avatar: user.avatar,
+      balance: user.balance,
+      commission: user.commission,
+      gift_amount: user.gift_amount,
+      refer_code: user.refer_code,
+      referer_id: user.referer_id,
+      is_admin: user.is_admin,
+      enable: user.enable,
+    },
+  });
+
+  async function onSubmit(data: BasicInfoValues) {
+    await updateUserBasicInfo({
+      user_id: user.id,
+      telegram: user.telegram,
+      ...data,
+    } as API.UpdateUserBasiceInfoRequest);
+    toast.success(t('updateSuccess'));
+    refetch();
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader className='flex flex-row items-center justify-between'>
+            <CardTitle>{t('basicInfoTitle')}</CardTitle>
+            <Button type='submit' size='sm'>
+              {t('save')}
+            </Button>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <FormField
+              control={form.control}
+              name='enable'
+              render={({ field }) => (
+                <FormItem className='flex items-center justify-between space-x-2'>
+                  <FormLabel>{t('accountEnable')}</FormLabel>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name='is_admin'
+              render={({ field }) => (
+                <FormItem className='flex items-center justify-between space-x-2'>
+                  <FormLabel>{t('administrator')}</FormLabel>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <div className='grid grid-cols-3 gap-4'>
+              <FormField
+                control={form.control}
+                name='balance'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('balance')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        value={field.value}
+                        prefix={currency?.currency_symbol ?? '$'}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='commission'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('commission')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        value={field.value}
+                        prefix={currency?.currency_symbol ?? '$'}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='gift_amount'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('giftAmount')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        value={field.value}
+                        prefix={currency?.currency_symbol ?? '$'}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className='grid grid-cols-2 gap-4'>
+              <FormField
+                control={form.control}
+                name='refer_code'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('referralCode')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as string);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='referer_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('referrerUserId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <FormField
+              control={form.control}
+              name='avatar'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('avatar')}</FormLabel>
+                  <FormControl>
+                    <EnhancedInput
+                      value={field.value}
+                      onValueChange={(value) => {
+                        form.setValue(field.name, value as string);
+                      }}
+                      suffix={
+                        <UploadImage
+                          className='bg-muted h-9 rounded-none border-none px-2'
+                          returnType='base64'
+                          onChange={(value) => form.setValue('avatar', value as string)}
+                        />
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('password')}</FormLabel>
+                  <FormControl>
+                    <Input type='password' placeholder={t('passwordPlaceholder')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-profile/index.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { getUserDetail } from '@/services/admin/user';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'next/navigation';
+import { AuthMethodsForm } from './auth-methods-form';
+import { BasicInfoForm } from './basic-info-form';
+import { NotifySettingsForm } from './notify-settings-form';
+
+export function UserProfileForm() {
+  const { id } = useParams<{ id: string }>();
+
+  const { data: user, refetch } = useQuery({
+    queryKey: ['user', id],
+    queryFn: async () => {
+      const { data } = await getUserDetail({
+        id: Number(id),
+      });
+      return data.data;
+    },
+  });
+
+  if (!user) return null;
+
+  return (
+    <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
+      <div className='md:col-span-2 xl:col-span-1'>
+        <BasicInfoForm user={user} refetch={refetch} />
+      </div>
+      <div>
+        <NotifySettingsForm user={user} refetch={refetch} />
+      </div>
+      <div>
+        <AuthMethodsForm user={user} refetch={refetch} />
+      </div>
+    </div>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-profile/notify-settings-form.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { updateUserNotifySetting } from '@/services/admin/user';
+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 } from '@workspace/ui/components/form';
+import { Switch } from '@workspace/ui/components/switch';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+
+const notifySettingsSchema = z.object({
+  enable_balance_notify: z.boolean(),
+  enable_login_notify: z.boolean(),
+  enable_subscribe_notify: z.boolean(),
+  enable_trade_notify: z.boolean(),
+});
+
+type NotifySettingsValues = z.infer<typeof notifySettingsSchema>;
+
+export function NotifySettingsForm({ user, refetch }: { user: API.User; refetch: () => void }) {
+  const t = useTranslations('user');
+
+  const form = useForm<NotifySettingsValues>({
+    resolver: zodResolver(notifySettingsSchema),
+    defaultValues: {
+      enable_balance_notify: user.enable_balance_notify,
+      enable_login_notify: user.enable_login_notify,
+      enable_subscribe_notify: user.enable_subscribe_notify,
+      enable_trade_notify: user.enable_trade_notify,
+    },
+  });
+
+  async function onSubmit(data: NotifySettingsValues) {
+    await updateUserNotifySetting({
+      ...data,
+      user_id: user.id,
+    });
+    toast.success(t('updateSuccess'));
+    refetch();
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader className='flex flex-row items-center justify-between'>
+            <CardTitle>{t('notifySettingsTitle')}</CardTitle>
+            <Button type='submit' size='sm'>
+              {t('save')}
+            </Button>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='grid grid-cols-1 gap-4'>
+              <FormField
+                control={form.control}
+                name='enable_balance_notify'
+                render={({ field }) => (
+                  <FormItem className='flex items-center justify-between space-x-2'>
+                    <FormLabel>{t('balanceNotifications')}</FormLabel>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_login_notify'
+                render={({ field }) => (
+                  <FormItem className='flex items-center justify-between space-x-2'>
+                    <FormLabel>{t('loginNotifications')}</FormLabel>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_subscribe_notify'
+                render={({ field }) => (
+                  <FormItem className='flex items-center justify-between space-x-2'>
+                    <FormLabel>{t('subscriptionNotifications')}</FormLabel>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='enable_trade_notify'
+                render={({ field }) => (
+                  <FormItem className='flex items-center justify-between space-x-2'>
+                    <FormLabel>{t('tradeNotifications')}</FormLabel>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-subscription/index.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createUserSubscribe,
+  deleteUserSubscribe,
+  getUserSubscribe,
+  updateUserSubscribe,
+} from '@/services/admin/user';
+import { Button } from '@workspace/ui/components/button';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { SubscriptionDetail } from './subscription-detail';
+import { SubscriptionForm } from './subscription-form';
+
+export default function UserSubscription({ userId }: { userId: number }) {
+  const t = useTranslations('user');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.UserSubscribe, Record<string, unknown>>
+      action={ref}
+      header={{
+        title: t('subscriptionList'),
+        toolbar: (
+          <SubscriptionForm
+            key='create'
+            trigger={t('add')}
+            title={t('createSubscription')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              await createUserSubscribe({
+                user_id: Number(userId),
+                ...values,
+              });
+              toast.success(t('createSuccess'));
+              ref.current?.refresh();
+              setLoading(false);
+              return true;
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'id',
+          header: 'ID',
+        },
+        {
+          accessorKey: 'name',
+          header: t('subscriptionName'),
+          cell: ({ row }) => row.original.subscribe.name,
+        },
+        {
+          accessorKey: 'upload',
+          header: t('upload'),
+          cell: ({ row }) => <Display type='traffic' value={row.getValue('upload')} />,
+        },
+        {
+          accessorKey: 'download',
+          header: t('download'),
+          cell: ({ row }) => <Display type='traffic' value={row.getValue('download')} />,
+        },
+        {
+          accessorKey: 'traffic',
+          header: t('totalTraffic'),
+          cell: ({ row }) => <Display type='traffic' value={row.getValue('traffic')} unlimited />,
+        },
+        {
+          accessorKey: 'speed_limit',
+          header: t('speedLimit'),
+          cell: ({ row }) => {
+            const speed = row.original?.subscribe?.speed_limit;
+            return <Display type='trafficSpeed' value={speed} />;
+          },
+        },
+        {
+          accessorKey: 'device_limit',
+          header: t('deviceLimit'),
+          cell: ({ row }) => {
+            const limit = row.original?.subscribe?.device_limit;
+            return <Display type='number' value={limit} unlimited />;
+          },
+        },
+        {
+          accessorKey: 'reset_time',
+          header: t('resetTime'),
+          cell: ({ row }) => {
+            return <Display type='number' value={row.getValue('reset_time')} unlimited />;
+          },
+        },
+        {
+          accessorKey: 'expire_time',
+          header: t('expireTime'),
+          cell: ({ row }) =>
+            row.getValue('expire_time') ? formatDate(row.getValue('expire_time')) : t('permanent'),
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('createdAt'),
+          cell: ({ row }) => formatDate(row.getValue('created_at')),
+        },
+      ]}
+      request={async (pagination) => {
+        const { data } = await getUserSubscribe({
+          user_id: userId,
+          ...pagination,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      actions={{
+        render: (row) => {
+          return [
+            <SubscriptionForm
+              key='edit'
+              trigger={t('edit')}
+              title={t('editSubscription')}
+              loading={loading}
+              initialData={row}
+              onSubmit={async (values) => {
+                setLoading(true);
+                await updateUserSubscribe({
+                  user_id: Number(userId),
+                  user_subscribe_id: row.id,
+                  ...values,
+                });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              }}
+            />,
+            <SubscriptionDetail
+              key='detail'
+              trigger={<Button variant='secondary'>{t('detail')}</Button>}
+              userId={userId}
+              subscriptionId={row.id}
+            />,
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteSubscriptionDescription')}
+              onConfirm={async () => {
+                await deleteUserSubscribe({ user_subscribe_id: row.id });
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/user/[id]/user-subscription/subscription-detail.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import {
+  getUserSubscribeDevices,
+  getUserSubscribeLogs,
+  getUserSubscribeTrafficLogs,
+  kickOfflineByUserDevice,
+} from '@/services/admin/user';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/ui/components/dialog';
+import { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { ReactNode, useState } from 'react';
+import { toast } from 'sonner';
+
+export function SubscriptionDetail({
+  trigger,
+  userId,
+  subscriptionId,
+}: {
+  trigger: ReactNode;
+  userId: number;
+  subscriptionId: number;
+}) {
+  const t = useTranslations('user');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className='max-w-5xl'>
+        <DialogHeader>
+          <DialogTitle>{t('subscriptionDetails')}</DialogTitle>
+        </DialogHeader>
+        <div className='mt-4'>
+          <Tabs defaultValue='logs'>
+            <TabsList className='w-full'>
+              <TabsTrigger value='logs' className='flex-1'>
+                {t('subscriptionLogs')}
+              </TabsTrigger>
+              <TabsTrigger value='traffic' className='flex-1'>
+                {t('trafficLogs')}
+              </TabsTrigger>
+              <TabsTrigger value='devices' className='flex-1'>
+                {t('onlineDevices')}
+              </TabsTrigger>
+            </TabsList>
+            <div className='mt-4 max-h-[60dvh] overflow-y-auto'>
+              <TabsContent value='logs'>
+                <ProTable<API.UserSubscribeLog, Record<string, unknown>>
+                  columns={[
+                    {
+                      accessorKey: 'ip',
+                      header: 'IP',
+                      cell: ({ row }) => <IpLink ip={row.getValue('ip')} />,
+                    },
+                    {
+                      accessorKey: 'user_agent',
+                      header: t('userAgent'),
+                    },
+                    {
+                      accessorKey: 'token',
+                      header: t('token'),
+                    },
+                    {
+                      accessorKey: 'created_at',
+                      header: t('time'),
+                      cell: ({ row }) => formatDate(row.getValue('created_at')),
+                    },
+                  ]}
+                  request={async (pagination) => {
+                    const { data } = await getUserSubscribeLogs({
+                      user_id: userId,
+                      subscribe_id: subscriptionId,
+                      ...pagination,
+                    });
+                    return {
+                      list: data.data?.list || [],
+                      total: data.data?.total || 0,
+                    };
+                  }}
+                />
+              </TabsContent>
+              <TabsContent value='traffic'>
+                <ProTable<API.TrafficLog, Record<string, unknown>>
+                  columns={[
+                    {
+                      accessorKey: 'download',
+                      header: t('download'),
+                      cell: ({ row }) => (
+                        <Display type='traffic' value={row.getValue('download')} />
+                      ),
+                    },
+                    {
+                      accessorKey: 'upload',
+                      header: t('upload'),
+                      cell: ({ row }) => <Display type='traffic' value={row.getValue('upload')} />,
+                    },
+                    {
+                      accessorKey: 'timestamp',
+                      header: t('time'),
+                      cell: ({ row }) => formatDate(row.getValue('timestamp')),
+                    },
+                  ]}
+                  request={async (pagination) => {
+                    const { data } = await getUserSubscribeTrafficLogs({
+                      user_id: userId,
+                      subscribe_id: subscriptionId,
+                      ...pagination,
+                    } as API.GetUserSubscribeTrafficLogsParams);
+                    return {
+                      list: data.data?.list || [],
+                      total: data.data?.total || 0,
+                    };
+                  }}
+                />
+              </TabsContent>
+              <TabsContent value='devices'>
+                <ProTable<API.UserDevice, Record<string, unknown>>
+                  columns={[
+                    {
+                      accessorKey: 'enabled',
+                      header: t('enable'),
+                      cell: ({ row }) => (
+                        <Switch
+                          checked={row.getValue('enabled')}
+                          onChange={(checked) => {
+                            console.log('Switch:', checked);
+                          }}
+                        />
+                      ),
+                    },
+                    {
+                      accessorKey: 'id',
+                      header: 'ID',
+                    },
+                    {
+                      accessorKey: 'identifier',
+                      header: 'IMEI',
+                    },
+                    {
+                      accessorKey: 'user_agent',
+                      header: t('userAgent'),
+                    },
+                    {
+                      accessorKey: 'ip',
+                      header: 'IP',
+                      cell: ({ row }) => <IpLink ip={row.getValue('ip')} />,
+                    },
+                    {
+                      accessorKey: 'online',
+                      header: t('loginStatus'),
+                      cell: ({ row }) => (
+                        <Badge variant={row.getValue('online') ? 'default' : 'destructive'}>
+                          {row.getValue('online') ? t('online') : t('offline')}
+                        </Badge>
+                      ),
+                    },
+                    {
+                      accessorKey: 'updated_at',
+                      header: t('lastSeen'),
+                      cell: ({ row }) => formatDate(row.getValue('updated_at')),
+                    },
+                  ]}
+                  request={async (pagination) => {
+                    const { data } = await getUserSubscribeDevices({
+                      user_id: userId,
+                      subscribe_id: subscriptionId,
+                      ...pagination,
+                    });
+                    return {
+                      list: data.data?.list || [],
+                      total: data.data?.total || 0,
+                    };
+                  }}
+                  actions={{
+                    render: (row) => {
+                      if (!row.identifier) return [];
+                      return [
+                        <ConfirmButton
+                          key='offline'
+                          trigger={<Button variant='destructive'>{t('confirmOffline')}</Button>}
+                          title={t('confirmOffline')}
+                          description={t('kickOfflineConfirm', { ip: row.ip })}
+                          onConfirm={async () => {
+                            await kickOfflineByUserDevice({ id: row.id });
+                            toast.success(t('kickOfflineSuccess'));
+                          }}
+                          cancelText={t('cancel')}
+                          confirmText={t('confirm')}
+                        />,
+                      ];
+                    },
+                  }}
+                />
+              </TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/admin/app/dashboard/user/[id]/user-subscription/subscription-form.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { getSubscribeList } from '@/services/admin/subscribe';
+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 { DatePicker } from '@workspace/ui/custom-components/date-picker';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { unitConversion } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { ReactNode, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+interface Props {
+  trigger: ReactNode;
+  title: string;
+  loading?: boolean;
+  initialData?: API.UserSubscribe;
+  onSubmit: (values: any) => Promise<boolean>;
+}
+
+const formSchema = z.object({
+  subscribe_id: z.number().optional(),
+  traffic: z.number().optional(),
+  speed_limit: z.number().optional(),
+  device_limit: z.number().optional(),
+  expired_at: z.number().nullish().optional(),
+  upload: z.number().optional(),
+  download: z.number().optional(),
+  id: z.number().optional(),
+});
+
+export function SubscriptionForm({ trigger, title, loading, initialData, onSubmit }: Props) {
+  const t = useTranslations('user');
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      subscribe_id: initialData?.subscribe_id || 0,
+      traffic: initialData?.traffic || 0,
+      upload: initialData?.upload || 0,
+      download: initialData?.download || 0,
+      expired_at: initialData?.expire_time || 0,
+      ...(initialData && { id: initialData.id }),
+    },
+  });
+
+  const handleSubmit = async (values: any) => {
+    const success = await onSubmit(values);
+    if (success) {
+      setOpen(false);
+      form.reset();
+    }
+  };
+
+  const { data: subscribe } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.Subscribe[];
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side='right'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='mt-4 space-y-4'>
+              <FormField
+                control={form.control}
+                name='subscribe_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('subscription')}</FormLabel>
+                    <FormControl>
+                      <Combobox<number, false>
+                        placeholder='Select Subscription'
+                        value={field.value}
+                        onChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        options={subscribe?.map((item: API.Subscribe) => ({
+                          value: item.id,
+                          label: item.name,
+                        }))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='traffic'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('trafficLimit')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('unlimited')}
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('bytesToGb', value)}
+                        formatOutput={(value) => unitConversion('gbToBytes', value)}
+                        suffix='GB'
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='upload'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('uploadTraffic')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='0'
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('bytesToGb', value)}
+                        formatOutput={(value) => unitConversion('gbToBytes', value)}
+                        suffix='GB'
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='download'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('downloadTraffic')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='0'
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('bytesToGb', value)}
+                        formatOutput={(value) => unitConversion('gbToBytes', value)}
+                        suffix='GB'
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value as number);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='expired_at'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('expiredAt')}</FormLabel>
+                    <FormControl>
+                      <DatePicker
+                        placeholder={t('permanent')}
+                        value={field.value}
+                        onChange={(value) => {
+                          if (value === field.value) {
+                            form.setValue(field.name, 0);
+                          } else {
+                            form.setValue(field.name, value!);
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </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)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/user/page.tsx

@@ -1,12 +1,17 @@
 'use client';
 
+import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
-import { createUser, deleteUser, getUserList, updateUser } from '@/services/admin/user';
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { createUser, deleteUser, getUserList, updateUserBasicInfo } 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 { Switch } from '@workspace/ui/components/switch';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate, unitConversion } from '@workspace/ui/utils';
+import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { UserDetail } from './user-detail';
@@ -17,8 +22,19 @@ export default function Page() {
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
 
+  const { data: subscribeList } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.SubscribeGroup[];
+    },
+  });
+
   return (
-    <ProTable<API.User, Record<string, unknown>>
+    <ProTable<API.User, API.GetUserListParams>
       action={ref}
       header={{
         title: t('userList'),
@@ -55,10 +71,23 @@ export default function Page() {
               <Switch
                 defaultChecked={row.getValue('enable')}
                 onCheckedChange={async (checked) => {
-                  await updateUser({
+                  const {
-                    ...row.original,
+                    auth_methods,
+                    user_devices,
+                    enable_balance_notify,
+                    enable_login_notify,
+                    enable_subscribe_notify,
+                    enable_trade_notify,
+                    updated_at,
+                    created_at,
+                    id,
+                    ...rest
+                  } = row.original;
+                  await updateUserBasicInfo({
+                    user_id: id,
+                    ...rest,
                     enable: checked,
-                  } as unknown as API.UpdateUserRequest);
+                  } as unknown as API.UpdateUserBasiceInfoRequest);
                   toast.success(t('updateSuccess'));
                   ref.current?.refresh();
                 }}
@@ -71,13 +100,39 @@ export default function Page() {
           header: 'ID',
         },
         {
-          accessorKey: 'email',
+          accessorKey: 'auth_methods',
           header: t('userName'),
+          cell: ({ row }) => {
+            const method = row.original.auth_methods?.[0];
+            return (
+              <div>
+                <Badge className='mr-1 uppercase' title={method?.verified ? t('verified') : ''}>
+                  {method?.auth_type}
+                </Badge>
+                {method?.auth_identifier}
+              </div>
+            );
+          },
         },
         {
           accessorKey: 'balance',
           header: t('balance'),
-          cell: ({ row }) => unitConversion('centsToDollars', row.getValue('balance')),
+          cell: ({ row }) => <Display type='currency' value={row.getValue('balance')} />,
+        },
+        {
+          accessorKey: 'gift_amount',
+          header: t('giftAmount'),
+          cell: ({ row }) => <Display type='currency' value={row.getValue('gift_amount')} />,
+        },
+        {
+          accessorKey: 'commission',
+          header: t('commission'),
+          cell: ({ row }) => <Display type='currency' value={row.getValue('commission')} />,
+        },
+        {
+          accessorKey: 'refer_code',
+          header: t('inviteCode'),
+          cell: ({ row }) => row.getValue('refer_code') || '--',
         },
         {
           accessorKey: 'referer_id',
@@ -90,41 +145,44 @@ export default function Page() {
           cell: ({ row }) => formatDate(row.getValue('created_at')),
         },
       ]}
-      request={async (pagination) => {
+      request={async (pagination, filter) => {
-        const { data } = await getUserList(pagination);
+        const { data } = await getUserList({
+          ...pagination,
+          ...filter,
+        });
         return {
           list: data.data?.list || [],
           total: data.data?.total || 0,
         };
       }}
+      params={[
+        {
+          key: 'subscribe_id',
+          placeholder: t('subscription'),
+          options: subscribeList?.map((item) => ({
+            label: item.name,
+            value: String(item.id),
+          })),
+        },
+        {
+          key: 'search',
+          placeholder: 'Search',
+        },
+        {
+          key: 'user_id',
+          placeholder: t('userId'),
+        },
+        {
+          key: 'user_subscribe_id',
+          placeholder: t('subscriptionId'),
+        },
+      ]}
       actions={{
         render: (row) => {
           return [
-            <UserForm<API.UpdateUserRequest>
+            <Button key='detail' asChild>
-              key='edit'
+              <Link href={`/dashboard/user/${row.id}`}>{t('edit')}</Link>
-              trigger={t('edit')}
+            </Button>,
-              title={t('editUser')}
-              loading={loading}
-              initialValues={row as unknown as API.UpdateUserRequest}
-              onSubmit={async (values) => {
-                setLoading(true);
-                try {
-                  await updateUser({
-                    ...row,
-                    ...values,
-                  });
-                  toast.success(t('updateSuccess'));
-                  ref.current?.refresh();
-                  setLoading(false);
-
-                  return true;
-                } catch (error) {
-                  setLoading(false);
-
-                  return false;
-                }
-              }}
-            />,
             <ConfirmButton
               key='edit'
               trigger={<Button variant='destructive'>{t('delete')}</Button>}

apps/admin/app/dashboard/user/user-detail.tsx

@@ -1,19 +1,125 @@
 'use client';
 
-import { getUserDetail } from '@/services/admin/user';
+import { Display } from '@/components/display';
+import { getUserDetail, getUserSubscribeById } from '@/services/admin/user';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
-import { formatDate, unitConversion } from '@workspace/ui/utils';
+import { formatBytes, formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import Link from 'next/link';
+
+export function UserSubscribeDetail({ id, enabled }: { id: number; enabled: boolean }) {
+  const t = useTranslations('user');
+
+  const { data } = useQuery({
+    enabled: id !== 0 && enabled,
+    queryKey: ['getUserSubscribeById', id],
+    queryFn: async () => {
+      const { data } = await getUserSubscribeById({ id });
+      return data.data;
+    },
+  });
+
+  if (!id) return '--';
+
+  const usedTraffic = data ? data.upload + data.download : 0;
+  const totalTraffic = data?.traffic || 0;
+
+  return (
+    <div className='space-y-4'>
+      <div>
+        <h3 className='mb-2 text-sm font-medium'>{t('subscriptionInfo')}</h3>
+        <div className='bg-muted/30 rounded-lg p-3'>
+          <ul className='grid gap-3'>
+            <li className='flex items-center justify-between font-semibold'>
+              <span className='text-muted-foreground'>{t('subscriptionId')}</span>
+              <span>{data?.id || '--'}</span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('subscriptionName')}</span>
+              <span>{data?.subscribe?.name || '--'}</span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('token')}</span>
+              <div className='font-mono text-xs' title={data?.token || ''}>
+                {data?.token || '--'}
+              </div>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('trafficUsage')}</span>
+              <span>
+                {data
+                  ? totalTraffic === 0
+                    ? `${formatBytes(usedTraffic)} / ${t('unlimited')}`
+                    : `${formatBytes(usedTraffic)} / ${formatBytes(totalTraffic)}`
+                  : '--'}
+              </span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('startTime')}</span>
+              <span>{data?.start_time ? formatDate(data.start_time) : '--'}</span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('expireTime')}</span>
+              <span>{data?.expire_time ? formatDate(data.expire_time) : '--'}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <h3 className='mb-2 text-sm font-medium'>
+          {t('userInfo')}
+          {data?.user_id && (
+            <Button
+              variant='link'
+              size='sm'
+              className='text-primary ml-2 h-auto p-0 text-xs'
+              asChild
+            >
+              <Link href={`/dashboard/user/${data.user_id}`}>{t('viewDetails')}</Link>
+            </Button>
+          )}
+        </h3>
+        <ul className='grid gap-3'>
+          <li className='flex items-center justify-between font-semibold'>
+            <span className='text-muted-foreground'>{t('userId')}</span>
+            <span>{data?.user_id}</span>
+          </li>
+          <li className='flex items-center justify-between font-semibold'>
+            <span className='text-muted-foreground'>{t('balance')}</span>
+            <span>
+              <Display type='currency' value={data?.user.balance} />
+            </span>
+          </li>
+          <li className='flex items-center justify-between'>
+            <span className='text-muted-foreground'>{t('giftAmount')}</span>
+            <span>
+              <Display type='currency' value={data?.user?.gift_amount} />
+            </span>
+          </li>
+          <li className='flex items-center justify-between'>
+            <span className='text-muted-foreground'>{t('commission')}</span>
+            <span>
+              <Display type='currency' value={data?.user?.commission} />
+            </span>
+          </li>
+          <li className='flex items-center justify-between'>
+            <span className='text-muted-foreground'>{t('createdAt')}</span>
+            <span>{data?.user?.created_at && formatDate(data?.user?.created_at)}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
 
 export function UserDetail({ id }: { id: number }) {
   const t = useTranslations('user');
-  const [shouldFetch, setShouldFetch] = useState(false);
 
   const { data } = useQuery({
-    enabled: id !== 0 && shouldFetch,
+    enabled: id !== 0,
     queryKey: ['getUserDetail', id],
     queryFn: async () => {
       const { data } = await getUserDetail({ id });
@@ -25,9 +131,11 @@ export function UserDetail({ id }: { id: number }) {
 
   return (
     <HoverCard>
-      <HoverCardTrigger asChild onMouseEnter={() => setShouldFetch(true)}>
+      <HoverCardTrigger asChild>
-        <Button variant='link' className='p-0'>
+        <Button variant='link' className='p-0' asChild>
-          @{data?.email?.split('@')[0] || 'Loading...'}
+          <Link href={`/dashboard/user/${id}`}>
+            {data?.auth_methods[0]?.auth_identifier || t('loading')}
+          </Link>
         </Button>
       </HoverCardTrigger>
       <HoverCardContent>
@@ -37,13 +145,23 @@ export function UserDetail({ id }: { id: number }) {
               <span className='text-muted-foreground'>ID</span>
               <span>{data?.id}</span>
             </li>
-            <li className='flex items-center justify-between font-semibold'>
-              <span className='text-muted-foreground'>{t('email')}</span>
-              <span>{data?.email}</span>
-            </li>
             <li className='flex items-center justify-between font-semibold'>
               <span className='text-muted-foreground'>{t('balance')}</span>
-              <span>{unitConversion('centsToDollars', data?.balance)}</span>
+              <span>
+                <Display type='currency' value={data?.balance} />
+              </span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('giftAmount')}</span>
+              <span>
+                <Display type='currency' value={data?.gift_amount} />
+              </span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('commission')}</span>
+              <span>
+                <Display type='currency' value={data?.commission} />
+              </span>
             </li>
             <li className='flex items-center justify-between'>
               <span className='text-muted-foreground'>{t('createdAt')}</span>

apps/admin/app/dashboard/user/user-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import useGlobalStore from '@/config/use-global';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -21,7 +21,9 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { Switch } from '@workspace/ui/components/switch';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { unitConversion } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
@@ -43,17 +45,23 @@ export default function UserForm<T extends Record<string, any>>({
   loading,
   trigger,
   title,
-}: UserFormProps<T>) {
+}: Readonly<UserFormProps<T>>) {
   const t = useTranslations('user');
+  const { common } = useGlobalStore();
+  const { currency } = common;
 
   const [open, setOpen] = useState(false);
   const formSchema = z.object({
-    email: z.string().email(t('form.invalidEmailFormat')),
+    email: z.string().email(t('invalidEmailFormat')),
+    telephone_area_code: z.string().optional(),
+    telephone: z.string().optional(),
     password: z.string().optional(),
     referer_id: z.number().optional(),
     refer_code: z.string().optional(),
     is_admin: z.boolean().optional(),
     balance: z.number().optional(),
+    gift_amount: z.number().optional(),
+    commission: z.number().optional(),
   });
   const form = useForm({
     resolver: zodResolver(formSchema),
@@ -96,10 +104,52 @@ export default function UserForm<T extends Record<string, any>>({
                 name='email'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.userEmail')}</FormLabel>
+                    <FormLabel>{t('userEmail')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
-                        placeholder={t('form.userEmailPlaceholder')}
+                        placeholder={t('userEmailPlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='telephone'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telephone')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        prefix={
+                          <FormField
+                            control={form.control}
+                            name='telephone_area_code'
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <AreaCodeSelect
+                                    className='w-32 rounded-none border-y-0 border-l-0'
+                                    simple
+                                    placeholder={t('areaCodePlaceholder')}
+                                    value={field.value}
+                                    onChange={(value) => {
+                                      form.setValue(field.name, value.phone);
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        }
+                        placeholder={t('telephonePlaceholder')}
                         {...field}
                         onValueChange={(value) => {
                           form.setValue(field.name, value);
@@ -115,10 +165,10 @@ export default function UserForm<T extends Record<string, any>>({
                 name='password'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.password')}</FormLabel>
+                    <FormLabel>{t('password')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
-                        placeholder={t('form.passwordPlaceholder')}
+                        placeholder={t('passwordPlaceholder')}
                         {...field}
                         onValueChange={(value) => {
                           form.setValue(field.name, value);
@@ -134,10 +184,10 @@ export default function UserForm<T extends Record<string, any>>({
                 name='referer_id'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.refererId')}</FormLabel>
+                    <FormLabel>{t('refererId')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
-                        placeholder={t('form.refererIdPlaceholder')}
+                        placeholder={t('refererIdPlaceholder')}
                         {...field}
                         type='number'
                         onValueChange={(value) => {
@@ -154,10 +204,10 @@ export default function UserForm<T extends Record<string, any>>({
                 name='refer_code'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.inviteCode')}</FormLabel>
+                    <FormLabel>{t('inviteCode')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
-                        placeholder={t('form.inviteCodePlaceholder')}
+                        placeholder={t('inviteCodePlaceholder')}
                         {...field}
                         onValueChange={(value) => {
                           form.setValue(field.name, value);
@@ -173,11 +223,59 @@ export default function UserForm<T extends Record<string, any>>({
                 name='balance'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.balance')}</FormLabel>
+                    <FormLabel>{t('balance')}</FormLabel>
                     <FormControl>
                       <EnhancedInput
-                        prefix='¥'
+                        prefix={currency?.currency_symbol ?? '$'}
-                        placeholder={t('form.balancePlaceholder')}
+                        placeholder={t('balancePlaceholder')}
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        min={0}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='gift_amount'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('giftAmount')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        prefix={currency?.currency_symbol ?? '$'}
+                        placeholder={t('giftAmountPlaceholder')}
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        min={0}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='commission'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('commission')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        prefix={currency?.currency_symbol ?? '$'}
+                        placeholder={t('commissionPlaceholder')}
                         type='number'
                         {...field}
                         formatInput={(value) => unitConversion('centsToDollars', value)}
@@ -197,7 +295,7 @@ export default function UserForm<T extends Record<string, any>>({
                 name='is_admin'
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('form.manager')}</FormLabel>
+                    <FormLabel>{t('manager')}</FormLabel>
                     <FormControl>
                       <div className='pt-2'>
                         <Switch checked={!!field.value} onCheckedChange={field.onChange} />
@@ -218,11 +316,10 @@ export default function UserForm<T extends Record<string, any>>({
               setOpen(false);
             }}
           >
-            {t('form.cancel')}
+            {t('cancel')}
           </Button>
           <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />} {t('confirm')}
-            {t('form.confirm')}
           </Button>
         </SheetFooter>
       </SheetContent>

apps/admin/app/layout.tsx

@@ -9,20 +9,20 @@ import { NextIntlClientProvider } from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
 import { PublicEnvScript } from 'next-runtime-env';
 import { unstable_noStore as noStore } from 'next/cache';
-import { Geist, Geist_Mono } from 'next/font/google';
+// import { Geist, Geist_Mono } from 'next/font/google';
 import { cookies } from 'next/headers';
 import NextTopLoader from 'nextjs-toploader';
 import React from 'react';
 
-const fontSans = Geist({
+// const fontSans = Geist({
-  subsets: ['latin'],
+//   subsets: ['latin'],
-  variable: '--font-sans',
+//   variable: '--font-sans',
-});
+// });
 
-const fontMono = Geist_Mono({
+// const fontMono = Geist_Mono({
-  subsets: ['latin'],
+//   subsets: ['latin'],
-  variable: '--font-mono',
+//   variable: '--font-mono',
-});
+// });
 
 export async function generateMetadata(): Promise<Metadata> {
   noStore();
@@ -75,6 +75,8 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const Authorization = (await cookies()).get('Authorization')?.value;
+
   const locale = await getLocale();
   const messages = await getMessages();
 
@@ -86,13 +88,20 @@ export default async function RootLayout({
     console.log('Error fetching global config:', error);
   }
 
-  try {
+  if (Authorization) {
-    user = await currentUser({
+    try {
-      skipErrorHandler: true,
+      user = await currentUser({
-      Authorization: (await cookies()).get('Authorization')?.value,
+        skipErrorHandler: true,
-    }).then((res) => res.data.data);
+        Authorization,
-  } catch (error) {
+      }).then((res) => {
-    console.log('Error fetching current user:', error);
+        if (res.data.data?.is_admin) {
+          return res.data.data;
+        }
+        return undefined;
+      });
+    } catch (error) {
+      console.log('Error fetching current user:', error);
+    }
   }
 
   return (
@@ -102,7 +111,8 @@ export default async function RootLayout({
       </head>
       <body
         suppressHydrationWarning
-        className={`${fontSans.variable} ${fontMono.variable} size-full min-h-[calc(100dvh-env(safe-area-inset-top))] font-sans antialiased`}
+        //  ${fontSans.variable} ${fontMono.variable}
+        className={`size-full min-h-[calc(100dvh-env(safe-area-inset-top))] font-sans antialiased`}
       >
         <NextIntlClientProvider messages={messages}>
           <NextTopLoader showSpinner={false} />

apps/admin/components/billing.tsx

@@ -3,8 +3,6 @@ import { Card, CardDescription, CardHeader, CardTitle } from '@workspace/ui/comp
 import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
-const BASE_URL = 'https://cdn.jsdelivr.net/gh/perfect-panel/ppanel-assets/billing/index.json';
-
 interface BillingProps {
   type: 'dashboard' | 'payment';
 }
@@ -17,23 +15,48 @@ interface ItemType {
   href: string;
 }
 
+async function getBillingURL() {
+  try {
+    const response = await fetch(
+      'https://api.github.com/repos/perfect-panel/ppanel-assets/commits',
+    );
+    const json = await response.json();
+    const version = json[0]?.sha;
+    const url = new URL('https://cdn.jsdelivr.net/gh/perfect-panel/ppanel-assets');
+    url.pathname += `@${version}/billing/index.json`;
+    return url.toString();
+  } catch (error) {
+    return 'https://cdn.jsdelivr.net/gh/perfect-panel/ppanel-assets/billing/index.json';
+  }
+}
+
 export default async function Billing({ type }: BillingProps) {
   const t = await getTranslations('common.billing');
   let list: ItemType[] = [];
+
   try {
-    const response = await fetch(BASE_URL, { cache: 'no-store' });
+    const url = await getBillingURL();
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const response = await fetch(url, {
-    const data = await response.json();
+      headers: {
-    const now = new Date().getTime();
+        Accept: 'application/json',
-    list = data[type].filter((item: { expiryDate: string }) => {
+      },
-      const expiryDate = Date.parse(item.expiryDate);
-      return !isNaN(expiryDate) && expiryDate > now;
     });
+    const data = await response.json();
+    const now = Date.now();
+
+    list = Array.isArray(data[type])
+      ? data[type].filter((item: { expiryDate: string }) => {
+          const expiryDate = Date.parse(item.expiryDate);
+          return !isNaN(expiryDate) && expiryDate > now;
+        })
+      : [];
   } catch (error) {
-    console.log('Error fetching billing data:', error);
+    console.log(error);
     return null;
   }
-  if (list && list.length === 0) return null;
+
+  if (!list?.length) return null;
+
   return (
     <>
       <h1 className='text mt-2 font-bold'>

apps/admin/components/dashboard/revenue-statistics-card.tsx

@@ -59,7 +59,7 @@ export function RevenueStatisticsCard() {
 
   return (
     <Tabs defaultValue='today'>
-      <Card>
+      <Card className='h-full'>
         <CardHeader className='flex !flex-row items-center justify-between'>
           <CardTitle>{t('revenueTitle')}</CardTitle>
           <TabsList>
@@ -68,8 +68,8 @@ export function RevenueStatisticsCard() {
             <TabsTrigger value='total'>{t('total')}</TabsTrigger>
           </TabsList>
         </CardHeader>
-        <TabsContent value='today'>
+        <TabsContent value='today' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {RevenueStatistics?.today.new_order_amount ||
             RevenueStatistics?.today.renewal_order_amount ? (
               <ChartContainer config={IncomeStatisticsConfig} className='mx-auto max-h-80'>
@@ -115,7 +115,10 @@ export function RevenueStatisticsCard() {
                                 y={viewBox.cy}
                                 className='fill-foreground text-2xl font-bold'
                               >
-                                {RevenueStatistics?.today.amount_total}
+                                {unitConversion(
+                                  'centsToDollars',
+                                  RevenueStatistics?.today.amount_total,
+                                )}
                               </tspan>
                             </text>
                           );
@@ -126,7 +129,9 @@ export function RevenueStatisticsCard() {
                 </PieChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -159,8 +164,8 @@ export function RevenueStatisticsCard() {
           </CardFooter>
         </TabsContent>
 
-        <TabsContent value='month'>
+        <TabsContent value='month' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {RevenueStatistics?.monthly.list && RevenueStatistics?.monthly.list.length > 0 ? (
               <ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
                 <BarChart
@@ -193,7 +198,9 @@ export function RevenueStatisticsCard() {
                 </BarChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -229,8 +236,8 @@ export function RevenueStatisticsCard() {
           </CardFooter>
         </TabsContent>
 
-        <TabsContent value='total'>
+        <TabsContent value='total' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {RevenueStatistics?.all.list && RevenueStatistics?.all.list.length > 0 ? (
               <ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
                 <AreaChart
@@ -280,7 +287,9 @@ export function RevenueStatisticsCard() {
                 </AreaChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>

apps/admin/components/dashboard/statistics.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
 import { queryServerTotalData, queryTicketWaitReply } from '@/services/admin/console';
-import { Icon } from '@iconify/react';
 import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@workspace/ui/components/chart';
@@ -12,7 +12,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@workspace/ui/components/select';
+import { Separator } from '@workspace/ui/components/separator';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import { formatBytes } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -59,15 +61,13 @@ export default function Statistics() {
     users: {
       today:
         ServerTotal?.user_traffic_ranking_today?.map((item) => ({
-          name: item.user_id,
+          name: item.sid,
           traffic: item.download + item.upload,
-          email: item.email,
         })) || [],
       yesterday:
         ServerTotal?.user_traffic_ranking_yesterday?.map((item) => ({
-          name: item.user_id,
+          name: item.sid,
           traffic: item.download + item.upload,
-          email: item.email,
         })) || [],
     },
   };
@@ -149,7 +149,7 @@ export default function Statistics() {
               </TabsList>
             </Tabs>
           </CardHeader>
-          <CardContent>
+          <CardContent className='h-80'>
             <div className='mb-6 flex items-center justify-between'>
               <h4 className='font-semibold'>
                 {dataType === 'nodes' ? t('nodeTraffic') : t('userTraffic')}
@@ -175,10 +175,6 @@ export default function Statistics() {
                     label: t('type'),
                     color: 'hsl(var(--muted))',
                   },
-                  email: {
-                    label: t('email'),
-                    color: 'hsl(var(--muted))',
-                  },
                   label: {
                     color: 'hsl(var(--foreground))',
                   },
@@ -204,13 +200,22 @@ export default function Statistics() {
                     tickFormatter={(value, index) => String(index + 1)}
                   />
                   <ChartTooltip
+                    trigger='hover'
                     content={
                       <ChartTooltipContent
                         label={true}
-                        labelFormatter={(label) =>
+                        labelFormatter={(label, [payload]) =>
-                          dataType === 'nodes'
+                          dataType === 'nodes' ? (
-                            ? `${t('nodes')}: ${label}`
+                            `${t('nodes')}: ${label}`
-                            : `${t('users')}: ${label}`
+                          ) : (
+                            <>
+                              <div className='w-80'>
+                                <UserSubscribeDetail id={payload?.payload.name} enabled={true} />
+                              </div>
+                              <Separator className='my-2' />
+                              <div>{`${t('users')}: ${label}`}</div>
+                            </>
+                          )
                         }
                         formatter={(value) => {
                           return formatBytes(Number(value) || 0);
@@ -230,7 +235,9 @@ export default function Statistics() {
                 </BarChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
         </Card>

apps/admin/components/dashboard/user-statistics-card.tsx

@@ -61,7 +61,7 @@ export function UserStatisticsCard() {
 
   return (
     <Tabs defaultValue='today'>
-      <Card>
+      <Card className='h-full'>
         <CardHeader className='flex !flex-row items-center justify-between'>
           <CardTitle>{t('userTitle')}</CardTitle>
           <TabsList>
@@ -71,8 +71,8 @@ export function UserStatisticsCard() {
           </TabsList>
         </CardHeader>
 
-        <TabsContent value='today'>
+        <TabsContent value='today' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {UserStatistics?.today.register ||
             UserStatistics?.today.new_order_users ||
             UserStatistics?.today.renewal_order_users ? (
@@ -133,7 +133,9 @@ export function UserStatisticsCard() {
                 </PieChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -168,8 +170,8 @@ export function UserStatisticsCard() {
           </CardFooter>
         </TabsContent>
 
-        <TabsContent value='month'>
+        <TabsContent value='month' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {UserStatistics?.monthly.list && UserStatistics?.monthly.list.length > 0 ? (
               <ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
                 <BarChart
@@ -204,7 +206,9 @@ export function UserStatisticsCard() {
                 </BarChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -239,8 +243,8 @@ export function UserStatisticsCard() {
           </CardFooter>
         </TabsContent>
 
-        <TabsContent value='total'>
+        <TabsContent value='total' className='h-full'>
-          <CardContent>
+          <CardContent className='h-80'>
             {UserStatistics?.all.list && UserStatistics?.all.list.length > 0 ? (
               <ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
                 <AreaChart
@@ -299,7 +303,9 @@ export function UserStatisticsCard() {
                 </AreaChart>
               </ChartContainer>
             ) : (
-              <Empty />
+              <div className='flex h-full items-center justify-center'>
+                <Empty />
+              </div>
             )}
           </CardContent>
           <CardFooter className='flex h-20 flex-row border-t p-4'>

apps/admin/components/display.tsx

@@ -4,7 +4,7 @@ import useGlobalStore from '@/config/use-global';
 import { formatBytes, unitConversion } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 
-type DisplayType = 'currency' | 'traffic' | 'number';
+type DisplayType = 'currency' | 'traffic' | 'number' | 'trafficSpeed';
 
 interface DisplayProps<T> {
   value?: T;
@@ -26,12 +26,16 @@ export function Display<T extends number | undefined | null>({
     return formattedValue;
   }
 
-  if (['traffic', 'number'].includes(type) && unlimited && !value) {
+  if (['traffic', 'trafficSpeed', 'number'].includes(type) && unlimited && !value) {
     return t('unlimited');
   }
 
   if (type === 'traffic') {
-    return value ? formatBytes(value as number) : '0';
+    return value ? formatBytes(value) : '0';
+  }
+
+  if (type === 'trafficSpeed') {
+    return value ? formatBytes(value).replace('B', 'b') + 'ps' : '0';
   }
 
   if (type === 'number') {

apps/admin/components/ip-link.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { ExternalLink } from 'lucide-react';
+import React from 'react';
+
+interface IpLinkProps {
+  ip: string;
+  children?: React.ReactNode;
+  className?: string;
+  target?: '_blank' | '_self';
+}
+
+export function IpLink({ ip, children, className = '', target = '_blank' }: IpLinkProps) {
+  const url = `https://ip.sb/ip/${ip}`;
+
+  return (
+    <a
+      href={url}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+      className={`text-primary hover:text-primary/80 inline-flex items-center gap-1 font-mono transition-colors hover:underline ${className}`}
+    >
+      {children || ip}
+      <ExternalLink className='h-3 w-3' />
+    </a>
+  );
+}