gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: modal

Browse Source
This commit is contained in:
archer
2023-07-26 16:01:21 +08:00
parent ffdef41bf2
commit c06a9fb52b
23 changed files with 696 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
client/src/pages/account/components/BillDetail.tsx
View File

@@ -1,9 +1,5 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
Flex,
Box,
@@ -19,64 +15,64 @@ import { UserBillType } from '@/types/user';
import dayjs from 'dayjs';
import { BillSourceMap } from '@/constants/user';
import { formatPrice } from '@/utils/user';
import MyModal from '@/components/MyModal';
import { useTranslation } from 'react-i18next';
const BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void }) => {
const { t } = useTranslation();
return (
<Modal isOpen={true} onClose={onClose} isCentered>
<ModalOverlay />
<ModalContent minW={'min(90vw,600px)'}>
<ModalHeader>账单详情</ModalHeader>
<ModalBody>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>订单号:</Box>
<Box>{bill.id}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>生成时间:</Box>
<Box>{dayjs(bill.time).format('YYYY/MM/DD HH:mm:ss')}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>应用名:</Box>
<Box>{bill.appName}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>来源:</Box>
<Box>{BillSourceMap[bill.source]}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>总金额:</Box>
<Box fontWeight={'bold'}>{bill.total}元</Box>
</Flex>
<Box pb={4}>
<Box flex={'0 0 80px'} mb={1}>
扣费模块
</Box>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th>模块名</Th>
<Th>AI模型</Th>
<Th>Token长度</Th>
<Th>费用</Th>
</Tr>
</Thead>
<Tbody>
{bill.list.map((item, i) => (
<Tr key={i}>
<Td>{item.moduleName}</Td>
<Td>{item.model}</Td>
<Td>{item.tokenLen}</Td>
<Td>{formatPrice(item.amount)}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
<MyModal isOpen={true} onClose={onClose} title={t('user.Bill Detail')}>
<ModalBody>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>订单号:</Box>
<Box>{bill.id}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>生成时间:</Box>
<Box>{dayjs(bill.time).format('YYYY/MM/DD HH:mm:ss')}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>应用名:</Box>
<Box>{bill.appName}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>来源:</Box>
<Box>{BillSourceMap[bill.source]}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>总金额:</Box>
<Box fontWeight={'bold'}>{bill.total}元</Box>
</Flex>
<Box pb={4}>
<Box flex={'0 0 80px'} mb={1}>
扣费模块
</Box>
</ModalBody>
</ModalContent>
</Modal>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th>模块名</Th>
<Th>AI模型</Th>
<Th>Token长度</Th>
<Th>费用</Th>
</Tr>
</Thead>
<Tbody>
{bill.list.map((item, i) => (
<Tr key={i}>
<Td>{item.moduleName}</Td>
<Td>{item.model}</Td>
<Td>{item.tokenLen}</Td>
<Td>{formatPrice(item.amount)}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
</ModalBody>
</MyModal>
);
};

2
client/src/pages/account/components/Info.tsx
View File

@@ -121,7 +121,7 @@ const UserInfo = () => {
<Flex alignItems={'center'}>
<Box flex={'0 0 50px'}>余额:</Box>
<Box>
<strong>{userInfo?.balance}</strong> 元
<strong>{userInfo?.balance.toFixed(3)}</strong> 元
</Box>
<Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
充值

149
client/src/pages/account/components/PayModal.tsx
View File

@@ -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>
);
};

2
client/src/pages/account/index.tsx
View File

@@ -33,7 +33,7 @@ enum TabEnum {
const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const tabList = useRef([
{ icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> },
{ icon: 'billRecordLight', label: '消费记录', id: TabEnum.bill, Component: <BillTable /> },
{ icon: 'billRecordLight', label: '使用记录', id: TabEnum.bill, Component: <BillTable /> },
{ icon: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
{ icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
{ icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }