feat: 新版样式

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

@@ -7,6 +7,7 @@ import useGlobalStore from '@/config/use-global';
 import { getStat } from '@/services/common/common';
 import { queryUserSubscribe } from '@/services/user/user';
 import { useQuery } from '@tanstack/react-query';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
 import { Button } from '@workspace/airo-ui/components/button';
 import { Card } from '@workspace/airo-ui/components/card';
 import { useTranslations } from 'next-intl';
@@ -23,6 +24,7 @@ import {
   PopupRef,
 } from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup';
 import { Empty } from '@/components/empty';
+import SvgIcon from '@/components/SvgIcon';
 import { queryAnnouncement } from '@/services/user/announcement';
 import { queryOrderList } from '@/services/user/order';
 import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
@@ -91,11 +93,120 @@ export default function Content() {
 
   const popupRef = useRef<PopupRef>(null);
   const dialogRef = useRef<DialogRef>(null);
+
+  function openPopupWindow(item) {
+    // features 字符串用于控制窗口的特性
+    const pageWidth = 600; // 弹出窗口的宽度
+    const pageHeight = 550; // 弹出窗口的高度
+    const {
+      availLeft, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。
+      availHeight, // 浏览器在显示屏上的可用高度，即当前屏幕高度
+      availWidth, // 浏览器在显示屏上的可用宽度，即当前屏幕宽度
+    } = window.screen;
+    const pageTop = (availHeight - pageHeight) / 2; // 窗口的垂直位置
+    let pageLeft = (availWidth - pageWidth) / 2; // 窗口的水平位置;
+
+    pageLeft += availLeft; // 加上屏幕偏移值
+
+    const features = `width=${pageWidth},height=${pageHeight},left=${pageLeft},top=${pageTop},toolbar=no,location=no,menubar=no`;
+    console.log(features);
+    window.open(item.download, item.title, features);
+  }
+
   return (
     <>
-      <div className={'grid grid-cols-1 gap-[10px] sm:gap-6 lg:grid-cols-2'}>
+      <div className={'grid grid-cols-1 gap-[10px] sm:gap-5 2xl:grid-cols-4'}>
+        {/* 快捷下载 Card */}
+        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-2 2xl:col-span-1'>
+          <div className='flex items-center justify-between'>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>快捷下载</h3>
+          </div>
+          <div className={'text-xs font-normal leading-[1.5] text-[#666]'}>
+            选择对应操作系统下载客户端
+          </div>
+
+          <div
+            className={
+              'mt-2.5 flex items-center justify-around rounded-2xl bg-[#EAEAEA] px-4 pb-3 pt-[18px] text-xs text-[#0F2C53]'
+            }
+          >
+            {[
+              {
+                label: 'iOS',
+                icon: 'Group 77',
+                href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
+              },
+              {
+                label: 'Mac',
+                icon: 'Group 77',
+                href: 'https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN',
+              },
+              { label: 'Win', icon: 'Group 75', href: '' },
+              { label: 'Android', icon: 'Group 75', href: '' },
+            ].map((v) => {
+              return (
+                <a href={v.href} target={'_blank'} className={'cursor-pointer text-center'}>
+                  <div className={''}>
+                    <SvgIcon name={v.icon}></SvgIcon>
+                  </div>
+                  {v.label}
+                </a>
+              );
+            })}
+          </div>
+          <div
+            className={
+              'mt-2.5 flex h-[37px] items-center justify-between rounded-full bg-[#EAEAEA] pl-4 text-[#666]'
+            }
+          >
+            <span className={'text-sm font-medium'}>免费美区Apple ID</span>
+            <AiroButton
+              className={'m-1'}
+              variant={'primary'}
+              onClick={() => {
+                openPopupWindow({
+                  download: 'https://aunlock.laomaos.com/share/DEXVzMSP',
+                  title: 'Shadowrocket',
+                });
+              }}
+            >
+              获取
+            </AiroButton>
+          </div>
+        </Card>
+
+        {/* 我的订阅 Card */}
+        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-3 2xl:col-span-2'>
+          <div className=''>
+            <div className={'flex items-center justify-between'}>
+              <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
+                {t('mySubscription')}
+              </h3>
+              <Link
+                href={'/document'}
+                className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
+              >
+                {t('beginnerTutorial')}
+              </Link>
+            </div>
+            <div className={'text-xs font-light leading-[1.5] text-[#666]'}>
+              复制订阅链接或点击二维码按钮扫码
+            </div>
+          </div>
+
+          {userSubscribe?.[0] && data?.protocol ? (
+            <SubScribeCard
+              userSubscribeData={userSubscribe?.[0]}
+              protocol={data.protocol}
+              refetch={refetch}
+            />
+          ) : (
+            <Empty />
+          )}
+        </Card>
+
         {/* 账户概况 Card */}
-        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:order-1 2xl:col-span-1'>
           <div className='mb-1'>
             <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
               {t('accountOverview')}
@@ -120,7 +231,7 @@ export default function Content() {
               <span className='text-sm font-light text-[#666666]'>{t('accountBalance')}</span>
               <Recharge
                 className={
-                  'min-w-[50px] border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
+                  'min-w-[50px] border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
                 }
               />
             </div>
@@ -131,7 +242,7 @@ export default function Content() {
         </Card>
 
         {/* 套餐状态 Card */}
-        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+        <Card className='2xl:order-0 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] 2xl:col-span-2'>
           <div className=''>
             <h3 className='flex items-center justify-between text-[#666666]'>
               <div className={'flex items-center justify-between'}>
@@ -224,8 +335,9 @@ export default function Content() {
             <Airo_Empty className={'py-0'} description={t('noPlanAvailable')} />
           )}
         </Card>
+
         {/* 网站公告 Card */}
-        <Card className='relative order-4 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 sm:order-none'>
+        <Card className='relative rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 2xl:order-4 2xl:col-span-2'>
           <div className='mb-3 flex items-center justify-between sm:mb-1'>
             <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
               {t('siteAnnouncements')}
@@ -282,31 +394,6 @@ export default function Content() {
           <Popup ref={popupRef} />
           <AnnouncementDialog ref={dialogRef} />
         </Card>
-
-        {/* 我的订阅 Card */}
-        <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
-          <div className='flex items-center justify-between'>
-            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>
-              {t('mySubscription')}
-            </h3>
-            <Link
-              href={'/document'}
-              className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
-            >
-              {t('beginnerTutorial')}
-            </Link>
-          </div>
-
-          {userSubscribe?.[0] && data?.protocol ? (
-            <SubScribeCard
-              userSubscribeData={userSubscribe?.[0]}
-              protocol={data.protocol}
-              refetch={refetch}
-            />
-          ) : (
-            <Empty />
-          )}
-        </Card>
       </div>
     </>
   );

apps/user/assets/svg-icon/Group 75.svg

@@ -0,0 +1,25 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2526_1784)">
+<rect x="2.11401" y="2.06323" width="53.6962" height="53.6962" rx="10" fill="white"/>
+<g clip-path="url(#clip0_2526_1784)">
+<path d="M35.2874 19.2087C35.2874 18.9251 35.4299 18.6623 35.663 18.5164L41.8535 14.64C42.3693 14.3171 43.0255 14.7047 43.0255 15.3324V21.9808C43.0255 22.4267 42.679 22.7882 42.2517 22.7882H36.0612C35.6339 22.7882 35.2874 22.4267 35.2874 21.9808V19.2087Z" fill="#455FE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8295 24.9768C24.5964 25.1227 24.4538 25.3855 24.4538 25.6691V33.2867V34.0936V34.0941V35.3041C24.4538 35.75 24.1074 36.0712 23.68 36.0712H22.1323C21.705 36.0712 21.3585 35.75 21.3585 35.3041V34.0936V29.06C21.3585 28.4323 20.7023 28.0447 20.1866 28.3676L13.996 32.2439C13.763 32.3899 13.6204 32.6526 13.6204 32.9364V41.3613C13.6204 41.8072 13.9668 42.1687 14.3942 42.1687H20.5847C21.0121 42.1687 21.3585 41.8072 21.3585 41.3613V40.5533V39.5381C21.3585 39.0921 21.705 38.8219 22.1323 38.8219H23.68C24.1074 38.8219 24.4538 39.0921 24.4538 39.5381V40.5533V41.3613C24.4538 41.8072 24.8003 42.1687 25.2276 42.1687H31.4181C31.8455 42.1687 32.192 41.8072 32.192 41.3613V34.0941V33.2867V21.7929C32.192 21.1652 31.5358 20.7775 31.0199 21.1005L24.8295 24.9768Z" fill="#455FE9"/>
+<path d="M35.2878 26.0989V41.4406C35.2878 41.8643 35.6343 42.2077 36.0617 42.2077H42.2522C42.6795 42.2077 43.026 41.8643 43.026 41.4406V26.0989C43.026 25.6752 42.6795 25.3318 42.2522 25.3318H36.0617C35.6343 25.3318 35.2878 25.6752 35.2878 26.0989Z" fill="#455FE9"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_2526_1784" x="0.114014" y="0.0632324" width="57.6963" height="57.6963" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2526_1784"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2526_1784" result="shape"/>
+</filter>
+<clipPath id="clip0_2526_1784">
+<rect width="29.4051" height="30.6835" fill="white" transform="translate(13.6204 12.2913)"/>
+</clipPath>
+</defs>
+</svg>