From a46286872d824353b1ad63e6fb239e915d2305b1 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 23 Apr 2025 15:51:05 +0800
Subject: [PATCH] fix: accept image in edit page

---
 src/components/image-editor/index.tsx         |  7 ++-
 src/components/image-editor/tools-bar.tsx     |  6 ++-
 .../usage-inner/request-token-inner.tsx       |  4 +-
 .../components/usage-inner/use-usage-data.ts  | 53 ++++++++++++-------
 .../playground/components/image-edit.tsx      |  5 +-
 src/pages/playground/config/index.ts          |  4 ++
 6 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx
index 7e1138cf..b66f1b1c 100644
--- a/src/components/image-editor/index.tsx
+++ b/src/components/image-editor/index.tsx
@@ -53,6 +53,7 @@ type CanvasImageEditorProps = {
   handleUpdateImageList: (fileList: any[]) => void;
   handleUpdateMaskList: (fileList: any[]) => void;
   uploadButton?: React.ReactNode;
+  accept?: string;
   imageStatus: {
     isOriginal: boolean;
     isResetNeeded: boolean;
@@ -70,11 +71,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       imageSrc,
       disabled: isDisabled,
       imageStatus,
+      maskUpload,
+      accept,
       onSave,
       onScaleImageSize,
       handleUpdateImageList,
-      handleUpdateMaskList,
-      maskUpload
+      handleUpdateMaskList
     },
     ref
   ) => {
@@ -544,6 +546,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
             lineWidth={lineWidth}
             invertMask={invertMask}
             loading={loading}
+            accept={accept}
           ></ToolsBar>
 
           <ImageActionsBar
diff --git a/src/components/image-editor/tools-bar.tsx b/src/components/image-editor/tools-bar.tsx
index 98a5af19..8f364162 100644
--- a/src/components/image-editor/tools-bar.tsx
+++ b/src/components/image-editor/tools-bar.tsx
@@ -19,6 +19,7 @@ interface ToolsBarProps {
   lineWidth: number;
   uploadButton?: React.ReactNode;
   invertMask?: boolean;
+  accept?: string;
   handleBrushSizeChange: (value: number) => void;
   undo: () => void;
   onClear: () => void;
@@ -33,6 +34,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
     loading,
     lineWidth,
     invertMask,
+    accept,
     handleBrushSizeChange,
     undo,
     onClear,
@@ -97,7 +99,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
         disabled={loading || invertMask}
         handleUpdateImgList={handleUpdateImageList}
         size="middle"
-        accept="image/*"
+        accept={accept}
       ></UploadImg>
       <UploadImg
         title={intl.formatMessage({
@@ -107,7 +109,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
         disabled={loading || invertMask}
         handleUpdateImgList={handleUpdateMaskList}
         size="middle"
-        accept="image/*"
+        accept={accept}
       ></UploadImg>
       <Tooltip title={intl.formatMessage({ id: 'playground.image.fitview' })}>
         <Button
diff --git a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
index 3d1f065e..9a233617 100644
--- a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+++ b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx
@@ -13,7 +13,9 @@ interface RequestTokenInnerProps {
     areaStyle: any;
     data: { time: string; value: number }[];
   }[];
-  tokenData: { time: string; value: number }[];
+  tokenData: {
+    data: { time: string; value: number }[];
+  }[];
   xAxisData: string[];
 }
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
diff --git a/src/pages/dashboard/components/usage-inner/use-usage-data.ts b/src/pages/dashboard/components/usage-inner/use-usage-data.ts
index 8afea955..b1d64859 100644
--- a/src/pages/dashboard/components/usage-inner/use-usage-data.ts
+++ b/src/pages/dashboard/components/usage-inner/use-usage-data.ts
@@ -11,6 +11,24 @@ const baseColorMap = {
   baseR3: 'rgba(85,167,255,0.8)'
 };
 
+interface RequestTokenData {
+  requestData: {
+    name: string;
+    color: string;
+    areaStyle: any;
+    data: { time: string; value: number }[];
+  }[];
+  tokenData: {
+    data: { time: string; value: number }[];
+  }[];
+  xAxisData: string[];
+}
+
+interface TopUserData {
+  userData: { name: string; value: number }[];
+  topUserList: string[];
+}
+
 const getCurrentMonthDays = () => {
   const now = dayjs();
   const daysInMonth = now.daysInMonth();
@@ -46,11 +64,11 @@ const getAdjustedDateRange = (startDate: number, endDate: number): string[] => {
   let preDays = Math.ceil(diffDays / 2);
   let postDays = Math.floor(diffDays / 2);
 
-  // if the difference is less than 30 days, adjust the start and end dates
+  // if the difference is more than 30 days, adjust the start and end dates
   if (diff >= targetRange) {
     return Array.from({ length: targetRange }, (_, i) =>
-      start.add(i, 'day').format('YYYY-MM-DD')
-    );
+      end.subtract(i, 'day').format('YYYY-MM-DD')
+    ).reverse();
   }
 
   const adjustedStart = start.subtract(preDays, 'day');
@@ -64,6 +82,8 @@ const getAdjustedDateRange = (startDate: number, endDate: number): string[] => {
     dateRange.push(adjustedStart.add(i, 'day').format('YYYY-MM-DD'));
   }
 
+  console.log('dateRange', dateRange, diff);
+
   return dateRange;
 };
 
@@ -74,25 +94,16 @@ const findByDate = (list: any[], date: string) => {
 };
 
 export default function useUseageData(data: any) {
-  const usageData = useMemo(() => {
-    let topUserData: {
-      userData: { name: string; value: number }[];
-      topUserList: string[];
-    } = {
+  const usageData = useMemo<{
+    requestTokenData: RequestTokenData;
+    topUserData: TopUserData;
+  }>(() => {
+    let topUserData: TopUserData = {
       userData: [],
       topUserList: []
     };
 
-    let requestTokenData: {
-      requestData: {
-        name: string;
-        color: string;
-        areaStyle: any;
-        data: { time: string; value: number }[];
-      }[];
-      tokenData: { time: string; value: number }[];
-      xAxisData: string[];
-    } = {
+    let requestTokenData: RequestTokenData = {
       requestData: [],
       tokenData: [],
       xAxisData: []
@@ -109,6 +120,12 @@ export default function useUseageData(data: any) {
       startDate * 1000,
       endDate * 1000
     );
+
+    const completionTokenHistory = data.completion_token_history || [];
+    const promptTokenHistory = data.prompt_token_history || [];
+    const apiRequestHistory = data.api_request_history || [];
+    const topUsers = data.top_users || [];
+
     const requestList: {
       name: string;
       color: string;
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index 1e33e399..de5dbedf 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/components/image-edit.tsx
@@ -23,7 +23,7 @@ import React, {
   useState
 } from 'react';
 import { EDIT_IMAGE_API } from '../apis';
-import { scaleImageSize } from '../config';
+import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
 import '../style/ground-left.less';
@@ -323,13 +323,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           handleUpdateImageList={handleUpdateImageList}
           handleUpdateMaskList={handleUpdateMaskList}
           maskUpload={maskUpload}
+          accept={EDIT_IMAGE_ACCEPT}
         ></CanvasImageEditor>
       );
     }
     return (
       <>
         <UploadImg
-          accept="image/*"
+          accept={EDIT_IMAGE_ACCEPT}
           drag={true}
           multiple={false}
           handleUpdateImgList={handleUpdateImageList}
diff --git a/src/pages/playground/config/index.ts b/src/pages/playground/config/index.ts
index 27a57bb4..64c49697 100644
--- a/src/pages/playground/config/index.ts
+++ b/src/pages/playground/config/index.ts
@@ -191,3 +191,7 @@ export const scaleImageSize = (size: { width: number; height: number }) => {
   const newHeight = Math.floor(height / scale) * scale;
   return { width: newWidth, height: newHeight };
 };
+
+// png, jpg, jpeg
+const acceptImageType = ['image/png', 'image/jpg', 'image/jpeg'];
+export const EDIT_IMAGE_ACCEPT = acceptImageType.join(',');