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

V4.8.15 feature (#3331)

Browse Source 
* feat: add customize toolkit (#3205)

* chaoyang

* fix-auth

* add toolkit

* add order

* plugin usage

* fix

* delete console:

* Fix: Fix fullscreen preview top positioning and improve Markdown rendering logic (#3247)

* 完成任务：修复全屏预览顶部固定问题，优化 Markdown 渲染逻辑

* 有问题修改

* 问题再修改

* 修正问题

* fix: plugin standalone display issue (#3254)

* 4.8.15 test (#3246)

* o1 config

* perf: system plugin code

* 调整系统插件代码。增加html 渲染安全配置。 (#3258)

* perf: base64 picker

* perf: list app or dataset

* perf: plugin config code

* 小窗适配等问题 (#3257)

* 小窗适配等问题

* git问题

* 小窗剩余问题

* feat: system plugin auth and lock version (#3265)

* feat: system plugin auth and lock version

* update comment

* 4.8.15 test (#3267)

* tmp log

* perf: login direct

* perf: iframe html code

* remove log

* fix: plugin standalone display (#3277)

* refactor: 页面拆分&i18n拆分 (#3281)

* refactor: account组件拆成独立页面

* script: 新增i18n json文件创建脚本

* refactor: 页面i18n拆分

* i18n: add en&hant

* 4.8.15 test (#3285)

* tmp log

* remove log

* fix: watch avatar refresh

* perf: i18n code

* fix(plugin): use intro instead of userguide (#3290)

* Universal SSO (#3292)

* tmp log

* remove log

* feat: common oauth

* readme

* perf: sso provider

* remove sso code

* perf: refresh plugins

* feat: add api dataset (#3272)

* add api-dataset

* fix api-dataset

* fix api dataset

* fix ts

* perf: create collection code (#3301)

* tmp log

* remove log

* perf: i18n change

* update version doc

* feat: question guide from chatId

* perf: create collection code

* fix: request api

* fix: request api

* fix: tts auth and response type (#3303)

* perf: md splitter

* fix: tts auth and response type

* fix: api file dataset (#3307)

* perf: api dataset init (#3310)

* perf: collection schema

* perf: api dataset init

* refactor: 团队管理独立页面 (#3302)

* ui: 团队管理独立页面

* 代码优化

* fix

* perf: sync collection and ui check (#3314)

* perf: sync collection

* remove script

* perf: update api server

* perf: api dataset parent

* perf: team ui

* perf: team 18n

* update team ui

* perf: ui check

* perf: i18n

* fix: debug variables & cronjob & system plugin callback load (#3315)

* fix: debug variables & cronjob & system plugin callback load

* fix type

* fix

* fix

* fix: plugin dataset quote;perf: system variables init (#3316)

* fix: plugin dataset quote

* perf: system variables init

* perf: node templates ui;fix: dataset import ui (#3318)

* fix: dataset import ui

* perf: node templates ui

* perf: ui refresh

* feat:套餐改名和套餐跳转配置 (#3309)

* fixing:except Sidebar

* 去除了多余的代码

* 修正了套餐说明的代码

* 修正了误删除的show_git代码

* 修正了名字部分等代码

* 修正了问题,遗留了其他和ui讨论不一致的部分

* 4.8.15 test (#3319)

* remove log

* pref: bill ui

* pref: bill ui

* perf: log

* html渲染文档 (#3270)

* html渲染文档

* 文档有点小问题

* feat: doc (#3322)

* 集合重训练 (#3282)

* rebaser

* 一点补充

* 小问题

* 其他问题修正，删除集合保留文件的参数还没找到...

* reTraining

* delete uesless

* 删除了一行错误代码

* 集合重训练部分

* fixing

* 删除console代码

* feat: navbar item config (#3326)

* perf: custom navbar code;perf: retraining code;feat: api dataset and dataset api doc (#3329)

* feat: api dataset and dataset api doc

* perf: retraining code

* perf: custom navbar code

* fix: ts (#3330)

* fix: ts

* fix: ts

* retraining ui

* perf: api collection filter

* perf: retrining button

---------

Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: Jiangween <145003935+Jiangween@users.noreply.github.com>
Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>
This commit is contained in:
Archer
2024-12-06 10:56:53 +08:00
committed by GitHub
parent b188544386
commit 1aebe5f185
307 changed files with 7383 additions and 3981 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
projects/app/src/pages/account/apikey.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import ApiKeyTable from '@/components/support/apikey/Table';
import { useTranslation } from 'next-i18next';
import { Box } from '@chakra-ui/react';
import AccountContainer, { TabEnum } from './components/AccountContainer';
import { serviceSideProps } from '../../web/common/utils/i18n';
const ApiKey = () => {
const { t } = useTranslation();
return (
<AccountContainer>
<Box px={[4, 8]} py={[4, 6]}>
<ApiKeyTable tips={t('account_apikey:key_tips')}></ApiKeyTable>
</Box>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account_apikey', 'account', 'publish']))
}
};
}
export default ApiKey;

33
projects/app/src/pages/account/components/bill/ApplyInvoiceModal.tsx → projects/app/src/pages/account/bill/components/ApplyInvoiceModal.tsx
View File

@@ -79,8 +79,8 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
}),
{
manual: true,
successToast: t('common:common.submit_success'),
errorToast: t('common:common.Submit failed'),
successToast: t('account_bill:submit_success'),
errorToast: t('account_bill:submit_failed'),
onSuccess: () => {
onClose();
router.reload();
@@ -100,6 +100,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
emailAddress: ''
}
});
const { loading: isLoadingHeader } = useRequest2(() => getTeamInvoiceHeader(), {
manual: false,
onSuccess: (res) => inputForm.reset(res)
@@ -120,12 +121,12 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
w={'43rem'}
onClose={onClose}
isLoading={isLoading}
title={t('common:support.wallet.apply_invoice')}
title={t('account_bill:support_wallet_apply_invoice')}
>
{!isOpenSettleModal ? (
<Box px={['1.6rem', '3.25rem']} py={['1rem', '2rem']}>
<Box fontWeight={500} fontSize={'1rem'} pb={'0.75rem'}>
{t('common:support.wallet.billable_invoice')}
{t('account_bill:support_wallet_apply_invoice')}
</Box>
<Box h={'27.9rem'} overflow={'auto'}>
<TableContainer>
@@ -149,9 +150,9 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
}}
/>
</Th>
<Th>{t('common:user.type')}</Th>
<Th>{t('common:user.Time')}</Th>
<Th>{t('common:support.wallet.Amount')}</Th>
<Th>{t('account_bill:type')}</Th>
<Th>{t('account_bill:time')}</Th>
<Th>{t('account_bill:support_wallet_amount')}</Th>
</Tr>
</Thead>
<Tbody fontSize={'0.875rem'}>
@@ -179,7 +180,9 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss')
: '-'}
</Td>
<Td>{t('common:pay.yuan', { amount: formatStorePrice2Read(item.price) })}</Td>
<Td>
{t('account_bill:yuan', { amount: formatStorePrice2Read(item.price) })}
</Td>
</Tr>
))}
</Tbody>
@@ -193,7 +196,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
{t('common:support.wallet.noBill')}
{t('account_bill:no_invoice_record')}
</Box>
</Flex>
)}
@@ -213,7 +216,7 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
>
<Flex alignItems={'center'}>
<Box px={'1.25rem'} py={'0.5rem'}>
{t('common:common.Confirm')}
{t('account_bill:confirm')}
</Box>
</Flex>
</Button>
@@ -223,8 +226,8 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
<Box px={['1.6rem', '3.25rem']} py={['1rem', '2rem']}>
<Box w={'100%'} fontSize={'0.875rem'}>
<Flex w={'100%'} justifyContent={'space-between'}>
<Box>{t('common:support.wallet.invoice_amount')}</Box>
<Box>{t('common:pay.yuan', { amount: formatStorePrice2Read(totalPrice) })}</Box>
<Box>{t('account_bill:support_wallet_amount')}</Box>
<Box>{t('account_bill:yuan', { amount: formatStorePrice2Read(totalPrice) })}</Box>
</Flex>
<Box w={'100%'} py={4}>
<Divider showBorderBottom={false} />
@@ -248,21 +251,21 @@ const ApplyInvoiceModal = ({ onClose }: { onClose: () => void }) => {
>
<MyIcon name="infoRounded" w={'14px'} h={'14px'} />
<Box ml={2} fontSize={'0.6875rem'}>
{t('common:support.wallet.invoice_info')}
{t('account_bill:invoice_sending_info')}
</Box>
</Flex>
<Flex justify={'flex-end'} w={'100%'} pt={[3, 7]}>
<Button variant={'outline'} mr={'0.75rem'} px="0" onClick={handleBack}>
<Flex alignItems={'center'}>
<Box px={'1.25rem'} py={'0.5rem'}>
{t('common:back')}
{t('account_bill:back')}
</Box>
</Flex>
</Button>
<Button isLoading={isSubmitting} px="0" onClick={inputForm.handleSubmit(onSubmitApply)}>
<Flex alignItems={'center'}>
<Box px={'1.25rem'} py={'0.5rem'}>
{t('common:common.Confirm')}
{t('account_bill:confirm')}
</Box>
</Flex>
</Button>

60
projects/app/src/pages/account/components/bill/BillTable.tsx → projects/app/src/pages/account/bill/components/BillTable.tsx
View File

@@ -44,7 +44,7 @@ const BillTable = () => {
const billTypeList = useMemo(
() =>
[
{ label: t('common:common.All'), value: '' },
{ label: t('account_bill:all'), value: '' },
...Object.entries(billTypeMap).map(([key, value]) => ({
label: t(value.label as any),
value: key
@@ -120,9 +120,9 @@ const BillTable = () => {
w={'130px'}
></MySelect>
</Th>
<Th>{t('common:user.Time')}</Th>
<Th>{t('common:support.wallet.Amount')}</Th>
<Th>{t('common:support.wallet.bill.Status')}</Th>
<Th>{t('account_bill:time')}</Th>
<Th>{t('account_bill:support_wallet_amount')}</Th>
<Th>{t('account_bill:status')}</Th>
<Th></Th>
</Tr>
</Thead>
@@ -134,16 +134,16 @@ const BillTable = () => {
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{commonT('common:pay.yuan', { amount: formatStorePrice2Read(item.price) })}</Td>
<Td>{t('account_bill:yuan', { amount: formatStorePrice2Read(item.price) })}</Td>
<Td>{t(billStatusMap[item.status]?.label as any)}</Td>
<Td>
{item.status === 'NOTPAY' && (
<Button mr={4} onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
{t('common:common.Update')}
{t('account_bill:update')}
</Button>
)}
<Button variant={'whiteBase'} size={'sm'} onClick={() => setBillDetail(item)}>
{t('common:common.Detail')}
{t('account_bill:detail')}
</Button>
</Td>
</Tr>
@@ -164,7 +164,7 @@ const BillTable = () => {
>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
{t('common:support.wallet.noBill')}
{t('account_bill:no_invoice_record')}
</Box>
</Flex>
)}
@@ -187,85 +187,79 @@ function BillDetailModal({ bill, onClose }: { bill: BillSchemaType; onClose: ()
isOpen={true}
onClose={onClose}
iconSrc="/imgs/modal/bill.svg"
title={t('common:support.wallet.bill_detail')}
title={t('account_bill:bill_detail')}
maxW={['90vw', '700px']}
>
<ModalBody>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.bill.Number')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:order_number')}:</FormLabel>
<Box>{bill.orderId}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.usage.Time')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:generation_time')}:</FormLabel>
<Box>{dayjs(bill.createTime).format('YYYY/MM/DD HH:mm:ss')}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.bill.Type')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:order_type')}:</FormLabel>
<Box>{t(billTypeMap[bill.type]?.label as any)}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.bill.Status')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:status')}:</FormLabel>
<Box>{t(billStatusMap[bill.status]?.label as any)}</Box>
</Flex>
{!!bill.metadata?.payWay && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.bill.payWay.Way')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:payment_method')}:</FormLabel>
<Box>{t(billPayWayMap[bill.metadata.payWay]?.label as any)}</Box>
</Flex>
)}
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.Amount')}:</FormLabel>
<Box>{commonT('common:pay.yuan', { amount: formatStorePrice2Read(bill.price) })}</Box>
<FormLabel flex={'0 0 120px'}>{t('account_bill:support_wallet_amount')}:</FormLabel>
<Box>{t('account_bill:yuan', { amount: formatStorePrice2Read(bill.price) })}</Box>
</Flex>
{bill.metadata && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>{t('common:support.wallet.has_invoice')}:</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:has_invoice')}:</FormLabel>
{bill.metadata.payWay === 'balance' ? (
t('user:bill.not_need_invoice')
) : (
<Box>
{(bill.metadata.payWay = bill.hasInvoice ? t('common:yes') : t('common:no'))}
{
(bill.metadata.payWay = bill.hasInvoice
? t('account_bill:yes')
: t('account_bill:no'))
}
</Box>
)}
</Flex>
)}
{!!bill.metadata?.subMode && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>
{t('common:support.wallet.subscription.mode.Period')}:
</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:subscription_period')}:</FormLabel>
<Box>{t(subModeMap[bill.metadata.subMode]?.label as any)}</Box>
</Flex>
)}
{!!bill.metadata?.standSubLevel && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>
{t('common:support.wallet.subscription.Stand plan level')}:
</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:subscription_package')}:</FormLabel>
<Box>{t(standardSubLevelMap[bill.metadata.standSubLevel]?.label as any)}</Box>
</Flex>
)}
{bill.metadata?.month !== undefined && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>
{t('common:support.wallet.subscription.Month amount')}:
</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:subscription_mode_month')}:</FormLabel>
<Box>{bill.metadata?.month}</Box>
</Flex>
)}
{bill.metadata?.datasetSize !== undefined && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>
{t('common:support.wallet.subscription.Extra dataset size')}:
</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:extra_dataset_size')}:</FormLabel>
<Box>{bill.metadata?.datasetSize}</Box>
</Flex>
)}
{bill.metadata?.extraPoints !== undefined && (
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 120px'}>
{t('common:support.wallet.subscription.Extra ai points')}:
</FormLabel>
<FormLabel flex={'0 0 120px'}>{t('account_bill:extra_ai_points')}:</FormLabel>
<Box>{bill.metadata.extraPoints}</Box>
</Flex>
)}

52
projects/app/src/pages/account/components/bill/InvoiceHeaderForm.tsx → projects/app/src/pages/account/bill/components/InvoiceHeaderForm.tsx
View File

@@ -38,12 +38,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>
{t('common:support.wallet.invoice_data.organization_name')}
</FormLabel>
<FormLabel required>{t('account_bill:organization_name')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.organization_name')}
placeholder={t('account_bill:organization_name')}
{...register('teamName', { required: true })}
/>
</Flex>
@@ -52,10 +50,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('common:support.wallet.invoice_data.unit_code')}</FormLabel>
<FormLabel required>{t('account_bill:unit_code')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.unit_code')}
placeholder={t('account_bill:unit_code')}
{...register('unifiedCreditCode', { required: true })}
/>
</Flex>
@@ -64,12 +62,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>
{t('common:support.wallet.invoice_data.company_address')}
</FormLabel>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:company_address')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.company_address')}
placeholder={t('account_bill:company_address')}
{...register('companyAddress', { required: !!needSpecialInvoice })}
/>
</Flex>
@@ -78,12 +74,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>
{t('common:support.wallet.invoice_data.company_phone')}
</FormLabel>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:company_phone')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.company_phone')}
placeholder={t('account_bill:company_phone')}
{...register('companyPhone', { required: !!needSpecialInvoice })}
/>
</Flex>
@@ -92,12 +86,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>
{t('common:support.wallet.invoice_data.bank')}
</FormLabel>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:bank_name')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.bank')}
placeholder={t('account_bill:bank_name')}
{...register('bankName', { required: !!needSpecialInvoice })}
/>
</Flex>
@@ -106,12 +98,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required={!!needSpecialInvoice}>
{t('common:support.wallet.invoice_data.bank_account')}
</FormLabel>
<FormLabel required={!!needSpecialInvoice}>{t('account_bill:bank_account')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.bank_account')}
placeholder={t('account_bill:bank_account')}
{...register('bankAccount', { required: !!needSpecialInvoice })}
/>
</Flex>
@@ -120,9 +110,7 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>
{t('common:support.wallet.invoice_data.need_special_invoice')}
</FormLabel>
<FormLabel required>{t('account_bill:need_special_invoice')}</FormLabel>
{/* @ts-ignore */}
<RadioGroup
value={`${needSpecialInvoice}`}
@@ -133,10 +121,10 @@ export const InvoiceHeaderSingleForm = ({
>
<HStack h={'2rem'}>
<Radio value="true" pr={'1rem'}>
<Box fontSize={'14px'}>{t('common:yes')}</Box>
<Box fontSize={'14px'}>{t('account_bill:yes')}</Box>
</Radio>
<Radio value="false">
<Box fontSize={'14px'}>{t('common:no')}</Box>
<Box fontSize={'14px'}>{t('account_bill:no')}</Box>
</Radio>
</HStack>
</RadioGroup>
@@ -149,10 +137,10 @@ export const InvoiceHeaderSingleForm = ({
alignItems={['flex-start', 'center']}
flexDir={['column', 'row']}
>
<FormLabel required>{t('common:support.wallet.invoice_data.email')}</FormLabel>
<FormLabel required>{t('account_bill:email_address')}</FormLabel>
<Input
{...styles}
placeholder={t('common:support.wallet.invoice_data.email')}
placeholder={t('account_bill:email_address')}
{...register('emailAddress', {
required: true,
pattern: {
@@ -195,8 +183,8 @@ const InvoiceHeaderForm = () => {
(data: TeamInvoiceHeaderType) => updateTeamInvoiceHeader(data),
{
manual: true,
successToast: t('common:common.Save Success'),
errorToast: t('common:common.Save Failed')
successToast: t('account_bill:save_success'),
errorToast: t('account_bill:save_failed')
}
);
@@ -214,7 +202,7 @@ const InvoiceHeaderForm = () => {
>
<Flex alignItems={'center'} px={'20px'}>
<Box px={'1.25rem'} py={'0.5rem'}>
{t('common:common.Save')}
{t('account_bill:save')}
</Box>
</Flex>
</Button>

61
projects/app/src/pages/account/components/bill/InvoiceTable.tsx → projects/app/src/pages/account/bill/components/InvoiceTable.tsx
View File

@@ -42,9 +42,9 @@ const InvoiceTable = () => {
<Thead h="3rem">
<Tr>
<Th w={'20%'}>#</Th>
<Th w={'20%'}>{t('common:user.Time')}</Th>
<Th w={'20%'}>{t('common:support.wallet.Amount')}</Th>
<Th w={'20%'}>{t('common:support.wallet.bill.Status')}</Th>
<Th w={'20%'}>{t('account_bill:time')}</Th>
<Th w={'20%'}>{t('account_bill:support_wallet_amount')}</Th>
<Th w={'20%'}>{t('account_bill:status')}</Th>
<Th w={'20%'}></Th>
</Tr>
</Thead>
@@ -55,7 +55,7 @@ const InvoiceTable = () => {
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{t('common:pay.yuan', { amount: formatStorePrice2Read(item.amount) })}</Td>
<Td>{t('account_bill:yuan', { amount: formatStorePrice2Read(item.amount) })}</Td>
<Td>
<Flex
px={'0.75rem'}
@@ -71,8 +71,8 @@ const InvoiceTable = () => {
<MyIcon name="point" w={'6px'} h={'6px'} />
<Box ml={'0.25rem'}>
{item.status === 1
? t('common:common.submitted')
: t('common:common.have_done')}
? t('account_bill:submitted')
: t('account_bill:completed')}
</Box>
</Flex>
</Td>
@@ -91,7 +91,7 @@ const InvoiceTable = () => {
>
<Flex>
<MyIcon name="paragraph" w={'16px'} h={'16px'} />
<Box ml={'0.38rem'}>{t('common:common.Detail')}</Box>
<Box ml={'0.38rem'}>{t('account_bill:detail')}</Box>
</Flex>
</Button>
</Td>
@@ -113,7 +113,7 @@ const InvoiceTable = () => {
>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
{t('common:support.wallet.no_invoice')}
{t('account_bill:no_invoice_record_tip')}
</Box>
</Flex>
)}
@@ -143,48 +143,27 @@ function InvoiceDetailModal({
title={
<Flex align={'center'}>
<MyIcon name="paragraph" w={'20px'} h={'20px'} color={'blue.600'} />
<Box ml={'0.62rem'}>{t('common:support.wallet.invoice_detail')}</Box>
<Box ml={'0.62rem'}>{t('account_bill:invoice_detail')}</Box>
</Flex>
}
>
<ModalBody px={'3.25rem'} py={'2rem'}>
<Flex w={'100%'} h={'100%'} flexDir={'column'} gap={'1rem'}>
<LabelItem
label={t('common:support.wallet.invoice_amount')}
value={t('common:pay.yuan', { amount: formatStorePrice2Read(invoice.amount) })}
label={t('account_bill:invoice_amount')}
value={t('account_bill:yuan', { amount: formatStorePrice2Read(invoice.amount) })}
/>
<LabelItem label={t('account_bill:organization_name')} value={invoice.teamName} />
<LabelItem label={t('account_bill:unit_code')} value={invoice.unifiedCreditCode} />
<LabelItem label={t('account_bill:company_address')} value={invoice.companyAddress} />
<LabelItem label={t('account_bill:company_phone')} value={invoice.companyPhone} />
<LabelItem label={t('account_bill:bank_name')} value={invoice.bankName} />
<LabelItem label={t('account_bill:bank_account')} value={invoice.bankAccount} />
<LabelItem
label={t('common:support.wallet.invoice_data.organization_name')}
value={invoice.teamName}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.unit_code')}
value={invoice.unifiedCreditCode}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.company_address')}
value={invoice.companyAddress}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.company_phone')}
value={invoice.companyPhone}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.bank')}
value={invoice.bankName}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.bank_account')}
value={invoice.bankAccount}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.need_special_invoice')}
value={invoice.needSpecialInvoice ? t('common:yes') : t('common:no')}
/>
<LabelItem
label={t('common:support.wallet.invoice_data.email')}
value={invoice.emailAddress}
label={t('account_bill:need_special_invoice')}
value={invoice.needSpecialInvoice ? t('account_bill:yes') : t('account_bill:no')}
/>
<LabelItem label={t('account_bill:email_address')} value={invoice.emailAddress} />
</Flex>
</ModalBody>
</MyModal>

33
projects/app/src/pages/account/components/bill/BillAndInvoice.tsx → projects/app/src/pages/account/bill/index.tsx
View File

@@ -3,8 +3,10 @@ import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
import dynamic from 'next/dynamic';
import { useState } from 'react';
import { useTranslation } from 'next-i18next';
import ApplyInvoiceModal from './ApplyInvoiceModal';
import ApplyInvoiceModal from './components/ApplyInvoiceModal';
import { useRouter } from 'next/router';
import AccountContainer, { TabEnum } from '../components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
export enum InvoiceTabEnum {
bill = 'bill',
@@ -12,9 +14,9 @@ export enum InvoiceTabEnum {
invoiceHeader = 'invoiceHeader'
}
const BillTable = dynamic(() => import('./BillTable'));
const InvoiceHeaderForm = dynamic(() => import('./InvoiceHeaderForm'));
const InvoiceTable = dynamic(() => import('./InvoiceTable'));
const BillTable = dynamic(() => import('./components/BillTable'));
const InvoiceHeaderForm = dynamic(() => import('./components/InvoiceHeaderForm'));
const InvoiceTable = dynamic(() => import('./components/InvoiceTable'));
const BillAndInvoice = () => {
const { t } = useTranslation();
const router = useRouter();
@@ -23,15 +25,18 @@ const BillAndInvoice = () => {
const [isOpenInvoiceModal, setIsOpenInvoiceModal] = useState(false);
return (
<>
<AccountContainer>
<Box p={['1rem', '2rem']}>
<Flex justifyContent={'space-between'} alignItems={'center'} pb={'0.75rem'}>
<FillRowTabs
list={[
{ label: t('common:support.wallet.bill_tag.bill'), value: InvoiceTabEnum.bill },
{ label: t('common:support.wallet.bill_tag.invoice'), value: InvoiceTabEnum.invoice },
{ label: t('account_bill:bill_record'), value: InvoiceTabEnum.bill },
{
label: t('common:support.wallet.bill_tag.default_header'),
label: t('account_bill:support_wallet_bill_tag_invoice'),
value: InvoiceTabEnum.invoice
},
{
label: t('account_bill:default_header'),
value: InvoiceTabEnum.invoiceHeader
}
]}
@@ -49,7 +54,7 @@ const BillAndInvoice = () => {
<Button variant={'primary'} px="0" onClick={() => setIsOpenInvoiceModal(true)}>
<Flex alignItems={'center'} px={'20px'}>
<Box px={'1.25rem'} py={'0.5rem'}>
{t('common:support.wallet.invoicing')}
{t('account_bill:support_wallet_invoicing')}
</Box>
</Flex>
</Button>
@@ -68,8 +73,16 @@ const BillAndInvoice = () => {
/>
)}
</Box>
</>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account_bill', 'account']))
}
};
}
export default BillAndInvoice;

84
projects/app/src/pages/account/index.tsx → projects/app/src/pages/account/components/AccountContainer.tsx
View File

@@ -1,27 +1,18 @@
import React, { useCallback } from 'react';
import React, { useCallback, useMemo } from 'react';
import { Box, Flex, useTheme } from '@chakra-ui/react';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import PageContainer from '@/components/PageContainer';
import SideTabs from '@/components/SideTabs';
import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
import UserInfo from './components/Info/index';
import { serviceSideProps } from '@/web/common/utils/i18n';
import { useTranslation } from 'next-i18next';
import Script from 'next/script';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { getWebReqUrl } from '@fastgpt/web/common/system/utils';
const Promotion = dynamic(() => import('./components/Promotion'));
const UsageTable = dynamic(() => import('./components/UsageTable'));
const BillAndInvoice = dynamic(() => import('./components/bill/BillAndInvoice'));
const InformTable = dynamic(() => import('./components/InformTable'));
const ApiKeyTable = dynamic(() => import('./components/ApiKeyTable'));
const Individuation = dynamic(() => import('./components/Individuation'));
enum TabEnum {
export enum TabEnum {
'info' = 'info',
'promotion' = 'promotion',
'usage' = 'usage',
@@ -29,26 +20,44 @@ enum TabEnum {
'inform' = 'inform',
'individuation' = 'individuation',
'apikey' = 'apikey',
'loginout' = 'loginout'
'loginout' = 'loginout',
'team' = 'team'
}
const Account = ({ currentTab }: { currentTab: TabEnum }) => {
const AccountContainer = ({
children,
isLoading
}: {
children: React.ReactNode;
isLoading?: boolean;
}) => {
const { t } = useTranslation();
const theme = useTheme();
const { userInfo, setUserInfo } = useUserStore();
const { feConfigs, systemVersion } = useSystemStore();
const router = useRouter();
const { isPc } = useSystem();
const currentTab = useMemo(() => {
return router.pathname.split('/').pop() as TabEnum;
}, [router.pathname]);
const tabList = [
{
icon: 'support/user/userLight',
label: t('user:personal_information'),
label: t('account:personal_information'),
value: TabEnum.info
},
...(feConfigs?.isPlus
? [
{
icon: 'support/user/usersLight',
label: t('account:team'),
value: TabEnum.team
},
{
icon: 'support/usage/usageRecordLight',
label: t('user:usage_record'),
label: t('account:usage_records'),
value: TabEnum.usage
}
]
@@ -57,7 +66,7 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
? [
{
icon: 'support/bill/payRecordLight',
label: t('user:bill_and_invoices'),
label: t('account:bills_and_invoices'),
value: TabEnum.bill
}
]
@@ -66,7 +75,7 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
? [
{
icon: 'support/account/promotionLight',
label: t('user:promotion_records'),
label: t('account:promotion_records'),
value: TabEnum.promotion
}
]
@@ -75,40 +84,36 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
? [
{
icon: 'support/outlink/apikeyLight',
label: t('common:user.apikey.key'),
label: t('account:api_key'),
value: TabEnum.apikey
}
]
: []),
{
icon: 'support/user/individuation',
label: t('user:personalization'),
label: t('account:personalization'),
value: TabEnum.individuation
},
...(feConfigs.isPlus
? [
{
icon: 'support/user/informLight',
label: t('user:notice'),
label: t('account:notifications'),
value: TabEnum.inform
}
]
: []),
{
icon: 'support/account/loginoutLight',
label: t('user:sign_out'),
label: t('account:logout'),
value: TabEnum.loginout
}
];
const { openConfirm, ConfirmModal } = useConfirm({
content: t('common:support.user.logout.confirm')
content: t('account:confirm_logout')
});
const router = useRouter();
const theme = useTheme();
const setCurrentTab = useCallback(
(tab: string) => {
if (tab === TabEnum.loginout) {
@@ -117,11 +122,7 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
router.replace('/login');
})();
} else {
router.replace({
query: {
currentTab: tab
}
});
router.replace('/account/' + tab);
}
},
[openConfirm, router, setUserInfo]
@@ -130,7 +131,7 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
return (
<>
<Script src={getWebReqUrl('/js/qrcode.min.js')} strategy="lazyOnload"></Script>
<PageContainer>
<PageContainer isLoading={isLoading}>
<Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
{isPc ? (
<Flex
@@ -172,13 +173,7 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
)}
<Box flex={'1 0 0'} h={'100%'} pb={[4, 0]} overflow={'auto'}>
{currentTab === TabEnum.info && <UserInfo />}
{currentTab === TabEnum.promotion && <Promotion />}
{currentTab === TabEnum.usage && <UsageTable />}
{currentTab === TabEnum.bill && <BillAndInvoice />}
{currentTab === TabEnum.individuation && <Individuation />}
{currentTab === TabEnum.inform && <InformTable />}
{currentTab === TabEnum.apikey && <ApiKeyTable />}
{children}
</Box>
</Flex>
<ConfirmModal />
@@ -187,13 +182,4 @@ const Account = ({ currentTab }: { currentTab: TabEnum }) => {
);
};
export async function getServerSideProps(content: any) {
return {
props: {
currentTab: content?.query?.currentTab || TabEnum.info,
...(await serviceSideProps(content, ['publish', 'user']))
}
};
}
export default Account;
export default AccountContainer;

15
projects/app/src/pages/account/components/ApiKeyTable.tsx
View File

@@ -1,15 +0,0 @@
import React from 'react';
import ApiKeyTable from '@/components/support/apikey/Table';
import { useI18n } from '@/web/context/I18n';
import { Box } from '@chakra-ui/react';
const ApiKey = () => {
const { publishT } = useI18n();
return (
<Box px={[4, 8]} py={[4, 6]}>
<ApiKeyTable tips={publishT('key_tips')}></ApiKeyTable>
</Box>
);
};
export default ApiKey;

65
projects/app/src/pages/account/components/Individuation.tsx
View File

@@ -1,65 +0,0 @@
import { Box, Card, Flex } from '@chakra-ui/react';
import React, { useCallback } from 'react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import { useUserStore } from '@/web/support/user/useUserStore';
import { UserType } from '@fastgpt/global/support/user/type';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user';
import TimezoneSelect from '@fastgpt/web/components/common/MySelect/TimezoneSelect';
import I18nLngSelector from '@/components/Select/I18nLngSelector';
const Individuation = () => {
const { t } = useTranslation();
const { userInfo, updateUserInfo } = useUserStore();
const { toast } = useToast();
const { reset } = useForm<UserUpdateParams>({
defaultValues: userInfo as UserType
});
const onclickSave = useCallback(
async (data: UserType) => {
await updateUserInfo({
timezone: data.timezone
});
reset(data);
toast({
title: t('common:dataset.data.Update Success Tip'),
status: 'success'
});
},
[reset, t, toast, updateUserInfo]
);
return (
<Box py={[3, '28px']} px={['5vw', '64px']}>
<Flex alignItems={'center'} fontSize={'lg'} h={'30px'}>
<MyIcon mr={2} name={'support/user/individuation'} w={'20px'} />
{t('common:support.account.Individuation')}
</Flex>
<Card mt={6} px={[3, 10]} py={[3, 7]} fontSize={'sm'}>
<Flex alignItems={'center'} w={['85%', '350px']}>
<Box flex={'0 0 80px'}>{t('common:user.Language')}:&nbsp;</Box>
<Box flex={'1 0 0'}>
<I18nLngSelector />
</Box>
</Flex>
<Flex mt={6} alignItems={'center'} w={['85%', '350px']}>
<Box flex={'0 0 80px'}>{t('common:user.Timezone')}:&nbsp;</Box>
<TimezoneSelect
value={userInfo?.timezone}
onChange={(e) => {
if (!userInfo) return;
onclickSave({ ...userInfo, timezone: e });
}}
/>
</Flex>
</Card>
</Box>
);
};
export default Individuation;

96
projects/app/src/pages/account/components/InformTable.tsx
View File

@@ -1,96 +0,0 @@
import React from 'react';
import { Box, Button, Flex, useTheme } from '@chakra-ui/react';
import { getInforms, readInform } from '@/web/support/user/inform/api';
import type { UserInformSchema } from '@fastgpt/global/support/user/inform/type';
import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import { useTranslation } from 'next-i18next';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
const InformTable = () => {
const { t } = useTranslation();
const theme = useTheme();
const { Loading } = useLoading();
const {
data: informs,
isLoading,
total,
pageSize,
Pagination,
getData,
pageNum
} = usePagination<UserInformSchema>({
api: getInforms,
pageSize: 20
});
return (
<Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<Box px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
{informs.map((item) => (
<Box
key={item._id}
border={theme.borders.md}
py={2}
px={4}
borderRadius={'md'}
position={'relative'}
_notLast={{ mb: 3 }}
>
<Flex alignItems={'center'}>
<Box fontWeight={'bold'}>{item.title}</Box>
<Box ml={2} color={'myGray.500'} flex={'1 0 0'}>
({t(formatTimeToChatTime(item.time) as any).replace('#', ':')})
</Box>
{!item.read && (
<Button
variant={'whitePrimary'}
size={'xs'}
onClick={async () => {
if (!item.read) {
await readInform(item._id);
getData(pageNum);
}
}}
>
{t('common:support.inform.Read')}
</Button>
)}
</Flex>
<Box mt={2} fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
{item.content}
</Box>
{!item.read && (
<>
<Box
w={'5px'}
h={'5px'}
borderRadius={'10px'}
bg={'red.600'}
position={'absolute'}
top={'8px'}
left={'8px'}
/>
</>
)}
</Box>
))}
{!isLoading && informs.length === 0 && (
<EmptyTip text={t('common:user.no_notice')}></EmptyTip>
)}
</Box>
{total > pageSize && (
<Flex w={'100%'} mt={4} px={[3, 8]} justifyContent={'flex-end'}>
<Pagination />
</Flex>
)}
<Loading loading={isLoading && informs.length === 0} fixed={false} />
</Flex>
);
};
export default InformTable;

138
projects/app/src/pages/account/components/Promotion.tsx
View File

@@ -1,138 +0,0 @@
import React from 'react';
import {
Grid,
Box,
Flex,
BoxProps,
useTheme,
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { getPromotionInitData, getPromotionRecords } from '@/web/support/activity/promotion/api';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useCopyData } from '@/web/common/hooks/useCopyData';
import dayjs from 'dayjs';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
const Promotion = () => {
const { t } = useTranslation();
const theme = useTheme();
const { copyData } = useCopyData();
const { userInfo } = useUserStore();
const { Loading } = useLoading();
const {
data: promotionRecords,
isLoading,
total,
pageSize,
Pagination
} = usePagination({
api: getPromotionRecords,
pageSize: 20
});
const { data: { invitedAmount = 0, earningsAmount = 0 } = {} } = useQuery(
['getPromotionInitData'],
getPromotionInitData
);
const statisticsStyles: BoxProps = {
p: [4, 5],
border: theme.borders.base,
textAlign: 'center',
fontSize: ['md', 'lg'],
borderRadius: 'md'
};
const titleStyles: BoxProps = {
mt: 2,
fontSize: ['lg', '28px'],
fontWeight: 'bold'
};
return (
<Flex flexDirection={'column'} py={[0, 5]} px={5} h={'100%'} position={'relative'}>
<Grid gridTemplateColumns={['1fr 1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']} gridGap={5}>
<Box {...statisticsStyles}>
<Box>{t('common:user.Amount of inviter')}</Box>
<Box {...titleStyles}>{invitedAmount}</Box>
</Box>
<Box {...statisticsStyles}>
<Box>{t('common:user.Amount of earnings')}</Box>
<Box {...titleStyles}>{earningsAmount}</Box>
</Box>
<Box {...statisticsStyles}>
<Flex alignItems={'center'} justifyContent={'center'}>
<Box>{t('common:user.Promotion Rate')}</Box>
<QuestionTip ml={1} label={t('common:user.Promotion rate tip')}></QuestionTip>
</Flex>
<Box {...titleStyles}>{userInfo?.promotionRate || 15}%</Box>
</Box>
<Box {...statisticsStyles}>
<Flex alignItems={'center'} justifyContent={'center'}>
<Box>{t('common:user.Invite Url')}</Box>
<QuestionTip ml={1} label={t('common:user.Invite url tip')}></QuestionTip>
</Flex>
<Button
mt={4}
variant={'whitePrimary'}
fontSize={'sm'}
onClick={() => {
copyData(`${location.origin}/?hiId=${userInfo?._id}`);
}}
>
{t('common:user.Copy invite url')}
</Button>
</Box>
</Grid>
<Box mt={5}>
<TableContainer position={'relative'} overflow={'hidden'} minH={'100px'}>
<Table>
<Thead>
<Tr>
<Th>{t('common:user.Time')}</Th>
<Th>{t('common:user.type')}</Th>
<Th>{t('common:pay.amount')}</Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{promotionRecords.map((item) => (
<Tr key={item._id}>
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{t(`user:promotion.${item.type}` as any)}</Td>
<Td>{item.amount}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{!isLoading && promotionRecords.length === 0 && (
<EmptyTip text={t('common:user.no_invite_records')}></EmptyTip>
)}
{total > pageSize && (
<Flex mt={4} justifyContent={'flex-end'}>
<Pagination />
</Flex>
)}
<Loading loading={isLoading} fixed={false} />
</Box>
</Flex>
);
};
export default Promotion;

104
projects/app/src/pages/account/components/TeamSelector.tsx Normal file
View File

@@ -0,0 +1,104 @@
import React, { useMemo } from 'react';
import { Box, ButtonProps, Flex } from '@chakra-ui/react';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useTranslation } from 'next-i18next';
import Avatar from '@fastgpt/web/components/common/Avatar';
import { getTeamList, putSwitchTeam } from '@/web/support/user/team/api';
import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useRouter } from 'next/router';
const TeamSelector = ({
showManage,
...props
}: ButtonProps & {
showManage?: boolean;
}) => {
const { t } = useTranslation();
const router = useRouter();
const { userInfo, initUserInfo } = useUserStore();
const { setLoading } = useSystemStore();
const { data: myTeams = [] } = useRequest2(() => getTeamList(TeamMemberStatusEnum.active), {
manual: false,
refreshDeps: [userInfo]
});
const { runAsync: onSwitchTeam } = useRequest2(
async (teamId: string) => {
setLoading(true);
await putSwitchTeam(teamId);
return initUserInfo();
},
{
onFinally: () => {
setLoading(false);
},
errorToast: t('common:user.team.Switch Team Failed')
}
);
const teamList = useMemo(() => {
return myTeams.map((team) => ({
label: (
<Flex
key={team.teamId}
alignItems={'center'}
borderRadius={'md'}
cursor={'default'}
gap={3}
onClick={() => onSwitchTeam(team.teamId)}
_hover={{
cursor: 'pointer'
}}
>
<Avatar src={team.avatar} w={['1.25rem', '1.375rem']} />
<Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
{team.teamName}
</Box>
</Flex>
),
value: team.teamId
}));
}, [myTeams, onSwitchTeam]);
const formatTeamList = useMemo(() => {
return [
...(showManage
? [
{
label: (
<Flex
key={'manage'}
alignItems={'center'}
borderRadius={'md'}
cursor={'default'}
gap={3}
onClick={() => router.push('/account/team')}
>
<MyIcon name="common/setting" w={['1.25rem', '1.375rem']} />
<Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
{t('user:manage_team')}
</Box>
</Flex>
),
value: 'manage',
showBorder: true
}
]
: []),
...teamList
];
}, [showManage, teamList, router]);
return (
<Box w={'100%'}>
<MySelect {...props} value={userInfo?.team?.teamId} list={formatTeamList} />
</Box>
);
};
export default TeamSelector;

196
projects/app/src/pages/account/components/UsageTable.tsx
View File

@@ -1,196 +0,0 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Flex,
Box,
Button
} from '@chakra-ui/react';
import { UsageSourceEnum, UsageSourceMap } from '@fastgpt/global/support/wallet/usage/constants';
import { getUserUsages } from '@/web/support/wallet/usage/api';
import type { UsageItemType } from '@fastgpt/global/support/wallet/usage/type';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import dayjs from 'dayjs';
import DateRangePicker, {
type DateRangeType
} from '@fastgpt/web/components/common/DateRangePicker';
import { addDays } from 'date-fns';
import dynamic from 'next/dynamic';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/web/support/user/useUserStore';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { formatNumber } from '@fastgpt/global/common/math/tools';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
const UsageDetail = dynamic(() => import('./UsageDetail'));
const UsageTable = () => {
const { t } = useTranslation();
const { Loading } = useLoading();
const [dateRange, setDateRange] = useState<DateRangeType>({
from: addDays(new Date(), -7),
to: new Date()
});
const [usageSource, setUsageSource] = useState<UsageSourceEnum | ''>('');
const { isPc } = useSystem();
const { userInfo, loadAndGetTeamMembers } = useUserStore();
const [usageDetail, setUsageDetail] = useState<UsageItemType>();
const sourceList = useMemo(
() =>
[
{ label: t('common:common.All'), value: '' },
...Object.entries(UsageSourceMap).map(([key, value]) => ({
label: t(value.label as any),
value: key
}))
] as {
label: never;
value: UsageSourceEnum | '';
}[],
[t]
);
const [selectTmbId, setSelectTmbId] = useState(userInfo?.team?.tmbId);
const { data: members = [] } = useQuery(['getMembers', userInfo?.team?.teamId], () => {
if (!userInfo?.team?.teamId) return [];
return loadAndGetTeamMembers();
});
const tmbList = useMemo(
() =>
members.map((item) => ({
label: (
<Flex alignItems={'center'}>
<Avatar src={item.avatar} w={'16px'} mr={1} />
{item.memberName}
</Flex>
),
value: item.tmbId
})),
[members]
);
const {
data: usages,
isLoading,
Pagination,
getData
} = usePagination<UsageItemType>({
api: getUserUsages,
pageSize: isPc ? 20 : 10,
params: {
dateStart: dateRange.from || new Date(),
dateEnd: addDays(dateRange.to || new Date(), 1),
source: usageSource,
teamMemberId: selectTmbId
},
defaultRequest: false
});
useEffect(() => {
getData(1);
}, [usageSource, selectTmbId]);
return (
<Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<Flex
flexDir={['column', 'row']}
gap={2}
w={'100%'}
px={[3, 8]}
alignItems={['flex-end', 'center']}
>
{tmbList.length > 1 && userInfo?.team?.permission.hasManagePer && (
<Flex alignItems={'center'}>
<Box mr={2} flexShrink={0}>
{t('common:support.user.team.member')}
</Box>
<MySelect
size={'sm'}
minW={'100px'}
list={tmbList}
value={selectTmbId}
onchange={setSelectTmbId}
/>
</Flex>
)}
<Box flex={'1'} />
<Flex alignItems={'center'} gap={3}>
<DateRangePicker
defaultDate={dateRange}
position="bottom"
onChange={setDateRange}
onSuccess={() => getData(1)}
/>
<Pagination />
</Flex>
</Flex>
<TableContainer
mt={2}
px={[3, 8]}
position={'relative'}
flex={'1 0 0'}
h={0}
overflowY={'auto'}
>
<Table>
<Thead>
<Tr>
{/* <Th>{t('common:user.team.Member Name')}</Th> */}
<Th>{t('common:user.Time')}</Th>
<Th>
<MySelect<UsageSourceEnum | ''>
list={sourceList}
value={usageSource}
size={'sm'}
onchange={(e) => {
setUsageSource(e);
}}
w={'130px'}
></MySelect>
</Th>
<Th>{t('common:user.Application Name')}</Th>
<Th>{t('common:support.wallet.usage.Total points')}</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{usages.map((item) => (
<Tr key={item.id}>
{/* <Td>{item.memberName}</Td> */}
<Td>{dayjs(item.time).format('YYYY/MM/DD HH:mm:ss')}</Td>
<Td>{t(UsageSourceMap[item.source]?.label as any) || '-'}</Td>
<Td>{t(item.appName as any) || '-'}</Td>
<Td>{formatNumber(item.totalPoints) || 0}</Td>
<Td>
<Button size={'sm'} variant={'whitePrimary'} onClick={() => setUsageDetail(item)}>
{t('common:common.Detail')}
</Button>
</Td>
</Tr>
))}
</Tbody>
</Table>
{!isLoading && usages.length === 0 && (
<EmptyTip text={t('common:user.no_usage_records')}></EmptyTip>
)}
</TableContainer>
<Loading loading={isLoading} fixed={false} />
{!!usageDetail && (
<UsageDetail usage={usageDetail} onClose={() => setUsageDetail(undefined)} />
)}
</Flex>
);
};
export default React.memo(UsageTable);

77
projects/app/src/pages/account/individuation.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Box, Card, Flex } from '@chakra-ui/react';
import React, { useCallback } from 'react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import { useUserStore } from '@/web/support/user/useUserStore';
import { UserType } from '@fastgpt/global/support/user/type';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user';
import TimezoneSelect from '@fastgpt/web/components/common/MySelect/TimezoneSelect';
import I18nLngSelector from '@/components/Select/I18nLngSelector';
import AccountContainer from './components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
const Individuation = () => {
const { t } = useTranslation();
const { userInfo, updateUserInfo } = useUserStore();
const { toast } = useToast();
const { reset } = useForm<UserUpdateParams>({
defaultValues: userInfo as UserType
});
const onclickSave = useCallback(
async (data: UserType) => {
await updateUserInfo({
timezone: data.timezone
});
reset(data);
toast({
title: t('account_individuation:update_data_success'),
status: 'success'
});
},
[reset, t, toast, updateUserInfo]
);
return (
<AccountContainer>
<Box py={[3, '28px']} px={['5vw', '64px']}>
<Flex alignItems={'center'} fontSize={'lg'} h={'30px'}>
<MyIcon mr={2} name={'support/user/individuation'} w={'20px'} />
{t('account_individuation:personalization')}
</Flex>
<Card mt={6} px={[3, 10]} py={[3, 7]} fontSize={'sm'}>
<Flex alignItems={'center'} w={['85%', '350px']}>
<Box flex={'0 0 80px'}>{t('account_individuation:language')}:&nbsp;</Box>
<Box flex={'1 0 0'}>
<I18nLngSelector />
</Box>
</Flex>
<Flex mt={6} alignItems={'center'} w={['85%', '350px']}>
<Box flex={'0 0 80px'}>{t('account_individuation:timezone')}:&nbsp;</Box>
<TimezoneSelect
value={userInfo?.timezone}
onChange={(e) => {
if (!userInfo) return;
onclickSave({ ...userInfo, timezone: e });
}}
/>
</Flex>
</Card>
</Box>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account', 'account_individuation']))
}
};
}
export default Individuation;

24
projects/app/src/pages/account/components/Info/ConversionModal.tsx → projects/app/src/pages/account/info/components/ConversionModal.tsx
View File

@@ -33,8 +33,8 @@ const ConversionModal = ({
onSuccess() {
router.reload();
},
successToast: t('user:bill.convert_success'),
errorToast: t('user:bill.convert_error')
successToast: t('account_info:exchange_success'),
errorToast: t('account_info:exchange_failure')
});
return (
@@ -43,27 +43,27 @@ const ConversionModal = ({
onClose={onClose}
iconSrc="support/bill/wallet"
iconColor="primary.600"
title={t('user:bill.use_balance')}
title={t('account_info:usage_balance')}
>
<ModalBody maxW={'450px'}>
<VStack px="2.25" gap={2} pb="6">
<HStack px="4" py="2" color="primary.600" bgColor="primary.50" borderRadius="md">
<Icon name="common/info" w="1rem" mr="1" />
<Box fontSize={'mini'} fontWeight={'500'}>
{t('user:bill.use_balance_hint')}
{t('account_info:usage_balance_notice')}
</Box>
</HStack>
<VStack mt={6}>
<Box fontSize={'sm'} color="myGray.600" fontWeight="500">
{t('user:bill.current_token_price')}
{t('account_info:current_token_price')}
</Box>
<Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
￥15/1000 {t('user:bill.tokens')}/{t('common:common.month')}
￥15/1000 {t('account_info:tokens')}/{t('account_info:month')}
</Box>
</VStack>
<VStack mt={6}>
<Box fontSize={'sm'} color="myGray.600" fontWeight="500">
{t('user:bill.balance')}
{t('account_info:balance')}
</Box>
<Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
￥{formatStorePrice2Read(userInfo?.team?.balance)?.toFixed(2)}
@@ -71,13 +71,13 @@ const ConversionModal = ({
</VStack>
<VStack mt={6}>
<Box fontSize={'sm'} color="myGray.600" fontWeight="500">
{t('user:bill.you_can_convert')}
{t('account_info:you_can_convert')}
</Box>
<Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
{points} {t('user:bill.tokens')}
{points} {t('account_info:tokens')}
</Box>
<Tag fontSize={'xs'} fontWeight={'500'}>
{t('user:bill.token_expire_1year')}
{t('account_info:token_validity_period')}
</Tag>
</VStack>
@@ -90,10 +90,10 @@ const ConversionModal = ({
onClick={onConvert}
isLoading={loading}
>
{t('user:bill.conversion')}
{t('account_info:exchange')}
</Button>
<Link fontSize={'sm'} color="primary" mt="2" onClick={onOpenContact}>
{t('user:bill.contact_customer_service')}
{t('account_info:contact_customer_service')}
</Link>
</VStack>
</VStack>

12
projects/app/src/pages/account/components/Info/OpenAIAccountModal.tsx → projects/app/src/pages/account/info/components/OpenAIAccountModal.tsx
View File

@@ -25,7 +25,7 @@ const OpenAIAccountModal = ({
onSuccess(res) {
onClose();
},
errorToast: t('common:user.Set OpenAI Account Failed')
errorToast: t('account_info:openai_account_setting_exception')
});
return (
@@ -33,11 +33,11 @@ const OpenAIAccountModal = ({
isOpen
onClose={onClose}
iconSrc="common/openai"
title={t('common:user.OpenAI Account Setting')}
title={t('account_info:openai_account_configuration')}
>
<ModalBody>
<Box fontSize={'sm'} color={'myGray.500'}>
{t('common:info.open_api_notice')}
{t('account_info:open_api_notice')}
</Box>
<Flex alignItems={'center'} mt={5}>
<Box flex={'0 0 65px'}>API Key:</Box>
@@ -48,16 +48,16 @@ const OpenAIAccountModal = ({
<Input
flex={1}
{...register('baseUrl')}
placeholder={t('common:info.open_api_placeholder')}
placeholder={t('account_info:request_address_notice')}
></Input>
</Flex>
</ModalBody>
<ModalFooter>
<Button mr={3} variant={'whiteBase'} onClick={onClose}>
{t('common:common.Cancel')}
{t('account_info:cancel')}
</Button>
<Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
{t('common:common.Confirm')}
{t('account_info:confirm')}
</Button>
</ModalFooter>
</MyModal>

22
projects/app/src/pages/account/components/Info/UpdateNotificationModal.tsx → projects/app/src/pages/account/info/components/UpdateNotificationModal.tsx
View File

@@ -47,8 +47,8 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
initUserInfo();
onClose();
},
successToast: t('user:bind_inform_account_success'),
errorToast: t('user:bind_inform_account_error')
successToast: t('account_info:bind_notification_success'),
errorToast: t('account_info:bind_notification_error')
}
);
@@ -58,9 +58,9 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
?.map((item) => {
switch (item) {
case 'email':
return t('common:support.user.login.Email');
return t('account_info:email_label');
case 'phone':
return t('common:support.user.login.Phone number');
return t('account_info:phone_label');
}
})
.join('/');
@@ -71,16 +71,16 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
isOpen
iconSrc="common/settingLight"
w={'32rem'}
title={t('common:user.Notification Receive')}
title={t('account_info:notification_receiving_hint')}
>
<ModalBody px={10}>
<Flex flexDirection="column">
<HStack px="6" py="3" color="primary.600" bgColor="primary.50" borderRadius="md">
<Icon name="common/info" w="1rem" />
<Box fontSize={'sm'}>{t('user:notification.Bind Notification Pipe Hint')}</Box>
<Box fontSize={'sm'}>{t('account_info:bind_notification_hint')}</Box>
</HStack>
<Flex mt="4" alignItems="center">
<Box flex={'0 0 70px'}>{t('common:user.Account')}</Box>
<Box flex={'0 0 70px'}>{t('account_info:user_account')}</Box>
<Input
flex={1}
bg={'myGray.50'}
@@ -89,12 +89,12 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
></Input>
</Flex>
<Flex mt="6" alignItems="center" position={'relative'}>
<Box flex={'0 0 70px'}>{t('user:password.verification_code')}</Box>
<Box flex={'0 0 70px'}>{t('account_info:verification_code_required')}</Box>
<Input
flex={1}
bg={'myGray.50'}
{...register('verifyCode', { required: true })}
placeholder={t('user:password.code_required')}
placeholder={t('account_info:code_required')}
></Input>
<SendCodeBox username={account} />
</Flex>
@@ -102,14 +102,14 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
</ModalBody>
<ModalFooter>
<Button mr={3} variant={'whiteBase'} onClick={onClose}>
{t('common:common.Cancel')}
{t('account_info:cancel')}
</Button>
<Button
isLoading={isLoading}
isDisabled={!account || !verifyCode}
onClick={handleSubmit((data) => onSubmit(data))}
>
{t('common:common.Confirm')}
{t('account_info:confirm')}
</Button>
</ModalFooter>
</MyModal>

22
projects/app/src/pages/account/components/Info/UpdatePswModal.tsx → projects/app/src/pages/account/info/components/UpdatePswModal.tsx
View File

@@ -25,15 +25,15 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
const { mutate: onSubmit, isLoading } = useRequest({
mutationFn: (data: FormType) => {
if (data.newPsw !== data.confirmPsw) {
return Promise.reject(t('common:common.Password inconsistency'));
return Promise.reject(t('account_info:password_mismatch'));
}
return updatePasswordByOld(data);
},
onSuccess() {
onClose();
},
successToast: t('common:user.Update password successful'),
errorToast: t('common:user.Update password failed')
successToast: t('account_info:password_update_success'),
errorToast: t('account_info:password_update_error')
});
return (
@@ -41,15 +41,15 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
isOpen
onClose={onClose}
iconSrc="/imgs/modal/password.svg"
title={t('common:user.Update Password')}
title={t('account_info:update_password')}
>
<ModalBody>
<Flex alignItems={'center'}>
<Box flex={'0 0 70px'}>{t('common:user.old_password') + ':'}</Box>
<Box flex={'0 0 70px'}>{t('account_info:old_password') + ':'}</Box>
<Input flex={1} type={'password'} {...register('oldPsw', { required: true })}></Input>
</Flex>
<Flex alignItems={'center'} mt={5}>
<Box flex={'0 0 70px'}>{t('common:user.new_password') + ':'}</Box>
<Box flex={'0 0 70px'}>{t('account_info:new_password') + ':'}</Box>
<Input
flex={1}
type={'password'}
@@ -57,13 +57,13 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
required: true,
maxLength: {
value: 60,
message: t('common:user.password_message')
message: t('account_info:password_length_error')
}
})}
></Input>
</Flex>
<Flex alignItems={'center'} mt={5}>
<Box flex={'0 0 70px'}>{t('common:user.confirm_password') + ':'}</Box>
<Box flex={'0 0 70px'}>{t('account_info:confirm_password') + ':'}</Box>
<Input
flex={1}
type={'password'}
@@ -71,7 +71,7 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
required: true,
maxLength: {
value: 60,
message: t('common:user.password_message')
message: t('account_info:password_length_error')
}
})}
></Input>
@@ -79,10 +79,10 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
</ModalBody>
<ModalFooter>
<Button mr={3} variant={'whiteBase'} onClick={onClose}>
{t('common:common.Cancel')}
{t('account_info:cancel')}
</Button>
<Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
{t('common:common.Confirm')}
{t('account_info:confirm')}
</Button>
</ModalFooter>
</MyModal>

26
projects/app/src/pages/account/components/Info/standardDetailModal.tsx → projects/app/src/pages/account/info/components/standardDetailModal.tsx
View File

@@ -65,7 +65,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
isOpen
maxW={['90vw', '1200px']}
iconSrc="modal/teamPlans"
title={t('common:support.wallet.Standard Plan Detail')}
title={t('account_info:package_details')}
isCentered
>
<ModalCloseButton onClick={onClose} />
@@ -74,11 +74,11 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
<Table>
<Thead>
<Tr>
<Th>{t('common:support.standard.type')}</Th>
<Th>{t('common:support.standard.storage')}</Th>
<Th>{t('common:support.standard.AI Bonus Points')}</Th>
<Th>{t('user:bill.valid_time')}</Th>
<Th>{t('common:support.standard.due_date')}</Th>
<Th>{t('account_info:type')}</Th>
<Th>{t('account_info:storage_capacity')}</Th>
<Th>{t('account_info:ai_points')}</Th>
<Th>{t('account_info:effective_time')}</Th>
<Th>{t('account_info:expiration_time')}</Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
@@ -121,12 +121,10 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
<StatusTag status={status as packageStatus} />
</Flex>
</Td>
<Td>
{datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'}
</Td>
<Td>{datasetSize ? `${datasetSize + t('account_info:group')}` : '-'}</Td>
<Td>
{totalPoints
? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}`
? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('account_info:ai_points_calculation_standard')}`
: '-'}
</Td>
<Td color={'myGray.600'}>{formatTime2YMDHM(startTime)}</Td>
@@ -143,7 +141,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
<HStack mt={4} color={'primary.700'}>
<MyIcon name={'infoRounded'} w={'1rem'} />
<Box fontSize={'mini'} fontWeight={'500'}>
{t('user:bill.standard_valid_tip')}
{t('account_info:package_usage_rules')}
</Box>
</HStack>
</ModalBody>
@@ -155,9 +153,9 @@ function StatusTag({ status }: { status: packageStatus }) {
const { t } = useTranslation();
const statusText = useMemo(() => {
return {
inactive: t('common:support.wallet.subscription.status.inactive'),
active: t('common:support.wallet.subscription.status.active'),
expired: t('common:support.wallet.subscription.status.expired')
inactive: t('account_info:pending_usage'),
active: t('account_info:active'),
expired: t('account_info:expired')
};
}, [t]);
const styleMap = useMemo(() => {

246
projects/app/src/pages/account/components/Info/index.tsx → projects/app/src/pages/account/info/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useRef } from 'react';
import {
Box,
Flex,
@@ -9,7 +9,8 @@ import {
Link,
Progress,
Grid,
BoxProps
BoxProps,
FlexProps
} from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user';
@@ -25,7 +26,6 @@ import { useTranslation } from 'next-i18next';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MyIcon from '@fastgpt/web/components/common/Icon';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useRouter } from 'next/router';
import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
import { putUpdateMemberName } from '@/web/support/user/team/api';
import { getDocPath } from '@/web/common/system/doc';
@@ -35,10 +35,7 @@ import {
standardSubLevelMap
} from '@fastgpt/global/support/wallet/sub/constants';
import { formatTime2YMD } from '@fastgpt/global/common/string/time';
import {
AI_POINT_USAGE_CARD_ROUTE,
EXTRA_PLAN_CARD_ROUTE
} from '@/web/support/wallet/sub/constants';
import { getExtraPlanCardRoute } from '@/web/support/wallet/sub/constants';
import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
@@ -46,28 +43,33 @@ import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import MyImage from '@fastgpt/web/components/common/Image/MyImage';
import { getWebReqUrl } from '@fastgpt/web/common/system/utils';
import AccountContainer from '../components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
import { useRouter } from 'next/router';
import TeamSelector from '../components/TeamSelector';
const StandDetailModal = dynamic(() => import('./standardDetailModal'));
const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
const ConversionModal = dynamic(() => import('./ConversionModal'));
const UpdatePswModal = dynamic(() => import('./UpdatePswModal'));
const UpdateNotification = dynamic(() => import('./UpdateNotificationModal'));
const OpenAIAccountModal = dynamic(() => import('./OpenAIAccountModal'));
const StandDetailModal = dynamic(() => import('./components/standardDetailModal'));
const ConversionModal = dynamic(() => import('./components/ConversionModal'));
const UpdatePswModal = dynamic(() => import('./components/UpdatePswModal'));
const UpdateNotification = dynamic(() => import('./components/UpdateNotificationModal'));
const OpenAIAccountModal = dynamic(() => import('./components/OpenAIAccountModal'));
const LafAccountModal = dynamic(() => import('@/components/support/laf/LafAccountModal'));
const CommunityModal = dynamic(() => import('@/components/CommunityModal'));
const AiPointsModal = dynamic(() =>
import('@/pages/price/components/Points').then((mod) => mod.AiPointsModal)
);
const Account = () => {
const Info = () => {
const { isPc } = useSystem();
const { teamPlanStatus } = useUserStore();
const standardPlan = teamPlanStatus?.standardConstants;
const { isOpen: isOpenContact, onClose: onCloseContact, onOpen: onOpenContact } = useDisclosure();
const { initUserInfo } = useUserStore();
useQuery(['init'], initUserInfo);
return (
<>
<AccountContainer>
<Box py={[3, '28px']} px={[5, 10]} mx={'auto'}>
{isPc ? (
<Flex justifyContent={'center'} maxW={'1080px'}>
@@ -92,11 +94,19 @@ const Account = () => {
)}
</Box>
{isOpenContact && <CommunityModal onClose={onCloseContact} />}
</>
</AccountContainer>
);
};
export default React.memo(Account);
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account', 'account_info', 'user']))
}
};
}
export default React.memo(Info);
const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
const theme = useTheme();
@@ -110,6 +120,8 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
const standardPlan = teamPlanStatus?.standardConstants;
const { isPc } = useSystem();
const { toast } = useToast();
const router = useRouter();
const {
isOpen: isOpenConversionModal,
onClose: onCloseConversionModal,
@@ -139,7 +151,7 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
});
reset(data);
toast({
title: t('common:dataset.data.Update Success Tip'),
title: t('account_info:update_success_tip'),
status: 'success'
});
},
@@ -164,7 +176,7 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
});
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : t('common:common.error.Select avatar failed'),
title: typeof err === 'string' ? err : t('account_info:avatar_selection_exception'),
status: 'warning'
});
}
@@ -184,16 +196,16 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
{isPc && (
<Flex alignItems={'center'} fontSize={'md'} h={'30px'}>
<MyIcon mr={2} name={'support/user/userLight'} w={'1.25rem'} />
{t('common:support.user.User self info')}
{t('account_info:personal_information')}
</Flex>
)}
<Box mt={[0, 6]} fontSize={'sm'}>
{isPc ? (
<Flex alignItems={'center'} cursor={'pointer'}>
<Box {...labelStyles}>{t('common:support.user.Avatar')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:avatar')}:&nbsp;</Box>
<MyTooltip label={t('common:common.avatar.Select Avatar')}>
<MyTooltip label={t('account_info:select_avatar')}>
<Box
w={['44px', '56px']}
h={['44px', '56px']}
@@ -216,7 +228,7 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
cursor={'pointer'}
onClick={onOpenSelectFile}
>
<MyTooltip label={t('common:common.avatar.Select Avatar')}>
<MyTooltip label={t('account_info:choose_avatar')}>
<Box
w={['44px', '54px']}
h={['44px', '54px']}
@@ -233,17 +245,17 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
<Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
<MyIcon mr={1} name={'edit'} w={'14px'} />
{t('common:user.Replace')}
{t('account_info:change')}
</Flex>
</Flex>
)}
{feConfigs?.isPlus && (
<Flex mt={[0, 4]} alignItems={'center'}>
<Box {...labelStyles}>{t('common:user.Member Name')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:member_name')}:&nbsp;</Box>
<Input
flex={'1 0 0'}
defaultValue={userInfo?.team?.memberName || 'Member'}
title={t('common:user.Edit name')}
title={t('account_info:click_modify_nickname')}
borderColor={'transparent'}
transform={'translateX(-11px)'}
maxLength={20}
@@ -258,21 +270,21 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
</Flex>
)}
<Flex alignItems={'center'} mt={6}>
<Box {...labelStyles}>{t('common:user.Account')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:user_account')}:&nbsp;</Box>
<Box flex={1}>{userInfo?.username}</Box>
</Flex>
{feConfigs?.isPlus && (
<Flex mt={6} alignItems={'center'}>
<Box {...labelStyles}>{t('common:user.Password')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:password')}:&nbsp;</Box>
<Box flex={1}>*****</Box>
<Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
{t('common:user.Change')}
{t('account_info:change')}
</Button>
</Flex>
)}
{feConfigs?.isPlus && (
<Flex mt={6} alignItems={'center'}>
<Box {...labelStyles}>{t('common:user.Notification Receive')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:notification_receiving')}:&nbsp;</Box>
<Box
flex={1}
{...(!userInfo?.team.notificationAccount && userInfo?.permission.isOwner
@@ -282,35 +294,35 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
{userInfo?.team.notificationAccount
? userInfo?.team.notificationAccount
: userInfo?.permission.isOwner
? t('common:user.Notification Receive Bind')
: t('user:notification.remind_owner_bind')}
? t('account_info:please_bind_notification_receiving_path')
: t('account_info:reminder_create_bound_notification_account')}
</Box>
{userInfo?.permission.isOwner && (
<Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdateNotification}>
{t('common:user.Change')}
{t('account_info:change')}
</Button>
)}
</Flex>
)}
<Flex mt={6} alignItems={'center'}>
<Box {...labelStyles}>{t('common:user.Team')}:&nbsp;</Box>
<Box flex={1}>
<TeamMenu />
</Box>
<Box {...labelStyles}>{t('account_info:user_team_team_name')}:&nbsp;</Box>
<Flex flex={'1 0 0'} w={0} align={'center'}>
<TeamSelector height={'28px'} w={'100%'} showManage />
</Flex>
</Flex>
{feConfigs?.isPlus && (userInfo?.team?.balance ?? 0) > 0 && (
<Box mt={6} whiteSpace={'nowrap'}>
<Flex alignItems={'center'}>
<Box {...labelStyles}>{t('common:user.team.Balance')}:&nbsp;</Box>
<Box {...labelStyles}>{t('account_info:team_balance')}:&nbsp;</Box>
<Box flex={1}>
<strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong>{' '}
{t('user:bill.yuan')}
{t('account_info:yuan')}
</Box>
{userInfo?.permission.hasManagePer && !!standardPlan && (
<Button variant={'primary'} size={'sm'} ml={5} onClick={onOpenConversionModal}>
{t('user:bill.conversion')}
{t('account_info:exchange')}
</Button>
)}
</Flex>
@@ -331,6 +343,7 @@ const PlanUsage = () => {
const router = useRouter();
const { t } = useTranslation();
const { userInfo, initUserInfo, teamPlanStatus } = useUserStore();
const { subPlans } = useSystemStore();
const { reset } = useForm<UserUpdateParams>({
defaultValues: userInfo as UserType
});
@@ -340,6 +353,11 @@ const PlanUsage = () => {
onClose: onCloseStandardModal,
onOpen: onOpenStandardModal
} = useDisclosure();
const {
isOpen: isOpenAiPointsModal,
onClose: onCloseAiPointsModal,
onOpen: onOpenAiPointsModal
} = useDisclosure();
const planName = useMemo(() => {
if (!teamPlanStatus?.standard?.currentSubLevel) return '';
@@ -373,7 +391,7 @@ const PlanUsage = () => {
return {
colorScheme: 'green',
value: 0,
maxSize: t('common:common.Unlimited'),
maxSize: t('account_info:unlimited'),
usedSize: 0
};
}
@@ -388,7 +406,7 @@ const PlanUsage = () => {
return {
colorScheme,
value: rate * 100,
maxSize: teamPlanStatus.datasetMaxSize || t('common:common.Unlimited'),
maxSize: teamPlanStatus.datasetMaxSize || t('account_info:unlimited'),
usedSize: teamPlanStatus.usedDatasetSize
};
}, [teamPlanStatus, t]);
@@ -397,7 +415,7 @@ const PlanUsage = () => {
return {
colorScheme: 'green',
value: 0,
maxSize: t('common:common.Unlimited'),
maxSize: t('account_info:unlimited'),
usedSize: 0
};
}
@@ -413,7 +431,7 @@ const PlanUsage = () => {
return {
colorScheme,
value: rate * 100,
max: teamPlanStatus.totalPoints ? teamPlanStatus.totalPoints : t('common:common.Unlimited'),
max: teamPlanStatus.totalPoints ? teamPlanStatus.totalPoints : t('account_info:unlimited'),
used: teamPlanStatus.usedPoints ? Math.round(teamPlanStatus.usedPoints) : 0
};
}, [teamPlanStatus, t]);
@@ -423,13 +441,13 @@ const PlanUsage = () => {
<Flex fontSize={['md', 'lg']} h={'30px'}>
<Flex alignItems={'center'}>
<MyIcon mr={2} name={'support/account/plans'} w={'20px'} />
{t('common:support.wallet.subscription.Team plan and usage')}
{t('account_info:package_and_usage')}
</Flex>
<Button ml={4} size={'sm'} onClick={() => router.push(AI_POINT_USAGE_CARD_ROUTE)}>
{t('common:support.user.Price')}
<Button ml={4} size={'sm'} onClick={onOpenAiPointsModal}>
{t('account_info:billing_standard')}
</Button>
<Button ml={4} variant={'whitePrimary'} size={'sm'} onClick={onOpenStandardModal}>
{t('common:support.wallet.Standard Plan Detail')}
{t('account_info:package_details')}
</Button>
</Flex>
<Box
@@ -442,25 +460,33 @@ const PlanUsage = () => {
<Flex px={[5, 7]} pt={[3, 6]}>
<Box flex={'1 0 0'}>
<Box color={'myGray.600'} fontSize="sm">
{t('common:support.wallet.subscription.Current plan')}
{t('account_info:current_package')}
</Box>
<Box fontWeight={'bold'} fontSize="lg">
{t(planName as any)}
</Box>
</Box>
<Button onClick={() => router.push('/price')} w={'8rem'} size="sm">
{t('common:support.wallet.subscription.Upgrade plan')}
<Button
onClick={() => {
router.push(
subPlans?.planDescriptionUrl ? getDocPath(subPlans.planDescriptionUrl) : '/price'
);
}}
w={'8rem'}
size="sm"
>
{t('account_info:upgrade_package')}
</Button>
</Flex>
<Box px={[5, 7]} pb={[3, 6]}>
{isFreeTeam && (
<Box mt="2" color={'#485264'} fontSize="sm">
{t('common:info.free_plan')}
{t('account_info:account_knowledge_base_cleanup_warning')}
</Box>
)}
{standardPlan.currentSubLevel !== StandardSubLevelEnum.free && (
<Flex mt="2" color={'#485264'} fontSize="xs">
<Box>{t('common:support.wallet.Plan expired time')}:</Box>
<Box>{t('account_info:package_expiry_time')}:</Box>
<Box ml={2}>{formatTime2YMD(standardPlan?.expiredTime)}</Box>
</Flex>
)}
@@ -488,14 +514,14 @@ const PlanUsage = () => {
<Flex>
<Flex flex={'1 0 0'} alignItems={'flex-end'}>
<Box fontSize={'md'} fontWeight={'bold'} color={'myGray.900'}>
{t('common:info.resource')}
{t('account_info:resource_usage')}
</Box>
<Box ml={1} display={['none', 'block']} fontSize={'xs'} color={'myGray.500'}>
{t('common:info.include')}
{t('account_info:standard_package_and_extra_resource_package')}
</Box>
</Flex>
<Link
href={getWebReqUrl(EXTRA_PLAN_CARD_ROUTE)}
href={getWebReqUrl(getExtraPlanCardRoute())}
transform={'translateX(15px)'}
display={'flex'}
alignItems={'center'}
@@ -503,7 +529,7 @@ const PlanUsage = () => {
cursor={'pointer'}
fontSize={'sm'}
>
{t('common:info.buy_extra')}
{t('account_info:purchase_extra_package')}
<MyIcon ml={1} name={'common/rightArrowLight'} w={'12px'} />
</Link>
</Flex>
@@ -511,7 +537,7 @@ const PlanUsage = () => {
<Flex alignItems={'center'}>
<Flex alignItems={'center'}>
<Box fontWeight={'bold'} color={'myGray.900'}>
{t('common:support.user.team.Dataset usage')}
{t('account_info:knowledge_base_capacity')}
</Box>
<Box color={'myGray.600'} ml={2}>
{datasetUsageMap.usedSize}/{datasetUsageMap.maxSize}
@@ -535,12 +561,9 @@ const PlanUsage = () => {
<Flex alignItems={'center'}>
<Flex alignItems={'center'}>
<Box fontWeight={'bold'} color={'myGray.900'}>
{t('common:support.wallet.subscription.AI points usage')}
{t('account_info:ai_points_usage')}
</Box>
<QuestionTip
ml={1}
label={t('common:support.wallet.subscription.AI points usage tip')}
></QuestionTip>
<QuestionTip ml={1} label={t('account_info:ai_points_usage_tip')}></QuestionTip>
<Box color={'myGray.600'} ml={2}>
{aiPointsUsageMap.used}/{aiPointsUsageMap.max}
</Box>
@@ -561,6 +584,7 @@ const PlanUsage = () => {
</Box>
</Box>
{isOpenStandardModal && <StandDetailModal onClose={onCloseStandardModal} />}
{isOpenAiPointsModal && <AiPointsModal onClose={onCloseAiPointsModal} />}
</Box>
) : null;
};
@@ -570,7 +594,9 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
const { toast } = useToast();
const { feConfigs } = useSystemStore();
const { t } = useTranslation();
const { isPc } = useSystem();
const { userInfo, updateUserInfo } = useUserStore();
const { reset } = useForm<UserUpdateParams>({
defaultValues: userInfo as UserType
});
@@ -586,12 +612,26 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
});
reset(data);
toast({
title: t('common:dataset.data.Update Success Tip'),
title: t('account_info:update_success_tip'),
status: 'success'
});
},
[reset, toast, updateUserInfo]
[reset, t, toast, updateUserInfo]
);
const buttonStyles = useRef<FlexProps>({
bg: 'white',
py: 3,
px: 6,
border: theme.borders.sm,
borderWidth: '1.5px',
borderRadius: 'md',
alignItems: 'center',
cursor: 'pointer',
userSelect: 'none',
fontSize: 'sm'
});
return (
<Box>
<Grid gridGap={4} mt={3}>
@@ -613,50 +653,32 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
>
<MyIcon name={'common/courseLight'} w={'18px'} color={'myGray.600'} />
<Box ml={2} flex={1}>
{t('common:system.Help Document')}
</Box>
</Link>
)}
{feConfigs?.chatbotUrl && (
<Link
href={feConfigs?.chatbotUrl}
target="_blank"
display={'flex'}
py={3}
px={6}
bg={'white'}
border={theme.borders.sm}
borderWidth={'1.5px'}
borderRadius={'md'}
alignItems={'center'}
userSelect={'none'}
textDecoration={'none !important'}
fontSize={'sm'}
>
<MyIcon name={'core/app/aiLight'} w={'18px'} />
<Box ml={2} flex={1}>
{t('common:common.system.Help Chatbot')}
{t('account_info:help_document')}
</Box>
</Link>
)}
{!isPc &&
feConfigs?.navbarItems
?.filter((item) => item.isActive)
.map((item) => (
<Flex
key={item.id}
{...buttonStyles.current}
onClick={() => window.open(item.url, '_blank')}
>
<Avatar src={item.avatar} w={'18px'} />
<Box ml={2} flex={1}>
{item.name}
</Box>
</Flex>
))}
{feConfigs?.lafEnv && userInfo?.team.role === TeamMemberRoleEnum.owner && (
<Flex
bg={'white'}
py={3}
px={6}
border={theme.borders.sm}
borderWidth={'1.5px'}
borderRadius={'md'}
alignItems={'center'}
cursor={'pointer'}
userSelect={'none'}
onClick={onOpenLaf}
fontSize={'sm'}
>
<Flex {...buttonStyles.current} onClick={onOpenLaf}>
<MyImage src="/imgs/workflow/laf.png" w={'18px'} alt="laf" />
<Box ml={2} flex={1}>
{'laf' + t('common:navbar.Account')}
{'laf' + t('account_info:account_duplicate')}
</Box>
<Box
w={'9px'}
@@ -668,22 +690,10 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
)}
{feConfigs?.show_openai_account && (
<Flex
bg={'white'}
py={3}
px={6}
border={theme.borders.sm}
borderWidth={'1.5px'}
borderRadius={'md'}
alignItems={'center'}
cursor={'pointer'}
userSelect={'none'}
onClick={onOpenOpenai}
fontSize={'sm'}
>
<Flex {...buttonStyles.current} onClick={onOpenOpenai}>
<MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
<Box ml={2} flex={1}>
{'OpenAI / OneAPI' + t('common:navbar.Account')}
{'OpenAI / OneAPI' + t('account_info:account_duplicate')}
</Box>
<Box
w={'9px'}
@@ -702,7 +712,7 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
h={'48px'}
fontSize={'sm'}
>
{t('common:system.Concat us')}
{t('account_info:contact_us')}
</Button>
)}
</Grid>

107
projects/app/src/pages/account/inform.tsx Normal file
View File

@@ -0,0 +1,107 @@
import React from 'react';
import { Box, Button, Flex, useTheme } from '@chakra-ui/react';
import { getInforms, readInform } from '@/web/support/user/inform/api';
import type { UserInformSchema } from '@fastgpt/global/support/user/inform/type';
import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import { useTranslation } from 'next-i18next';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import AccountContainer, { TabEnum } from './components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
const InformTable = () => {
const { t } = useTranslation();
const theme = useTheme();
const { Loading } = useLoading();
const {
data: informs,
isLoading,
total,
pageSize,
Pagination,
getData,
pageNum
} = usePagination<UserInformSchema>({
api: getInforms,
pageSize: 20
});
return (
<AccountContainer>
<Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<Box px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
{informs.map((item) => (
<Box
key={item._id}
border={theme.borders.md}
py={2}
px={4}
borderRadius={'md'}
position={'relative'}
_notLast={{ mb: 3 }}
>
<Flex alignItems={'center'}>
<Box fontWeight={'bold'}>{item.title}</Box>
<Box ml={2} color={'myGray.500'} flex={'1 0 0'}>
({t(formatTimeToChatTime(item.time) as any).replace('#', ':')})
</Box>
{!item.read && (
<Button
variant={'whitePrimary'}
size={'xs'}
onClick={async () => {
if (!item.read) {
await readInform(item._id);
getData(pageNum);
}
}}
>
{t('account_inform:read')}
</Button>
)}
</Flex>
<Box mt={2} fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
{item.content}
</Box>
{!item.read && (
<>
<Box
w={'5px'}
h={'5px'}
borderRadius={'10px'}
bg={'red.600'}
position={'absolute'}
top={'8px'}
left={'8px'}
/>
</>
)}
</Box>
))}
{!isLoading && informs.length === 0 && (
<EmptyTip text={t('account_inform:no_notifications')}></EmptyTip>
)}
</Box>
{total > pageSize && (
<Flex w={'100%'} mt={4} px={[3, 8]} justifyContent={'flex-end'}>
<Pagination />
</Flex>
)}
<Loading loading={isLoading && informs.length === 0} fixed={false} />
</Flex>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account_inform', 'account']))
}
};
}
export default InformTable;

153
projects/app/src/pages/account/promotion.tsx Normal file
View File

@@ -0,0 +1,153 @@
import React from 'react';
import {
Grid,
Box,
Flex,
BoxProps,
useTheme,
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { getPromotionInitData, getPromotionRecords } from '@/web/support/activity/promotion/api';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useCopyData } from '@/web/common/hooks/useCopyData';
import dayjs from 'dayjs';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import AccountContainer, { TabEnum } from './components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
const Promotion = () => {
const { t } = useTranslation();
const theme = useTheme();
const { copyData } = useCopyData();
const { userInfo } = useUserStore();
const { Loading } = useLoading();
const {
data: promotionRecords,
isLoading,
total,
pageSize,
Pagination
} = usePagination({
api: getPromotionRecords,
pageSize: 20
});
const { data: { invitedAmount = 0, earningsAmount = 0 } = {} } = useQuery(
['getPromotionInitData'],
getPromotionInitData
);
const statisticsStyles: BoxProps = {
p: [4, 5],
border: theme.borders.base,
textAlign: 'center',
fontSize: ['md', 'lg'],
borderRadius: 'md'
};
const titleStyles: BoxProps = {
mt: 2,
fontSize: ['lg', '28px'],
fontWeight: 'bold'
};
return (
<AccountContainer>
<Flex flexDirection={'column'} py={[0, 5]} px={5} h={'100%'} position={'relative'}>
<Grid gridTemplateColumns={['1fr 1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']} gridGap={5}>
<Box {...statisticsStyles}>
<Box>{t('account_promotion:total_invited')}</Box>
<Box {...titleStyles}>{invitedAmount}</Box>
</Box>
<Box {...statisticsStyles}>
<Box>{t('account_promotion:earnings')}</Box>
<Box {...titleStyles}>{earningsAmount}</Box>
</Box>
<Box {...statisticsStyles}>
<Flex alignItems={'center'} justifyContent={'center'}>
<Box>{t('account_promotion:cashback_ratio')}</Box>
<QuestionTip
ml={1}
label={t('account_promotion:cashback_ratio_description')}
></QuestionTip>
</Flex>
<Box {...titleStyles}>{userInfo?.promotionRate || 15}%</Box>
</Box>
<Box {...statisticsStyles}>
<Flex alignItems={'center'} justifyContent={'center'}>
<Box>{t('account_promotion:invite_url')}</Box>
<QuestionTip ml={1} label={t('account_promotion:invite_url_tip')}></QuestionTip>
</Flex>
<Button
mt={4}
variant={'whitePrimary'}
fontSize={'sm'}
onClick={() => {
copyData(`${location.origin}/?hiId=${userInfo?._id}`);
}}
>
{t('account_promotion:copy_invite_link')}
</Button>
</Box>
</Grid>
<Box mt={5}>
<TableContainer position={'relative'} overflow={'hidden'} minH={'100px'}>
<Table>
<Thead>
<Tr>
<Th>{t('account_promotion:time')}</Th>
<Th>{t('account_promotion:type')}</Th>
<Th>{t('account_promotion:amount')}</Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{promotionRecords.map((item) => (
<Tr key={item._id}>
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{t(`user:promotion.${item.type}` as any)}</Td>
<Td>{item.amount}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{!isLoading && promotionRecords.length === 0 && (
<EmptyTip text={t('account_promotion:no_invite_records')}></EmptyTip>
)}
{total > pageSize && (
<Flex mt={4} justifyContent={'flex-end'}>
<Pagination />
</Flex>
)}
<Loading loading={isLoading} fixed={false} />
</Box>
</Flex>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account', 'account_promotion']))
}
};
}
export default Promotion;

162
projects/app/src/pages/account/team/components/EditInfoModal.tsx Normal file
View File

@@ -0,0 +1,162 @@
import React, { useCallback } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'next-i18next';
import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
import { compressImgFileAndUpload } from '@/web/common/file/controller';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import Avatar from '@fastgpt/web/components/common/Avatar';
import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';
import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
export type EditTeamFormDataType = CreateTeamProps & {
id?: string;
};
export const defaultForm = {
name: '',
avatar: DEFAULT_TEAM_AVATAR
};
function EditModal({
defaultData = defaultForm,
onClose,
onSuccess
}: {
defaultData?: EditTeamFormDataType;
onClose: () => void;
onSuccess: () => void;
}) {
const { t } = useTranslation();
const { toast } = useToast();
const { register, setValue, handleSubmit, watch } = useForm<CreateTeamProps>({
defaultValues: defaultData
});
const avatar = watch('avatar');
const { File, onOpen: onOpenSelectFile } = useSelectFile({
fileType: '.jpg,.png,.svg',
multiple: false
});
const onSelectFile = useCallback(
async (e: File[]) => {
const file = e[0];
if (!file) return;
try {
const src = await compressImgFileAndUpload({
type: MongoImageTypeEnum.teamAvatar,
file,
maxW: 300,
maxH: 300
});
setValue('avatar', src);
} catch (err: any) {
toast({
title: getErrText(err, t('common:common.Select File Failed')),
status: 'warning'
});
}
},
[setValue, t, toast]
);
const { mutate: onclickCreate, isLoading: creating } = useRequest({
mutationFn: async (data: CreateTeamProps) => {
return postCreateTeam(data);
},
onSuccess() {
onSuccess();
onClose();
},
successToast: t('common:common.Create Success'),
errorToast: t('common:common.Create Failed')
});
const { mutate: onclickUpdate, isLoading: updating } = useRequest({
mutationFn: async (data: EditTeamFormDataType) => {
if (!data.id) return Promise.resolve('');
return putUpdateTeam({
name: data.name,
avatar: data.avatar
});
},
onSuccess() {
onSuccess();
onClose();
},
successToast: t('common:common.Update Success'),
errorToast: t('common:common.Update Failed')
});
return (
<MyModal
isOpen
onClose={onClose}
iconSrc="support/team/group"
iconColor="primary.600"
title={defaultData.id ? t('user:team.Update Team') : t('user:team.Create Team')}
>
<ModalBody>
<Box color={'myGray.800'} fontWeight={'bold'}>
{t('user:team.Set Name')}
</Box>
<Flex mt={3} alignItems={'center'}>
<MyTooltip label={t('common:common.Set Avatar')}>
<Avatar
flexShrink={0}
src={avatar}
w={['28px', '32px']}
h={['28px', '32px']}
cursor={'pointer'}
borderRadius={'md'}
onClick={onOpenSelectFile}
/>
</MyTooltip>
<Input
flex={1}
ml={4}
autoFocus
bg={'myWhite.600'}
maxLength={20}
placeholder={t('user:team.Team Name')}
{...register('name', {
required: t('common:common.Please Input Name')
})}
/>
</Flex>
</ModalBody>
<ModalFooter>
{!!defaultData.id ? (
<>
<Box flex={1} />
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
{t('common:common.Close')}
</Button>
<Button isLoading={updating} onClick={handleSubmit((data) => onclickUpdate(data))}>
{t('common:common.Confirm Update')}
</Button>
</>
) : (
<Button
w={'100%'}
isLoading={creating}
onClick={handleSubmit((data) => onclickCreate(data))}
>
{t('common:common.Confirm Create')}
</Button>
)}
</ModalFooter>
<File onSelect={onSelectFile} />
</MyModal>
);
}
export default React.memo(EditModal);

128
projects/app/src/pages/account/team/components/GroupManage/GroupInfoModal.tsx Normal file
View File

@@ -0,0 +1,128 @@
import { Input, HStack, ModalBody, Button, ModalFooter } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import Avatar from '@fastgpt/web/components/common/Avatar';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
import { useTranslation } from 'next-i18next';
import React, { useMemo } from 'react';
import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
import { compressImgFileAndUpload } from '@/web/common/file/controller';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
import { useForm } from 'react-hook-form';
import { useContextSelector } from 'use-context-selector';
import { TeamContext } from '../context';
import { postCreateGroup, putUpdateGroup } from '@/web/support/user/team/group/api';
import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
export type GroupFormType = {
avatar: string;
name: string;
};
function GroupInfoModal({ onClose, editGroupId }: { onClose: () => void; editGroupId?: string }) {
const { refetchGroups, groups, refetchMembers } = useContextSelector(TeamContext, (v) => v);
const { t } = useTranslation();
const { File: AvatarSelect, onOpen: onOpenSelectAvatar } = useSelectFile({
fileType: '.jpg, .jpeg, .png',
multiple: false
});
const group = useMemo(() => {
return groups.find((item) => item._id === editGroupId);
}, [editGroupId, groups]);
const { register, handleSubmit, getValues, setValue } = useForm<GroupFormType>({
defaultValues: {
name: group?.name || '',
avatar: group?.avatar || DEFAULT_TEAM_AVATAR
}
});
const { loading: uploadingAvatar, run: onSelectAvatar } = useRequest2(
async (file: File[]) => {
const src = await compressImgFileAndUpload({
type: MongoImageTypeEnum.groupAvatar,
file: file[0],
maxW: 300,
maxH: 300
});
return src;
},
{
onSuccess: (src: string) => {
setValue('avatar', src);
}
}
);
const { run: onCreate, loading: isLoadingCreate } = useRequest2(
(data: GroupFormType) => {
return postCreateGroup({
name: data.name,
avatar: data.avatar
});
},
{
onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
}
);
const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
async (data: GroupFormType) => {
if (!editGroupId) return;
return putUpdateGroup({
groupId: editGroupId,
name: data.name,
avatar: data.avatar
});
},
{
onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
}
);
const isLoading = isLoadingUpdate || isLoadingCreate || uploadingAvatar;
return (
<MyModal
onClose={onClose}
title={editGroupId ? t('user:team.group.edit') : t('user:team.group.create')}
iconSrc={group?.avatar ?? DEFAULT_TEAM_AVATAR}
>
<ModalBody flex={1} overflow={'auto'} display={'flex'} flexDirection={'column'} gap={4}>
<FormLabel w="80px">{t('user:team.avatar_and_name')}</FormLabel>
<HStack>
<Avatar
src={getValues('avatar')}
onClick={onOpenSelectAvatar}
cursor={'pointer'}
borderRadius={'md'}
/>
<Input
bgColor="myGray.50"
{...register('name', { required: true })}
placeholder={t('user:team.group.name')}
/>
</HStack>
</ModalBody>
<ModalFooter alignItems="flex-end">
<Button
isLoading={isLoading}
onClick={handleSubmit((data) => {
if (editGroupId) {
onUpdate(data);
} else {
onCreate(data);
}
})}
>
{editGroupId ? t('common:common.Save') : t('common:new_create')}
</Button>
</ModalFooter>
<AvatarSelect onSelect={onSelectAvatar} />
</MyModal>
);
}
export default GroupInfoModal;

278
projects/app/src/pages/account/team/components/GroupManage/GroupManageMember.tsx Normal file
View File

@@ -0,0 +1,278 @@
import {
Box,
ModalBody,
Flex,
Button,
ModalFooter,
Checkbox,
Grid,
HStack
} from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import MyIcon from '@fastgpt/web/components/common/Icon';
import Avatar from '@fastgpt/web/components/common/Avatar';
import Tag from '@fastgpt/web/components/common/Tag';
import { useTranslation } from 'next-i18next';
import React, { useMemo, useState } from 'react';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useContextSelector } from 'use-context-selector';
import { TeamContext } from '../context';
import { putUpdateGroup } from '@/web/support/user/team/group/api';
import { GroupMemberRole } from '@fastgpt/global/support/permission/memberGroup/constant';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
export type GroupFormType = {
members: {
tmbId: string;
role: `${GroupMemberRole}`;
}[];
};
function GroupEditModal({ onClose, editGroupId }: { onClose: () => void; editGroupId?: string }) {
// 1. Owner can not be deleted, toast
// 2. Owner/Admin can manage members
// 3. Owner can add/remove admins
const { t } = useTranslation();
const { userInfo } = useUserStore();
const { toast } = useToast();
const [hoveredMemberId, setHoveredMemberId] = useState<string | undefined>(undefined);
const {
members: allMembers,
refetchGroups,
groups,
refetchMembers
} = useContextSelector(TeamContext, (v) => v);
const group = useMemo(() => {
return groups.find((item) => item._id === editGroupId);
}, [editGroupId, groups]);
const [members, setMembers] = useState(group?.members || []);
const [searchKey, setSearchKey] = useState('');
const filtered = useMemo(() => {
return [
...allMembers.filter((member) => {
if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
return false;
})
];
}, [searchKey, allMembers]);
const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
async () => {
if (!editGroupId || !members.length) return;
return putUpdateGroup({
groupId: editGroupId,
memberList: members
});
},
{
onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
}
);
const isSelected = (memberId: string) => {
return members.find((item) => item.tmbId === memberId);
};
const myRole = useMemo(() => {
if (userInfo?.team.permission.hasManagePer) {
return 'owner';
}
return members.find((item) => item.tmbId === userInfo?.team.tmbId)?.role ?? 'member';
}, [members, userInfo]);
const handleToggleSelect = (memberId: string) => {
if (
myRole === 'owner' &&
memberId === group?.members.find((item) => item.role === 'owner')?.tmbId
) {
toast({
title: t('user:team.group.toast.can_not_delete_owner'),
status: 'error'
});
return;
}
if (
myRole === 'admin' &&
group?.members.find((item) => String(item.tmbId) === memberId)?.role !== 'member'
) {
return;
}
if (isSelected(memberId)) {
setMembers(members.filter((item) => item.tmbId !== memberId));
} else {
setMembers([...members, { tmbId: memberId, role: 'member' }]);
}
};
const handleToggleAdmin = (memberId: string) => {
if (myRole === 'owner' && isSelected(memberId)) {
const oldRole = members.find((item) => item.tmbId === memberId)?.role;
if (oldRole === 'admin') {
setMembers(
members.map((item) => (item.tmbId === memberId ? { ...item, role: 'member' } : item))
);
} else {
setMembers(
members.map((item) => (item.tmbId === memberId ? { ...item, role: 'admin' } : item))
);
}
}
};
const isLoading = isLoadingUpdate;
return (
<MyModal
onClose={onClose}
title={t('user:team.group.manage_member')}
iconSrc={group?.avatar ?? DEFAULT_TEAM_AVATAR}
iconColor="primary.600"
minW="800px"
h={'100%'}
isCentered
>
<ModalBody flex={1}>
<Grid
border="1px solid"
borderColor="myGray.200"
borderRadius="0.5rem"
gridTemplateColumns="1fr 1fr"
h={'100%'}
>
<Flex flexDirection="column" p="4">
<SearchInput
placeholder={t('user:search_user')}
fontSize="sm"
bg={'myGray.50'}
onChange={(e) => {
setSearchKey(e.target.value);
}}
/>
<Flex flexDirection="column" mt={3} flexGrow="1" overflow={'auto'} maxH={'400px'}>
{filtered.map((member) => {
return (
<HStack
py="2"
px={3}
borderRadius={'md'}
alignItems="center"
key={member.tmbId}
cursor={'pointer'}
_hover={{
bg: 'myGray.50',
...(!isSelected(member.tmbId) ? { svg: { color: 'myGray.50' } } : {})
}}
_notLast={{ mb: 2 }}
onClick={() => handleToggleSelect(member.tmbId)}
>
<Checkbox
isChecked={!!isSelected(member.tmbId)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
<Box>{member.memberName}</Box>
</HStack>
);
})}
</Flex>
</Flex>
<Flex borderLeft="1px" borderColor="myGray.200" flexDirection="column" p="4" h={'100%'}>
<Box mt={2}>{t('common:chosen') + ': ' + members.length}</Box>
<Flex mt={3} flexDirection="column" flexGrow="1" overflow={'auto'} maxH={'400px'}>
{members.map((member) => {
return (
<HStack
onMouseEnter={() => setHoveredMemberId(member.tmbId)}
onMouseLeave={() => setHoveredMemberId(undefined)}
justifyContent="space-between"
py="2"
px={3}
borderRadius={'md'}
key={member.tmbId + member.role}
_hover={{ bg: 'myGray.50' }}
_notLast={{ mb: 2 }}
>
<HStack>
<Avatar
src={allMembers.find((item) => item.tmbId === member.tmbId)?.avatar}
w="1.5rem"
borderRadius={'md'}
/>
<Box>
{allMembers.find((item) => item.tmbId === member.tmbId)?.memberName}
</Box>
</HStack>
<Box mr="auto">
{(() => {
if (member.role === 'owner') {
return (
<Tag ml={2} colorSchema="gray">
{t('user:team.group.role.owner')}
</Tag>
);
} else if (member.role === 'admin') {
return (
<Tag ml={2} mr="auto">
{t('user:team.group.role.admin')}
{myRole === 'owner' && (
<MyIcon
ml={1}
name={'common/closeLight'}
w={'1rem'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
onClick={() => handleToggleAdmin(member.tmbId)}
/>
)}
</Tag>
);
} else if (member.role === 'member') {
return (
myRole === 'owner' &&
hoveredMemberId === member.tmbId && (
<Tag
ml={2}
colorSchema="yellow"
cursor={'pointer'}
onClick={() => handleToggleAdmin(member.tmbId)}
>
{t('user:team.group.set_as_admin')}
</Tag>
)
);
}
})()}
</Box>
{(myRole === 'owner' || (myRole === 'admin' && member.role === 'member')) && (
<MyIcon
name={'common/closeLight'}
w={'1rem'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
onClick={() => handleToggleSelect(member.tmbId)}
/>
)}
</HStack>
);
})}
</Flex>
</Flex>
</Grid>
</ModalBody>
<ModalFooter alignItems="flex-end">
<Button isLoading={isLoading} onClick={onUpdate}>
{t('common:common.Save')}
</Button>
</ModalFooter>
</MyModal>
);
}
export default GroupEditModal;

196
projects/app/src/pages/account/team/components/GroupManage/GroupTransferOwnerModal.tsx Normal file
View File

@@ -0,0 +1,196 @@
import { putUpdateGroup } from '@/web/support/user/team/group/api';
import {
Box,
Flex,
HStack,
Input,
ModalBody,
ModalFooter,
Button,
useDisclosure,
Checkbox
} from '@chakra-ui/react';
import { TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useTranslation } from 'next-i18next';
import React, { useMemo, useState } from 'react';
import { TeamContext } from '../context';
import { useContextSelector } from 'use-context-selector';
export type ChangeOwnerModalProps = {
groupId: string;
};
export function ChangeOwnerModal({
onClose,
groupId
}: ChangeOwnerModalProps & { onClose: () => void }) {
const { t } = useTranslation();
const [inputValue, setInputValue] = React.useState('');
const { members: allMembers, groups, refetchGroups } = useContextSelector(TeamContext, (v) => v);
const group = useMemo(() => {
return groups.find((item) => item._id === groupId);
}, [groupId, groups]);
const memberList = allMembers.filter((item) => {
return item.memberName.toLowerCase().includes(inputValue.toLowerCase());
});
const OldOwnerId = useMemo(() => {
return group?.members.find((item) => item.role === 'owner')?.tmbId;
}, [group]);
const [keepAdmin, setKeepAdmin] = useState(true);
const {
isOpen: isOpenMemberListMenu,
onClose: onCloseMemberListMenu,
onOpen: onOpenMemberListMenu
} = useDisclosure();
const [selectedMember, setSelectedMember] = useState<TeamMemberItemType | null>(null);
const onChangeOwner = async (tmbId: string) => {
if (!group) {
return;
}
const newMemberList = group.members
.map((item) => {
if (item.tmbId === OldOwnerId) {
if (keepAdmin) {
return { tmbId: OldOwnerId, role: 'admin' };
}
return { tmbId: OldOwnerId, role: 'member' };
}
return item;
})
.filter((item) => item.tmbId !== tmbId) as any;
newMemberList.push({ tmbId, role: 'owner' });
return putUpdateGroup({
groupId,
memberList: newMemberList
});
};
const { runAsync, loading } = useRequest2(onChangeOwner, {
onSuccess: () => Promise.all([onClose(), refetchGroups()]),
successToast: t('common:permission.change_owner_success'),
errorToast: t('common:permission.change_owner_failed')
});
const onConfirm = async () => {
if (!selectedMember) {
return;
}
await runAsync(selectedMember.tmbId);
};
return (
<MyModal
isOpen
iconSrc="modal/changePer"
iconColor="primary.600"
onClose={onClose}
title={t('common:permission.change_owner')}
isLoading={loading}
>
<ModalBody>
<HStack>
<Avatar src={group?.avatar} w={'1.75rem'} borderRadius={'md'} />
<Box>{group?.name}</Box>
</HStack>
<Flex mt={4} justify="start" flexDirection="column">
<Box fontSize="14px" fontWeight="500" color="myGray.900">
{t('common:permission.change_owner_to')}
</Box>
<Flex mt="4" alignItems="center" position={'relative'}>
{selectedMember && (
<Avatar
src={selectedMember.avatar}
w={'20px'}
borderRadius={'md'}
position="absolute"
left={3}
/>
)}
<Input
placeholder={t('common:permission.change_owner_placeholder')}
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
setSelectedMember(null);
}}
onFocus={() => {
onOpenMemberListMenu();
setSelectedMember(null);
}}
{...(selectedMember && { pl: '10' })}
/>
</Flex>
{isOpenMemberListMenu && memberList.length > 0 && (
<Flex
mt={2}
w={'100%'}
flexDirection={'column'}
gap={2}
p={1}
boxShadow="lg"
bg="white"
borderRadius="md"
zIndex={10}
maxH={'300px'}
overflow={'auto'}
>
{memberList.map((item) => (
<Box
key={item.tmbId}
p="2"
_hover={{ bg: 'myGray.100' }}
mx="1"
borderRadius="md"
cursor={'pointer'}
onClickCapture={() => {
setInputValue(item.memberName);
setSelectedMember(item);
onCloseMemberListMenu();
}}
>
<Flex align="center">
<Avatar src={item.avatar} w="1.25rem" />
<Box ml="2">{item.memberName}</Box>
</Flex>
</Box>
))}
</Flex>
)}
<Box mt="4">
<Checkbox
isChecked={keepAdmin}
onChange={(e) => {
setKeepAdmin(e.target.checked);
}}
>
{t('account_team:retain_admin_permissions')}
</Checkbox>
</Box>
</Flex>
</ModalBody>
<ModalFooter>
<HStack>
<Button onClick={onClose} variant={'whiteBase'}>
{t('common:common.Cancel')}
</Button>
<Button onClick={onConfirm}>{t('common:common.Confirm')}</Button>
</HStack>
</ModalFooter>
</MyModal>
);
}
export default ChangeOwnerModal;

217
projects/app/src/pages/account/team/components/GroupManage/index.tsx Normal file
View File

@@ -0,0 +1,217 @@
import AvatarGroup from '@fastgpt/web/components/common/Avatar/AvatarGroup';
import {
Box,
HStack,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
useDisclosure
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { useContextSelector } from 'use-context-selector';
import { TeamContext } from '../context';
import MyMenu, { MenuItemType } from '@fastgpt/web/components/common/MyMenu';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { deleteGroup } from '@/web/support/user/team/group/api';
import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
import MemberTag from '../../../../../components/support/user/team/Info/MemberTag';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import dynamic from 'next/dynamic';
import { useState } from 'react';
const ChangeOwnerModal = dynamic(() => import('./GroupTransferOwnerModal'));
function MemberTable({
onEditGroup,
onManageMember
}: {
onEditGroup: (groupId: string) => void;
onManageMember: (groupId: string) => void;
}) {
const { t } = useTranslation();
const { userInfo } = useUserStore();
const [editGroupId, setEditGroupId] = useState<string>();
const { ConfirmModal: ConfirmDeleteGroupModal, openConfirm: openDeleteGroupModal } = useConfirm({
type: 'delete',
content: t('account_team:confirm_delete_group')
});
const { groups, refetchGroups, members, refetchMembers } = useContextSelector(
TeamContext,
(v) => v
);
const { runAsync: delDeleteGroup } = useRequest2(deleteGroup, {
onSuccess: () => {
refetchGroups();
refetchMembers();
}
});
const hasGroupManagePer = (group: (typeof groups)[0]) =>
userInfo?.team.permission.hasManagePer ||
['admin', 'owner'].includes(
group.members.find((item) => item.tmbId === userInfo?.team.tmbId)?.role ?? ''
);
const isGroupOwner = (group: (typeof groups)[0]) =>
userInfo?.team.permission.hasManagePer ||
group.members.find((item) => item.role === 'owner')?.tmbId === userInfo?.team.tmbId;
const {
isOpen: isOpenChangeOwner,
onOpen: onOpenChangeOwner,
onClose: onCloseChangeOwner
} = useDisclosure();
const onChangeOwner = (groupId: string) => {
setEditGroupId(groupId);
onOpenChangeOwner();
};
return (
<MyBox>
<TableContainer overflow={'unset'} fontSize={'sm'}>
<Table overflow={'unset'}>
<Thead>
<Tr bg={'white !important'}>
<Th bg="myGray.100" borderLeftRadius="6px">
{t('account_team:group_name')}
</Th>
<Th bg="myGray.100">{t('account_team:owner')}</Th>
<Th bg="myGray.100">{t('account_team:member')}</Th>
<Th bg="myGray.100" borderRightRadius="6px">
{t('common:common.Action')}
</Th>
</Tr>
</Thead>
<Tbody>
{groups?.map((group) => (
<Tr key={group._id} overflow={'unset'}>
<Td>
<HStack>
<MemberTag
name={
group.name === DefaultGroupName ? userInfo?.team.teamName ?? '' : group.name
}
avatar={group.avatar}
/>
<Box>
({group.name === DefaultGroupName ? members.length : group.members.length})
</Box>
</HStack>
</Td>
<Td>
<MemberTag
name={
group.name === DefaultGroupName
? members.find((item) => item.role === 'owner')?.memberName ?? ''
: members.find(
(item) =>
item.tmbId ===
group.members.find((item) => item.role === 'owner')?.tmbId
)?.memberName ?? ''
}
avatar={
group.name === DefaultGroupName
? members.find((item) => item.role === 'owner')?.avatar ?? ''
: members.find(
(i) =>
i.tmbId === group.members.find((item) => item.role === 'owner')?.tmbId
)?.avatar ?? ''
}
/>
</Td>
<Td>
{group.name === DefaultGroupName ? (
<AvatarGroup avatars={members.map((v) => v.avatar)} groupId={group._id} />
) : hasGroupManagePer(group) ? (
<MyTooltip label={t('account_team:manage_member')}>
<Box cursor="pointer" onClick={() => onManageMember(group._id)}>
<AvatarGroup
avatars={group.members.map(
(v) => members.find((m) => m.tmbId === v.tmbId)?.avatar ?? ''
)}
groupId={group._id}
/>
</Box>
</MyTooltip>
) : (
<AvatarGroup
avatars={group.members.map(
(v) => members.find((m) => m.tmbId === v.tmbId)?.avatar ?? ''
)}
groupId={group._id}
/>
)}
</Td>
<Td>
{hasGroupManagePer(group) && group.name !== DefaultGroupName && (
<MyMenu
Button={<MyIcon name={'edit'} cursor={'pointer'} w="1rem" />}
menuList={[
{
children: [
{
label: t('account_team:edit_info'),
icon: 'edit',
onClick: () => {
onEditGroup(group._id);
}
},
{
label: t('account_team:manage_member'),
icon: 'support/team/group',
onClick: () => {
onManageMember(group._id);
}
},
...(isGroupOwner(group)
? [
{
label: t('account_team:transfer_ownership'),
icon: 'modal/changePer',
onClick: () => {
onChangeOwner(group._id);
},
type: 'primary' as MenuItemType
},
{
label: t('common:common.Delete'),
icon: 'delete',
onClick: () => {
openDeleteGroupModal(() => delDeleteGroup(group._id))();
},
type: 'danger' as MenuItemType
}
]
: [])
]
}
]}
/>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
<ConfirmDeleteGroupModal />
{isOpenChangeOwner && editGroupId && (
<ChangeOwnerModal groupId={editGroupId} onClose={onCloseChangeOwner} />
)}
</MyBox>
);
}
export default MemberTable;

90
projects/app/src/pages/account/team/components/InviteModal.tsx Normal file
View File

@@ -0,0 +1,90 @@
import React, { useState } from 'react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useTranslation } from 'next-i18next';
import { ModalCloseButton, ModalBody, Box, ModalFooter, Button } from '@chakra-ui/react';
import TagTextarea from '@/components/common/Textarea/TagTextarea';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { postInviteTeamMember } from '@/web/support/user/team/api';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import type { InviteMemberResponse } from '@fastgpt/global/support/user/team/controller.d';
const InviteModal = ({
teamId,
onClose,
onSuccess
}: {
teamId: string;
onClose: () => void;
onSuccess: () => void;
}) => {
const { t } = useTranslation();
const { ConfirmModal, openConfirm } = useConfirm({
title: t('user:team.Invite Member Result Tip'),
showCancel: false
});
const [inviteUsernames, setInviteUsernames] = useState<string[]>([]);
const { runAsync: onInvite, loading: isLoading } = useRequest2(
() =>
postInviteTeamMember({
teamId,
usernames: inviteUsernames
}),
{
onSuccess(res: InviteMemberResponse) {
onSuccess();
openConfirm(
() => onClose(),
undefined,
<Box whiteSpace={'pre-wrap'}>
{t('user:team.Invite Member Success Tip', {
success: res.invite.length,
inValid: res.inValid.map((item) => item.username).join(', '),
inTeam: res.inTeam.map((item) => item.username).join(', ')
})}
</Box>
)();
},
errorToast: t('user:team.Invite Member Failed Tip')
}
);
return (
<MyModal
isOpen
iconSrc="common/inviteLight"
iconColor="primary.600"
title={
<Box>
<Box>{t('common:user.team.Invite Member')}</Box>
<Box color={'myGray.500'} fontSize={'xs'} fontWeight={'normal'}>
{t('common:user.team.Invite Member Tips')}
</Box>
</Box>
}
maxW={['90vw', '400px']}
overflow={'unset'}
>
<ModalCloseButton onClick={onClose} />
<ModalBody>
<Box mb={2}>{t('common:user.Account')}</Box>
<TagTextarea defaultValues={inviteUsernames} onUpdate={setInviteUsernames} />
</ModalBody>
<ModalFooter>
<Button
w={'100%'}
h={'34px'}
isDisabled={inviteUsernames.length === 0}
isLoading={isLoading}
onClick={onInvite}
>
{t('user:team.Confirm Invite')}
</Button>
</ModalFooter>
<ConfirmModal />
</MyModal>
);
};
export default InviteModal;

107
projects/app/src/pages/account/team/components/MemberTable.tsx Normal file
View File

@@ -0,0 +1,107 @@
import Avatar from '@fastgpt/web/components/common/Avatar';
import { Box, HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
import { useTranslation } from 'next-i18next';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { delRemoveMember } from '@/web/support/user/team/api';
import Tag from '@fastgpt/web/components/common/Tag';
import Icon from '@fastgpt/web/components/common/Icon';
import GroupTags from '@/components/support/permission/Group/GroupTags';
import { useContextSelector } from 'use-context-selector';
import { TeamContext } from './context';
function MemberTable() {
const { userInfo } = useUserStore();
const { t } = useTranslation();
const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
type: 'delete'
});
const { members, groups, refetchMembers, refetchGroups } = useContextSelector(
TeamContext,
(v) => v
);
return (
<MyBox>
<TableContainer overflow={'unset'} fontSize={'sm'}>
<Table overflow={'unset'}>
<Thead>
<Tr bgColor={'white !important'}>
<Th borderLeftRadius="6px" bgColor="myGray.100">
{t('account_team:user_name')}
</Th>
<Th bgColor="myGray.100">{t('account_team:member_group')}</Th>
<Th borderRightRadius="6px" bgColor="myGray.100">
{t('common:common.Action')}
</Th>
</Tr>
</Thead>
<Tbody>
{members?.map((item) => (
<Tr key={item.userId} overflow={'unset'}>
<Td>
<HStack>
<Avatar src={item.avatar} w={['18px', '22px']} borderRadius={'50%'} />
<Box className={'textEllipsis'}>
{item.memberName}
{item.status === 'waiting' && (
<Tag ml="2" colorSchema="yellow">
{t('account_team:waiting')}
</Tag>
)}
</Box>
</HStack>
</Td>
<Td maxW={'300px'}>
<GroupTags
names={groups
?.filter((group) => group.members.map((m) => m.tmbId).includes(item.tmbId))
.map((g) => g.name)}
max={3}
/>
</Td>
<Td>
{userInfo?.team.permission.hasManagePer &&
item.role !== TeamMemberRoleEnum.owner &&
item.tmbId !== userInfo?.team.tmbId && (
<Icon
name={'common/trash'}
cursor={'pointer'}
w="1rem"
p="1"
borderRadius="sm"
_hover={{
color: 'red.600',
bgColor: 'myGray.100'
}}
onClick={() => {
openRemoveMember(
() =>
delRemoveMember(item.tmbId).then(() =>
Promise.all([refetchGroups(), refetchMembers()])
),
undefined,
t('account_team:remove_tip', {
username: item.memberName
})
)();
}}
/>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
<ConfirmRemoveMemberModal />
</TableContainer>
</MyBox>
);
}
export default MemberTable;

287
projects/app/src/pages/account/team/components/PermissionManage/index.tsx Normal file
View File

@@ -0,0 +1,287 @@
import React from 'react';
import {
Box,
Checkbox,
HStack,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useContextSelector } from 'use-context-selector';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { getTeamClbs, updateMemberPermission } from '@/web/support/user/team/api';
import { useUserStore } from '@/web/support/user/useUserStore';
import { TeamContext } from '../context';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MemberTag from '../../../../../components/support/user/team/Info/MemberTag';
import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
import {
TeamManagePermissionVal,
TeamWritePermissionVal
} from '@fastgpt/global/support/permission/user/constant';
import { TeamPermission } from '@fastgpt/global/support/permission/user/controller';
import { useCreation } from 'ahooks';
function PermissionManage() {
const { t } = useTranslation();
const { userInfo } = useUserStore();
const { groups, refetchMembers, refetchGroups, members, searchKey } = useContextSelector(
TeamContext,
(v) => v
);
const { runAsync: refetchClbs, data: clbs = [] } = useRequest2(getTeamClbs, {
manual: false,
refreshDeps: [userInfo?.team?.teamId]
});
const filteredGroups = useCreation(
() => groups?.filter((group) => group.name.toLowerCase().includes(searchKey.toLowerCase())),
[groups, searchKey]
);
const filteredMembers = useCreation(
() =>
members
?.filter((member) => member.memberName.toLowerCase().includes(searchKey.toLowerCase()))
.map((member) => {
const clb = clbs?.find((clb) => String(clb.tmbId) === String(member.tmbId));
const permission =
member.role === 'owner'
? new TeamPermission({ isOwner: true })
: new TeamPermission({ per: clb?.permission });
return { ...member, permission };
}),
[clbs, members, searchKey]
);
const { runAsync: onUpdateMemberPermission } = useRequest2(updateMemberPermission, {
onSuccess: () => {
refetchGroups();
refetchMembers();
refetchClbs();
}
});
const { runAsync: onAddPermission, loading: addLoading } = useRequest2(
async ({
groupId,
memberId,
per
}: {
groupId?: string;
memberId?: string;
per: 'write' | 'manage';
}) => {
if (groupId) {
const group = groups?.find((group) => group._id === groupId);
if (group) {
const permission = new TeamPermission({ per: group.permission.value });
switch (per) {
case 'write':
permission.addPer(TeamWritePermissionVal);
return onUpdateMemberPermission({
groupId: group._id,
permission: permission.value
});
case 'manage':
permission.addPer(TeamManagePermissionVal);
return onUpdateMemberPermission({
groupId: group._id,
permission: permission.value
});
}
}
}
if (memberId) {
const member = filteredMembers?.find((member) => String(member.tmbId) === memberId);
if (member) {
const permission = new TeamPermission({ per: member.permission.value });
switch (per) {
case 'write':
permission.addPer(TeamWritePermissionVal);
return onUpdateMemberPermission({
memberId: String(member.tmbId),
permission: permission.value
});
case 'manage':
permission.addPer(TeamManagePermissionVal);
return onUpdateMemberPermission({
memberId: String(member.tmbId),
permission: permission.value
});
}
}
}
}
);
const { runAsync: onRemovePermission, loading: removeLoading } = useRequest2(
async ({
groupId,
memberId,
per
}: {
groupId?: string;
memberId?: string;
per: 'write' | 'manage';
}) => {
if (groupId) {
const group = groups?.find((group) => group._id === groupId);
if (group) {
const permission = new TeamPermission({ per: group.permission.value });
switch (per) {
case 'write':
permission.removePer(TeamWritePermissionVal);
return onUpdateMemberPermission({
groupId: group._id,
permission: permission.value
});
case 'manage':
permission.removePer(TeamManagePermissionVal);
return onUpdateMemberPermission({
groupId: group._id,
permission: permission.value
});
}
}
}
if (memberId) {
const member = members?.find((member) => String(member.tmbId) === memberId);
if (member) {
const permission = new TeamPermission({ per: member.permission.value }); // Hint: member.permission is read-only
switch (per) {
case 'write':
permission.removePer(TeamWritePermissionVal);
return onUpdateMemberPermission({
memberId: String(member.tmbId),
permission: permission.value
});
case 'manage':
permission.removePer(TeamManagePermissionVal);
return onUpdateMemberPermission({
memberId: String(member.tmbId),
permission: permission.value
});
}
}
}
}
);
const userManage = userInfo?.permission.hasManagePer;
return (
<TableContainer fontSize={'sm'}>
<Table>
<Thead>
<Tr bg={'white !important'}>
<Th bg="myGray.100" borderLeftRadius="md" maxW={'150px'}>
{t('user:team.group.group')} / {t('user:team.group.members')}
<QuestionTip ml="1" label={t('user:team.group.permission_tip')} />
</Th>
<Th bg="myGray.100">
<Box mx="auto" w="fit-content">
{t('user:team.group.permission.write')}
</Box>
</Th>
<Th bg="myGray.100" borderRightRadius="md">
<Box mx="auto" w="fit-content">
{t('user:team.group.permission.manage')}
<QuestionTip ml="1" label={t('user:team.group.manage_tip')} />
</Box>
</Th>
</Tr>
</Thead>
<Tbody>
{filteredGroups?.map((group) => (
<Tr key={group._id} overflow={'unset'} border="none">
<Td border="none">
<MemberTag
name={
group.name === DefaultGroupName ? userInfo?.team.teamName ?? '' : group.name
}
avatar={group.avatar}
/>
</Td>
<Td border="none">
<Box mx="auto" w="fit-content">
<Checkbox
isDisabled={!userManage}
isChecked={group.permission.hasWritePer}
onChange={(e) =>
e.target.checked
? onAddPermission({ groupId: group._id, per: 'write' })
: onRemovePermission({ groupId: group._id, per: 'write' })
}
/>
</Box>
</Td>
<Td border="none">
<Box mx="auto" w="fit-content">
<Checkbox
isDisabled={!userInfo?.permission.isOwner}
isChecked={group.permission.hasManagePer}
onChange={(e) =>
e.target.checked
? onAddPermission({ groupId: group._id, per: 'manage' })
: onRemovePermission({ groupId: group._id, per: 'manage' })
}
/>
</Box>
</Td>
</Tr>
))}
{filteredGroups?.length > 0 && filteredMembers?.length > 0 && (
<Tr borderBottom={'1px solid'} borderColor={'myGray.300'} />
)}
{filteredMembers?.map((member) => (
<Tr key={member.tmbId} overflow={'unset'} border="none">
<Td border="none">
<HStack>
<Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
<Box>{member.memberName}</Box>
</HStack>
</Td>
<Td border="none">
<Box mx="auto" w="fit-content">
<Checkbox
isDisabled={member.permission.isOwner || !userManage}
isChecked={member.permission.hasWritePer}
onChange={(e) =>
e.target.checked
? onAddPermission({ memberId: String(member.tmbId), per: 'write' })
: onRemovePermission({ memberId: String(member.tmbId), per: 'write' })
}
/>
</Box>
</Td>
<Td border="none">
<Box mx="auto" w="fit-content">
<Checkbox
isDisabled={member.permission.isOwner || !userInfo?.permission.isOwner}
isChecked={member.permission.hasManagePer}
onChange={(e) =>
e.target.checked
? onAddPermission({ memberId: String(member.tmbId), per: 'manage' })
: onRemovePermission({ memberId: String(member.tmbId), per: 'manage' })
}
/>
</Box>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
);
}
export default PermissionManage;

266
projects/app/src/pages/account/team/components/SelectMember.tsx Normal file
View File

@@ -0,0 +1,266 @@
import React, { useMemo, useState } from 'react';
import { Box, Checkbox, Flex, Grid, HStack } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import Avatar from '@fastgpt/web/components/common/Avatar';
import { useTranslation } from 'next-i18next';
import { Control, Controller } from 'react-hook-form';
import { RequireAtLeastOne } from '@fastgpt/global/common/type/utils';
import { useUserStore } from '@/web/support/user/useUserStore';
import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
type memberType = {
type: 'member';
tmbId: string;
memberName: string;
avatar: string;
};
type groupType = {
type: 'group';
_id: string;
name: string;
avatar: string;
};
type selectedType = {
member: string[];
group: string[];
};
function SelectMember({
allMembers,
selected = { member: [], group: [] },
setSelected
// mode = 'both'
}: {
allMembers: {
member: memberType[];
group: groupType[];
};
selected?: selectedType;
setSelected: React.Dispatch<React.SetStateAction<selectedType>>;
mode?: 'member' | 'group' | 'both';
}) {
const [searchKey, setSearchKey] = useState('');
const { t } = useTranslation();
const { userInfo } = useUserStore();
const filtered = useMemo(() => {
return [
...allMembers.member.filter((member) => {
if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
return false;
}),
...allMembers.group.filter((member) => {
if (member.name.toLowerCase().includes(searchKey.toLowerCase())) return true;
return false;
})
];
}, [searchKey, allMembers]);
const selectedFlated = useMemo(() => {
return [
...allMembers.member.filter((member) => {
return selected.member?.includes(member.tmbId);
}),
...allMembers.group.filter((member) => {
return selected.group?.includes(member._id);
})
];
}, [selected, allMembers]);
const handleToggleSelect = (member: memberType | groupType) => {
if (member.type == 'member') {
if (selected.member?.indexOf(member.tmbId) == -1) {
setSelected({
member: [...selected.member, member.tmbId],
group: [...selected.group]
});
} else {
setSelected({
member: [...selected.member.filter((item) => item != member.tmbId)],
group: [...selected.group]
});
}
} else {
if (selected.group?.indexOf(member._id) == -1) {
setSelected({ member: [...selected.member], group: [...selected.group, member._id] });
} else {
setSelected({
member: [...selected.member],
group: [...selected.group.filter((item) => item != member._id)]
});
}
}
};
const isSelected = (member: memberType | groupType) => {
if (member.type == 'member') {
return selected.member?.includes(member.tmbId);
} else {
return selected.group?.includes(member._id);
}
};
return (
<Grid
templateColumns="1fr 1fr"
borderRadius="8px"
border="1px solid"
borderColor="myGray.200"
h={'100%'}
>
<Flex flexDirection="column" p="4" h={'100%'} overflow={'auto'}>
<SearchInput
placeholder={t('user:search_user')}
fontSize="sm"
bg={'myGray.50'}
onChange={(e) => {
setSearchKey(e.target.value);
}}
/>
<Flex flexDirection="column" mt={3}>
{filtered.map((member) => {
return (
<HStack
py="2"
px={3}
borderRadius={'md'}
alignItems="center"
key={member.type == 'member' ? member.tmbId : member._id}
cursor={'pointer'}
_hover={{
bg: 'myGray.50',
...(!isSelected(member) ? { svg: { color: 'myGray.50' } } : {})
}}
_notLast={{ mb: 2 }}
onClick={() => handleToggleSelect(member)}
>
<Checkbox
isChecked={!!isSelected(member)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
<Box>
{member.type == 'member'
? member.memberName
: member.name === DefaultGroupName
? userInfo?.team.teamName
: member.name}
</Box>
</HStack>
);
})}
</Flex>
</Flex>
<Flex
borderLeft="1px"
borderColor="myGray.200"
flexDirection="column"
p="4"
h={'100%'}
overflow={'auto'}
>
<Box mt={3}>
{t('common:chosen') + ': ' + Number(selected.member.length + selected.group.length)}{' '}
</Box>
<Box mt={5}>
{selectedFlated.map((member) => {
return (
<HStack
justifyContent="space-between"
py="2"
px={3}
borderRadius={'md'}
key={member.type == 'member' ? member.tmbId : member._id}
_hover={{ bg: 'myGray.50' }}
_notLast={{ mb: 2 }}
>
<Avatar src={member.avatar} w="1.5rem" borderRadius={'md'} />
<Box w="full">
{member.type == 'member'
? member.memberName
: member.name === DefaultGroupName
? userInfo?.team.teamName
: member.name}
</Box>
<MyIcon
name={'common/closeLight'}
w={'1rem'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
onClick={() => handleToggleSelect(member)}
/>
</HStack>
);
})}
</Box>
</Flex>
</Grid>
);
}
// This function is for using with react-hook-form
function ControllerWrapper({
control,
allMembers,
mode = 'both',
name = 'members'
}: {
control: Control;
allMembers: RequireAtLeastOne<{ member?: memberType[]; group?: groupType[] }>;
mode?: 'member' | 'group' | 'both';
name?: string;
}) {
return (
<Controller
control={control}
name={name}
render={({ field: { value: selected, onChange } }) => (
<SelectMember
mode={mode}
allMembers={
(() => {
switch (mode) {
case 'member':
return { member: allMembers.member, group: [] };
case 'group':
return { member: [], group: allMembers.group };
case 'both':
return { member: allMembers.member, group: allMembers.group };
}
})() as Required<typeof allMembers>
}
selected={(() => {
switch (mode) {
case 'member':
return { member: selected, group: [] };
case 'group':
return { member: [], group: selected };
case 'both':
return { member: selected.member, group: selected.group };
}
})()}
setSelected={
(({ member, group }: selectedType, _prevState: selectedType) => {
switch (mode) {
case 'member':
onChange(member);
return;
case 'group':
onChange(group);
return;
case 'both':
onChange({ member, group });
return;
}
}) as any // hack: we do not need to handle prevState
}
/>
)}
/>
);
}
export const UnControlledSelectMember = SelectMember;
export default ControllerWrapper;

150
projects/app/src/pages/account/team/components/context.tsx Normal file
View File

@@ -0,0 +1,150 @@
import React, { ReactNode, useState } from 'react';
import { createContext } from 'use-context-selector';
import type { EditTeamFormDataType } from './EditInfoModal';
import dynamic from 'next/dynamic';
import { getTeamList, putSwitchTeam } from '@/web/support/user/team/api';
import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
import { useUserStore } from '@/web/support/user/useUserStore';
import type { TeamTmbItemType, TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useTranslation } from 'next-i18next';
import { getGroupList } from '@/web/support/user/team/group/api';
import { MemberGroupListType } from '@fastgpt/global/support/permission/memberGroup/type';
const EditInfoModal = dynamic(() => import('./EditInfoModal'));
type TeamModalContextType = {
myTeams: TeamTmbItemType[];
members: TeamMemberItemType[];
groups: MemberGroupListType;
isLoading: boolean;
onSwitchTeam: (teamId: string) => void;
setEditTeamData: React.Dispatch<React.SetStateAction<EditTeamFormDataType | undefined>>;
refetchMembers: () => void;
refetchTeams: () => void;
refetchGroups: () => void;
searchKey: string;
setSearchKey: React.Dispatch<React.SetStateAction<string>>;
teamSize: number;
};
export const TeamContext = createContext<TeamModalContextType>({
myTeams: [],
groups: [],
members: [],
isLoading: false,
onSwitchTeam: function (_teamId: string): void {
throw new Error('Function not implemented.');
},
setEditTeamData: function (_value: React.SetStateAction<EditTeamFormDataType | undefined>): void {
throw new Error('Function not implemented.');
},
refetchTeams: function (): void {
throw new Error('Function not implemented.');
},
refetchMembers: function (): void {
throw new Error('Function not implemented.');
},
refetchGroups: function (): void {
throw new Error('Function not implemented.');
},
searchKey: '',
setSearchKey: function (_value: React.SetStateAction<string>): void {
throw new Error('Function not implemented.');
},
teamSize: 0
});
export const TeamModalContextProvider = ({ children }: { children: ReactNode }) => {
const { t } = useTranslation();
const [editTeamData, setEditTeamData] = useState<EditTeamFormDataType>();
const { userInfo, initUserInfo, loadAndGetTeamMembers } = useUserStore();
const [searchKey, setSearchKey] = useState('');
const {
data: myTeams = [],
loading: isLoadingTeams,
refresh: refetchTeams
} = useRequest2(() => getTeamList(TeamMemberStatusEnum.active), {
manual: false,
refreshDeps: [userInfo?._id]
});
// member action
const {
data: members = [],
runAsync: refetchMembers,
loading: loadingMembers
} = useRequest2(
() => {
if (!userInfo?.team?.teamId) return Promise.resolve([]);
return loadAndGetTeamMembers(true);
},
{
manual: false,
refreshDeps: [userInfo?.team?.teamId]
}
);
const { runAsync: onSwitchTeam, loading: isSwitchingTeam } = useRequest2(
async (teamId: string) => {
await putSwitchTeam(teamId);
return initUserInfo();
},
{
errorToast: t('common:user.team.Switch Team Failed')
}
);
const {
data: groups = [],
loading: isLoadingGroups,
refresh: refetchGroups
} = useRequest2(getGroupList, {
manual: false,
refreshDeps: [userInfo?.team?.teamId]
});
const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers || isLoadingGroups;
const contextValue = {
myTeams,
refetchTeams,
isLoading,
onSwitchTeam,
searchKey,
setSearchKey,
// create | update team
setEditTeamData,
members,
refetchMembers,
groups,
refetchGroups,
teamSize: members.length
};
return (
<TeamContext.Provider value={contextValue}>
{userInfo?.team?.permission && (
<>
{children}
{!!editTeamData && (
<EditInfoModal
defaultData={editTeamData}
onClose={() => setEditTeamData(undefined)}
onSuccess={() => {
refetchTeams();
initUserInfo();
}}
/>
)}
</>
)}
</TeamContext.Provider>
);
};
export default TeamModalContextProvider;

329
projects/app/src/pages/account/team/index.tsx Normal file
View File

@@ -0,0 +1,329 @@
import { serviceSideProps } from '@/web/common/utils/i18n';
import AccountContainer from '../components/AccountContainer';
import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
import Icon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import TeamSelector from '../components/TeamSelector';
import { useUserStore } from '@/web/support/user/useUserStore';
import React, { useState } from 'react';
import { useContextSelector } from 'use-context-selector';
import { useRouter } from 'next/router';
import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { delLeaveTeam } from '@/web/support/user/team/api';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
import { TeamContext, TeamModalContextProvider } from './components/context';
import dynamic from 'next/dynamic';
import TeamTagModal from '@/components/support/user/team/TeamTagModal';
import MemberTable from './components/MemberTable';
const InviteModal = dynamic(() => import('./components/InviteModal'));
const PermissionManage = dynamic(() => import('./components/PermissionManage/index'));
const GroupManage = dynamic(() => import('./components/GroupManage/index'));
const GroupInfoModal = dynamic(() => import('./components/GroupManage/GroupInfoModal'));
const ManageGroupMemberModal = dynamic(() => import('./components/GroupManage/GroupManageMember'));
export enum TeamTabEnum {
member = 'member',
group = 'group',
permission = 'permission'
}
const Team = () => {
const router = useRouter();
const { toast } = useToast();
const { t } = useTranslation();
const { userInfo, teamPlanStatus } = useUserStore();
const { feConfigs } = useSystemStore();
const {
myTeams,
refetchTeams,
members,
refetchMembers,
setEditTeamData,
onSwitchTeam,
searchKey,
setSearchKey,
teamSize,
isLoading
} = useContextSelector(TeamContext, (v) => v);
const { teamTab = TeamTabEnum.member } = router.query as { teamTab: `${TeamTabEnum}` };
const {
isOpen: isOpenTeamTagsAsync,
onOpen: onOpenTeamTagsAsync,
onClose: onCloseTeamTagsAsync
} = useDisclosure();
const { isOpen: isOpenInvite, onOpen: onOpenInvite, onClose: onCloseInvite } = useDisclosure();
const {
isOpen: isOpenGroupInfo,
onOpen: onOpenGroupInfo,
onClose: onCloseGroupInfo
} = useDisclosure();
const {
isOpen: isOpenManageGroupMember,
onOpen: onOpenManageGroupMember,
onClose: onCloseManageGroupMember
} = useDisclosure();
const { runAsync: onLeaveTeam, loading: isLoadingLeaveTeam } = useRequest2(
async (teamId?: string) => {
if (!teamId) return;
const defaultTeam = myTeams.find((item) => item.defaultTeam) || myTeams[0];
// change to personal team
// get members
onSwitchTeam(defaultTeam.teamId);
return delLeaveTeam(teamId);
},
{
onSuccess() {
refetchTeams();
},
errorToast: t('account_team:user_team_leave_team_failed')
}
);
const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
content: t('account_team:confirm_leave_team')
});
const [editGroupId, setEditGroupId] = useState<string>();
const onEditGroup = (groupId: string) => {
setEditGroupId(groupId);
onOpenGroupInfo();
};
const onManageMember = (groupId: string) => {
setEditGroupId(groupId);
onOpenManageGroupMember();
};
return (
<AccountContainer isLoading={isLoading}>
{/* header */}
<Flex
w={'100%'}
h={'3.5rem'}
px={'1.56rem'}
py={'0.56rem'}
borderBottom={'1px solid'}
borderColor={'myGray.200'}
bg={'myGray.25'}
align={'center'}
gap={6}
justify={'space-between'}
>
<Flex align={'center'}>
<Flex gap={2} color={'myGray.900'}>
<Icon name="support/user/usersLight" w={'1.25rem'} h={'1.25rem'} />
<Box fontWeight={'500'} fontSize={'1rem'}>
{t('account:team')}
</Box>
</Flex>
<Flex align={'center'} ml={6}>
<TeamSelector height={'28px'} />
</Flex>
{userInfo?.team.role === TeamMemberRoleEnum.owner && (
<Flex align={'center'} justify={'center'} ml={2} p={'0.44rem'}>
<MyIcon
name="edit"
w="18px"
cursor="pointer"
_hover={{
color: 'primary.500'
}}
onClick={() => {
if (!userInfo?.team) return;
setEditTeamData({
id: userInfo.team.teamId,
name: userInfo.team.teamName,
avatar: userInfo.team.avatar
});
}}
/>
</Flex>
)}
</Flex>
<Box
float={'right'}
color={'myGray.900'}
h={'1.25rem'}
px={'0.5rem'}
py={'0.125rem'}
fontSize={'0.75rem'}
borderRadius={'1.25rem'}
bg={'myGray.150'}
>
{t('account_team:total_team_members', { amount: teamSize })}
</Box>
</Flex>
{/* table */}
<Box py={'1.5rem'} px={'2rem'}>
<Flex justify={'space-between'} align={'center'} pb={'1rem'}>
<FillRowTabs
list={[
{ label: t('account_team:member'), value: TeamTabEnum.member },
{ label: t('account_team:group'), value: TeamTabEnum.group },
{ label: t('account_team:permission'), value: TeamTabEnum.permission }
]}
px={'1rem'}
value={teamTab}
onChange={(e) => {
router.replace({
query: {
...router.query,
teamTab: e
}
});
}}
/>
<Flex alignItems={'center'}>
{teamTab === TeamTabEnum.member &&
userInfo?.team.permission.hasManagePer &&
feConfigs?.show_team_chat && (
<Button
variant={'whitePrimary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name="core/dataset/tag" w={'16px'} />}
onClick={() => {
onOpenTeamTagsAsync();
}}
>
{t('account_team:label_sync')}
</Button>
)}
{teamTab === TeamTabEnum.member && userInfo?.team.permission.hasManagePer && (
<Button
variant={'primary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name="common/inviteLight" w={'16px'} color={'white'} />}
onClick={() => {
if (
teamPlanStatus?.standardConstants?.maxTeamMember &&
teamPlanStatus.standardConstants.maxTeamMember <= members.length
) {
toast({
status: 'warning',
title: t('user.team.Over Max Member Tip', {
max: teamPlanStatus.standardConstants.maxTeamMember
})
});
} else {
onOpenInvite();
}
}}
>
{t('account_team:user_team_invite_member')}
</Button>
)}
{teamTab === TeamTabEnum.member && !userInfo?.team.permission.isOwner && (
<Button
variant={'whitePrimary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name={'support/account/loginoutLight'} w={'14px'} />}
isLoading={isLoadingLeaveTeam}
onClick={() => {
openLeaveConfirm(() => onLeaveTeam(userInfo?.team?.teamId))();
}}
>
{t('account_team:user_team_leave_team')}
</Button>
)}
{teamTab === TeamTabEnum.group && userInfo?.team.permission.hasManagePer && (
<Button
variant={'primary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name="support/permission/collaborator" w={'14px'} />}
onClick={onOpenGroupInfo}
>
{t('user:team.group.create')}
</Button>
)}
{teamTab === TeamTabEnum.permission && (
<Box ml="auto">
<SearchInput
placeholder={t('user:team.group.search_placeholder')}
w="200px"
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
/>
</Box>
)}
</Flex>
</Flex>
<Box mt={3} flex={'1 0 0'} overflow={'auto'}>
{teamTab === TeamTabEnum.member && <MemberTable />}
{teamTab === TeamTabEnum.group && (
<GroupManage onEditGroup={onEditGroup} onManageMember={onManageMember} />
)}
{teamTab === TeamTabEnum.permission && <PermissionManage />}
</Box>
</Box>
{isOpenInvite && userInfo?.team?.teamId && (
<InviteModal
teamId={userInfo.team.teamId}
onClose={onCloseInvite}
onSuccess={refetchMembers}
/>
)}
{isOpenTeamTagsAsync && <TeamTagModal onClose={onCloseTeamTagsAsync} />}
{isOpenGroupInfo && (
<GroupInfoModal
onClose={() => {
onCloseGroupInfo();
setEditGroupId(undefined);
}}
editGroupId={editGroupId}
/>
)}
{isOpenManageGroupMember && (
<ManageGroupMemberModal
onClose={() => {
onCloseManageGroupMember();
setEditGroupId(undefined);
}}
editGroupId={editGroupId}
/>
)}
<ConfirmLeaveTeamModal />
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account', 'account_team', 'user']))
}
};
}
const Render = () => {
const { userInfo } = useUserStore();
return !!userInfo?.team ? (
<TeamModalContextProvider>
<Team />
</TeamModalContextProvider>
) : null;
};
export default React.memo(Render);

26
projects/app/src/pages/account/components/UsageDetail.tsx → projects/app/src/pages/account/usage/UsageDetail.tsx
View File

@@ -63,44 +63,44 @@ const UsageDetail = ({ usage, onClose }: { usage: UsageItemType; onClose: () =>
isOpen={true}
onClose={onClose}
iconSrc="/imgs/modal/bill.svg"
title={t('common:support.wallet.usage.Usage Detail')}
title={t('account_usage:usage_detail')}
maxW={['90vw', '700px']}
>
<ModalBody>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 80px'}>{t('common:support.wallet.bill.Number')}:</FormLabel>
<FormLabel flex={'0 0 80px'}>{t('account_usage:order_number')}:</FormLabel>
<Box>{usage.id}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 80px'}>{t('common:support.wallet.usage.Time')}:</FormLabel>
<FormLabel flex={'0 0 80px'}>{t('account_usage:generation_time')}:</FormLabel>
<Box>{dayjs(usage.time).format('YYYY/MM/DD HH:mm:ss')}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 80px'}>{t('common:support.wallet.usage.App name')}:</FormLabel>
<FormLabel flex={'0 0 80px'}>{t('account_usage:app_name')}:</FormLabel>
<Box>{t(usage.appName as any) || '-'}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 80px'}>{t('common:support.wallet.usage.Source')}:</FormLabel>
<FormLabel flex={'0 0 80px'}>{t('account_usage:source')}:</FormLabel>
<Box>{t(UsageSourceMap[usage.source]?.label as any)}</Box>
</Flex>
<Flex alignItems={'center'} pb={4}>
<FormLabel flex={'0 0 80px'}>{t('common:support.wallet.usage.Total points')}:</FormLabel>
<FormLabel flex={'0 0 80px'}>{t('account_usage:total_points_consumed')}:</FormLabel>
<Box fontWeight={'bold'}>{formatNumber(usage.totalPoints)}</Box>
</Flex>
<Box pb={4}>
<FormLabel flex={'0 0 80px'} mb={1}>
{t('common:support.wallet.usage.Bill Module')}
{t('account_usage:billing_module')}
</FormLabel>
<TableContainer fontSize={'sm'}>
<Table>
<Thead>
<Tr>
<Th>{t('common:support.wallet.usage.Module name')}</Th>
{hasModel && <Th>{t('common:support.wallet.usage.Ai model')}</Th>}
{hasToken && <Th>{t('common:support.wallet.usage.Token Length')}</Th>}
{hasCharsLen && <Th>{t('common:support.wallet.usage.Text Length')}</Th>}
{hasDuration && <Th>{t('common:support.wallet.usage.Duration')}</Th>}
<Th>{t('common:support.wallet.usage.Total points')}</Th>
<Th>{t('account_usage:module_name')}</Th>
{hasModel && <Th>{t('account_usage:ai_model')}</Th>}
{hasToken && <Th>{t('account_usage:token_length')}</Th>}
{hasCharsLen && <Th>{t('account_usage:text_length')}</Th>}
{hasDuration && <Th>{t('account_usage:duration_seconds')}</Th>}
<Th>{t('account_usage:total_points_consumed')}</Th>
</Tr>
</Thead>
<Tbody>

212
projects/app/src/pages/account/usage/index.tsx Normal file
View File

@@ -0,0 +1,212 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Flex,
Box,
Button
} from '@chakra-ui/react';
import { UsageSourceEnum, UsageSourceMap } from '@fastgpt/global/support/wallet/usage/constants';
import { getUserUsages } from '@/web/support/wallet/usage/api';
import type { UsageItemType } from '@fastgpt/global/support/wallet/usage/type';
import { usePagination } from '@fastgpt/web/hooks/usePagination';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import dayjs from 'dayjs';
import DateRangePicker, {
type DateRangeType
} from '@fastgpt/web/components/common/DateRangePicker';
import { addDays } from 'date-fns';
import dynamic from 'next/dynamic';
import { useTranslation } from 'next-i18next';
import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/web/support/user/useUserStore';
import Avatar from '@fastgpt/web/components/common/Avatar';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { formatNumber } from '@fastgpt/global/common/math/tools';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import AccountContainer, { TabEnum } from '../components/AccountContainer';
import { serviceSideProps } from '@/web/common/utils/i18n';
const UsageDetail = dynamic(() => import('./UsageDetail'));
const UsageTable = () => {
const { t } = useTranslation();
const { Loading } = useLoading();
const [dateRange, setDateRange] = useState<DateRangeType>({
from: addDays(new Date(), -7),
to: new Date()
});
const [usageSource, setUsageSource] = useState<UsageSourceEnum | ''>('');
const { isPc } = useSystem();
const { userInfo, loadAndGetTeamMembers } = useUserStore();
const [usageDetail, setUsageDetail] = useState<UsageItemType>();
const sourceList = useMemo(
() =>
[
{ label: t('account_usage:all'), value: '' },
...Object.entries(UsageSourceMap).map(([key, value]) => ({
label: t(value.label as any),
value: key
}))
] as {
label: never;
value: UsageSourceEnum | '';
}[],
[t]
);
const [selectTmbId, setSelectTmbId] = useState(userInfo?.team?.tmbId);
const { data: members = [] } = useQuery(['getMembers', userInfo?.team?.teamId], () => {
if (!userInfo?.team?.teamId) return [];
return loadAndGetTeamMembers();
});
const tmbList = useMemo(
() =>
members.map((item) => ({
label: (
<Flex alignItems={'center'}>
<Avatar src={item.avatar} w={'16px'} mr={1} />
{item.memberName}
</Flex>
),
value: item.tmbId
})),
[members]
);
const {
data: usages,
isLoading,
Pagination,
getData
} = usePagination<UsageItemType>({
api: getUserUsages,
pageSize: isPc ? 20 : 10,
params: {
dateStart: dateRange.from || new Date(),
dateEnd: addDays(dateRange.to || new Date(), 1),
source: usageSource,
teamMemberId: selectTmbId
},
defaultRequest: false
});
useEffect(() => {
getData(1);
}, [usageSource, selectTmbId]);
return (
<AccountContainer>
<Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<Flex
flexDir={['column', 'row']}
gap={2}
w={'100%'}
px={[3, 8]}
alignItems={['flex-end', 'center']}
>
{tmbList.length > 1 && userInfo?.team?.permission.hasManagePer && (
<Flex alignItems={'center'}>
<Box mr={2} flexShrink={0}>
{t('account_usage:member')}
</Box>
<MySelect
size={'sm'}
minW={'100px'}
list={tmbList}
value={selectTmbId}
onchange={setSelectTmbId}
/>
</Flex>
)}
<Box flex={'1'} />
<Flex alignItems={'center'} gap={3}>
<DateRangePicker
defaultDate={dateRange}
position="bottom"
onChange={setDateRange}
onSuccess={() => getData(1)}
/>
<Pagination />
</Flex>
</Flex>
<TableContainer
mt={2}
px={[3, 8]}
position={'relative'}
flex={'1 0 0'}
h={0}
overflowY={'auto'}
>
<Table>
<Thead>
<Tr>
{/* <Th>{t('account_usage:user.team.Member Name')}</Th> */}
<Th>{t('account_usage:user_type')}</Th>
<Th>
<MySelect<UsageSourceEnum | ''>
list={sourceList}
value={usageSource}
size={'sm'}
onchange={(e) => {
setUsageSource(e);
}}
w={'130px'}
></MySelect>
</Th>
<Th>{t('account_usage:project_name')}</Th>
<Th>{t('account_usage:total_points')}</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{usages.map((item) => (
<Tr key={item.id}>
{/* <Td>{item.memberName}</Td> */}
<Td>{dayjs(item.time).format('YYYY/MM/DD HH:mm:ss')}</Td>
<Td>{t(UsageSourceMap[item.source]?.label as any) || '-'}</Td>
<Td>{t(item.appName as any) || '-'}</Td>
<Td>{formatNumber(item.totalPoints) || 0}</Td>
<Td>
<Button
size={'sm'}
variant={'whitePrimary'}
onClick={() => setUsageDetail(item)}
>
{t('account_usage:details')}
</Button>
</Td>
</Tr>
))}
</Tbody>
</Table>
{!isLoading && usages.length === 0 && (
<EmptyTip text={t('account_usage:no_usage_records')}></EmptyTip>
)}
</TableContainer>
<Loading loading={isLoading} fixed={false} />
{!!usageDetail && (
<UsageDetail usage={usageDetail} onClose={() => setUsageDetail(undefined)} />
)}
</Flex>
</AccountContainer>
);
};
export async function getServerSideProps(content: any) {
return {
props: {
...(await serviceSideProps(content, ['account_usage', 'account']))
}
};
}
export default React.memo(UsageTable);