sub plan page (#885)

* 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>

* 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

---------

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

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

@@ -0,0 +1,119 @@
+import React, { useMemo } from 'react';
+import {
+  ModalBody,
+  Flex,
+  Box,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer
+} from '@chakra-ui/react';
+import { UsageItemType } from '@fastgpt/global/support/wallet/usage/type.d';
+import dayjs from 'dayjs';
+import { UsageSourceMap } from '@fastgpt/global/support/wallet/usage/constants';
+import MyModal from '@/components/MyModal';
+import { useTranslation } from 'next-i18next';
+import { formatNumber } from '@fastgpt/global/common/math/tools';
+
+const UsageDetail = ({ usage, onClose }: { usage: UsageItemType; onClose: () => void }) => {
+  const { t } = useTranslation();
+  const filterBillList = useMemo(
+    () => usage.list.filter((item) => item && item.moduleName),
+    [usage.list]
+  );
+
+  const { hasModel, hasCharsLen, hasDuration } = useMemo(() => {
+    let hasModel = false;
+    let hasCharsLen = false;
+    let hasDuration = false;
+    let hasDataLen = false;
+
+    usage.list.forEach((item) => {
+      if (item.model !== undefined) {
+        hasModel = true;
+      }
+
+      if (typeof item.charsLength === 'number') {
+        hasCharsLen = true;
+      }
+      if (typeof item.duration === 'number') {
+        hasDuration = true;
+      }
+    });
+
+    return {
+      hasModel,
+      hasCharsLen,
+      hasDuration,
+      hasDataLen
+    };
+  }, [usage.list]);
+
+  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 80px'}>{t('support.wallet.bill.Number')}:</Box>
+          <Box>{usage.id}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Time')}:</Box>
+          <Box>{dayjs(usage.time).format('YYYY/MM/DD HH:mm:ss')}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 80px'}>{t('support.wallet.usage.App name')}:</Box>
+          <Box>{t(usage.appName) || '-'}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Source')}:</Box>
+          <Box>{t(UsageSourceMap[usage.source]?.label)}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <Box flex={'0 0 80px'}>{t('support.wallet.usage.Total points')}:</Box>
+          <Box fontWeight={'bold'}>{formatNumber(usage.totalPoints)}</Box>
+        </Flex>
+        <Box pb={4}>
+          <Box flex={'0 0 80px'} mb={1}>
+            {t('support.wallet.usage.Bill Module')}
+          </Box>
+          <TableContainer>
+            <Table>
+              <Thead>
+                <Tr>
+                  <Th>{t('support.wallet.usage.Module name')}</Th>
+                  {hasModel && <Th>{t('support.wallet.usage.Ai model')}</Th>}
+                  {hasCharsLen && <Th>{t('support.wallet.usage.Text Length')}</Th>}
+                  {hasDuration && <Th>{t('support.wallet.usage.Duration')}</Th>}
+
+                  <Th>{t('support.wallet.usage.Total points')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {filterBillList.map((item, i) => (
+                  <Tr key={i}>
+                    <Td>{t(item.moduleName)}</Td>
+                    {hasModel && <Td>{item.model ?? '-'}</Td>}
+                    {hasCharsLen && <Td>{item.charsLength ?? '-'}</Td>}
+                    {hasDuration && <Td>{item.duration ?? '-'}</Td>}
+                    <Td>{formatNumber(item.amount)}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </Box>
+      </ModalBody>
+    </MyModal>
+  );
+};
+
+export default UsageDetail;