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

## [1.4.6](https://github.com/perfect-panel/ppanel-web/compare/v1.4.5...v1.4.6) (2025-09-17)

### 🎫 Chores

* Merge branch 'main' into develop ([41f06bf](https://github.com/perfect-panel/ppanel-web/commit/41f06bf))

### 🐛 Bug Fixes

* Add loaded state to node, server, and subscribe stores for better loading management ([13dce0c](https://github.com/perfect-panel/ppanel-web/commit/13dce0c))
* Removed node metadata fields in subscription schema to simplify structure ([0cadd83](https://github.com/perfect-panel/ppanel-web/commit/0cadd83))

CHANGELOG.md

@@ -1,16 +1,50 @@
 <a name="readme-top"></a>
 # Changelog
 
-## [1.4.4](https://github.com/perfect-panel/ppanel-web/compare/v1.4.3...v1.4.4) (2025-09-16)
+## [1.4.6](https://github.com/perfect-panel/ppanel-web/compare/v1.4.5...v1.4.6) (2025-09-17)
+
+
+### 🎫 Chores
+
+* Merge branch 'main' into develop ([41f06bf](https://github.com/perfect-panel/ppanel-web/commit/41f06bf))
 
 
 ### 🐛 Bug Fixes
 
-* Add minimum value constraint for count and user limit inputs in CouponForm ([6991b69](https://github.com/perfect-panel/ppanel-web/commit/6991b69))
-* Add protocol-related constants, default configurations, field definitions, and validation modes ([d685407](https://github.com/perfect-panel/ppanel-web/commit/d685407))
-* Added the enabled field in the protocol configuration, updated the related type definition and default configuration ([2b0cf9a](https://github.com/perfect-panel/ppanel-web/commit/2b0cf9a))
-* Filter available protocols to exclude disabled ones in NodeForm ([982d288](https://github.com/perfect-panel/ppanel-web/commit/982d288))
-* Refactor key generation logic and update dependencies for ML-KEM-768 integration ([b8f630f](https://github.com/perfect-panel/ppanel-web/commit/b8f630f))
+* Add loaded state to node, server, and subscribe stores for better loading management ([13dce0c](https://github.com/perfect-panel/ppanel-web/commit/13dce0c))
+* Removed node metadata fields in subscription schema to simplify structure ([0cadd83](https://github.com/perfect-panel/ppanel-web/commit/0cadd83))
+
+## [1.4.5](https://github.com/perfect-panel/ppanel-web/compare/v1.4.4...v1.4.5) (2025-09-17)
+
+
+### ♻ Code Refactoring
+
+* Replace useQuery with Zustand store for subscription and node data management ([c6dd0b6](https://github.com/perfect-panel/ppanel-web/commit/c6dd0b6))
+* Simplify TemplatePreview component structure by consolidating Sheet and Button elements ([1b715c5](https://github.com/perfect-panel/ppanel-web/commit/1b715c5))
+
+
+### 🐛 Bug Fixes
+
+*  Add showLineNumbers prop handling in MonacoEditor for improved placeholder positioning ([bd67ece](https://github.com/perfect-panel/ppanel-web/commit/bd67ece))
+* Add fetchTags method to NodesPage and ensure tags are fetched alongside nodes ([a3c5e31](https://github.com/perfect-panel/ppanel-web/commit/a3c5e31))
+* Add NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT to control tutorial visibility and update page query accordingly ([e94405d](https://github.com/perfect-panel/ppanel-web/commit/e94405d))
+* Add subscribeSchema for subscription management with detailed proxy and user information ([49b3dcc](https://github.com/perfect-panel/ppanel-web/commit/49b3dcc))
+* Enhance server ID display in ServerTrafficLogPage with badges and server ratio ([6dfac27](https://github.com/perfect-panel/ppanel-web/commit/6dfac27))
+* Update platform handling in Content component to ensure available platforms are correctly filtered and displayed ([1dde708](https://github.com/perfect-panel/ppanel-web/commit/1dde708))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.4.4](https://github.com/perfect-panel/ppanel-web/compare/v1.4.3...v1.4.4) (2025-09-16)
+
+### 🐛 Bug Fixes
+
+- Add minimum value constraint for count and user limit inputs in CouponForm ([6991b69](https://github.com/perfect-panel/ppanel-web/commit/6991b69))
+- Add protocol-related constants, default configurations, field definitions, and validation modes ([d685407](https://github.com/perfect-panel/ppanel-web/commit/d685407))
+- Added the enabled field in the protocol configuration, updated the related type definition and default configuration ([2b0cf9a](https://github.com/perfect-panel/ppanel-web/commit/2b0cf9a))
+- Filter available protocols to exclude disabled ones in NodeForm ([982d288](https://github.com/perfect-panel/ppanel-web/commit/982d288))
+- Refactor key generation logic and update dependencies for ML-KEM-768 integration ([b8f630f](https://github.com/perfect-panel/ppanel-web/commit/b8f630f))
 
 <a name="readme-top"></a>
 

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -81,16 +80,7 @@ export default function CouponForm<T extends Record<string, any>>({
 
   const type = form.watch('type');
 
-  const { data: subscribe } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.Subscribe[];
-    },
-  });
+  const { subscribes } = useSubscribe();
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -247,9 +237,9 @@ export default function CouponForm<T extends Record<string, any>>({
                         onChange={(value) => {
                           form.setValue(field.name, value);
                         }}
-                        options={subscribe?.map((item: API.Subscribe) => ({
-                          value: item.id,
-                          label: item.name,
+                        options={subscribes?.map((item) => ({
+                          value: item.id!,
+                          label: item.name!,
                         }))}
                       />
                     </FormControl>

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

@@ -9,9 +9,8 @@ import {
   getCouponList,
   updateCoupon,
 } from '@/services/admin/coupon';
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { formatDate } from '@/utils/common';
-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';
@@ -24,16 +23,7 @@ import CouponForm from './coupon-form';
 export default function Page() {
   const t = useTranslations('coupon');
   const [loading, setLoading] = useState(false);
-  const { data } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { subscribes } = useSubscribe();
   const ref = useRef<ProTableActions>(null);
   return (
     <ProTable<API.Coupon, { group_id: number; query: string }>
@@ -67,8 +57,8 @@ export default function Page() {
         {
           key: 'subscribe',
           placeholder: t('subscribe'),
-          options: data?.map((item) => ({
-            label: item.name,
+          options: subscribes?.map((item) => ({
+            label: item.name!,
             value: String(item.id),
           })),
         },

apps/admin/app/dashboard/log/server-traffic/page.tsx

@@ -2,8 +2,8 @@
 
 import { ProTable } from '@/components/pro-table';
 import { filterServerTrafficLog } from '@/services/admin/log';
-import { filterServerList } from '@/services/admin/server';
-import { useQuery } from '@tanstack/react-query';
+import { useServer } from '@/store/server';
+import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { formatBytes } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
@@ -13,20 +13,10 @@ import { useSearchParams } from 'next/navigation';
 export default function ServerTrafficLogPage() {
   const t = useTranslations('log');
   const sp = useSearchParams();
+  const { getServerName, getServerById } = useServer();
 
   const today = new Date().toISOString().split('T')[0];
 
-  const { data: servers = [] } = useQuery({
-    queryKey: ['filterServerListAll'],
-    queryFn: async () => {
-      const { data } = await filterServerList({ page: 1, size: 999999999 });
-      return data?.data?.list || [];
-    },
-  });
-
-  const getServerName = (id?: number) =>
-    id ? (servers.find((s) => s.id === id)?.name ?? `Server ${id}`) : 'Unknown';
-
   const initialFilters = {
     date: sp.get('date') || today,
     server_id: sp.get('server_id') ? Number(sp.get('server_id')) : undefined,
@@ -50,11 +40,17 @@ export default function ServerTrafficLogPage() {
         {
           accessorKey: 'server_id',
           header: t('column.server'),
-          cell: ({ row }) => (
-            <span>
-              {getServerName(row.original.server_id)} ({row.original.server_id})
-            </span>
-          ),
+          cell: ({ row }) => {
+            const server = getServerById(row.original.server_id);
+            const ratio = server?.ratio || 1;
+            return (
+              <div className='flex items-center gap-2'>
+                <Badge>{row.original.server_id}</Badge>
+                <span>{getServerName(row.original.server_id)}</span>
+                <Badge variant='outline'>{ratio}X</Badge>
+              </div>
+            );
+          },
         },
         {
           accessorKey: 'upload',

apps/admin/app/dashboard/log/traffic-details/page.tsx

@@ -3,9 +3,8 @@
 import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
 import { ProTable } from '@/components/pro-table';
 import { filterTrafficLogDetails } from '@/services/admin/log';
-import { filterServerList } from '@/services/admin/server';
+import { useServer } from '@/store/server';
 import { formatDate } from '@/utils/common';
-import { useQuery } from '@tanstack/react-query';
 import { formatBytes } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
@@ -13,20 +12,10 @@ import { useSearchParams } from 'next/navigation';
 export default function TrafficDetailsPage() {
   const t = useTranslations('log');
   const sp = useSearchParams();
+  const { getServerName } = useServer();
 
   const today = new Date().toISOString().split('T')[0];
 
-  const { data: servers = [] } = useQuery({
-    queryKey: ['filterServerListAll'],
-    queryFn: async () => {
-      const { data } = await filterServerList({ page: 1, size: 999999999 });
-      return data?.data?.list || [];
-    },
-  });
-
-  const getServerName = (id?: number) =>
-    id ? (servers.find((s) => s.id === id)?.name ?? `Server ${id}`) : 'Unknown';
-
   const initialFilters = {
     date: sp.get('date') || today,
     server_id: sp.get('server_id') ? Number(sp.get('server_id')) : undefined,

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

@@ -2,9 +2,8 @@
 
 import { Display } from '@/components/display';
 import { createQuotaTask, queryQuotaTaskPreCount } from '@/services/admin/marketing';
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -73,17 +72,7 @@ export default function QuotaBroadcastForm() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [open, setOpen] = useState(false);
 
-  // Get subscribe list
-  const { data: subscribeList } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 999999999,
-      });
-      return data.data?.list as API.SubscribeItem[];
-    },
-  });
+  const { subscribes } = useSubscribe();
 
   // Calculate recipient count
   const calculateRecipients = async () => {
@@ -217,21 +206,19 @@ export default function QuotaBroadcastForm() {
                         value={field.value || []}
                         onChange={field.onChange}
                         placeholder={t('pleaseSelectSubscribers')}
-                        options={
-                          subscribeList?.map((subscribe) => ({
-                            value: subscribe.id!,
-                            label: subscribe.name!,
-                            children: (
-                              <div>
-                                <div>{subscribe.name}</div>
-                                <div className='text-muted-foreground text-xs'>
-                                  <Display type='traffic' value={subscribe.traffic || 0} /> /{' '}
-                                  <Display type='currency' value={subscribe.unit_price || 0} />
-                                </div>
+                        options={subscribes?.map((subscribe) => ({
+                          value: subscribe.id!,
+                          label: subscribe.name!,
+                          children: (
+                            <div>
+                              <div>{subscribe.name}</div>
+                              <div className='text-muted-foreground text-xs'>
+                                <Display type='traffic' value={subscribe.traffic || 0} /> /{' '}
+                                <Display type='currency' value={subscribe.unit_price || 0} />
                               </div>
-                            ),
-                          })) || []
-                        }
+                            </div>
+                          ),
+                        }))}
                       />
                     </FormControl>
                     <FormMessage />

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

@@ -3,9 +3,8 @@
 import { Display } from '@/components/display';
 import { ProTable } from '@/components/pro-table';
 import { queryQuotaTaskList } from '@/services/admin/marketing';
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { formatDate } from '@/utils/common';
-import { useQuery } from '@tanstack/react-query';
 import { Badge } from '@workspace/ui/components/badge';
 import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import {
@@ -23,21 +22,9 @@ export default function QuotaTaskManager() {
   const t = useTranslations('marketing');
   const [open, setOpen] = useState(false);
 
-  // Get subscribe list to show subscription names
-  const { data: subscribeList } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 999999999,
-      });
-      return data.data?.list as API.SubscribeItem[];
-    },
-  });
-
-  // Create a map for quick lookup of subscription names
+  const { subscribes } = useSubscribe();
   const subscribeMap =
-    subscribeList?.reduce(
+    subscribes?.reduce(
       (acc, subscribe) => {
         acc[subscribe.id!] = subscribe.name!;
         return acc;

apps/admin/app/dashboard/nodes/node-form.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { filterServerList, queryNodeTag } from '@/services/admin/server';
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -40,8 +40,6 @@ export type ProtocolName =
   | 'tuic'
   | 'anytls';
 
-type ServerRow = API.Server;
-
 const buildSchema = (t: ReturnType<typeof useTranslations>) =>
   z.object({
     name: z.string().trim().min(1, t('errors.nameRequired')),
@@ -103,38 +101,12 @@ export default function NodeForm(props: {
 
   const serverId = form.watch('server_id');
 
-  const { data } = useQuery({
-    enabled: open,
-    queryKey: ['filterServerListAll'],
-    queryFn: async () => {
-      const { data } = await filterServerList({ page: 1, size: 999999999 });
-      return data?.data?.list || [];
-    },
-  });
-  const servers: ServerRow[] = data as ServerRow[];
+  const { servers, getAvailableProtocols } = useServer();
+  const { tags } = useNode();
 
-  const { data: tagsData } = useQuery({
-    enabled: open,
-    queryKey: ['queryNodeTag'],
-    queryFn: async () => {
-      const { data } = await queryNodeTag();
-      return data?.data?.tags || [];
-    },
-  });
-  const existingTags: string[] = tagsData as string[];
+  const existingTags: string[] = tags || [];
 
-  const currentServer = useMemo(() => servers?.find((s) => s.id === serverId), [servers, serverId]);
-
-  const availableProtocols = useMemo(() => {
-    if (!currentServer?.protocols) return [];
-
-    return currentServer.protocols
-      .filter((p) => p.enable !== false)
-      .map((p) => ({
-        protocol: p.type,
-        port: p.port,
-      }));
-  }, [currentServer]);
+  const availableProtocols = getAvailableProtocols(serverId);
 
   useEffect(() => {
     if (initialValues) {
@@ -176,12 +148,11 @@ export default function NodeForm(props: {
       fieldsToFill.push('address');
     }
 
-    const protocols =
-      (selectedServer.protocols as Array<{ type: ProtocolName; port?: number }>) || [];
+    const protocols = getAvailableProtocols(id);
     const firstProtocol = protocols[0];
 
     if (firstProtocol && (!currentValues.protocol || autoFilledFields.has('protocol'))) {
-      form.setValue('protocol', firstProtocol.type, { shouldDirty: false });
+      form.setValue('protocol', firstProtocol.protocol, { shouldDirty: false });
       fieldsToFill.push('protocol');
 
       if (!currentValues.port || currentValues.port === 0 || autoFilledFields.has('port')) {
@@ -203,7 +174,7 @@ export default function NodeForm(props: {
     const protocol = (nextProto || '') as ProtocolName | '';
     form.setValue('protocol', protocol);
 
-    if (!protocol || !currentServer) {
+    if (!protocol || !serverId) {
       removeAutoFilledField('protocol');
       return;
     }
@@ -214,9 +185,7 @@ export default function NodeForm(props: {
     removeAutoFilledField('protocol');
 
     if (!currentValues.port || currentValues.port === 0 || isPortAutoFilled) {
-      const protocolData = (
-        currentServer.protocols as Array<{ type: ProtocolName; port?: number }>
-      )?.find((p) => p.type === protocol);
+      const protocolData = availableProtocols.find((p) => p.protocol === protocol);
 
       if (protocolData) {
         const port = protocolData.port || 0;

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

@@ -5,12 +5,12 @@ import {
   createNode,
   deleteNode,
   filterNodeList,
-  filterServerList,
   resetSortWithNode,
   toggleNodeStatus,
   updateNode,
 } from '@/services/admin/server';
-import { useQuery } from '@tanstack/react-query';
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { Switch } from '@workspace/ui/components/switch';
@@ -25,24 +25,9 @@ export default function NodesPage() {
   const ref = useRef<ProTableActions>(null);
   const [loading, setLoading] = useState(false);
 
-  const { data: servers = [] } = useQuery({
-    queryKey: ['filterServerListAll'],
-    queryFn: async () => {
-      const { data } = await filterServerList({ page: 1, size: 999999999 });
-      return data?.data?.list || [];
-    },
-  });
-
-  const getServerName = (id?: number) =>
-    id ? (servers.find((s) => s.id === id)?.name ?? `#${id}`) : '—';
-  const getServerOriginAddr = (id?: number) =>
-    id ? (servers.find((s) => s.id === id)?.address ?? '—') : '—';
-  const getProtocolOriginPort = (id?: number, proto?: string) => {
-    if (!id || !proto) return '—';
-    const hit = servers.find((s) => s.id === id)?.protocols?.find((p) => (p as any).type === proto);
-    const p = (hit as any)?.port as number | undefined;
-    return typeof p === 'number' ? String(p) : '—';
-  };
+  // Use our zustand store for server data
+  const { getServerName, getServerAddress, getProtocolPort } = useServer();
+  const { fetchNodes, fetchTags } = useNode();
 
   return (
     <ProTable<API.Node, { search: string }>
@@ -69,6 +54,8 @@ export default function NodesPage() {
                 await createNode(body);
                 toast.success(t('created'));
                 ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
                 setLoading(false);
                 return true;
               } catch (e) {
@@ -90,6 +77,8 @@ export default function NodesPage() {
                 await toggleNodeStatus({ id: row.original.id, enable: v });
                 toast.success(v ? t('enabled_on') : t('enabled_off'));
                 ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
               }}
             />
           ),
@@ -106,14 +95,14 @@ export default function NodesPage() {
           id: 'server_id',
           header: t('server'),
           cell: ({ row }) => (
-            <div className='flex flex-wrap gap-2'>
+            <div className='space-y-1'>
               <Badge variant='outline'>
-                {getServerName(row.original.server_id)} ·{' '}
-                {getServerOriginAddr(row.original.server_id)}
+                {getServerName(row.original.server_id)} : {getServerAddress(row.original.server_id)}
               </Badge>
+              <br />
               <Badge variant='outline'>
-                {row.original.protocol || '—'} ·{' '}
-                {getProtocolOriginPort(row.original.server_id, row.original.protocol)}
+                {row.original.protocol || '—'} :{' '}
+                {getProtocolPort(row.original.server_id, row.original.protocol)}
               </Badge>
             </div>
           ),
@@ -163,6 +152,8 @@ export default function NodesPage() {
                 await updateNode(body);
                 toast.success(t('updated'));
                 ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
                 setLoading(false);
                 return true;
               } catch (e) {
@@ -180,6 +171,8 @@ export default function NodesPage() {
               await deleteNode({ id: row.id } as any);
               toast.success(t('deleted'));
               ref.current?.refresh();
+              fetchNodes();
+              fetchTags();
             }}
             cancelText={t('cancel')}
             confirmText={t('confirm')}
@@ -195,6 +188,8 @@ export default function NodesPage() {
               });
               toast.success(t('copied'));
               ref.current?.refresh();
+              fetchNodes();
+              fetchTags();
             }}
           >
             {t('copy')}
@@ -211,6 +206,8 @@ export default function NodesPage() {
                 await Promise.all(rows.map((r) => deleteNode({ id: r.id } as any)));
                 toast.success(t('deleted'));
                 ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
               }}
               cancelText={t('cancel')}
               confirmText={t('confirm')}

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useRef } from 'react';
@@ -8,7 +7,7 @@ import { useRef } from 'react';
 import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
 import { getOrderList, updateOrderStatus } from '@/services/admin/order';
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { formatDate } from '@/utils/common';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
@@ -32,16 +31,7 @@ export default function Page() {
 
   const ref = useRef<ProTableActions>(null);
 
-  const { data: subscribeList } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 999999999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { subscribes, getSubscribeName } = useSubscribe();
 
   const initialFilters = {
     search: sp.get('search') || undefined,
@@ -68,9 +58,7 @@ export default function Page() {
           accessorKey: 'subscribe_id',
           header: t('subscribe'),
           cell: ({ row }) => {
-            const name = subscribeList?.find(
-              (item) => item.id === row.getValue('subscribe_id'),
-            )?.name;
+            const name = getSubscribeName(row.getValue('subscribe_id'));
             const quantity = row.original.quantity;
             return name ? `${name} × ${quantity}` : '';
           },
@@ -186,8 +174,8 @@ export default function Page() {
         {
           key: 'subscribe_id',
           placeholder: `${t('subscribe')}`,
-          options: subscribeList?.map((item) => ({
-            label: item.name,
+          options: subscribes?.map((item) => ({
+            label: item.name!,
             value: String(item.id),
           })),
         },

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

@@ -1,9 +1,5 @@
-import { getTranslations } from 'next-intl/server';
-
 import SubscribeTable from './subscribe-table';
 
 export default async function Page() {
-  const t = await getTranslations('product');
-
   return <SubscribeTable />;
 }

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { filterNodeList, queryNodeTag } from '@/services/admin/server';
+import { useNode } from '@/store/node';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import {
   Accordion,
   AccordionContent,
@@ -229,35 +228,9 @@ export default function SubscribeForm<T extends Record<string, any>>({
     if (bool) setOpen(false);
   }
 
-  const { data: nodes } = useQuery({
-    queryKey: ['filterNodeListAll'],
-    queryFn: async () => {
-      const { data } = await filterNodeList({ page: 1, size: 999999999 });
-      return (data.data?.list || []) as API.Node[];
-    },
-  });
+  const { nodes, getAllAvailableTags, getNodesByTag, getNodesWithoutTags } = useNode();
 
-  const { data: allTagsData } = useQuery({
-    queryKey: ['queryNodeTag'],
-    queryFn: async () => {
-      const { data } = await queryNodeTag();
-      return data?.data?.tags || [];
-    },
-  });
-
-  const nodeExtractedTags = Array.from(
-    new Set(
-      ((nodes as API.Node[]) || [])
-        .flatMap((n) => (Array.isArray(n.tags) ? n.tags : []))
-        .filter(Boolean),
-    ),
-  ) as string[];
-
-  const allAvailableTags = (allTagsData as string[]) || [];
-
-  const tagGroups = Array.from(new Set([...allAvailableTags, ...nodeExtractedTags])).filter(
-    Boolean,
-  );
+  const tagGroups = getAllAvailableTags();
 
   const unit_time = form.watch('unit_time');
 
@@ -806,10 +779,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
                               {tagGroups.map((tag) => {
                                 const value = field.value || [];
                                 const tagId = tag;
-                                const nodesWithTag =
-                                  (nodes as API.Node[])?.filter((n) =>
-                                    (n.tags || []).includes(tag),
-                                  ) || [];
+                                const nodesWithTag = getNodesByTag(tag);
 
                                 return (
                                   <AccordionItem key={tag} value={String(tag)}>
@@ -836,22 +806,20 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                     </AccordionTrigger>
                                     <AccordionContent>
                                       <ul className='space-y-1'>
-                                        {(nodes as API.Node[])
-                                          ?.filter((n) => (n.tags || []).includes(tag))
-                                          ?.map((node) => (
-                                            <li
-                                              key={node.id}
-                                              className='flex items-center justify-between gap-3'
-                                            >
-                                              <span className='flex-1'>{node.name}</span>
-                                              <span className='flex-1'>
-                                                {node.address}:{node.port}
-                                              </span>
-                                              <span className='flex-1 text-right'>
-                                                {node.protocol}
-                                              </span>
-                                            </li>
-                                          ))}
+                                        {getNodesByTag(tag).map((node) => (
+                                          <li
+                                            key={node.id}
+                                            className='flex items-center justify-between gap-3'
+                                          >
+                                            <span className='flex-1'>{node.name}</span>
+                                            <span className='flex-1'>
+                                              {node.address}:{node.port}
+                                            </span>
+                                            <span className='flex-1 text-right'>
+                                              {node.protocol}
+                                            </span>
+                                          </li>
+                                        ))}
                                       </ul>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -872,34 +840,32 @@ export default function SubscribeForm<T extends Record<string, any>>({
                           <FormLabel>{t('form.node')}</FormLabel>
                           <FormControl>
                             <div className='flex flex-col gap-2'>
-                              {(nodes as API.Node[])
-                                ?.filter((item) => (item.tags || []).length === 0)
-                                ?.map((item) => {
-                                  const value = field.value || [];
+                              {getNodesWithoutTags().map((item) => {
+                                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 gap-3'>
-                                        <span className='flex-1'>{item.name}</span>
-                                        <span className='flex-1'>
-                                          {item.address}:{item.port}
-                                        </span>
-                                        <span className='flex-1 text-right'>{item.protocol}</span>
-                                      </Label>
-                                    </div>
-                                  );
-                                })}
+                                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 gap-3'>
+                                      <span className='flex-1'>{item.name}</span>
+                                      <span className='flex-1'>
+                                        {item.address}:{item.port}
+                                      </span>
+                                      <span className='flex-1 text-right'>{item.protocol}</span>
+                                    </Label>
+                                  </div>
+                                );
+                              })}
                             </div>
                           </FormControl>
                           <FormMessage />

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

@@ -10,6 +10,7 @@ import {
   subscribeSort,
   updateSubscribe,
 } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { Switch } from '@workspace/ui/components/switch';
@@ -23,6 +24,7 @@ export default function SubscribeTable() {
   const t = useTranslations('product');
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
+  const { fetchSubscribes } = useSubscribe();
   return (
     <ProTable<API.SubscribeItem, { group_id: number; query: string }>
       action={ref}
@@ -42,6 +44,7 @@ export default function SubscribeTable() {
                 });
                 toast.success(t('createSuccess'));
                 ref.current?.refresh();
+                fetchSubscribes();
                 setLoading(false);
 
                 return true;
@@ -83,6 +86,7 @@ export default function SubscribeTable() {
                     show: checked,
                   } as API.UpdateSubscribeRequest);
                   ref.current?.refresh();
+                  fetchSubscribes();
                 }}
               />
             );
@@ -101,6 +105,7 @@ export default function SubscribeTable() {
                     sell: checked,
                   } as API.UpdateSubscribeRequest);
                   ref.current?.refresh();
+                  fetchSubscribes();
                 }}
               />
             );
@@ -186,6 +191,7 @@ export default function SubscribeTable() {
                 } as API.UpdateSubscribeRequest);
                 toast.success(t('updateSuccess'));
                 ref.current?.refresh();
+                fetchSubscribes();
                 setLoading(false);
                 return true;
               } catch (error) {
@@ -206,6 +212,7 @@ export default function SubscribeTable() {
               });
               toast.success(t('deleteSuccess'));
               ref.current?.refresh();
+              fetchSubscribes();
             }}
             cancelText={t('cancel')}
             confirmText={t('confirm')}
@@ -224,6 +231,7 @@ export default function SubscribeTable() {
                 } as API.CreateSubscribeRequest);
                 toast.success(t('copySuccess'));
                 ref.current?.refresh();
+                fetchSubscribes();
                 setLoading(false);
                 return true;
               } catch (error) {
@@ -248,6 +256,7 @@ export default function SubscribeTable() {
 
               toast.success(t('deleteSuccess'));
               ref.current?.reset();
+              fetchSubscribes();
             }}
             cancelText={t('cancel')}
             confirmText={t('confirm')}

apps/admin/app/dashboard/servers/form-schema/defaults.ts

@@ -91,6 +91,7 @@ export function getProtocolDefaultConfig(proto: ProtocolType) {
     case 'mieru':
       return {
         type: 'mieru',
+        enable: false,
         port: null,
         multiplex: 'none',
         transport: 'tcp',
@@ -98,6 +99,7 @@ export function getProtocolDefaultConfig(proto: ProtocolType) {
     case 'anytls':
       return {
         type: 'anytls',
+        enable: false,
         port: null,
         security: 'tls',
         padding_scheme: null,

apps/admin/app/dashboard/servers/form-schema/index.ts

@@ -18,7 +18,7 @@ export {
 } from './constants';
 
 // Re-export all types
-export type { FieldConfig, ProtocolType, ServerFormValues } from './types';
+export type { FieldConfig, ProtocolType } from './types';
 
 // Re-export all schemas
 export { formSchema, protocolApiScheme } from './schemas';

apps/admin/app/dashboard/servers/form-schema/types.ts

@@ -1,6 +1,4 @@
-import { z } from 'zod';
 import { protocols } from './constants';
-import { formSchema } from './schemas';
 
 export type FieldConfig = {
   name: string;
@@ -22,6 +20,4 @@ export type FieldConfig = {
   gridSpan?: 1 | 2;
 };
 
-export type ServerFormValues = z.infer<typeof formSchema>;
-
 export type ProtocolType = (typeof protocols)[number];

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

@@ -1,5 +1,5 @@
 'use client';
-// Online users detail moved to separate component
+
 import { ProTable, ProTableActions } from '@/components/pro-table';
 import {
   createServer,
@@ -10,6 +10,8 @@ import {
   resetSortWithServer,
   updateServer,
 } from '@/services/admin/server';
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
 import { useQuery } from '@tanstack/react-query';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
@@ -23,18 +25,6 @@ import OnlineUsersCell from './online-users-cell';
 import ServerConfig from './server-config';
 import ServerForm from './server-form';
 
-type ProtocolName = 'shadowsocks' | 'vmess' | 'vless' | 'trojan' | 'hysteria2' | 'tuic' | 'anytls';
-
-const PROTOCOL_COLORS: Record<ProtocolName, string> = {
-  shadowsocks: 'bg-green-500',
-  vmess: 'bg-rose-500',
-  vless: 'bg-blue-500',
-  trojan: 'bg-yellow-500',
-  hysteria2: 'bg-purple-500',
-  tuic: 'bg-cyan-500',
-  anytls: 'bg-gray-500',
-};
-
 function PctBar({ value }: { value: number }) {
   const v = value.toFixed(2);
   return (
@@ -69,6 +59,8 @@ function RegionIpCell({
 
 export default function ServersPage() {
   const t = useTranslations('servers');
+  const { isServerReferencedByNodes } = useNode();
+  const { fetchServers } = useServer();
 
   const [loading, setLoading] = useState(false);
   const [migrating, setMigrating] = useState(false);
@@ -129,6 +121,7 @@ export default function ServersPage() {
                     await createServer(values as unknown as API.CreateServerRequest);
                     toast.success(t('created'));
                     ref.current?.refresh();
+                    fetchServers();
                     setLoading(false);
                     return true;
                   } catch (e) {
@@ -163,23 +156,16 @@ export default function ServersPage() {
             accessorKey: 'protocols',
             header: t('protocols'),
             cell: ({ row }) => {
-              const list = (row.original.protocols || []) as API.Protocol[];
-              if (!list.length) return t('noData');
+              const list = row.original.protocols.filter(
+                (p) => p.enable !== false,
+              ) as API.Protocol[];
+              if (!list.length) return '—';
               return (
                 <div className='flex flex-wrap gap-1'>
                   {list.map((p, idx) => {
-                    const proto = ((p as any)?.type || '') as ProtocolName | '';
-                    if (!proto) return null;
-                    const color = PROTOCOL_COLORS[proto as ProtocolName];
-                    const port = (p as any)?.port as number | undefined;
-                    const label = `${proto}${port ? ` (${port})` : ''}`;
                     return (
-                      <Badge
-                        key={idx}
-                        variant='outline'
-                        className={cn('text-primary-foreground', color)}
-                      >
-                        {label}
+                      <Badge key={idx} variant='outline'>
+                        {p.type} ({p.port})
                       </Badge>
                     );
                   })}
@@ -272,6 +258,7 @@ export default function ServersPage() {
                   });
                   toast.success(t('updated'));
                   ref.current?.refresh();
+                  fetchServers();
                   setLoading(false);
                   return true;
                 } catch (e) {
@@ -282,13 +269,18 @@ export default function ServersPage() {
             />,
             <ConfirmButton
               key='delete'
-              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              trigger={
+                <Button variant='destructive' disabled={isServerReferencedByNodes(row.id)}>
+                  {t('delete')}
+                </Button>
+              }
               title={t('confirmDeleteTitle')}
               description={t('confirmDeleteDesc')}
               onConfirm={async () => {
                 await deleteServer({ id: row.id } as any);
                 toast.success(t('deleted'));
                 ref.current?.refresh();
+                fetchServers();
               }}
               cancelText={t('cancel')}
               confirmText={t('confirm')}
@@ -311,6 +303,7 @@ export default function ServersPage() {
                 await createServer(body);
                 toast.success(t('copied'));
                 ref.current?.refresh();
+                fetchServers();
                 setLoading(false);
               }}
             >
@@ -318,16 +311,22 @@ export default function ServersPage() {
             </Button>,
           ],
           batchRender(rows) {
+            const hasReferencedServers = rows.some((row) => isServerReferencedByNodes(row.id));
             return [
               <ConfirmButton
                 key='delete'
-                trigger={<Button variant='destructive'>{t('delete')}</Button>}
+                trigger={
+                  <Button variant='destructive' disabled={hasReferencedServers}>
+                    {t('delete')}
+                  </Button>
+                }
                 title={t('confirmDeleteTitle')}
                 description={t('confirmDeleteDesc')}
                 onConfirm={async () => {
                   await Promise.all(rows.map((r) => deleteServer({ id: r.id })));
                   toast.success(t('deleted'));
                   ref.current?.refresh();
+                  fetchServers();
                 }}
                 cancelText={t('cancel')}
                 confirmText={t('confirm')}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useNode } from '@/store/node';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Accordion,
@@ -48,7 +49,6 @@ import {
   getProtocolDefaultConfig,
   PROTOCOL_FIELDS,
   protocols as PROTOCOLS,
-  ServerFormValues,
 } from './form-schema';
 
 function DynamicField({
@@ -321,14 +321,16 @@ export default function ServerForm(props: {
   trigger: string;
   title: string;
   loading?: boolean;
-  initialValues?: Partial<ServerFormValues>;
-  onSubmit: (values: ServerFormValues) => Promise<boolean> | boolean;
+  initialValues?: Partial<API.Server>;
+  onSubmit: (values: Partial<API.Server>) => Promise<boolean> | boolean;
 }) {
   const { trigger, title, loading, initialValues, onSubmit } = props;
   const t = useTranslations('servers');
   const [open, setOpen] = useState(false);
   const [accordionValue, setAccordionValue] = useState<string>();
 
+  const { isProtocolUsedInNodes } = useNode();
+
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -337,7 +339,7 @@ export default function ServerForm(props: {
       country: '',
       city: '',
       ratio: 1,
-      protocols: [],
+      protocols: [] as any[],
       ...initialValues,
     },
   });
@@ -515,6 +517,7 @@ export default function ServerForm(props: {
                     PROTOCOLS.findIndex((t) => t === type),
                   );
                   const current = (protocolsValues[i] || {}) as Record<string, any>;
+                  const isEnabled = current?.enable !== false;
                   const fields = PROTOCOL_FIELDS[type] || [];
                   return (
                     <AccordionItem key={type} value={type} className='mb-2 rounded-lg border'>
@@ -539,16 +542,20 @@ export default function ServerForm(props: {
                               <span
                                 className={cn(
                                   'text-xs',
-                                  current.enable ? 'text-green-500' : 'text-muted-foreground',
+                                  isEnabled ? 'text-green-500' : 'text-muted-foreground',
                                 )}
                               >
-                                {current.enable ? t('enabled') : t('disabled')}
+                                {isEnabled ? t('enabled') : t('disabled')}
                               </span>
                             </div>
                           </div>
                           <Switch
                             className='mr-2'
-                            checked={!!current.enable}
+                            checked={!!isEnabled}
+                            disabled={Boolean(
+                              initialValues?.id &&
+                                isProtocolUsedInNodes(initialValues?.id || 0, type),
+                            )}
                             onCheckedChange={(checked) => {
                               form.setValue(`protocols.${i}.enable`, checked);
                             }}

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

@@ -56,6 +56,7 @@ import { useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { subscribeSchema } from './schema';
 import { TemplatePreview } from './template-preview';
 
 const createClientFormSchema = (t: any) =>
@@ -662,137 +663,7 @@ export function ProtocolForm() {
                           <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' },
-                                      },
-                                      Sort: { type: 'number', description: 'Node sort order' },
-                                      // 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',
-                                    },
-                                  },
-                                },
-                              }}
+                              schema={subscribeSchema}
                               enableSprig
                               value={field.value || ''}
                               onChange={(value) => field.onChange(value)}

apps/admin/app/dashboard/subscribe/schema.ts

@@ -0,0 +1,225 @@
+export const subscribeSchema = {
+  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' },
+        },
+        Sort: { type: 'number', description: 'Node sort order' },
+        // 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")',
+        },
+        // Hysteria2 additional options
+        UpMbps: {
+          type: 'number',
+          description: 'Upload bandwidth in Mbps',
+        },
+        DownMbps: {
+          type: 'number',
+          description: 'Download bandwidth in Mbps',
+        },
+        // VLESS encryption options
+        Encryption: {
+          type: 'string',
+          description: 'Encryption type for VLESS',
+        },
+        EncryptionMode: {
+          type: 'string',
+          description: 'Encryption mode (e.g., "native", "xorpub", "random")',
+        },
+        EncryptionRtt: {
+          type: 'string',
+          description: 'Encryption RTT (e.g., "0rtt", "1rtt")',
+        },
+        EncryptionTicket: {
+          type: 'string',
+          description: 'Encryption ticket',
+        },
+        EncryptionServerPadding: {
+          type: 'string',
+          description: 'Server padding for encryption',
+        },
+        EncryptionClientPadding: {
+          type: 'string',
+          description: 'Client padding for encryption',
+        },
+        EncryptionPassword: {
+          type: 'string',
+          description: 'Encryption password',
+        },
+        EncryptionPrivateKey: {
+          type: 'string',
+          description: 'Private key for encryption',
+        },
+        // XHTTP options
+        XhttpMode: {
+          type: 'string',
+          description: 'XHTTP mode (e.g., "auto", "packet-up", "stream-up", "stream-one")',
+        },
+        XhttpExtra: {
+          type: 'string',
+          description: 'XHTTP extra parameters',
+        },
+        // Shadowsocks obfs options (combined with Hysteria2 obfs)
+        ObfsHost: {
+          type: 'string',
+          description: 'Obfuscation host',
+        },
+        ObfsPath: {
+          type: 'string',
+          description: 'Obfuscation path',
+        },
+        // Shadowsocks cipher
+        Cipher: {
+          type: 'string',
+          description: 'Shadowsocks cipher method',
+        },
+        // AnyTLS options
+        PaddingScheme: {
+          type: 'string',
+          description: 'Padding scheme for AnyTLS',
+        },
+        // Mieru options
+        Multiplex: {
+          type: 'string',
+          description: 'Multiplex level (e.g., "none", "low", "middle", "high")',
+        },
+        // General protocol field
+        Enable: {
+          type: 'boolean',
+          description: 'Whether this protocol is enabled',
+        },
+        // UUID for vmess/vless
+        UUID: {
+          type: 'string',
+          description: 'User UUID for vmess/vless protocols',
+        },
+        // Alternative ID for vmess
+        AlterId: {
+          type: 'number',
+          description: 'Alternative ID for vmess (deprecated)',
+        },
+        // Password for trojan/tuic
+        Password: {
+          type: 'string',
+          description: 'Password for authentication',
+        },
+      },
+    },
+  },
+  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',
+      },
+    },
+  },
+};

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

@@ -3,7 +3,13 @@
 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 {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
 import { MonacoEditor } from '@workspace/ui/custom-components/editor/monaco-editor';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
@@ -68,36 +74,33 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
     }
   };
 
-  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}>
-        <SheetHeader>
-          <SheetTitle></SheetTitle>
-        </SheetHeader>
-        <SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'>
-          {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>
-          ) : (
-            <MonacoEditor
-              title={t('title')}
-              value={getDisplayContent()}
-              language={mapLanguage(output_format)}
-              readOnly
-            />
-          )}
-        </SheetContent>
-      </Sheet>
-    </>
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant='ghost'>
+          <Icon icon='mdi:eye' className='h-4 w-4' />
+          {t('preview')}
+        </Button>
+      </SheetTrigger>
+      <SheetHeader>
+        <SheetTitle></SheetTitle>
+      </SheetHeader>
+      <SheetContent className='w-[800px] max-w-[90vw] pt-10 md:max-w-screen-md'>
+        {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>
+        ) : (
+          <MonacoEditor
+            title={t('title')}
+            value={getDisplayContent()}
+            language={mapLanguage(output_format)}
+            showLineNumbers
+            readOnly
+          />
+        )}
+      </SheetContent>
+    </Sheet>
   );
 }

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { getSubscribeList } from '@/services/admin/subscribe';
 import { getRegisterConfig, updateRegisterConfig } from '@/services/admin/system';
+import { useSubscribe } from '@/store/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
@@ -61,17 +61,7 @@ export default function RegisterConfig() {
     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 { subscribes } = useSubscribe();
 
   const form = useForm<RegisterFormData>({
     resolver: zodResolver(registerSchema),
@@ -268,12 +258,10 @@ export default function RegisterConfig() {
                                           field.onChange(value);
                                         }
                                       }}
-                                      options={
-                                        subscribe?.map((item) => ({
-                                          label: item.name,
-                                          value: item.id,
-                                        })) || []
-                                      }
+                                      options={subscribes?.map((item) => ({
+                                        label: item.name!,
+                                        value: item.id!,
+                                      }))}
                                       className='bg-secondary w-32 rounded-r-none'
                                     />
                                   )}

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

@@ -2,7 +2,6 @@
 
 import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
-import { getSubscribeList } from '@/services/admin/subscribe';
 import {
   createUser,
   deleteUser,
@@ -10,6 +9,7 @@ import {
   getUserList,
   updateUserBasicInfo,
 } from '@/services/admin/user';
+import { useSubscribe } from '@/store/subscribe';
 import { formatDate } from '@/utils/common';
 import { useQuery } from '@tanstack/react-query';
 import { Badge } from '@workspace/ui/components/badge';
@@ -49,16 +49,7 @@ export default function Page() {
   const ref = useRef<ProTableActions>(null);
   const sp = useSearchParams();
 
-  const { data: subscribeList } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { subscribes } = useSubscribe();
 
   const initialFilters = {
     search: sp.get('search') || undefined,
@@ -194,9 +185,9 @@ export default function Page() {
         {
           key: 'subscribe_id',
           placeholder: t('subscription'),
-          options: subscribeList?.map((item) => ({
-            label: item.name,
-            value: String(item.id),
+          options: subscribes?.map((item) => ({
+            label: item.name!,
+            value: String(item.id!),
           })),
         },
         {

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Form,
@@ -74,16 +73,7 @@ export function SubscriptionForm({ trigger, title, loading, initialData, onSubmi
     }
   };
 
-  const { data: subscribe } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.Subscribe[];
-    },
-  });
+  const { subscribes } = useSubscribe();
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -117,9 +107,9 @@ export function SubscriptionForm({ trigger, title, loading, initialData, onSubmi
                         onChange={(value) => {
                           form.setValue(field.name, value);
                         }}
-                        options={subscribe?.map((item: API.Subscribe) => ({
-                          value: item.id,
-                          label: item.name,
+                        options={subscribes?.map((item) => ({
+                          value: item.id!,
+                          label: item.name!,
                         }))}
                       />
                     </FormControl>

apps/admin/store/node.ts

@@ -0,0 +1,145 @@
+import { filterNodeList, queryNodeTag } from '@/services/admin/server';
+import { create } from 'zustand';
+
+interface NodeState {
+  // Data
+  nodes: API.Node[];
+  tags: string[];
+
+  // Loading states
+  loading: boolean;
+  loadingTags: boolean;
+  loaded: boolean;
+  loadedTags: boolean;
+
+  // Actions
+  fetchNodes: () => Promise<void>;
+  fetchTags: () => Promise<void>;
+
+  // Getters
+  getNodeById: (nodeId: number) => API.Node | undefined;
+  isProtocolUsedInNodes: (serverId: number, protocolType: string) => boolean;
+  isServerReferencedByNodes: (serverId: number) => boolean;
+  getNodesByTag: (tag: string) => API.Node[];
+  getNodesWithoutTags: () => API.Node[];
+  getNodeTags: () => string[];
+  getAllAvailableTags: () => string[];
+}
+
+export const useNodeStore = create<NodeState>((set, get) => ({
+  // Initial state
+  nodes: [],
+  tags: [],
+  loading: false,
+  loadingTags: false,
+  loaded: false,
+  loadedTags: false,
+
+  // Actions
+  fetchNodes: async () => {
+    if (get().loading) return;
+
+    set({ loading: true });
+    try {
+      const { data } = await filterNodeList({ page: 1, size: 999999999 });
+      set({
+        nodes: data?.data?.list || [],
+        loaded: true,
+      });
+    } catch (error) {
+      // Handle error silently
+      set({ loaded: true });
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  fetchTags: async () => {
+    if (get().loadingTags) return;
+
+    set({ loadingTags: true });
+    try {
+      const { data } = await queryNodeTag();
+      set({
+        tags: data?.data?.tags || [],
+        loadedTags: true,
+      });
+    } catch (error) {
+      // Handle error silently
+      set({ loadedTags: true });
+    } finally {
+      set({ loadingTags: false });
+    }
+  },
+
+  // Getters
+  getNodeById: (nodeId: number) => {
+    return get().nodes.find((n) => n.id === nodeId);
+  },
+
+  isProtocolUsedInNodes: (serverId: number, protocolType: string) => {
+    return get().nodes.some(
+      (node) => node.server_id === serverId && node.protocol === protocolType,
+    );
+  },
+
+  isServerReferencedByNodes: (serverId: number) => {
+    return get().nodes.some((node) => node.server_id === serverId);
+  },
+
+  getNodesByTag: (tag: string) => {
+    return get().nodes.filter((node) => (node.tags || []).includes(tag));
+  },
+
+  getNodesWithoutTags: () => {
+    return get().nodes.filter((node) => (node.tags || []).length === 0);
+  },
+
+  getNodeTags: () => {
+    return Array.from(
+      new Set(
+        get()
+          .nodes.flatMap((node) => (Array.isArray(node.tags) ? node.tags : []))
+          .filter(Boolean),
+      ),
+    ) as string[];
+  },
+
+  getAllAvailableTags: () => {
+    const nodeExtractedTags = get().getNodeTags();
+    const allApiTags = get().tags;
+    return Array.from(new Set([...allApiTags, ...nodeExtractedTags])).filter(Boolean);
+  },
+}));
+
+export const useNode = () => {
+  const store = useNodeStore();
+
+  // Auto-fetch nodes and tags
+  if (!store.loaded && !store.loading) {
+    store.fetchNodes();
+  }
+  if (!store.loadedTags && !store.loadingTags) {
+    store.fetchTags();
+  }
+
+  return {
+    nodes: store.nodes,
+    tags: store.tags,
+    loading: store.loading,
+    loadingTags: store.loadingTags,
+    loaded: store.loaded,
+    loadedTags: store.loadedTags,
+    fetchNodes: store.fetchNodes,
+    fetchTags: store.fetchTags,
+    getNodeById: store.getNodeById,
+    isProtocolUsedInNodes: store.isProtocolUsedInNodes,
+    isServerReferencedByNodes: store.isServerReferencedByNodes,
+    getNodesByTag: store.getNodesByTag,
+    getNodesWithoutTags: store.getNodesWithoutTags,
+    getNodeTags: store.getNodeTags,
+    getAllAvailableTags: store.getAllAvailableTags,
+  };
+};
+
+export default useNodeStore;

apps/admin/store/server.ts

@@ -0,0 +1,111 @@
+import { filterServerList } from '@/services/admin/server';
+import { create } from 'zustand';
+
+interface ServerState {
+  // Data
+  servers: API.Server[];
+
+  // Loading states
+  loading: boolean;
+  loaded: boolean;
+
+  // Actions
+  fetchServers: () => Promise<void>;
+
+  // Getters
+  getServerById: (serverId: number) => API.Server | undefined;
+  getServerName: (serverId?: number) => string;
+  getServerAddress: (serverId?: number) => string;
+  getServerEnabledProtocols: (serverId: number) => API.Protocol[];
+  getProtocolPort: (serverId?: number, protocol?: string) => string;
+  getAvailableProtocols: (serverId?: number) => Array<{ protocol: string; port: number }>;
+}
+
+export const useServerStore = create<ServerState>((set, get) => ({
+  // Initial state
+  servers: [],
+  loading: false,
+  loaded: false,
+
+  // Actions
+  fetchServers: async () => {
+    if (get().loading) return;
+
+    set({ loading: true });
+    try {
+      const { data } = await filterServerList({ page: 1, size: 999999999 });
+      set({
+        servers: data?.data?.list || [],
+        loaded: true,
+      });
+    } catch (error) {
+      // Handle error silently
+      set({ loaded: true });
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  // Getters
+  getServerById: (serverId: number) => {
+    return get().servers.find((s) => s.id === serverId);
+  },
+
+  getServerName: (serverId?: number) => {
+    if (!serverId) return '—';
+    const server = get().servers.find((s) => s.id === serverId);
+    return server?.name ?? `#${serverId}`;
+  },
+
+  getServerAddress: (serverId?: number) => {
+    if (!serverId) return '—';
+    const server = get().servers.find((s) => s.id === serverId);
+    return server?.address ?? '—';
+  },
+
+  getServerEnabledProtocols: (serverId: number) => {
+    const server = get().servers.find((s) => s.id === serverId);
+    return server?.protocols?.filter((p) => p.enable !== false) || [];
+  },
+
+  getProtocolPort: (serverId?: number, protocol?: string) => {
+    if (!serverId || !protocol) return '—';
+    const enabledProtocols = get().getServerEnabledProtocols(serverId);
+    const protocolConfig = enabledProtocols.find((p) => p.type === protocol);
+    return protocolConfig?.port ? String(protocolConfig.port) : '—';
+  },
+
+  getAvailableProtocols: (serverId?: number) => {
+    if (!serverId) return [];
+    return get()
+      .getServerEnabledProtocols(serverId)
+      .map((p) => ({
+        protocol: p.type,
+        port: p.port,
+      }));
+  },
+}));
+
+export const useServer = () => {
+  const store = useServerStore();
+
+  // Auto-fetch servers
+  if (!store.loaded && !store.loading) {
+    store.fetchServers();
+  }
+
+  return {
+    servers: store.servers,
+    loading: store.loading,
+    loaded: store.loaded,
+    fetchServers: store.fetchServers,
+    getServerById: store.getServerById,
+    getServerName: store.getServerName,
+    getServerAddress: store.getServerAddress,
+    getServerEnabledProtocols: store.getServerEnabledProtocols,
+    getProtocolPort: store.getProtocolPort,
+    getAvailableProtocols: store.getAvailableProtocols,
+  };
+};
+
+export default useServerStore;

apps/admin/store/subscribe.ts

@@ -0,0 +1,75 @@
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { create } from 'zustand';
+
+interface SubscribeState {
+  // Data
+  subscribes: API.SubscribeItem[];
+
+  // Loading states
+  loading: boolean;
+  loaded: boolean;
+
+  // Actions
+  fetchSubscribes: () => Promise<void>;
+
+  // Getters
+  getSubscribeName: (subscribeId?: number) => string;
+  getSubscribeById: (subscribeId: number) => API.SubscribeItem | undefined;
+}
+
+export const useSubscribeStore = create<SubscribeState>((set, get) => ({
+  // Initial state
+  subscribes: [],
+  loading: false,
+  loaded: false,
+
+  // Actions
+  fetchSubscribes: async () => {
+    if (get().loading) return;
+
+    set({ loading: true });
+    try {
+      const { data } = await getSubscribeList({ page: 1, size: 999999999 });
+      set({
+        subscribes: data?.data?.list || [],
+        loaded: true,
+      });
+    } catch (error) {
+      // Handle error silently
+      set({ loaded: true });
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  // Getters
+  getSubscribeName: (subscribeId?: number) => {
+    if (!subscribeId) return 'Unknown';
+    const subscribe = get().subscribes.find((s) => s.id === subscribeId);
+    return subscribe?.name ?? `Subscribe ${subscribeId}`;
+  },
+
+  getSubscribeById: (subscribeId: number) => {
+    return get().subscribes.find((s) => s.id === subscribeId);
+  },
+}));
+
+export const useSubscribe = () => {
+  const store = useSubscribeStore();
+
+  // Auto-fetch subscribes
+  if (!store.loaded && !store.loading) {
+    store.fetchSubscribes();
+  }
+
+  return {
+    subscribes: store.subscribes,
+    loading: store.loading,
+    loaded: store.loaded,
+    fetchSubscribes: store.fetchSubscribes,
+    getSubscribeName: store.getSubscribeName,
+    getSubscribeById: store.getSubscribeById,
+  };
+};
+
+export default useSubscribeStore;

apps/user/.env.template

@@ -11,6 +11,9 @@ NEXT_PUBLIC_HOME_USER_COUNT=999
 NEXT_PUBLIC_HOME_SERVER_COUNT=999
 NEXT_PUBLIC_HOME_LOCATION_COUNT=999
 
+# Hidden Tutorial Document
+NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT=false # true or false
+
 # Contact Email
 NEXT_PUBLIC_EMAIL=support@ppanel.dev
 # Community Links

apps/user/app/(main)/(user)/dashboard/content.tsx

@@ -37,7 +37,7 @@ import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
 import { QRCodeCanvas } from 'qrcode.react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { toast } from 'sonner';
 import Subscribe from '../subscribe/page';
@@ -75,9 +75,39 @@ export default function Content() {
       return data.data?.list || [];
     },
   });
-  const [platform, setPlatform] = useState<keyof API.DownloadLink>(
-    getPlatform() === 'macos' ? 'mac' : (getPlatform() as keyof API.DownloadLink),
-  );
+
+  const availablePlatforms = React.useMemo(() => {
+    if (!applications || applications.length === 0) return platforms;
+
+    const platformsSet = new Set<keyof API.DownloadLink>();
+
+    applications.forEach((app) => {
+      if (app.download_link) {
+        platforms.forEach((platform) => {
+          if (app.download_link?.[platform]) {
+            platformsSet.add(platform);
+          }
+        });
+      }
+    });
+
+    return platforms.filter((platform) => platformsSet.has(platform));
+  }, [applications]);
+
+  const [platform, setPlatform] = useState<keyof API.DownloadLink>(() => {
+    const detectedPlatform =
+      getPlatform() === 'macos' ? 'mac' : (getPlatform() as keyof API.DownloadLink);
+    return detectedPlatform;
+  });
+
+  React.useEffect(() => {
+    if (availablePlatforms.length > 0 && !availablePlatforms.includes(platform)) {
+      const firstAvailablePlatform = availablePlatforms[0];
+      if (firstAvailablePlatform) {
+        setPlatform(firstAvailablePlatform);
+      }
+    }
+  }, [availablePlatforms, platform]);
 
   const { data } = useQuery({
     queryKey: ['getStat'],
@@ -122,31 +152,33 @@ export default function Content() {
             </div>
           </div>
           <div className='flex flex-wrap justify-between gap-4'>
-            <Tabs
-              value={platform}
-              onValueChange={(value) => setPlatform(value as keyof API.DownloadLink)}
-              className='w-full max-w-full md:w-auto'
-            >
-              <TabsList className='flex *:flex-auto'>
-                {platforms.map((item) => (
-                  <TabsTrigger value={item} key={item} className='px-1 lg:px-3'>
-                    <Icon
-                      icon={`${
-                        {
-                          windows: 'mdi:microsoft-windows',
-                          mac: 'uil:apple',
-                          linux: 'uil:linux',
-                          ios: 'simple-icons:ios',
-                          android: 'uil:android',
-                          harmony: 'simple-icons:harmonyos',
-                        }[item]
-                      }`}
-                      className='size-5'
-                    />
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </Tabs>
+            {availablePlatforms.length > 0 && (
+              <Tabs
+                value={platform}
+                onValueChange={(value) => setPlatform(value as keyof API.DownloadLink)}
+                className='w-full max-w-full md:w-auto'
+              >
+                <TabsList className='flex *:flex-auto'>
+                  {availablePlatforms.map((item) => (
+                    <TabsTrigger value={item} key={item} className='px-1 lg:px-3'>
+                      <Icon
+                        icon={`${
+                          {
+                            windows: 'mdi:microsoft-windows',
+                            mac: 'uil:apple',
+                            linux: 'uil:linux',
+                            ios: 'simple-icons:ios',
+                            android: 'uil:android',
+                            harmony: 'simple-icons:harmonyos',
+                          }[item]
+                        }`}
+                        className='size-5'
+                      />
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            )}
             {data?.protocol && data?.protocol.length > 1 && (
               <Tabs
                 value={protocol}
@@ -325,9 +357,8 @@ export default function Content() {
                           <div className='grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'>
                             {applications
                               ?.filter((application) => {
-                                if (!application.download_link && !application.scheme) return false;
-                                return (
-                                  !!application.download_link?.[platform] || !!application.scheme
+                                return !!(
+                                  application.download_link?.[platform] && application.scheme
                                 );
                               })
                               .map((application) => {

apps/user/app/(main)/(user)/document/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT } from '@/config/constants';
 import { queryDocumentList } from '@/services/user/document';
 import { getTutorialList } from '@/utils/tutorial';
 import { useQuery } from '@tanstack/react-query';
@@ -31,6 +32,7 @@ export default function Page() {
       const list = await getTutorialList();
       return list.get(locale);
     },
+    enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
   });
 
   return (

apps/user/config/constants.ts

@@ -53,3 +53,6 @@ export const NEXT_PUBLIC_HOME_LOCATION_COUNT = (() => {
   if (isNaN(numberValue)) return 999;
   return numberValue;
 })();
+
+export const NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT =
+  env('NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT') ?? process.env.NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppanel-web",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "private": true,
   "homepage": "https://github.com/perfect-panel/ppanel-web",
   "bugs": {

packages/ui/src/custom-components/editor/monaco-editor.tsx

@@ -168,7 +168,12 @@ export function MonacoEditor({
               />
               {!internalValue?.trim() && placeholder && (
                 <pre
-                  className='text-muted-foreground pointer-events-none absolute left-7 top-4 text-sm'
+                  className={cn(
+                    'text-muted-foreground pointer-events-none absolute left-7 top-4 text-sm',
+                    {
+                      'left-16': showLineNumbers,
+                    },
+                  )}
                   style={{ userSelect: 'none' }}
                 >
                   {placeholder}