perf: usages list；perf: move components (#3654)

* perf: usages list

* team sub plan load

* perf: usage dashboard code

* perf: dashboard ui

* perf: move components

projects/app/src/web/common/hooks/useCopyData.tsx

@@ -1,64 +0,0 @@
-import { useTranslation } from 'next-i18next';
-import { useToast } from '@fastgpt/web/hooks/useToast';
-import { useCallback } from 'react';
-import { hasHttps } from '@fastgpt/web/common/system/utils';
-import { isProduction } from '@fastgpt/global/common/system/constants';
-
-/**
- * copy text data
- */
-export const useCopyData = () => {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-
-  const copyData = useCallback(
-    async (
-      data: string,
-      title: string | null = t('common:common.Copy Successful'),
-      duration = 1000
-    ) => {
-      data = data.trim();
-
-      try {
-        if ((hasHttps() || !isProduction) && navigator.clipboard) {
-          await navigator.clipboard.writeText(data);
-        } else {
-          throw new Error('');
-        }
-      } catch (error) {
-        // console.log(error);
-
-        const textarea = document.createElement('textarea');
-        textarea.value = data;
-        textarea.style.position = 'absolute';
-        textarea.style.opacity = '0';
-        document.body.appendChild(textarea);
-
-        textarea.select();
-        const res = document.execCommand('copy');
-        document.body.removeChild(textarea);
-
-        if (!res) {
-          return toast({
-            title: t('common:common.Copy_failed'),
-            status: 'error',
-            duration
-          });
-        }
-      }
-
-      if (title) {
-        toast({
-          title,
-          status: 'success',
-          duration
-        });
-      }
-    },
-    [t, toast]
-  );
-
-  return {
-    copyData
-  };
-};

projects/app/src/web/common/system/utils.ts

@@ -1,12 +1,44 @@
 import { useSystemStore } from './useSystemStore';
 
-export const downloadFetch = async ({ url, filename }: { url: string; filename: string }) => {
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
+export const downloadFetch = async ({
+  url,
+  filename,
+  body
+}: {
+  url: string;
+  filename: string;
+  body?: Record<string, any>;
+}) => {
+  if (body) {
+    // fetch data with POST method if body exists
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body)
+    });
+
+    const blob = await response.blob();
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = downloadUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    // clean up the blob URL
+    window.URL.revokeObjectURL(downloadUrl);
+  } else {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
 };
 
 export const getWebLLMModel = (model?: string) => {

projects/app/src/web/support/wallet/usage/api.ts

@@ -1,7 +1,8 @@
 import { POST } from '@/web/common/api/request';
 import {
   CreateTrainingUsageProps,
-  GetTotalPointsProps,
+  GetUsageDashboardProps,
+  GetUsageDashboardResponseItem,
   GetUsageProps
 } from '@fastgpt/global/support/wallet/usage/api.d';
 import type { UsageItemType } from '@fastgpt/global/support/wallet/usage/type';
@@ -10,11 +11,8 @@ import { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/t
 export const getUserUsages = (data: PaginationProps<GetUsageProps>) =>
   POST<PaginationResponse<UsageItemType>>(`/proApi/support/wallet/usage/getUsage`, data);
 
-export const getTotalPoints = (data: GetTotalPointsProps) =>
-  POST<{ totalPoints: number; date: string }[]>(
-    `/proApi/support/wallet/usage/getTotalPoints`,
-    data
-  );
+export const getDashboardData = (data: GetUsageDashboardProps) =>
+  POST<GetUsageDashboardResponseItem[]>(`/proApi/support/wallet/usage/getDashboardData`, data);
 
 export const postCreateTrainingUsage = (data: CreateTrainingUsageProps) =>
   POST<string>(`/support/wallet/usage/createTrainingUsage`, data);