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'>
+          <div className='mb-1 sm:mb-4'>
-            <h3 className='text-xl font-medium text-[#666666]'>账户概况</h3>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>账户概况</h3>
-            <p className='mt-1 text-sm text-[#666666]'>
+            <p className='mt-1 text-xs text-[#666666] sm:text-sm'>
               {user?.auth_methods?.[0]?.auth_identifier}
             </p>
           </div>
 
-          <div className='mb-6'>
+          <div className='mb-3 sm:mb-6'>
-            <span className='text-3xl font-medium text-[#091B33]'>年度套餐用户</span>
+            <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'>
+            <div className='mb-3 sm:mb-6'>
-              <span className='text-3xl font-medium text-[#091B33]'>
+              <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'>
+            <span className='text-xs sm:text-sm'>
-              在线：undefined/{userSubscribe?.[0]?.subscribe.device_limit}
+              在线：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'>
+          <div className='mb-3 flex items-center justify-between sm:mb-4'>
-            <h3 className='text-xl font-medium text-[#666666]'>网站公告</h3>
+            <h3 className='text-base font-medium text-[#666666] sm:text-xl'>网站公告</h3>
-            <Button className='border-0 bg-transparent p-0 text-sm font-normal text-[#225BA9] shadow-none outline-0 hover:bg-transparent'>
+            {announcementData?.length ? (
-              更多
+              <Button
-            </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'>
+            {announcementData?.map((item) => {
-              <p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
+              return (
-                【置顶公告】Airo
+                <div className='flex items-center rounded-[20px] bg-[#B5C9E2] px-4 py-2 sm:p-4'>
-                Port提供IPLC/IEPL专线或BGP隧道中继，避免直连线路的拥堵，提供更低的延迟和更高的...
+                  <p className='line-clamp-2 flex-1 text-[10px] text-[#225BA9] sm:text-sm'>
-              </p>
+                    {item.pinned && '【置顶公告】'}{' '}
-              <div className='ml-2 w-[65px] text-right'>
+                    <span className={`${item.pinned ? 'text-white' : 'text-[#4D4D4D]'}`}>
-                <span className='text-sm text-[#225BA9]'>查看详情</span>
+                      {item.content}
-              </div>
+                    </span>
-            </div>
+                  </p>
-
+                  <div className='ml-2 w-[65px] text-right'>
-            {/* 系统通知列表 */}
+                    <span
-            <div className='space-y-3'>
+                      className='cursor-pointer text-xs text-[#225BA9] sm:text-sm'
-              <div className='flex items-center gap-2 rounded-[20px] border bg-white p-4'>
+                      onClick={() => popupRef.current.open(item)}
-                <p className='mb-2 line-clamp-2 flex-1 text-sm text-[#225BA9]'>
+                    >
-                  【系统通知】充值成功
+                      查看详情
-                  <br />
+                    </span>
-                  订单 ID：R20250729115302USDT 充值成功，钱包余额...
+                  </div>
-                </p>
-                <div className='text-right'>
-                  <span className='text-sm text-[#225BA9]'>查看详情</span>
                 </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'>
+          <div className='flex items-center justify-between sm:mb-4'>
-            <h3 className='text-xl font-medium text-[#666666]'>我的订阅</h3>
+            <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'>
+            <div className='space-y-2 sm:space-y-4'>
-              <p className='text-sm text-[#666666]'>直接复制订阅链接或点击二维码按钮扫码获取</p>
+              <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-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>总流量</p>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                    <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-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                      {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-[10px] text-[rgba(132,132,132,0.7)] sm:text-xs'>
-                    <p className='text-lg font-medium text-[#0F2C53]'>
+                      {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 className='flex flex-col items-center justify-center text-[10px] sm:text-sm'>
-                            <div>{t('subscriptionUrl')}1</div>
+                            <div>{getCurrentLabel()}</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='-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='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'}>{userSubscribeProtocolCurrent}</div>
+                      <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'>
-        <div className='h-[calc(100vh-56px)] flex-grow gap-4 overflow-auto p-4'>{children}</div>
+          {' '}
+          <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={'flex items-center justify-between font-bold sm:text-xl'}>
-        <div className={'text-[15px] font-light'}>修改登录密码</div>
+          {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={'flex items-center justify-between font-bold sm:text-xl'}>
-        <div className={'text-[15px] font-light'}>是否邮箱通知推送</div>
+          {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'>
+        <form
-          <div className='space-y-4'>
+          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 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-[30px]'}>
+      <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={'flex items-center justify-between text-base font-bold sm:text-xl'}>
-        <div className='mb-4 mt-1 text-sm text-[#666666]'>
+          <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'}>
+    <Sidebar side='left' {...props} className={'border-0 bg-transparent sm:bg-white'}>
-      <div className='pb-7 pl-4 pt-12'>
+      <div
-        <Link href={'/dashboard'}>
+        className={
-          <Image
+          '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'
-            className={'cursor-pointer'}
+        }
-            src={'image.png'}
+      >
-            width={102}
+        <div
-            height={49}
+          className={
-            alt='logo'
+            'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
-            unoptimized
+          }
-          />
+        ></div>
-        </Link>
+        <div className='pb-7 pl-4 pt-5 sm:pt-12'>
-      </div>
+          <Link href={'/dashboard'}>
-      <SidebarContent className={''}>
+            <Image
-        <SidebarMenu className={'gap-2.5'}>
+              className={'cursor-pointer'}
-          {navs.map((nav, navIndex) => (
+              src={'image.png'}
-            <SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
+              width={102}
-              <SidebarMenuItem key={nav.title} className={''}>
+              height={49}
-                <SidebarMenuButton
+              alt='logo'
-                  className={
+              unoptimized
-                    '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]'
+            />
-                  }
+          </Link>
-                  asChild
+        </div>
-                  tooltip={t(nav.title)}
+        <SidebarContent className={''}>
-                  isActive={nav.url === pathname}
+          <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}>
+                  <SidebarMenuItem key={nav.title} className={''}>
-                    {nav.icon && <Icon className={'!size-6'} icon={nav.icon} />}
+                    <SidebarMenuButton
-                    <span>{t(nav.title)}</span>
+                      className={
-                  </Link>
+                        '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'
-                </SidebarMenuButton>
+                      }
-              </SidebarMenuItem>
+                      asChild
-            </SidebarMenu>
+                      tooltip={t(nav.title)}
-          ))}
+                      isActive={nav.url === pathname}
-        </SidebarMenu>
+                    >
-      </SidebarContent>
+                      <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'}>
+        <SidebarFooter className={'mt-4'}>
-        <UserNav from='profile' />
+          <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'>
+            <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'>
+              <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'>
+              <CardContent className='p-3 text-[10px] sm:text-sm'>
-                <ul className='grid gap-3 *:flex *:flex-col lg:grid-cols-3'>
+                <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=''>
+                  <li className='order-2 sm:order-3'>
-                    <span className='text-[15px] font-normal text-[#225BA9]'>
+                    <span className='font-normal text-[#225BA9]'>{t('description')}</span>
-                      {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='grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-6'>
-            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+            <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='mb-3 text-sm font-medium text-[#666] opacity-80'>账户余额</p>
+              <p className='text-sm font-medium text-[#666] opacity-80 sm:mb-3'>账户余额</p>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+              <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='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+                {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='t text-sm font-medium text-[#666] opacity-80 sm:mb-3'>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+                {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'>
+            <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-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
+              <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]'>
+            <Card className='rounded-[32px] px-[20px] sm:px-[55px]'>
-              <CardContent className='p-3 text-sm'>
+              <CardContent className='px-0 py-3 text-[10px] sm:p-3 sm:text-sm'>
-                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
+                <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>

apps/user/components/affiliate/components/AffiliateDialog.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Empty } from '@/components/empty';
+import { queryUserAffiliateList } from '@/services/user/user';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
+import { ProList } from '@workspace/ui/custom-components/pro-list/pro-list';
+import { formatDate } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useImperativeHandle, useState } from 'react';
+
+export interface AffiliateDialogRef {
+  open: () => void;
+  close: () => void;
+}
+
+interface AffiliateDialogProps {
+  ref?: React.Ref<AffiliateDialogRef>;
+}
+
+export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [sum, setSum] = useState<number>();
+  const t = useTranslations('affiliate');
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
+    },
+    close: () => {
+      setOpen(false);
+    },
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className='overflow-y-auto sm:max-w-[800px]'>
+        <DialogHeader>
+          <DialogTitle className='text-left text-2xl sm:text-4xl'>{t('inviteRecords')}</DialogTitle>
+        </DialogHeader>
+
+        <div className='mt-6'>
+          <ProList<API.UserAffiliate, Record<string, unknown>>
+            request={async (pagination, filter) => {
+              const response = await queryUserAffiliateList({ ...pagination, ...filter });
+              setSum(response.data.data?.sum);
+              return {
+                list: response.data.data?.list || [],
+                total: response.data.data?.total || 0,
+              };
+            }}
+            renderItem={(invite) => {
+              return (
+                <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
+                  <div>
+                    <div className={'text-[#225BA9]'}>用户识别代码</div>
+                    <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
+                  </div>
+                  <div>
+                    <div className={'text-[#225BA9]'}>时间</div>
+                    <div className={'font-bold text-[#091B33]'}>
+                      {formatDate(invite.registered_at)}
+                    </div>
+                  </div>
+                </div>
+              );
+            }}
+            empty={<Empty />}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/user/components/affiliate/index.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  AffiliateDialog,
+  AffiliateDialogRef,
+} from '@/components/affiliate/components/AffiliateDialog';
 import { Display } from '@/components/display';
 import { Empty } from '@/components/empty';
 import useGlobalStore from '@/config/use-global';
@@ -10,7 +14,7 @@ import { Card, CardContent } from '@workspace/ui/components/card';
 import { formatDate } from '@workspace/ui/utils';
 import { Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'sonner';
 
@@ -36,32 +40,50 @@ export default function Affiliate() {
       return response.data.data?.list || [];
     },
   });
-
+  const dialogRef = useRef<AffiliateDialogRef>(null);
   return (
-    <div className='grid grid-cols-2 gap-4'>
+    <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
       <Card
         className={
           'rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
         }
       >
         <CardContent className={'p-0 text-[#666]'}>
-          <div className={'mb-6'}>
+          <div className={'sm:mb-6'}>
-            <div className={'text-xl font-bold'}>{t('totalCommission')}</div>
+            <div className={'font-bold sm:text-xl'}>{t('totalCommission')}</div>
-            <div className={'text-[15px] font-light'}>佣金金额，邀请成功后自动转入钱包余额</div>
+            <div className={'text-xs font-light sm:text-[15px]'}>
+              佣金金额，邀请成功后自动转入钱包余额
+            </div>
           </div>
-          <div className={'text-[32px] font-bold text-[#091B33]'}>历史推荐用户：7</div>
+          <div className={'mb-3 text-xl font-bold text-[#091B33] sm:text-[32px]'}>
-          <div className={'grid grid-cols-2 gap-5'}>
+            历史推荐用户：7
-            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+          </div>
-              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>佣金总额</p>
+          <div className={'grid grid-cols-2 gap-[10px] sm:gap-5'}>
-              <p className='text-2xl font-bold text-[#225BA9]'>
+            <div className='rounded-[20px] bg-[#EAEAEA] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
+              <p className='font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>佣金总额</p>
+              <p className='text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <Display type='currency' value={data?.total_commission} />
               </p>
             </div>
-            <div className='rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+            <div className='rounded-[20px] border-2 border-[#D9D9D9] px-4 py-2 shadow-sm transition-all duration-300 hover:shadow-md sm:py-4'>
-              <p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
+              <p className='flex justify-between font-medium text-[#666] opacity-80 sm:mb-3 sm:text-sm'>
-                <span>返佣邀请码</span>
+                <span className={'flex'}>
+                  返佣邀请码
+                  <CopyToClipboard
+                    text={`${location?.origin}/?invite=${user?.refer_code}`}
+                    onCopy={(text, result) => {
+                      if (result) {
+                        toast.success(t('copySuccess'));
+                      }
+                    }}
+                  >
+                    <Button variant='secondary' size='sm' className='px-0 sm:hidden'>
+                      <Copy className='h-4 w-4' />
+                    </Button>
+                  </CopyToClipboard>
+                </span>
               </p>
-              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
+              <p className='flex justify-between text-xl font-bold text-[#225BA9] sm:text-2xl'>
                 <span> {user?.refer_code}</span>
                 <CopyToClipboard
                   text={`${location?.origin}/?invite=${user?.refer_code}`}
@@ -71,7 +93,7 @@ export default function Affiliate() {
                     }
                   }}
                 >
-                  <Button variant='secondary' size='sm' className='gap-2'>
+                  <Button variant='secondary' size='sm' className='hidden gap-2 sm:block'>
                     <Copy className='h-4 w-4' />
                   </Button>
                 </CopyToClipboard>
@@ -82,11 +104,13 @@ export default function Affiliate() {
       </Card>
       <Card className='rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6'>
         <div className='mb-4 flex items-center justify-between'>
-          <h3 className='text-xl font-medium text-[#666666]'>邀请记录</h3>
+          <h3 className='font-medium text-[#666666] sm:text-xl'>邀请记录</h3>
-          <span className='text-sm text-[#225BA9]'>更多</span>
+          <span className='text-sm text-[#225BA9]' onClick={() => dialogRef.current.open()}>
+            更多
+          </span>
         </div>
 
-        <div className='space-y-4'>
+        <div className='space-y-2 sm:space-y-4'>
           {inviteList?.length ? (
             <div className='relative space-y-3'>
               <div
@@ -96,7 +120,7 @@ export default function Affiliate() {
               ></div>
               {inviteList?.map((invite) => {
                 return (
-                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2'>
+                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
                     <div>
                       <div className={'text-[#225BA9]'}>用户识别代码</div>
                       <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
@@ -116,38 +140,7 @@ export default function Affiliate() {
           )}
         </div>
       </Card>
-      {/*<ProList<API.UserAffiliate, Record<string, unknown>>
+      <AffiliateDialog ref={dialogRef} />
-        request={async (pagination, filter) => {
-          const response = await queryUserAffiliateList({ ...pagination, ...filter });
-          setSum(response.data.data?.sum);
-          return {
-            list: response.data.data?.list || [],
-            total: response.data.data?.total || 0,
-          };
-        }}
-        header={{
-          title: t('inviteRecords'),
-        }}
-        renderItem={(item) => {
-          return (
-            <Card className='overflow-hidden'>
-              <CardContent className='p-3 text-sm'>
-                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
-                  <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('userIdentifier')}</span>
-                    <span>{item.identifier}</span>
-                  </li>
-                  <li className='font-semibold'>
-                    <span className='text-muted-foreground'>{t('registrationTime')}</span>
-                    <time>{formatDate(item.registered_at)}</time>
-                  </li>
-                </ul>
-              </CardContent>
-            </Card>
-          );
-        }}
-        empty={<Empty />}
-      />*/}
     </div>
   );
 }

apps/user/components/main/OfferDialog/index.tsx

@@ -52,11 +52,11 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
   <div className='mb-2 sm:mb-4'>
     <div className='mb-1 flex items-baseline gap-2'>
       {plan.origin_price && (
-        <span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
+        <span className='text-2xl font-bold leading-[1.125em] text-[#666666] line-through'>
           ${plan.origin_price}
         </span>
       )}
-      <span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
+      <span className='text-2xl font-bold leading-[1.125em] text-[#091B33]'>
         ${plan.discount_price}
       </span>
       <span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
@@ -68,8 +68,10 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
 );
 
 import { useLoginDialog } from '@/app/auth/LoginDialogContext';
+import { Display } from '@/components/display';
 import Purchase from '@/components/subscribe/purchase';
 import useGlobalStore from '@/config/use-global';
+import { useTranslations } from 'next-intl';
 // 订阅按钮组件
 const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
   const { user } = useGlobalStore();
@@ -108,18 +110,36 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
 
 // 功能列表组件
 const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
-  const features = [
+  const t = useTranslations('subscribe.detail');
-    { label: '可用流量', value: plan.features?.traffic || '1' },
+  const features = [{ label: '可用节点', value: plan.features?.nodes || '11' }];
-    { label: '套餐时长', value: plan.features?.duration || '1' },
-    { label: '在线IP', value: plan.features?.onlineIPs || '2' },
-    { label: '在线连接数', value: plan.features?.connections || '3' },
-    { label: '峰值带宽', value: plan.features?.bandwidth || '2' },
-    { label: '可用节点', value: plan.features?.nodes || '11' },
-  ];
 
   return (
     <div className='mt-6 space-y-0 sm:mt-6'>
       <ul className='list-disc space-y-1 pl-5'>
+        <li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+          <div className={'flex items-start justify-between'}>
+            <span className=''>{t('availableTraffic')}</span>
+            <span>
+              <Display type='traffic' value={plan?.traffic} unlimited />
+            </span>
+          </div>
+        </li>
+        <li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+          <div className={'flex items-start justify-between'}>
+            <span className=''>{t('connectionSpeed')}</span>
+            <span>
+              <Display type='trafficSpeed' value={plan?.speed_limit} unlimited />
+            </span>
+          </div>
+        </li>
+        <li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
+          <div className={'flex items-start justify-between'}>
+            <span className=''>{t('connectedDevices')}</span>
+            <span>
+              <Display value={plan?.device_limit} type='number' unlimited />
+            </span>
+          </div>
+        </li>
         {features.map((feature) => (
           <li
             key={feature.label}
@@ -164,7 +184,7 @@ const PlanCard = forwardRef<
       className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:p-10'
     >
       {/* 套餐名称 */}
-      <h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
+      <h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
 
       {/* 价格区域 */}
       <PriceDisplay plan={plan} />

apps/user/components/subscribe/purchase.tsx

@@ -1,16 +1,19 @@
 'use client';
 
-import CloseSvg from '@/components/CustomIcon/icons/close.svg';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, purchase } from '@/services/user/order';
 import { useQuery } from '@tanstack/react-query';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/airo-ui/components/dialog';
 import { Button } from '@workspace/ui/components/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@workspace/ui/components/dialog';
 import { Separator } from '@workspace/ui/components/separator';
 import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { LoaderCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import {
   forwardRef,
@@ -114,16 +117,12 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent
+      <DialogContent className='px-4 sm:h-auto sm:w-[675px] sm:py-12'>
-        className='rounded-0 flex h-full w-full max-w-full flex-col gap-0 overflow-hidden border-none px-[120px] py-8 sm:h-auto sm:w-[675px] sm:!rounded-[32px] sm:py-12'
-        closeIcon={<Image src={CloseSvg} alt='close' />}
-        closeClassName='right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
-      >
         <DialogHeader className='p-6 pb-0'>
           <DialogTitle className='sr-only'>{t('buySubscription')}</DialogTitle>
         </DialogHeader>
         <div>
-          <div className='text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center sm:text-4xl'>
+          <div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
             购买套餐
           </div>
           <div>
@@ -156,7 +155,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
               </TabsList>
             </Tabs>
           </div>
-          <div>
+          <div className={'px-4 sm:px-0'}>
             <SubscribeDetail
               subscribe={{
                 ...subscribe,

apps/user/components/user-nav.tsx

@@ -2,6 +2,7 @@
 
 import useGlobalStore from '@/config/use-global';
 import { Logout } from '@/utils/common';
+import { useSidebar } from '@workspace/airo-ui/components/sidebar';
 import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
 import {
   DropdownMenu,
@@ -18,23 +19,24 @@ export function UserNav({ from = '' }: { from?: string }) {
   const { user, setUser } = useGlobalStore();
   const router = useRouter();
   const pathname = usePathname();
+  const { toggleSidebar } = useSidebar();
   if (user) {
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           {from === 'profile' ? (
             <div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
-              <Avatar className='h-[52px] w-[52px]'>
+              <Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
                 <AvatarImage
                   alt={user?.avatar ?? ''}
                   src={user?.avatar ?? ''}
                   className='object-cover'
                 />
-                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[40px] font-bold'>
+                <AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold sm:text-[40px]'>
                   {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
                 </AvatarFallback>
               </Avatar>
-              <div className='flex flex-1 items-center justify-between'>
+              <div className='flex flex-1 items-center justify-between text-xs sm:text-base'>
                 {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
               </div>
               <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
@@ -56,24 +58,24 @@ export function UserNav({ from = '' }: { from?: string }) {
           forceMount
           align='end'
           side={from === 'profile' ? 'right' : undefined}
-          className='w-64 gap-3 rounded-[42px] p-3'
+          className='flex w-64 flex-col gap-1 rounded-[42px] p-3 sm:gap-3'
         >
-          <div className='mb-3 flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
+          <div className='flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
-            <Avatar className='h-[52px] w-[52px]'>
+            <Avatar className='h-[34px] w-[34px] sm:h-[52px] sm:w-[52px]'>
               <AvatarImage
                 alt={user?.avatar ?? ''}
                 src={user?.avatar ?? ''}
                 className='object-cover'
               />
-              <AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-2xl font-bold'>
+              <AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-[18px] font-bold sm:text-2xl'>
                 {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
               </AvatarFallback>
             </Avatar>
             <div className='flex flex-col space-y-0.5'>
-              <p className='text-xl font-medium leading-none'>
+              <p className='text-xs font-medium leading-none sm:text-xl'>
                 {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
               </p>
-              <p className='text-muted-foreground text-xs'>
+              <p className='text-muted-foreground text-[10px] sm:text-xs'>
                 {user?.auth_methods?.[0]?.auth_identifier}
               </p>
             </div>
@@ -90,11 +92,12 @@ export function UserNav({ from = '' }: { from?: string }) {
               data-active={pathname === item.url}
               onClick={() => {
                 if (pathname === item.url) return;
+                toggleSidebar();
                 router.push(`${item.url}`);
               }}
-              className='mb-3 flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white'
+              className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white sm:text-xl'
             >
-              <Icon className='!size-6 flex-none' icon={item.icon!} />
+              <Icon className='!size-4 flex-none sm:!size-6' icon={item.icon!} />
               <span className='flex-grow truncate'>{t(item.title)}</span>
             </DropdownMenuItem>
           ))}
@@ -103,9 +106,9 @@ export function UserNav({ from = '' }: { from?: string }) {
               Logout();
               setUser();
             }}
-            className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white'
+            className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white sm:text-xl'
           >
-            <Icon className='!size-6 flex-none' icon='uil:exit' />
+            <Icon className='!size-4 flex-none sm:!size-6' icon='uil:exit' />
             <span className='flex-grow'>{t('logout')}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>

apps/user/config/navs.ts

@@ -29,11 +29,12 @@ export const navs = [
     icon: 'uil:book-alt',
     title: 'document',
   },
-  /*{
+  {
-    url: '/announcement',
+    url: '/profile',
     icon: 'uil:megaphone',
-    title: 'announcement',
+    title: 'profile',
-  },*/
+    hidden: true,
+  },
   {
     url: '/ticket',
     icon: 'uil:message',

packages/airo-ui/src/components/dialog.tsx

@@ -32,20 +32,17 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 // 扩展 DialogContentProps 接口
 interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {}
-  closeIcon?: React.ReactNode;
-  closeClassName?: string;
-}
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, closeClassName, closeIcon, children, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 !container fixed left-[50%] top-[50%] z-50 grid h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 gap-4 border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:rounded-lg sm:px-12 sm:py-12',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 container fixed left-[50%] top-[50%] z-50 h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12',
         className,
       )}
       {...props}
@@ -54,7 +51,6 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Close
         className={cn(
           'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-6 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
-          closeClassName,
         )}
       >
         <Image src={CloseSvg} alt={'close'} />

packages/airo-ui/src/components/sidebar.tsx

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { Button } from '@workspace/airo-ui/components/button';
 import { Input } from '@workspace/airo-ui/components/input';
 import { Separator } from '@workspace/airo-ui/components/separator';
-import { Sheet, SheetContent } from '@workspace/airo-ui/components/sheet';
+import { Sheet, SheetContent, SheetTitle } from '@workspace/airo-ui/components/sheet';
 import { Skeleton } from '@workspace/airo-ui/components/skeleton';
 import {
   Tooltip,
@@ -22,8 +22,8 @@ import { cn } from '@workspace/airo-ui/lib/utils';
 const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_MOBILE = '14rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_ICON = '2rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContext = {
@@ -91,8 +91,8 @@ const SidebarProvider = React.forwardRef<
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+      return setOpenMobile((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+    }, [isMobile, setOpenMobile]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
@@ -190,10 +190,14 @@ const Sidebar = React.forwardRef<
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetTitle className={'sr-only'}>Logo</SheetTitle>
           <SheetContent
             data-sidebar='sidebar'
             data-mobile='true'
-            className='bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden'
+            className={cn(
+              'bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden',
+              className,
+            )}
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,

packages/airo-ui/src/custom-components/pro-list/column-filter.tsx

@@ -48,7 +48,7 @@ export function ColumnFilter<TData>({ table, params, filters }: ColumnFilterProp
         return (
           <Input
             key={param.key}
-            className='w-64 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+            className='w-16 rounded-[20px] text-xs shadow-[inset_0_0_7.6px_0_#00000040] sm:w-64 sm:text-xl'
             placeholder={param.placeholder || 'Search...'}
             value={filters[param.key] || ''}
             onChange={(event) => updateFilter(param.key, event.target.value)}

packages/airo-ui/src/custom-components/pro-list/pro-list.tsx

@@ -132,7 +132,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
   const selectedCount = selectedRows.length;
 
   return (
-    <div className='flex max-w-full flex-col gap-4'>
+    <div className='flex max-w-full flex-col gap-2 sm:gap-4'>
       <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
         <div>
           {params ? (
@@ -171,7 +171,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
           'rounded-xl border': data.length === 0,
         })}
       >
-        <div className='grid grid-cols-1 gap-4'>
+        <div className='grid grid-cols-1 gap-2 sm:gap-4'>
           {data.length ? (
             data.map((item, index) => {
               const isSelected = !!rowSelection[index];