perf: workflow code (#2492)

* perf: workflow code

* perf: converpoints ui

* perf: account page ui

projects/app/src/pages/account/components/Info/standardDetailModal.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  ModalBody,
+  ModalFooter,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  ModalCloseButton
+} from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useTranslation } from 'next-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { useLoading } from '@fastgpt/web/hooks/useLoading';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { getTeamPlans } from '@/web/support/user/team/api';
+import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
+import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
+import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+
+const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation();
+  const { Loading } = useLoading();
+  const { subPlans } = useSystemStore();
+  const { data: teamPlans = [], isLoading } = useQuery(['getTeamPlans'], getTeamPlans);
+
+  return (
+    <MyModal
+      isOpen
+      maxW={['90vw', '1200px']}
+      iconSrc="modal/teamPlans"
+      title={t('common:support.wallet.Standard Plan Detail')}
+      isCentered
+    >
+      <ModalCloseButton onClick={onClose} />
+      <ModalBody>
+        <TableContainer mt={2} position={'relative'} minH={'300px'}>
+          <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('common:support.standard.Start Time')}</Th>
+                <Th>{t('common:support.standard.Expired Time')}</Th>
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {teamPlans.map(
+                ({
+                  _id,
+                  type,
+                  currentSubLevel,
+                  currentExtraDatasetSize,
+                  surplusPoints = 0,
+                  totalPoints = 0,
+                  startTime,
+                  expiredTime
+                }: TeamSubSchema) => {
+                  const standardPlan = currentSubLevel
+                    ? subPlans?.standard?.[currentSubLevel]
+                    : undefined;
+                  const datasetSize = standardPlan?.maxDatasetSize || currentExtraDatasetSize;
+
+                  return (
+                    <Tr key={_id}>
+                      <Td>
+                        <MyIcon
+                          mr={2}
+                          name={subTypeMap[type]?.icon as any}
+                          w={'20px'}
+                          color={'myGray.800'}
+                        />
+                        {t(subTypeMap[type]?.label as any)}
+                        {currentSubLevel &&
+                          `(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
+                      </Td>
+                      <Td>
+                        {datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'}
+                      </Td>
+                      <Td>
+                        {totalPoints
+                          ? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}`
+                          : '-'}
+                      </Td>
+                      <Td>{formatTime2YMDHM(startTime)}</Td>
+                      <Td>{formatTime2YMDHM(expiredTime)}</Td>
+                    </Tr>
+                  );
+                }
+              )}
+              <Tr key={'_id'}></Tr>
+            </Tbody>
+          </Table>
+          <Loading loading={isLoading} fixed={false} />
+        </TableContainer>
+      </ModalBody>
+      <ModalFooter></ModalFooter>
+    </MyModal>
+  );
+};
+
+export default StandDetailModal;