fix: accept image in edit page

This commit is contained in:
jialin
2025-04-23 15:51:48 +08:00
parent 9bb7a125e3
commit a46286872d
6 changed files with 54 additions and 25 deletions
+5 -2
View File
@@ -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
+4 -2
View File
@@ -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
@@ -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) => {
@@ -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;
@@ -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}
+4
View File
@@ -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(',');