feat(upgrade): add upgrade page

src/App.tsx

@@ -25,6 +25,8 @@ const WechatAuthConfirmPage = lazy(
 const GoogleAuthConfirmPage = lazy(
   () => import('@/page/user/google/auth-confirm')
 );
+const UpgradePage = lazy(() => import('@/page/upgrade'));
+const PaymentPage = lazy(() => import('@/page/upgrade/payment'));
 
 const SharePage = lazy(() => import('@/page/share'));
 const SharedResourcePage = lazy(() => import('@/page/shared-resource'));
@@ -79,6 +81,14 @@ const router = createBrowserRouter([
         path: 'invite/confirm',
         element: <InvitePage />,
       },
+      {
+        path: 'upgrade',
+        element: <UpgradePage />,
+      },
+      {
+        path: 'upgrade/payment',
+        element: <PaymentPage />,
+      },
       {
         path: 'invite/:namespace_id/:invitation_id',
         element: <InviteRedirectPage />,

src/hooks/use-device.ts

@@ -0,0 +1,13 @@
+import isMobile from 'ismobilejs';
+
+export function useDevice() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isPhone = isMobile(userAgent).phone;
+  const isWeChat = userAgent.includes('micromessenger');
+
+  return {
+    desktop: !isPhone,
+    mobile: isPhone,
+    wechat: isWeChat,
+  };
+}

src/interface.ts

@@ -280,3 +280,38 @@ export interface FileInfo {
   post_url: string;
   post_fields: [string, string][];
 }
+
+export enum OrderStatus {
+  PENDING = 'pending',
+  PAID = 'paid',
+  CLOSED = 'closed',
+  REFUNDED = 'refunded',
+}
+
+export enum PaymentMethod {
+  ALIPAY = 'alipay',
+  WECHAT = 'wechat',
+}
+
+export enum PaymentType {
+  NATIVE = 'native',
+  H5 = 'h5',
+  JSAPI = 'jsapi',
+}
+
+export interface Order extends IBase {
+  id: string;
+  order_no: string;
+  user_id: string;
+  product_id: string | null;
+  amount: number;
+  currency: string;
+  status: OrderStatus;
+  payment_method: PaymentMethod | null;
+  payment_type: PaymentType | null;
+  third_party_order_no: string | null;
+  description: string;
+  paid_at: string | null;
+  closed_at: string | null;
+  refunded_at: string | null;
+}

src/page/sidebar/index.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 import ConfirmDeleteDialog from '@/components/confirm-delete-dialog';
 import { Sidebar, SidebarHeader, SidebarRail } from '@/components/ui/sidebar';
+import { UpgradeButton } from '@/page/upgrade/button';
 
 import Content from './content';
 import { FooterSidebar } from './footer';
@@ -39,6 +40,7 @@ export default function MainSidebar() {
         <SidebarHeader className="pt-[16px] gap-[10px] pr-0">
           <Switcher namespaceId={namespaceId} />
           <Header active={chatPage} onActiveKey={handleActiveKey} />
+          <UpgradeButton />
         </SidebarHeader>
         <Content
           data={data}

src/page/upgrade/button.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+
+export function UpgradeButton() {
+  const navigate = useNavigate();
+
+  return (
+    <Button size="sm" onClick={() => navigate('/upgrade')}>
+      升级帐户
+    </Button>
+  );
+}

src/page/upgrade/index.tsx

@@ -0,0 +1,26 @@
+import { ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+
+import { Product } from './product';
+
+export default function UpgradePage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="container mx-auto py-8 px-4">
+      <div className="mb-6">
+        <Button variant="outline" onClick={() => navigate(-1)}>
+          <ArrowLeft className="h-4 w-4" />
+          返回
+        </Button>
+      </div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">升级帐户</h1>
+        <p className="text-muted-foreground">选择适合您的套餐，解锁更多功能</p>
+      </div>
+      <Product />
+    </div>
+  );
+}