V4.6.9-first commit (#899)

* perf: insert mongo dataset data session

* perf: dataset data index

* remove delay

* rename bill schema

* rename bill record

* perf: bill table

* perf: prompt

* perf: sub plan

* change the usage count

* feat: usage bill

* publish usages

* doc

* 新增团队聊天功能 (#20)

* perf: doc

* feat 添加标签部分

feat 信息团队标签配置

feat 新增团队同步管理

feat team分享页面

feat 完成team分享页面

feat 实现模糊搜索

style 格式化

fix 修复迷糊匹配

style 样式修改

fix 团队标签功能修复

* fix 修复鉴权功能

* merge 合并代码

* fix 修复引用错误

* fix 修复pr问题

* fix 修复ts格式问题

---------

Co-authored-by: archer <545436317@qq.com>
Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>

* update extra plan

* fix: ts

* format

* perf: bill field

* feat: standard plan

* fix: ts

* feat 个人账号页面修改 (#22)

* feat 添加标签部分

feat 信息团队标签配置

feat 新增团队同步管理

feat team分享页面

feat 完成team分享页面

feat 实现模糊搜索

style 格式化

fix 修复迷糊匹配

style 样式修改

fix 团队标签功能修复

* fix 修复鉴权功能

* merge 合并代码

* fix 修复引用错误

* fix 修复pr问题

* fix 修复ts格式问题

* feat 修改个人账号页

---------

Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>

* sub plan page (#23)

* fix chunk index; error page text

* feat: dataset process Integral prediction

* feat: stand plan field

* feat: sub plan limit

* perf: index

* query extension

* perf: share link push app name

* perf: plan point unit

* perf: get sub plan

* perf: account page

* feat 新增套餐详情弹窗代码 (#24)

* merge 合并代码

* fix 新增套餐详情弹框

* fix 修复pr问题

* feat: change http node input to prompt editor (#21)

* feat: change http node input to prompt editor

* fix

* split PromptEditor to HttpInput

* Team plans (#25)

* perf: pay check

* perf: team plan test

* plan limit check

* replace sensitive text

* perf: fix some null

* collection null check

* perf: plans modal

* perf: http module

* pacakge (#26)

* individuation page and pay modal amount (#27)

* feat: individuation page

* team chat config

* pay modal

* plan count and replace invalid chars (#29)

* fix: user oneapi

* fix: training queue

* fix: qa queue

* perf: remove space chars

* replace invalid chars

* change httpinput dropdown menu (#28)

* perf: http

* reseet free plan

* perf: plan code to packages

* remove llm config to package

* perf: code

* perf: faq

* fix: get team plan

---------

Co-authored-by: yst <77910600+yu-and-liu@users.noreply.github.com>
Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>
Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

projects/app/src/pages/account/components/BillTable.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import {
+  Button,
   Table,
   Thead,
   Tbody,
@@ -9,43 +10,38 @@ import {
   TableContainer,
   Flex,
   Box,
-  Button
+  ModalBody
 } from '@chakra-ui/react';
-import { BillSourceEnum, BillSourceMap } from '@fastgpt/global/support/wallet/bill/constants';
-import { getUserBills } from '@/web/support/wallet/bill/api';
-import type { BillItemType } from '@fastgpt/global/support/wallet/bill/type';
-import { usePagination } from '@/web/common/hooks/usePagination';
-import { useLoading } from '@/web/common/hooks/useLoading';
+import { getBills, checkBalancePayResult } from '@/web/support/wallet/bill/api';
+import type { BillSchemaType } from '@fastgpt/global/support/wallet/bill/type.d';
 import dayjs from 'dayjs';
+import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
+import { useToast } from '@fastgpt/web/hooks/useToast';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import DateRangePicker, { type DateRangeType } from '@/components/DateRangePicker';
-import { addDays } from 'date-fns';
-import dynamic from 'next/dynamic';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useTranslation } from 'next-i18next';
 import MySelect from '@/components/Select';
-import { useQuery } from '@tanstack/react-query';
-import { useUserStore } from '@/web/support/user/useUserStore';
-import { getTeamMembers } from '@/web/support/user/team/api';
-import Avatar from '@/components/Avatar';
-const BillDetail = dynamic(() => import('./BillDetail'));
+import {
+  BillTypeEnum,
+  billPayWayMap,
+  billStatusMap,
+  billTypeMap
+} from '@fastgpt/global/support/wallet/bill/constants';
+import { usePagination } from '@/web/common/hooks/usePagination';
+import MyBox from '@/components/common/MyBox';
+import { useRequest } from '@/web/common/hooks/useRequest';
+import MyModal from '@/components/MyModal';
+import { standardSubLevelMap, subModeMap } from '@fastgpt/global/support/wallet/sub/constants';
 
 const BillTable = () => {
   const { t } = useTranslation();
-  const { Loading } = useLoading();
-  const [dateRange, setDateRange] = useState<DateRangeType>({
-    from: addDays(new Date(), -7),
-    to: new Date()
-  });
-  const [billSource, setBillSource] = useState<`${BillSourceEnum}` | ''>('');
-  const { isPc } = useSystemStore();
-  const { userInfo } = useUserStore();
-  const [billDetail, setBillDetail] = useState<BillItemType>();
+  const { toast } = useToast();
+  const [billType, setBillType] = useState<`${BillTypeEnum}` | ''>('');
+  const [billDetail, setBillDetail] = useState<BillSchemaType>();
 
-  const sourceList = useMemo(
+  const billTypeList = useMemo(
     () => [
       { label: t('common.All'), value: '' },
-      ...Object.entries(BillSourceMap).map(([key, value]) => ({
+      ...Object.entries(billTypeMap).map(([key, value]) => ({
         label: t(value.label),
         value: key
       }))
@@ -53,134 +49,199 @@ const BillTable = () => {
     [t]
   );
 
-  const [selectTmbId, setSelectTmbId] = useState(userInfo?.team?.tmbId);
-  const { data: members = [] } = useQuery(['getMembers', userInfo?.team?.teamId], () => {
-    if (!userInfo?.team?.teamId) return [];
-    return getTeamMembers(userInfo.team.teamId);
-  });
-  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: bills,
     isLoading,
     Pagination,
-    getData
-  } = usePagination<BillItemType>({
-    api: getUserBills,
-    pageSize: isPc ? 20 : 10,
+    getData,
+    total
+  } = usePagination<BillSchemaType>({
+    api: getBills,
+    pageSize: 20,
     params: {
-      dateStart: dateRange.from || new Date(),
-      dateEnd: addDays(dateRange.to || new Date(), 1),
-      source: billSource,
-      teamMemberId: selectTmbId
+      type: billType
     },
     defaultRequest: false
   });
 
+  const { mutate: handleRefreshPayOrder, isLoading: isRefreshing } = useRequest({
+    mutationFn: async (payId: string) => {
+      try {
+        const data = await checkBalancePayResult(payId);
+        toast({
+          title: data,
+          status: 'success'
+        });
+      } catch (error: any) {
+        toast({
+          title: error?.message,
+          status: 'warning'
+        });
+        console.log(error);
+      }
+      try {
+        getData(1);
+      } catch (error) {}
+    }
+  });
+
   useEffect(() => {
     getData(1);
-  }, [billSource, selectTmbId]);
+  }, [billType]);
 
   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?.canWrite && (
-          <Flex alignItems={'center'}>
-            <Box mr={2} flexShrink={0}>
-              {t('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 px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
+    <MyBox
+      isLoading={isLoading || isRefreshing}
+      position={'relative'}
+      h={'100%'}
+      overflow={'overlay'}
+      py={[0, 5]}
+      px={[3, 8]}
+    >
+      <TableContainer>
         <Table>
           <Thead>
             <Tr>
-              {/* <Th>{t('user.team.Member Name')}</Th> */}
-              <Th>{t('user.Time')}</Th>
+              <Th>#</Th>
               <Th>
                 <MySelect
-                  list={sourceList}
-                  value={billSource}
+                  list={billTypeList}
+                  value={billType}
                   size={'sm'}
                   onchange={(e) => {
-                    setBillSource(e);
+                    setBillType(e);
                   }}
                   w={'130px'}
                 ></MySelect>
               </Th>
-              <Th>{t('user.Application Name')}</Th>
-              <Th>{t('user.Total Amount')}</Th>
+              <Th>{t('user.Time')}</Th>
+              <Th>{t('support.wallet.Amount')}</Th>
+              <Th>{t('support.wallet.bill.Status')}</Th>
               <Th></Th>
             </Tr>
           </Thead>
           <Tbody fontSize={'sm'}>
-            {bills.map((item) => (
-              <Tr key={item.id}>
-                {/* <Td>{item.memberName}</Td> */}
-                <Td>{dayjs(item.time).format('YYYY/MM/DD HH:mm:ss')}</Td>
-                <Td>{t(BillSourceMap[item.source]?.label)}</Td>
-                <Td>{t(item.appName) || '-'}</Td>
-                <Td>{item.total}元</Td>
+            {bills.map((item, i) => (
+              <Tr key={item._id}>
+                <Td>{i + 1}</Td>
+                <Td>{t(billTypeMap[item.type]?.label)}</Td>
                 <Td>
-                  <Button size={'sm'} variant={'whitePrimary'} onClick={() => setBillDetail(item)}>
-                    详情
+                  {item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
+                </Td>
+                <Td>{formatStorePrice2Read(item.price)}元</Td>
+                <Td>{t(billStatusMap[item.status]?.label)}</Td>
+                <Td>
+                  {item.status === 'NOTPAY' && (
+                    <Button mr={4} onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
+                      {t('common.Update')}
+                    </Button>
+                  )}
+                  <Button variant={'whiteBase'} size={'sm'} onClick={() => setBillDetail(item)}>
+                    {t('common.Detail')}
                   </Button>
                 </Td>
               </Tr>
             ))}
           </Tbody>
         </Table>
+        {total >= 20 && (
+          <Flex mt={3} justifyContent={'flex-end'}>
+            <Pagination />
+          </Flex>
+        )}
+        {!isLoading && bills.length === 0 && (
+          <Flex
+            mt={'20vh'}
+            flexDirection={'column'}
+            alignItems={'center'}
+            justifyContent={'center'}
+          >
+            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
+            <Box mt={2} color={'myGray.500'}>
+              {t('support.wallet.noBill')}
+            </Box>
+          </Flex>
+        )}
       </TableContainer>
 
-      {!isLoading && bills.length === 0 && (
-        <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'}>
-          <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-          <Box mt={2} color={'myGray.500'}>
-            无使用记录~
-          </Box>
-        </Flex>
+      {!!billDetail && (
+        <BillDetailModal bill={billDetail} onClose={() => setBillDetail(undefined)} />
       )}
-
-      <Loading loading={isLoading} fixed={false} />
-      {!!billDetail && <BillDetail bill={billDetail} onClose={() => setBillDetail(undefined)} />}
-    </Flex>
+    </MyBox>
   );
 };
 
-export default React.memo(BillTable);
+export default BillTable;
+
+function BillDetailModal({ bill, onClose }: { bill: BillSchemaType; onClose: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      iconSrc="/imgs/modal/bill.svg"
+      title={t('support.wallet.usage.Usage Detail')}
+      maxW={['90vw', '700px']}
+    >
+      <ModalBody>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Number')}:</Box>
+          <Box>{bill.orderId}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 120px'}>{t('support.wallet.usage.Time')}:</Box>
+          <Box>{dayjs(bill.createTime).format('YYYY/MM/DD HH:mm:ss')}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Status')}:</Box>
+          <Box>{t(billStatusMap[bill.status]?.label)}</Box>
+        </Flex>
+        {!!bill.metadata?.payWay && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.bill.payWay.Way')}:</Box>
+            <Box>{t(billPayWayMap[bill.metadata.payWay]?.label)}</Box>
+          </Flex>
+        )}
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 120px'}>{t('support.wallet.Amount')}:</Box>
+          <Box>{formatStorePrice2Read(bill.price)}元</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 120px'}>{t('support.wallet.bill.Type')}:</Box>
+          <Box>{t(billTypeMap[bill.type]?.label)}</Box>
+        </Flex>
+        {!!bill.metadata?.subMode && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.mode.Period')}:</Box>
+            <Box>{t(subModeMap[bill.metadata.subMode]?.label)}</Box>
+          </Flex>
+        )}
+        {!!bill.metadata?.standSubLevel && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Stand plan level')}:</Box>
+            <Box>{t(standardSubLevelMap[bill.metadata.standSubLevel]?.label)}</Box>
+          </Flex>
+        )}
+        {bill.metadata?.month !== undefined && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Month amount')}:</Box>
+            <Box>{bill.metadata?.month}</Box>
+          </Flex>
+        )}
+        {bill.metadata?.datasetSize !== undefined && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra dataset size')}:</Box>
+            <Box>{bill.metadata?.datasetSize}</Box>
+          </Flex>
+        )}
+        {bill.metadata?.extraPoints !== undefined && (
+          <Flex alignItems={'center'} pb={4}>
+            <Box flex={'0 0 120px'}>{t('support.wallet.subscription.Extra ai points')}:</Box>
+            <Box>{bill.metadata.extraPoints}</Box>
+          </Flex>
+        )}
+      </ModalBody>
+    </MyModal>
+  );
+}