show quota

Author: sunnylqm

package.json

@@ -2,7 +2,7 @@
   "name": "pushy-admin",
   "private": true,
   "scripts": {
-    "dev": "PUBLIC_API=https://update.reactnative.cn/api rsbuild dev",
+    "dev": "PUBLIC_API=https://5.rnupdate.online/api rsbuild dev",
     "dev:local": "PUBLIC_API=http://localhost:9000 rsbuild dev",
     "build": "NODE_ENV=production rsbuild build",
     "preview": "rsbuild preview",

src/components/sider.tsx

@@ -130,7 +130,7 @@ export default function Sider() {
 const SiderMenu = ({ selectedKeys }: SiderMenuProps) => {
   const { user, displayExpireDay, displayRemainingDays } = useUserInfo();
   const { apps } = useAppList();
-  const quota = quotas[user?.tier as keyof typeof quotas];
+  const quota = user.quota || quotas[user?.tier as keyof typeof quotas];
   const pvQuota = quota?.pv;
   const consumedQuota = user?.checkQuota;
   const percent =

src/constants/quotas.ts

@@ -62,4 +62,4 @@ export const quotas = {
     bundleSize: '200m',
     pv: 100000000,
   },
-};
+} as const;

src/pages/user.tsx

@@ -1,6 +1,14 @@
 import { AlipayCircleOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Button, Descriptions, Dropdown, Popover, Space, Spin } from 'antd';
+import {
+  Button,
+  Descriptions,
+  Dropdown,
+  message,
+  Popover,
+  Space,
+  Spin,
+} from 'antd';
 import { type ReactNode, useState } from 'react';
 import { api } from '@/services/api';
 import { useUserInfo } from '@/utils/hooks';
@@ -38,6 +46,9 @@ const PurchaseButton = ({
       className="ml-6"
       icon={<AlipayCircleOutlined />}
       onClick={async () => {
+        if (tier === 'custom') {
+          return message.error('定制版用户付费请联系客服');
+        }
         setLoading(true);
         await purchase(tier);
       }}
@@ -122,8 +133,39 @@ function UserPanel() {
       </div>
     );
   }
-  const { name, email, tier } = user;
-  const currentQuota = quotas[tier as keyof typeof quotas];
+  const { name, email, tier, quota } = user;
+  const defaultQuota = quotas[tier as keyof typeof quotas];
+  const currentQuota = quota || defaultQuota;
+
+  const tierDisplay = currentQuota.title;
+  const quotaTableData = [
+    { key: 'app', item: '应用数量', value: `${currentQuota.app} 个` },
+    {
+      key: 'package',
+      item: '每个应用原生包数量',
+      value: `${currentQuota.package} 个`,
+    },
+    {
+      key: 'packageSize',
+      item: '单个原生包大小',
+      value: currentQuota.packageSize,
+    },
+    {
+      key: 'bundle',
+      item: '每个应用热更包数量',
+      value: `${currentQuota.bundle} 个`,
+    },
+    {
+      key: 'bundleSize',
+      item: '单个热更包大小',
+      value: currentQuota.bundleSize,
+    },
+    {
+      key: 'pv',
+      item: '每日总查询次数',
+      value: `${currentQuota.pv.toLocaleString()} 次`,
+    },
+  ];
   return (
     <div className="body">
       <Descriptions
@@ -136,8 +178,10 @@ function UserPanel() {
         <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
         <Descriptions.Item label="服务版本">
           <Space>
-            {currentQuota.title}
-            <UpgradeDropdown currentQuota={currentQuota} />
+            {tierDisplay}
+            {!quota && defaultQuota && (
+              <UpgradeDropdown currentQuota={defaultQuota} />
+            )}
           </Space>
         </Descriptions.Item>
         <Descriptions.Item label="服务有效期至">
@@ -165,6 +209,17 @@ function UserPanel() {
             )}
           </Space>
         </Descriptions.Item>
+        <Descriptions.Item label="额度详情">
+          {quotaTableData.map(({ key, item, value }) => (
+            <div key={key}>
+              {item}：{value} <br />
+            </div>
+          ))}
+          <div className="h-px my-4 w-md bg-gray-300" />
+          <div className="text-xm text-gray-500">
+            如有定制需求（限高级版以上），请联系 QQ 客服 34731408
+          </div>
+        </Descriptions.Item>
       </Descriptions>
       <br />
       <Button href={PRICING_LINK} target="_blank">

src/types.d.ts

@@ -13,14 +13,28 @@ declare module '*.jpg' {
   export default content;
 }
 
+type Tier = 'free' | 'standard' | 'premium' | 'pro' | 'custom';
+
 interface User {
   email: string;
   id: number;
   name: string;
-  tier: 'free' | 'standard' | 'premium' | 'pro';
+  tier: Tier;
   tierExpiresAt?: string;
   checkQuota?: number;
   last7dAvg?: number;
+  quota?: Quota;
+}
+
+export interface Quota {
+  base?: Exclude<Tier, 'custom'>;
+  app: number;
+  package: number;
+  packageSize: string;
+  bundle: number;
+  bundleSize: string;
+  pv: number;
+  price?: number;
 }
 
 interface App {
@@ -115,6 +129,6 @@ interface AuditLog {
   userAgent?: string;
   apiTokens?: {
     tokenSuffix: string;
-  }
+  };
   createdAt: string;
 }

src/utils/hooks.ts

@@ -26,6 +26,9 @@ export const useUserInfo = () => {
   const displayRemainingDays = isExpiringSoon
     ? `(剩余 ${remainingDays} 天，之后转为免费版)`
     : '';
+  if (data?.tier === 'custom') {
+    data.quota.title = '定制版';
+  }
   return {
     user: getToken() ? data : null,
     displayExpireDay,