V4.8.15 feature (#3331)

* 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>
2024-12-06 10:56:53 +08:00
parent b188544386
commit 1aebe5f185
307 changed files with 7383 additions and 3981 deletions
--- a/projects/app/src/pages/account/usage/UsageDetail.tsx
+++ b/projects/app/src/pages/account/usage/UsageDetail.tsx
@@ -0,0 +1,126 @@
+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 '@fastgpt/web/components/common/MyModal';
+import { useTranslation } from 'next-i18next';
+import { formatNumber } from '@fastgpt/global/common/math/tools';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+
+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, hasToken, hasCharsLen, hasDuration } = useMemo(() => {
+    let hasModel = false;
+    let hasToken = false;
+    let hasCharsLen = false;
+    let hasDuration = false;
+    let hasDataLen = false;
+
+    usage.list.forEach((item) => {
+      if (item.model !== undefined) {
+        hasModel = true;
+      }
+
+      if (typeof item.tokens === 'number') {
+        hasToken = true;
+      }
+      if (typeof item.charsLength === 'number') {
+        hasCharsLen = true;
+      }
+      if (typeof item.duration === 'number') {
+        hasDuration = true;
+      }
+    });
+
+    return {
+      hasModel,
+      hasToken,
+      hasCharsLen,
+      hasDuration,
+      hasDataLen
+    };
+  }, [usage.list]);
+
+  return (
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      iconSrc="/imgs/modal/bill.svg"
+      title={t('account_usage:usage_detail')}
+      maxW={['90vw', '700px']}
+    >
+      <ModalBody>
+        <Flex alignItems={'center'} pb={4}>
+          <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('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('account_usage:app_name')}:</FormLabel>
+          <Box>{t(usage.appName as any) || '-'}</Box>
+        </Flex>
+        <Flex alignItems={'center'} pb={4}>
+          <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('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('account_usage:billing_module')}
+          </FormLabel>
+          <TableContainer fontSize={'sm'}>
+            <Table>
+              <Thead>
+                <Tr>
+                  <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>
+                {filterBillList.map((item, i) => (
+                  <Tr key={i}>
+                    <Td>{t(item.moduleName as any)}</Td>
+                    {hasModel && <Td>{item.model ?? '-'}</Td>}
+                    {hasToken && <Td>{item.tokens ?? '-'}</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;