perf: modal

client/src/pages/account/components/PayModal.tsx

@@ -1,26 +1,17 @@
 import React, { useState, useCallback } from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Button,
-  Input,
-  Box,
-  Grid
-} from '@chakra-ui/react';
+import { ModalFooter, ModalBody, Button, Input, Box, Grid } from '@chakra-ui/react';
 import { getPayCode, checkPayResult } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { getErrText } from '@/utils/tools';
+import { useTranslation } from 'react-i18next';
 import Markdown from '@/components/Markdown';
+import MyModal from '@/components/MyModal';
 
 const PayModal = ({ onClose }: { onClose: () => void }) => {
   const router = useRouter();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [inputVal, setInputVal] = useState<number | ''>('');
   const [loading, setLoading] = useState(false);
@@ -71,46 +62,42 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
   );
 
   return (
-    <>
-      <Modal
-        isOpen={true}
-        onClose={() => {
-          if (payId) return;
-          onClose();
-        }}
-      >
-        <ModalOverlay />
-        <ModalContent minW={'auto'}>
-          <ModalHeader>充值</ModalHeader>
-          {!payId && <ModalCloseButton />}
-
-          <ModalBody py={0}>
-            {!payId && (
-              <>
-                <Grid gridTemplateColumns={'repeat(4,1fr)'} gridGap={5} mb={4}>
-                  {[10, 20, 50, 100].map((item) => (
-                    <Button
-                      key={item}
-                      variant={item === inputVal ? 'solid' : 'outline'}
-                      onClick={() => setInputVal(item)}
-                    >
-                      {item}元
-                    </Button>
-                  ))}
-                </Grid>
-                <Box mb={4}>
-                  <Input
-                    value={inputVal}
-                    type={'number'}
-                    step={1}
-                    placeholder={'其他金额，请取整数'}
-                    onChange={(e) => {
-                      setInputVal(Math.floor(+e.target.value));
-                    }}
-                  ></Input>
-                </Box>
-                <Markdown
-                  source={`
+    <MyModal
+      isOpen={true}
+      onClose={() => {
+        if (payId) return;
+        onClose();
+      }}
+      title={t('user.Pay')}
+      showCloseBtn={!payId}
+    >
+      <ModalBody py={0}>
+        {!payId && (
+          <>
+            <Grid gridTemplateColumns={'repeat(4,1fr)'} gridGap={5} mb={4}>
+              {[10, 20, 50, 100].map((item) => (
+                <Button
+                  key={item}
+                  variant={item === inputVal ? 'solid' : 'outline'}
+                  onClick={() => setInputVal(item)}
+                >
+                  {item}元
+                </Button>
+              ))}
+            </Grid>
+            <Box mb={4}>
+              <Input
+                value={inputVal}
+                type={'number'}
+                step={1}
+                placeholder={'其他金额，请取整数'}
+                onChange={(e) => {
+                  setInputVal(Math.floor(+e.target.value));
+                }}
+              ></Input>
+            </Box>
+            <Markdown
+              source={`
 | 计费项 | 价格: 元/ 1K tokens(包含上下文)|
 | --- | --- |
 | 知识库 - 索引 | 0.002 |
@@ -118,36 +105,34 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
 | FastAI16k - 对话 | 0.03 |
 | FastAI-Plus - 对话 | 0.45 |
 | 文件拆分 | 0.03 |`}
-                />
-              </>
-            )}
-            {/* 付费二维码 */}
-            <Box textAlign={'center'}>
-              {payId && <Box mb={3}>请微信扫码支付: {inputVal}元，请勿关闭页面</Box>}
-              <Box id={'payQRCode'} display={'inline-block'}></Box>
-            </Box>
-          </ModalBody>
+            />
+          </>
+        )}
+        {/* 付费二维码 */}
+        <Box textAlign={'center'}>
+          {payId && <Box mb={3}>请微信扫码支付: {inputVal}元，请勿关闭页面</Box>}
+          <Box id={'payQRCode'} display={'inline-block'}></Box>
+        </Box>
+      </ModalBody>
 
-          <ModalFooter>
-            {!payId && (
-              <>
-                <Button variant={'base'} onClick={onClose}>
-                  取消
-                </Button>
-                <Button
-                  ml={3}
-                  isLoading={loading}
-                  isDisabled={!inputVal || inputVal === 0}
-                  onClick={handleClickPay}
-                >
-                  获取充值二维码
-                </Button>
-              </>
-            )}
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
+      <ModalFooter>
+        {!payId && (
+          <>
+            <Button variant={'base'} onClick={onClose}>
+              取消
+            </Button>
+            <Button
+              ml={3}
+              isLoading={loading}
+              isDisabled={!inputVal || inputVal === 0}
+              onClick={handleClickPay}
+            >
+              获取充值二维码
+            </Button>
+          </>
+        )}
+      </ModalFooter>
+    </MyModal>
   );
 };