fix: 提交短链服务、sentry监控

apps/user/components/CopyShortenedLink/CopyShortenedLink.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+// components/CopyShortenedLink.jsx
+import SvgIcon from '@/components/SvgIcon';
+import useGlobalStore from '@/config/use-global';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/airo-ui/components/button';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { useTranslations } from 'next-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { toast } from 'sonner';
+
+const CopyShortenedLink = ({ className }: { className?: string }) => {
+  const t = useTranslations('affiliate');
+  const { user } = useGlobalStore();
+
+  // 构建长链接，使用用户的唯一标识符作为查询键
+  const target = `${location?.origin}/?invite=${user?.refer_code}`;
+  const queryKey = ['short-url', user?.refer_code];
+
+  const { data: shortUrl } = useQuery({
+    queryKey: queryKey,
+    queryFn: async () => {
+      const response = await fetch('/api/kutt', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ target }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      // 关键步骤：解析 JSON 数据并返回
+      const json = await response.json();
+      console.log('CopyShortened link', json);
+      return json.link ?? null;
+    },
+    enabled: !!user?.refer_code, // 默认不自动执行
+    staleTime: Infinity, // 数据永不过期，除非手动失效
+  });
+  // 渲染组件
+  return (
+    <CopyToClipboard
+      text={shortUrl} // 如果 shortUrl 还没有值，则传递空字符串
+      onCopy={(text, result) => {
+        if (text) {
+          toast.success('text is undefined');
+          return '';
+        }
+        if (result) {
+          toast.success(t('copySuccess'));
+        }
+      }}
+    >
+      {/* 按钮的逻辑 */}
+      <Button variant='link' size='sm' className={cn('h-auto p-0 px-0 [&_svg]:size-5', className)}>
+        <SvgIcon name={'copy'}></SvgIcon>
+      </Button>
+    </CopyToClipboard>
+  );
+};
+
+export default CopyShortenedLink;

apps/user/components/affiliate/index.tsx

@@ -4,8 +4,8 @@ import {
   AffiliateDialog,
   AffiliateDialogRef,
 } from '@/components/affiliate/components/AffiliateDialog';
+import CopyShortenedLink from '@/components/CopyShortenedLink/CopyShortenedLink';
 import { Display } from '@/components/display';
-import SvgIcon from '@/components/SvgIcon';
 import useGlobalStore from '@/config/use-global';
 import { querySubscribeList } from '@/services/user/subscribe';
 import { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user';
@@ -17,8 +17,6 @@ import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empt
 import { formatDate } from '@workspace/airo-ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { toast } from 'sonner';
 
 export default function Affiliate() {
   const t = useTranslations('affiliate');
@@ -44,11 +42,11 @@ export default function Affiliate() {
   });
 
   const { data: proPlan } = useQuery({
-    queryKey: ['querySubscribeList1'],
+    queryKey: ['querySubscribeList'],
     queryFn: async () => {
       const { data } = await querySubscribeList();
       const list = data.data?.list?.filter((v) => v.unit_time === 'Month') || [];
-      return list.find((v) => v.name.includes('Pro'));
+      return list.find((v) => v.name.includes('Pro')) ?? [];
     },
   });
 
@@ -83,41 +81,11 @@ export default function Affiliate() {
             <div className='rounded-[20px] border-2 border-[#D9D9D9] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:px-5 sm:pb-2 sm:pt-4'>
               <p className='flex justify-between font-light text-[#666] sm:mb-3 sm:text-sm'>
                 {t('commissionInviteCode')}
-                <CopyToClipboard
-                  text={`${location?.origin}/?invite=${user?.refer_code}`}
-                  onCopy={(text, result) => {
-                    if (result) {
-                      toast.success(t('copySuccess'));
-                    }
-                  }}
-                >
-                  <Button
-                    variant='link'
-                    size='sm'
-                    className='h-auto p-0 px-0 sm:hidden [&_svg]:size-5'
-                  >
-                    <SvgIcon name={'copy'}></SvgIcon>
-                  </Button>
-                </CopyToClipboard>
+                <CopyShortenedLink className={'sm:hidden'} />
               </p>
               <p className='flex justify-between text-xl font-bold text-[#225BA9]'>
                 <span> {user?.refer_code}</span>
-                <CopyToClipboard
-                  text={`${location?.origin}/?invite=${user?.refer_code}`}
-                  onCopy={(text, result) => {
-                    if (result) {
-                      toast.success(t('copySuccess'));
-                    }
-                  }}
-                >
-                  <Button
-                    variant='link'
-                    size='sm'
-                    className='hidden gap-2 p-0 sm:block [&_svg]:size-5'
-                  >
-                    <SvgIcon name={'copy'}></SvgIcon>
-                  </Button>
-                </CopyToClipboard>
+                <CopyShortenedLink className={'sm:block'} />
               </p>
             </div>
           </div>

apps/user/components/main/HomeContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import OfferDialog from './OfferDialog/index';
+// import OfferDialog from './OfferDialog/index';
 
 export default function HomeContent() {
   const t = useTranslations('components.home');
@@ -17,7 +17,7 @@ export default function HomeContent() {
         {t('anywhere')}
       </h1>
       {/* 副标题 */}
-      <div className='mb-12 text-left text-[17px] leading-normal text-white sm:mb-16 sm:text-center sm:font-bold'>
+      <div className='text-left text-[17px] leading-normal text-white sm:mb-16 sm:text-center sm:font-bold'>
         <p className={'w-[255px] sm:w-full'}>
           <span className='mr-2 text-white'>
             Airo<sup className='text-[8px]'>™</sup>Port
@@ -27,7 +27,7 @@ export default function HomeContent() {
         <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>{t('getSubscription')}</p>
       </div>
       {/* 按钮 */}
-      <OfferDialog />
+      {/*<OfferDialog />*/}
     </div>
   );
 }