feat: 完成代码编写

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

@@ -0,0 +1,52 @@
+'use client';
+import { findNavByUrl } from '@/config/navs';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@workspace/airo-ui/components/breadcrumb';
+import { SidebarTrigger } from '@workspace/airo-ui/components/sidebar';
+import { useTranslations } from 'next-intl';
+import { usePathname } from 'next/navigation';
+import { Fragment, useMemo } from 'react';
+
+export function Header() {
+  const t = useTranslations('menu');
+  const pathname = usePathname();
+  const items = useMemo(() => findNavByUrl(pathname), [pathname]);
+  return (
+    <header className='flex h-[84px] w-full items-center justify-between gap-2 sm:hidden'>
+      <SidebarTrigger />
+
+      <Breadcrumb>
+        <BreadcrumbList className={'text-[36px] font-semibold'}>
+          {items.map((item, index) => {
+            return (
+              <Fragment key={item?.title}>
+                {index !== items.length - 1 && (
+                  <BreadcrumbItem>
+                    <BreadcrumbLink
+                      href={item?.url || '/dashboard'}
+                      className={'font-semibold text-[#0F2C53]'}
+                    >
+                      {t(item?.title)}
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                )}
+                {index < items.length - 1 && <BreadcrumbSeparator />}
+                {index === items.length - 1 && (
+                  <BreadcrumbPage className={'font-semibold text-[#0F2C53]'}>
+                    {t(item?.title)}
+                  </BreadcrumbPage>
+                )}
+              </Fragment>
+            );
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </header>
+  );
+}

apps/user/app/(main)/(content)/(user)/announcement/page.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { Empty } from '@/components/empty';
-import { queryAnnouncement } from '@/services/user/announcement';
-import { useQuery } from '@tanstack/react-query';
-import { Timeline } from '@workspace/ui/components/timeline';
-import { Markdown } from '@workspace/ui/custom-components/markdown';
-
-export default function Page() {
-  const { data } = useQuery({
-    queryKey: ['queryAnnouncement'],
-    queryFn: async () => {
-      const { data } = await queryAnnouncement({
-        page: 1,
-        size: 99,
-        pinned: false,
-        popup: false,
-      });
-      return data.data?.announcements || [];
-    },
-  });
-  return data && data.length > 0 ? (
-    <Timeline
-      data={
-        data.map((item) => ({
-          title: item.title,
-          content: <Markdown>{item.content}</Markdown>,
-        })) || []
-      }
-    />
-  ) : (
-    <Empty />
-  );
-}

apps/user/app/(main)/(content)/(user)/dashboard/components/Announcement/Dialog.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { queryAnnouncement } from '@/services/user/announcement';
+import { useQuery } from '@tanstack/react-query';
+import {
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
+import { Pagination } from '@workspace/airo-ui/custom-components/pro-table/pagination';
+import { useImperativeHandle, useRef, useState } from 'react';
+import { Popup, PopupData, PopupRef } from './Popup';
+
+export interface AnnouncementItem {
+  id: number;
+  title: string;
+  content: string;
+  pinned?: boolean;
+}
+
+export interface DialogRef {
+  open: () => void;
+  close: () => void;
+}
+
+interface DialogProps {
+  ref?: React.Ref<DialogRef>;
+}
+
+export const AnnouncementDialog = ({ ref }: DialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const popupRef = useRef<PopupRef>(null);
+
+  const { data: announcementData, isLoading } = useQuery({
+    queryKey: ['queryAnnouncement', pagination.pageIndex + 1, pagination.pageSize],
+    queryFn: async () => {
+      const { data } = await queryAnnouncement({
+        page: pagination.pageIndex + 1,
+        size: pagination.pageSize,
+        pinned: true,
+        popup: true,
+      });
+      return {
+        list: data.data?.announcements || [],
+        total: data.data?.total || 0,
+      };
+    },
+    enabled: open, // 只在弹窗打开时查询数据
+  });
+
+  const table = useReactTable({
+    data: announcementData?.list || [],
+    columns: [],
+    onPaginationChange: setPagination,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      columnFilters,
+      pagination,
+    },
+    manualPagination: true,
+    manualFiltering: true,
+    rowCount: announcementData?.total || 0,
+  });
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+    },
+    close: () => {
+      setOpen(false);
+    },
+  }));
+
+  const handleOpenPopup = (item: AnnouncementItem) => {
+    const popupData: PopupData = {
+      title: item.title,
+      content: item.content,
+    };
+    popupRef.current?.open(popupData);
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className='flex flex-col sm:grid sm:max-w-[600px]'>
+          <DialogHeader>
+            <DialogTitle className={'text-left text-2xl sm:text-4xl'}>网站公告</DialogTitle>
+          </DialogHeader>
+
+          <div className='space-y-4'>
+            {isLoading ? (
+              <div className='py-8 text-center'>加载中...</div>
+            ) : (
+              <>
+                {announcementData?.list?.map((item: AnnouncementItem) => {
+                  return (
+                    <div
+                      key={item.id}
+                      className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'
+                    >
+                      <p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
+                        {item.pinned && '【置顶公告】'}{' '}
+                        <span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
+                          {item.content}
+                        </span>
+                      </p>
+                      <div className='ml-2 w-[65px] text-right'>
+                        <span
+                          className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
+                          onClick={() => handleOpenPopup(item)}
+                        >
+                          查看详情
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                {/* 使用 table 的分页器组件 */}
+                {announcementData && announcementData.list && announcementData.list.length > 0 && (
+                  <div className='mt-6'>
+                    <Pagination
+                      table={table}
+                      text={{
+                        textRowsPerPage: '每页显示',
+                        textPageOf: (pageIndex, pageCount) =>
+                          `第 ${pageIndex} 页，共 ${pageCount} 页`,
+                      }}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Popup ref={popupRef} />
+    </>
+  );
+};

apps/user/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
+import { Markdown } from '@workspace/ui/custom-components/markdown';
+import { useImperativeHandle, useState } from 'react';
+
+export interface PopupData {
+  title: string;
+  content: string;
+}
+
+export interface PopupRef {
+  open: (data: PopupData) => void;
+  close: () => void;
+}
+
+interface PopupProps {
+  ref?: React.Ref<PopupRef>;
+}
+
+export const Popup = ({ ref }: PopupProps) => {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState<PopupData>({ title: '', content: '' });
+
+  useImperativeHandle(ref, () => ({
+    open: (newData: PopupData) => {
+      setData(newData);
+      setOpen(true);
+    },
+    close: () => {
+      setOpen(false);
+    },
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className='max-h-[350px] min-h-[220px] max-w-[80%] rounded-[25px] sm:max-w-[425px]'>
+        <DialogHeader>
+          <DialogTitle className={'sr-only'}>{data.title}</DialogTitle>
+        </DialogHeader>
+        <div className={'pt-[30%]'}>
+          <div className={'mb-4 text-xl'}>{data.title}</div>
+          <Markdown>{data.content}</Markdown>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -18,10 +18,20 @@ import {
 } from '@workspace/ui/components/select';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
+import {
+  AnnouncementDialog,
+  DialogRef,
+} from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Dialog';
+import {
+  Popup,
+  PopupRef,
+} from '@/app/(main)/(content)/(user)/dashboard/components/Announcement/Popup';
 import { Empty } from '@/components/empty';
+import { queryAnnouncement } from '@/services/user/announcement';
+import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -35,6 +45,7 @@ import {
 } from '@workspace/ui/components/alert-dialog';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { differenceInDays, formatDate } from '@workspace/ui/utils';
+import { QRCodeCanvas } from 'qrcode.react';
 
 const platforms: (keyof API.ApplicationPlatform)[] = [
   'windows',
@@ -81,6 +92,19 @@ export default function Content() {
     protocol: ['vmess', 'vless'],
   };
 
+  const { data: announcementData } = useQuery({
+    queryKey: ['queryAnnouncement'],
+    queryFn: async () => {
+      const { data } = await queryAnnouncement({
+        page: 1,
+        size: 4,
+        pinned: true,
+        popup: true,
+      });
+      return data.data?.announcements || [];
+    },
+  });
+
   useEffect(() => {
     if (data && userSubscribe?.length > 0 && !userSubscribeProtocol.length) {
       const list = getUserSubscribe(userSubscribe[0]?.token, data.protocol);
@@ -97,20 +121,31 @@ export default function Content() {
 
   const { user } = useGlobalStore();
   const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
+
+  // 获取当前选中项的显示标签
+  const getCurrentLabel = () => {
+    const currentIndex = userSubscribeProtocol.findIndex(
+      (url) => url === userSubscribeProtocolCurrent,
+    );
+    return currentIndex !== -1 ? `${t('subscriptionUrl')}${currentIndex + 1}` : '地址1';
+  };
+
+  const popupRef = useRef<PopupRef>(null);
+  const dialogRef = useRef<DialogRef>(null);
   return (
     <>
-      <div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
+      <div className={'grid grid-cols-1 gap-[10px] sm:gap-6 lg:grid-cols-2'}>
         {/* 账户概况 Card */}
         <Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
-          <div className='mb-4'>
-            <h3 className='text-xl font-medium text-[#666666]'>账户概况</h3>
-            <p className='mt-1 text-sm text-[#666666]'>
+          <div className='mb-1 sm:mb-4'>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>账户概况</h3>
+            <p className='mt-1 text-xs text-[#666666] sm:text-sm'>
               {user?.auth_methods?.[0]?.auth_identifier}
             </p>
           </div>
 
-          <div className='mb-6'>
-            <span className='text-3xl font-medium text-[#091B33]'>年度套餐用户</span>
+          <div className='mb-3 sm:mb-6'>
+            <span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>年度套餐用户</span>
           </div>
 
           <div className='rounded-[20px] bg-[#EAEAEA] px-4 py-[10px]'>
@@ -122,7 +157,7 @@ export default function Content() {
                 }
               />
             </div>
-            <div className='text-4xl font-medium text-[#225BA9]'>
+            <div className='text-xl font-medium text-[#225BA9] sm:text-4xl'>
               <Display type='currency' value={totalAssets} />
             </div>
           </div>
@@ -133,7 +168,7 @@ export default function Content() {
           <div className='mb-4'>
             <h3 className='flex items-center justify-between text-[#666666]'>
               <div className={'flex items-center justify-between'}>
-                <span className={'text-xl font-medium'}>套餐状态</span>
+                <span className={'text-base font-medium sm:text-xl'}>套餐状态</span>
                 <span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
                   生效中
                 </span>
@@ -146,11 +181,11 @@ export default function Content() {
                 replacement={userSubscribe?.[0]?.subscribe.replacement}
               />
             </h3>
-            <div className='mb-[22px] mt-1 text-sm text-[#666666]'>
+            <div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
               套餐到期时间：{formatDate(userSubscribe?.[0]?.expire_time, false)}
             </div>
-            <div className='mb-6'>
-              <span className='text-3xl font-medium text-[#091B33]'>
+            <div className='mb-3 sm:mb-6'>
+              <span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
                 {userSubscribe?.[0]?.subscribe.name}
               </span>
             </div>
@@ -158,7 +193,7 @@ export default function Content() {
 
           <div className='mb-4 flex items-center justify-between'>
             <div className='flex items-center gap-2'>
-              <span className='text-sm'>可用设备</span>
+              <span className='text-xs sm:text-sm'>可用设备</span>
               <div className='flex gap-2'>
                 <div className='h-4 w-4 rounded-full bg-[#225BA9]'></div>
                 <div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
@@ -168,13 +203,13 @@ export default function Content() {
                 <div className='h-4 w-4 rounded-full bg-[#D9D9D9]'></div>
               </div>
             </div>
-            <span className='text-sm'>
-              在线：undefined/{userSubscribe?.[0]?.subscribe.device_limit}
+            <span className='text-xs sm:text-sm'>
+              在线：uu/{userSubscribe?.[0]?.subscribe.device_limit}
             </span>
           </div>
           <div>
             <div className='mb-1 flex items-center justify-between'>
-              <span className='text-sm'>
+              <span className='text-xs sm:text-sm'>
                 已使用流量/总流量：
                 <Display
                   type='traffic'
@@ -188,7 +223,7 @@ export default function Content() {
                   unlimited={!userSubscribe?.[0]?.traffic}
                 />
               </span>
-              <span className='text-sm'>
+              <span className='text-xs sm:text-sm'>
                 剩余：
                 {100 -
                   (
@@ -209,78 +244,73 @@ export default function Content() {
           </div>
         </Card>
         {/* 网站公告 Card */}
-        <Card className='relative rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0'>
+        <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'>
           <div
             className={'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'}
           ></div>
-          <div className='mb-4 flex items-center justify-between'>
-            <h3 className='text-xl font-medium text-[#666666]'>网站公告</h3>
-            <Button className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'>
-              更多
-            </Button>
+          <div className='mb-3 flex items-center justify-between sm:mb-4'>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>网站公告</h3>
+            {announcementData?.length ? (
+              <Button
+                className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
+                onClick={() => dialogRef.current.open()}
+              >
+                更多
+              </Button>
+            ) : null}
           </div>
 
-          <div className='space-y-4'>
+          <div className='space-y-3 sm:space-y-4'>
             {/* 置顶公告 */}
-            <div className='flex items-center rounded-[20px] bg-[#B5C9E2] p-4'>
-              <p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
-                【置顶公告】Airo
-                Port提供IPLC/IEPL专线或BGP隧道中继，避免直连线路的拥堵，提供更低的延迟和更高的...
-              </p>
-              <div className='ml-2 w-[65px] text-right'>
-                <span className='text-sm text-[#225BA9]'>查看详情</span>
-              </div>
-            </div>
-
-            {/* 系统通知列表 */}
-            <div className='space-y-3'>
-              <div className='flex items-center gap-2 rounded-[20px] border bg-white p-4'>
-                <p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
-                  【系统通知】充值成功
-                  <br />
-                  订单 ID：R20250729115302USDT 充值成功，钱包余额...
-                </p>
-                <div className='text-right'>
-                  <span className='text-sm text-[#225BA9]'>查看详情</span>
+            {announcementData?.map((item) => {
+              return (
+                <div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
+                  <p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
+                    {item.pinned && '【置顶公告】'}{' '}
+                    <span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
+                      {item.content}
+                    </span>
+                  </p>
+                  <div className='ml-2 w-[65px] text-right'>
+                    <span
+                      className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
+                      onClick={() => popupRef.current.open(item)}
+                    >
+                      查看详情
+                    </span>
+                  </div>
                 </div>
-              </div>
-
-              <div className='rounded-[20px] border bg-white p-4'>
-                <p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
-                  【系统通知】充值成功
-                  <br />
-                  订单 ID：R20250729115302USDT 充值成功，钱包余额...
-                </p>
-                <div className='text-right'>
-                  <span className='text-sm text-[#225BA9]'>查看详情</span>
-                </div>
-              </div>
-            </div>
+              );
+            })}
           </div>
+          <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='mb-4 flex items-center justify-between'>
-            <h3 className='text-xl font-medium text-[#666666]'>我的订阅</h3>
+          <div className='flex items-center justify-between sm:mb-4'>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>我的订阅</h3>
             <Link
               href={'/document'}
-              className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'
+              className='border-0 bg-transparent p-0 text-sm font-semibold text-[#225BA9] shadow-none outline-0 hover:bg-transparent sm:font-normal'
             >
               新手教程
             </Link>
           </div>
 
           {userSubscribe?.[0] && data.protocol ? (
-            <div className='space-y-4'>
-              <p className='text-sm text-[#666666]'>直接复制订阅链接或点击二维码按钮扫码获取</p>
+            <div className='space-y-2 sm:space-y-4'>
+              <p className='text-xs font-light text-[#666666] sm:text-sm sm:font-normal'>
+                复制订阅链接或点击二维码按钮扫码
+              </p>
 
               {/* 统计信息 */}
               <div className='rounded-[20px] bg-[#EAEAEA] p-4'>
                 <div className='grid grid-cols-3 gap-4 text-center'>
                   <div>
-                    <p className='text-xs text-[rgba(132,132,132,0.7)]'>总流量</p>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                    <p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>总流量</p>
+                    <p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
                       <Display
                         type='traffic'
                         value={userSubscribe?.[0]?.traffic}
@@ -289,16 +319,20 @@ export default function Content() {
                     </p>
                   </div>
                   <div>
-                    <p className='text-xs text-[rgba(132,132,132,0.7)]'>{t('nextResetDays')}</p>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                    <p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
+                      {t('nextResetDays')}
+                    </p>
+                    <p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
                       {userSubscribe?.[0]
                         ? differenceInDays(new Date(userSubscribe?.[0].reset_time), new Date())
                         : t('noReset')}
                     </p>
                   </div>
                   <div>
-                    <p className='text-xs text-[rgba(132,132,132,0.7)]'>{t('expirationDays')}</p>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                    <p className='text-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
+                      {t('expirationDays')}
+                    </p>
+                    <p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
                       {userSubscribe?.[0]?.expire_time
                         ? differenceInDays(new Date(userSubscribe?.[0].expire_time), new Date()) ||
                           t('unknown')
@@ -309,7 +343,7 @@ export default function Content() {
               </div>
 
               {/* 订阅链接 */}
-              <div className='rounded-[26px] bg-[#EAEAEA] p-4'>
+              <div className='rounded-[26px] bg-[#EAEAEA] p-2 sm:p-4'>
                 <div className='mb-3 flex flex-wrap justify-between gap-4'>
                   {data?.protocol && data?.protocol.length > 1 && (
                     <Tabs
@@ -332,16 +366,20 @@ export default function Content() {
                   )}
                 </div>
                 <div className={'mb-3 flex items-center justify-center gap-1'}>
-                  <div className={'flex items-center gap-2 rounded-[16px] bg-[#BABABA] pl-2'}>
+                  <div
+                    className={
+                      'flex items-center gap-1 rounded-full bg-[#BABABA] pl-1 sm:gap-2 sm:rounded-[16px] sm:pl-2'
+                    }
+                  >
                     <Select
                       value={userSubscribeProtocolCurrent}
                       onValueChange={setUserSubscribeProtocolCurrent}
                     >
-                      <SelectTrigger className='h-[35px] w-20 flex-shrink-0 rounded-[8px] border-none bg-[#D9D9D9] bg-transparent p-2 text-[13px] text-sm font-medium text-white shadow-none hover:bg-[#848484] focus:ring-0 [&>svg]:hidden'>
+                      <SelectTrigger className='h-auto w-auto flex-shrink-0 rounded-[16px] border-none bg-[#D9D9D9] px-2.5 py-0.5 text-[13px] text-sm font-medium text-white shadow-none hover:bg-[#848484] focus:ring-0 sm:h-[35px] sm:rounded-[8px] sm:p-2 [&>svg]:hidden'>
                         <SelectValue>
-                          <div className='flex flex-col items-center justify-center'>
-                            <div>{t('subscriptionUrl')}1</div>
-                            <div className='h-0 w-0 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-white'></div>
+                          <div className='flex flex-col items-center justify-center text-[10px] sm:text-sm'>
+                            <div>{getCurrentLabel()}</div>
+                            <div className='-mt-0.5 h-0 w-0 scale-50 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-white sm:scale-100'></div>
                           </div>
                         </SelectValue>
                       </SelectTrigger>
@@ -361,19 +399,42 @@ export default function Content() {
                       </SelectContent>
                     </Select>
 
-                    <div className='flex-1 rounded-[16px] bg-white p-3 text-xs text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'>
-                      <div className={'line-clamp-2 break-all'}>{userSubscribeProtocolCurrent}</div>
+                    <div className='flex-1 rounded-full bg-white px-3 py-1 text-[10px] leading-tight text-[#225BA9] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:rounded-[16px] sm:p-3 sm:text-xs'>
+                      <div className={'line-clamp-2 break-all text-[10px] sm:text-base'}>
+                        {userSubscribeProtocolCurrent}
+                      </div>
                     </div>
                   </div>
 
-                  <div className={'ml-3 h-[40px] w-[40px] flex-shrink-0 rounded-lg bg-black'}></div>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <div
+                        className={
+                          'ml-3 h-[40px] w-[40px] flex-shrink-0 cursor-pointer rounded-lg bg-black'
+                        }
+                      ></div>
+                    </PopoverTrigger>
+                    <PopoverContent className='w-auto rounded-xl p-4' align='end'>
+                      <div className='flex flex-col items-center gap-2'>
+                        <p className='text-muted-foreground text-center text-xs'>扫描码订阅</p>
+                        <QRCodeCanvas
+                          value={userSubscribeProtocolCurrent}
+                          size={120}
+                          bgColor='transparent'
+                          fgColor='rgb(34, 91, 169)'
+                        />
+                      </div>
+                    </PopoverContent>
+                  </Popover>
                 </div>
                 <div className='flex justify-between gap-2'>
                   <AlertDialog>
                     <AlertDialogTrigger asChild>
                       <Button
                         size='sm'
-                        className={'rounded-full bg-[#E22C2E] px-3 py-1 text-xs text-white'}
+                        className={
+                          'h-fit rounded-full bg-[#E22C2E] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
+                        }
                         variant='destructive'
                       >
                         {t('resetSubscription')}
@@ -403,7 +464,7 @@ export default function Content() {
                     </AlertDialogContent>
                   </AlertDialog>
                   <Renewal
-                    className='rounded-full bg-[#A8D4ED] px-3 py-1 text-xs text-white'
+                    className='h-fit rounded-full bg-[#A8D4ED] px-3 py-1 text-[10px] text-white sm:h-9 sm:text-xs'
                     id={userSubscribe?.[0]?.id}
                     subscribe={userSubscribe?.[0]?.subscribe}
                   />

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

@@ -5,7 +5,6 @@ import { getTutorialList } from '@/utils/tutorial';
 import { useQuery } from '@tanstack/react-query';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { useLocale, useTranslations } from 'next-intl';
-import { DocumentButton } from './document-button';
 import { TutorialButton } from './tutorial-button';
 
 export default function Page() {
@@ -35,7 +34,7 @@ export default function Page() {
 
   return (
     <div className='max-w-[532px] space-y-4'>
-      {DocumentList?.length > 0 && (
+      {/*{DocumentList?.length > 0 && (
         <>
           <h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
           <Tabs defaultValue='all'>
@@ -59,14 +58,16 @@ export default function Page() {
             ))}
           </Tabs>
         </>
-      )}
+      )}*/}
 
       {TutorialList && TutorialList?.length > 0 && (
-        <div className='rounded-[46px] bg-[#EAEAEA] px-[34px] py-[28px]'>
+        <div className='rounded-[46px] bg-[#EAEAEA] px-[23px] py-[19px] sm:px-[34px] sm:py-[28px]'>
           <div className='font-semibold text-[#666]'>新手教程</div>
-          <div className={'mb-2.5 text-sm text-[#666]'}>选择对应操作系统，查看对应软件配置教程</div>
+          <div className={'mb-2.5 text-xs text-[#666] sm:text-sm'}>
+            选择对应操作系统，查看对应软件配置教程
+          </div>
           <Tabs defaultValue={TutorialList?.[0]?.title}>
-            <TabsList className='h-full flex-wrap gap-1 bg-transparent'>
+            <TabsList className='h-full flex-wrap justify-start gap-1 bg-transparent'>
               {TutorialList?.map((tutorial) => (
                 <TabsTrigger
                   key={tutorial.title}

apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx

@@ -121,11 +121,11 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-1 sm:p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>
-                <Avatar className='size-12'>
+                <Avatar className='size-7 sm:size-12'>
                   <AvatarImage alt={item.title ?? ''} src={item.icon ?? ''} />
                   <AvatarFallback className='bg-primary/80 text-white'>
                     {item.title.split('')[0]}
@@ -135,14 +135,14 @@ export function TutorialButton({ items }: { items: Item[] }) {
               <div className=''>
                 <motion.h3
                   layoutId={`title-${item.title}-${id}`}
-                  className='font-medium text-[#225BA9]'
+                  className='text-[10px] font-medium text-[#225BA9] sm:text-base'
                 >
                   {item.title}
                 </motion.h3>
                 {item.updated_at && (
                   <motion.p
                     layoutId={`description-${item.title}-${id}`}
-                    className='text-center font-bold text-[#848484] md:text-left'
+                    className='text-left text-[10px] font-bold text-[#848484] sm:text-base'
                   >
                     {formatDate(new Date(item.updated_at), false)}
                   </motion.p>
@@ -155,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 buttonVariants({
                   variant: 'secondary',
                 }),
-                'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold text-white hover:bg-[#225BA9] hover:text-white',
+                'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xs font-bold text-white hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl',
               )}
             >
               {t('read')}

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

@@ -1,8 +1,8 @@
 import Announcement from '@/components/announcement';
-import { SidebarInset, SidebarProvider } from '@workspace/ui/components/sidebar';
+import { SidebarInset, SidebarProvider } from '@workspace/airo-ui/components/sidebar';
 import { cookies } from 'next/headers';
+import { Header } from './Header';
 import { SidebarLeft } from './sidebar-left';
-// import { SidebarTrigger } from '@workspace/ui/components/sidebar';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const cookieStore = await cookies();
@@ -12,10 +12,12 @@ export default async function DashboardLayout({ children }: { children: React.Re
     <SidebarProvider className='' defaultOpen={defaultOpen}>
       <SidebarLeft className='w-[288px] border-r-0 bg-transparent lg:flex' />
       <SidebarInset className='relative flex-grow overflow-hidden'>
-        {/*<SidebarTrigger />*/}
-        <div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>{children}</div>
+        <div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>
+          {' '}
+          <Header />
+          {children}
+        </div>
       </SidebarInset>
-      {/*<SidebarRight className='sticky top-[84px] hidden w-[288px] border-r-0 bg-transparent 2xl:flex' />*/}
       <Announcement type='popup' Authorization={(await cookies()).get('Authorization')?.value} />
     </SidebarProvider>
   );

apps/user/app/(main)/(content)/(user)/profile/change-password.tsx

@@ -34,10 +34,22 @@ export default function ChangePassword() {
   }
 
   return (
-    <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+    <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
       <div className={'mb-3'}>
-        <div className={'text-xl font-bold'}>{t('accountSettings')}</div>
-        <div className={'text-[15px] font-light'}>修改登录密码</div>
+        <div className={'flex items-center justify-between font-bold sm:text-xl'}>
+          {t('accountSettings')}
+          <Button
+            type='submit'
+            size='sm'
+            form='password-form'
+            className={
+              'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
+            }
+          >
+            保存
+          </Button>
+        </div>
+        <div className={'text-xs font-light sm:text-[15px]'}>修改登录密码</div>
       </div>
       <Form {...form}>
         <form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
@@ -49,7 +61,7 @@ export default function ChangePassword() {
                 <FormControl>
                   <Input
                     className={
-                      'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+                      'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
                     }
                     type='password'
                     placeholder={t('newPassword')}
@@ -68,7 +80,7 @@ export default function ChangePassword() {
                 <FormControl>
                   <Input
                     className={
-                      'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+                      'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
                     }
                     type='password'
                     placeholder={t('repeatNewPassword')}
@@ -81,7 +93,7 @@ export default function ChangePassword() {
           />
         </form>
       </Form>
-      <div className={'mt-8 flex justify-center'}>
+      <div className={'mt-8 hidden justify-center sm:flex'}>
         <Button
           type='submit'
           size='sm'

apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx

@@ -39,14 +39,30 @@ export default function NotifySettings() {
   }
 
   return (
-    <Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+    <Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
       <div className={'mb-3'}>
-        <div className={'text-xl font-bold'}>{t('notify.notificationSettings')}</div>
-        <div className={'text-[15px] font-light'}>是否邮箱通知推送</div>
+        <div className={'flex items-center justify-between font-bold sm:text-xl'}>
+          {t('notify.notificationSettings')}
+          <Button
+            type='submit'
+            size='sm'
+            form='notify-form'
+            className={
+              'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
+            }
+          >
+            保存
+          </Button>
+        </div>
+        <div className={'text-xs font-light sm:text-[15px]'}>是否邮箱通知推送</div>
       </div>
       <Form {...form}>
-        <form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
-          <div className='space-y-4'>
+        <form
+          id='notify-form'
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='space-y-2 sm:space-y-4'
+        >
+          <div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1 sm:gap-4'>
             {[
               { name: 'enable_balance_notify', label: 'balanceChange' },
               { name: 'enable_login_notify', label: 'login' },
@@ -58,7 +74,7 @@ export default function NotifySettings() {
                 control={form.control}
                 name={name as any}
                 render={({ field }) => (
-                  <FormItem className='flex flex-col items-center justify-between space-x-4 rounded-[20px] bg-[#EAEAEA] py-2.5'>
+                  <FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
                     <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
                       {t(`notify.${label}`)}
                     </FormLabel>
@@ -79,7 +95,7 @@ export default function NotifySettings() {
           </div>
         </form>
       </Form>
-      <div className={'mt-8 flex justify-center'}>
+      <div className={'mt-8 hidden justify-center sm:flex'}>
         <Button
           type='submit'
           size='sm'

apps/user/app/(main)/(content)/(user)/profile/page.tsx

@@ -4,8 +4,8 @@ import ThirdPartyAccounts from './third-party-accounts';
 
 export default function Page() {
   return (
-    <div className='flex flex-col gap-[30px] lg:flex-row lg:flex-wrap lg:*:flex-auto'>
-      <div className={'flex max-w-[543px] flex-auto flex-col gap-[30px]'}>
+    <div className='flex flex-col gap-[10px] sm:gap-[30px] lg:flex-row lg:flex-wrap lg:*:flex-auto'>
+      <div className={'flex max-w-[543px] flex-auto flex-col gap-[10px] sm:gap-[30px]'}>
         <ThirdPartyAccounts />
         <ChangePassword />
       </div>

apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx

@@ -235,25 +235,34 @@ export default function ThirdPartyAccounts() {
     <>
       <Card
         className={
-          'rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
+          'rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'
         }
       >
-        <div className={'text-xl font-bold'}>{t('title')}</div>
-        <div className='mb-4 mt-1 text-sm text-[#666666]'>
+        <div className={'flex items-center justify-between text-base font-bold sm:text-xl'}>
+          <span>{t('title')}</span>
+          <div
+            className={
+              'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center font-medium leading-[32px] text-white sm:hidden'
+            }
+          >
+            保存
+          </div>
+        </div>
+        <div className='mb-2 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
           {user?.auth_methods?.[0]?.auth_identifier}
         </div>
-        <div className={'mb-3'}>Email</div>
+        <div className={'mb-1 sm:mb-3'}>Email</div>
         <div className={'flex items-center gap-2'}>
           <div
             className={
-              'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-xl leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'
+              'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-base !leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:text-xl'
             }
           >
             {user?.auth_methods?.[0]?.auth_identifier}
           </div>
           <div
             className={
-              'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white'
+              'hidden h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white sm:block'
             }
           >
             保存

apps/user/app/(main)/(content)/(user)/sidebar-left.tsx

@@ -4,10 +4,12 @@ import { navs } from '@/config/navs';
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from '@workspace/ui/components/sidebar';
+  useSidebar,
+} from '@workspace/airo-ui/components/sidebar';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
@@ -17,46 +19,63 @@ import { usePathname } from 'next/navigation';
 export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const t = useTranslations('menu');
   const pathname = usePathname();
+  const { toggleSidebar } = useSidebar();
   return (
-    <Sidebar collapsible='none' side='left' {...props} className={'h-screen bg-white'}>
-      <div className='pb-7 pl-4 pt-12'>
-        <Link href={'/dashboard'}>
-          <Image
-            className={'cursor-pointer'}
-            src={'image.png'}
-            width={102}
-            height={49}
-            alt='logo'
-            unoptimized
-          />
-        </Link>
-      </div>
-      <SidebarContent className={''}>
-        <SidebarMenu className={'gap-2.5'}>
-          {navs.map((nav, navIndex) => (
-            <SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
-              <SidebarMenuItem key={nav.title} className={''}>
-                <SidebarMenuButton
-                  className={
-                    'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
-                  }
-                  asChild
-                  tooltip={t(nav.title)}
-                  isActive={nav.url === pathname}
+    <Sidebar side='left' {...props} className={'border-0 bg-transparent sm:bg-white'}>
+      <div
+        className={
+          'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 sm:ml-0 sm:h-full sm:rounded-none sm:bg-white'
+        }
+      >
+        <div
+          className={
+            'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
+          }
+        ></div>
+        <div className='pb-7 pl-4 pt-5 sm:pt-12'>
+          <Link href={'/dashboard'}>
+            <Image
+              className={'cursor-pointer'}
+              src={'image.png'}
+              width={102}
+              height={49}
+              alt='logo'
+              unoptimized
+            />
+          </Link>
+        </div>
+        <SidebarContent className={''}>
+          <SidebarMenu className={'gap-1 sm:gap-2.5'}>
+            {navs
+              .filter((v) => !v.hidden)
+              .map((nav, navIndex) => (
+                <SidebarMenu
+                  key={navIndex}
+                  className={navIndex === 0 ? 'mb-4 sm:mb-[42px]' : 'mb-0'}
                 >
-                  <Link href={nav.url}>
-                    {nav.icon && <Icon className={'!size-6'} icon={nav.icon} />}
-                    <span>{t(nav.title)}</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          ))}
-        </SidebarMenu>
-      </SidebarContent>
+                  <SidebarMenuItem key={nav.title} className={''}>
+                    <SidebarMenuButton
+                      className={
+                        'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] sm:h-[60px] sm:bg-white sm:text-xl sm:font-normal'
+                      }
+                      asChild
+                      tooltip={t(nav.title)}
+                      isActive={nav.url === pathname}
+                    >
+                      <Link href={nav.url} onClick={toggleSidebar} className={'gap-4 sm:gap-0.5'}>
+                        {nav.icon && <Icon className={'!size-4 sm:!size-6'} icon={nav.icon} />}
+                        <span>{t(nav.title)}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              ))}
+          </SidebarMenu>
+        </SidebarContent>
 
-      <div className={'mt-4'}>
-        <UserNav from='profile' />
+        <SidebarFooter className={'mt-4'}>
+          <UserNav from='profile' />
+        </SidebarFooter>
       </div>
     </Sidebar>
   );

apps/user/app/(main)/(content)/(user)/subscribe/page.tsx

@@ -71,10 +71,18 @@ export default function Page() {
   return (
     <>
       <LoginDialogProvider>
-        <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
+        <div
+          className={
+            'hidden text-4xl font-bold text-[#0F2C53] sm:block md:mb-4 md:text-center md:text-5xl'
+          }
+        >
           选择套餐
         </div>
-        <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+        <div
+          className={
+            '-mt-5 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
+          }
+        >
           选择最适合您的服务套餐
         </div>
         <div>

apps/user/app/(main)/(content)/(user)/ticket/page.tsx

@@ -15,6 +15,7 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from '@workspace/ui/components/card';
@@ -90,7 +91,7 @@ export default function Page() {
               <DialogTrigger asChild>
                 <Button
                   className={
-                    'min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
+                    'rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center font-bold hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl'
                   }
                 >
                   {t('createTicket')}
@@ -162,8 +163,8 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='overflow-hidden pl-16'>
-              <CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3'>
+            <Card className='overflow-hidden sm:pl-16'>
+              <CardHeader className='flex flex-row items-center justify-between gap-2 space-y-0 bg-transparent p-3 pb-0 sm:pb-3'>
                 <CardTitle>
                   <span
                     className={cn(
@@ -184,8 +185,9 @@ export default function Page() {
                     <>
                       <Button
                         key='reply'
+                        variant='destructive'
                         className={
-                          'ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white'
+                          'hidden min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white sm:flex'
                         }
                         onClick={() => setTicketId(item.id)}
                       >
@@ -197,9 +199,8 @@ export default function Page() {
                           <Button
                             variant='destructive'
                             className={
-                              'min-w-[150px] rounded-full border-[#F8BFD2] bg-[#F8BFD2] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#F8BFD2] hover:bg-[#FF4248] hover:text-white'
+                              'rounded-full border-white bg-transparent text-center font-bold text-[#FF4248] shadow-none hover:bg-transparent sm:min-w-[150px] sm:border-[#F8BFD2] sm:bg-[#F8BFD2] sm:text-xl sm:shadow sm:hover:border-[#F8BFD2] sm:hover:bg-[#FF4248] sm:hover:text-white'
                             }
-                            size='sm'
                           >
                             {t('close')}
                           </Button>
@@ -223,24 +224,33 @@ export default function Page() {
                 </CardDescription>
               </CardHeader>
 
-              <CardContent className='p-3 text-sm'>
-                <ul className='grid gap-3 *:flex *:flex-col lg:grid-cols-3'>
+              <CardContent className='p-3 text-[10px] sm:text-sm'>
+                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-3'>
                   <li>
-                    <span className='text-[15px] font-normal text-[#225BA9]'>{t('title')}</span>
+                    <span className='font-normal text-[#225BA9]'>{t('title')}</span>
                     <span className={'font-bold'}> {item.title}</span>
                   </li>
-                  <li className=''>
-                    <span className='text-[15px] font-normal text-[#225BA9]'>
-                      {t('description')}
-                    </span>
+                  <li className='order-2 sm:order-3'>
+                    <span className='font-normal text-[#225BA9]'>{t('description')}</span>
                     <time className={'font-bold'}>{item.description}</time>
                   </li>
                   <li className=''>
-                    <span className='text-[15px] font-normal text-[#225BA9]'>{t('updatedAt')}</span>
+                    <span className='font-normal text-[#225BA9]'>{t('updatedAt')}</span>
                     <time className={'font-bold'}>{formatDate(item.updated_at)}</time>
                   </li>
                 </ul>
               </CardContent>
+              <CardFooter className={'flex justify-center sm:hidden'}>
+                <Button
+                  key='reply'
+                  className={
+                    'ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white sm:text-xl'
+                  }
+                  onClick={() => setTicketId(item.id)}
+                >
+                  {t('reply')}
+                </Button>
+              </CardFooter>
             </Card>
           );
         }}

apps/user/app/(main)/(content)/(user)/wallet/page.tsx

@@ -24,13 +24,13 @@ export default function Page() {
   const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
   return (
     <>
-      <Card className='mb-4 rounded-[40px] border border-[#D9D9D9] px-[30px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
+      <Card className='rounded-[40px] border border-[#D9D9D9] px-[24px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:mb-4 sm:px-[30px]'>
         <CardContent className='p-0'>
-          <h2 className='mb-4 flex items-center justify-between text-xl font-bold text-[#666]'>
+          <h2 className='mb-4 flex items-center justify-between text-base font-bold text-[#666] sm:text-xl'>
             <span>{t('assetOverview')}</span>
             <Recharge
               className={
-                'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
+                'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-base font-bold hover:bg-[#225BA9] hover:text-white sm:text-xl'
               }
             />
           </h2>
@@ -38,39 +38,43 @@ export default function Page() {
             <div className='flex items-center justify-between'>
               <div>
                 <p className='text-sm font-light text-[#666]'>总资产</p>
-                <p className='text-[32px] font-bold'>
+                <p className='text-2xl font-bold sm:text-[32px]'>
                   <Display type='currency' value={totalAssets} />
                 </p>
               </div>
             </div>
           </div>
-          <div className='grid grid-cols-1 gap-6 md:grid-cols-4'>
-            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>账户余额</p>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+          <div className='grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-6'>
+            <div className='col-span-2 rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
+              <p className='text-sm font-medium text-[#666] opacity-80 sm:mb-3'>账户余额</p>
+              <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <Display type='currency' value={user?.balance} />
               </p>
             </div>
             <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('giftAmount')}</p>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+              <p className='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
+                {t('giftAmount')}
+              </p>
+              <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <Display type='currency' value={user?.gift_amount} />
               </p>
             </div>
             <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>{t('commission')}</p>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+              <p className='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
+                {t('commission')}
+              </p>
+              <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <Display type='currency' value={user?.commission} />
               </p>
             </div>
-            <div className='rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
-              <p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
+            <div className='col-span-2 rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
+              <p className='mb-1 flex justify-between text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
                 <span>返佣邀请码</span>
                 <Link href='/affiliate' className={'text-[#225BA9]'}>
                   返佣详情
                 </Link>
               </p>
-              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
+              <p className='flex justify-between text-base font-bold text-[#225BA9] sm:text-2xl'>
                 <span> {user?.refer_code}</span>
                 <CopyToClipboard
                   text={`${location?.origin}/?invite=${user?.refer_code}`}
@@ -100,9 +104,9 @@ export default function Page() {
         }}
         renderItem={(item) => {
           return (
-            <Card className='rounded-[32px] px-[55px]'>
-              <CardContent className='p-3 text-sm'>
-                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
+            <Card className='rounded-[32px] px-[20px] sm:px-[55px]'>
+              <CardContent className='px-0 py-3 text-[10px] sm:p-3 sm:text-sm'>
+                <ul className='grid grid-cols-4 gap-3 *:flex *:flex-col'>
                   <li className='font-semibold'>
                     <span className='text-[#225BA9]'>{t('createdAt')}</span>
                     <time>{formatDate(item.created_at)}</time>