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; handleUpdateImageList: (fileList: any[]) => void;
handleUpdateMaskList: (fileList: any[]) => void; handleUpdateMaskList: (fileList: any[]) => void;
uploadButton?: React.ReactNode; uploadButton?: React.ReactNode;
accept?: string;
imageStatus: { imageStatus: {
isOriginal: boolean; isOriginal: boolean;
isResetNeeded: boolean; isResetNeeded: boolean;
@@ -70,11 +71,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
imageSrc, imageSrc,
disabled: isDisabled, disabled: isDisabled,
imageStatus, imageStatus,
maskUpload,
accept,
onSave, onSave,
onScaleImageSize, onScaleImageSize,
handleUpdateImageList, handleUpdateImageList,
handleUpdateMaskList, handleUpdateMaskList
maskUpload
}, },
ref ref
) => { ) => {
@@ -544,6 +546,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
lineWidth={lineWidth} lineWidth={lineWidth}
invertMask={invertMask} invertMask={invertMask}
loading={loading} loading={loading}
accept={accept}
></ToolsBar> ></ToolsBar>
<ImageActionsBar <ImageActionsBar
+4 -2
View File
@@ -19,6 +19,7 @@ interface ToolsBarProps {
lineWidth: number; lineWidth: number;
uploadButton?: React.ReactNode; uploadButton?: React.ReactNode;
invertMask?: boolean; invertMask?: boolean;
accept?: string;
handleBrushSizeChange: (value: number) => void; handleBrushSizeChange: (value: number) => void;
undo: () => void; undo: () => void;
onClear: () => void; onClear: () => void;
@@ -33,6 +34,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
loading, loading,
lineWidth, lineWidth,
invertMask, invertMask,
accept,
handleBrushSizeChange, handleBrushSizeChange,
undo, undo,
onClear, onClear,
@@ -97,7 +99,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
disabled={loading || invertMask} disabled={loading || invertMask}
handleUpdateImgList={handleUpdateImageList} handleUpdateImgList={handleUpdateImageList}
size="middle" size="middle"
accept="image/*" accept={accept}
></UploadImg> ></UploadImg>
<UploadImg <UploadImg
title={intl.formatMessage({ title={intl.formatMessage({
@@ -107,7 +109,7 @@ const ToolsBar: React.FC<ToolsBarProps> = (props) => {
disabled={loading || invertMask} disabled={loading || invertMask}
handleUpdateImgList={handleUpdateMaskList} handleUpdateImgList={handleUpdateMaskList}
size="middle" size="middle"
accept="image/*" accept={accept}
></UploadImg> ></UploadImg>
<Tooltip title={intl.formatMessage({ id: 'playground.image.fitview' })}> <Tooltip title={intl.formatMessage({ id: 'playground.image.fitview' })}>
<Button <Button
@@ -13,7 +13,9 @@ interface RequestTokenInnerProps {
areaStyle: any; areaStyle: any;
data: { time: string; value: number }[]; data: { time: string; value: number }[];
}[]; }[];
tokenData: { time: string; value: number }[]; tokenData: {
data: { time: string; value: number }[];
}[];
xAxisData: string[]; xAxisData: string[];
} }
const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => { const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
@@ -11,6 +11,24 @@ const baseColorMap = {
baseR3: 'rgba(85,167,255,0.8)' 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 getCurrentMonthDays = () => {
const now = dayjs(); const now = dayjs();
const daysInMonth = now.daysInMonth(); const daysInMonth = now.daysInMonth();
@@ -46,11 +64,11 @@ const getAdjustedDateRange = (startDate: number, endDate: number): string[] => {
let preDays = Math.ceil(diffDays / 2); let preDays = Math.ceil(diffDays / 2);
let postDays = Math.floor(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) { if (diff >= targetRange) {
return Array.from({ length: targetRange }, (_, i) => 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'); 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')); dateRange.push(adjustedStart.add(i, 'day').format('YYYY-MM-DD'));
} }
console.log('dateRange', dateRange, diff);
return dateRange; return dateRange;
}; };
@@ -74,25 +94,16 @@ const findByDate = (list: any[], date: string) => {
}; };
export default function useUseageData(data: any) { export default function useUseageData(data: any) {
const usageData = useMemo(() => { const usageData = useMemo<{
let topUserData: { requestTokenData: RequestTokenData;
userData: { name: string; value: number }[]; topUserData: TopUserData;
topUserList: string[]; }>(() => {
} = { let topUserData: TopUserData = {
userData: [], userData: [],
topUserList: [] topUserList: []
}; };
let requestTokenData: { let requestTokenData: RequestTokenData = {
requestData: {
name: string;
color: string;
areaStyle: any;
data: { time: string; value: number }[];
}[];
tokenData: { time: string; value: number }[];
xAxisData: string[];
} = {
requestData: [], requestData: [],
tokenData: [], tokenData: [],
xAxisData: [] xAxisData: []
@@ -109,6 +120,12 @@ export default function useUseageData(data: any) {
startDate * 1000, startDate * 1000,
endDate * 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: { const requestList: {
name: string; name: string;
color: string; color: string;
@@ -23,7 +23,7 @@ import React, {
useState useState
} from 'react'; } from 'react';
import { EDIT_IMAGE_API } from '../apis'; 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 { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image'; import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less'; import '../style/ground-left.less';
@@ -323,13 +323,14 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
handleUpdateImageList={handleUpdateImageList} handleUpdateImageList={handleUpdateImageList}
handleUpdateMaskList={handleUpdateMaskList} handleUpdateMaskList={handleUpdateMaskList}
maskUpload={maskUpload} maskUpload={maskUpload}
accept={EDIT_IMAGE_ACCEPT}
></CanvasImageEditor> ></CanvasImageEditor>
); );
} }
return ( return (
<> <>
<UploadImg <UploadImg
accept="image/*" accept={EDIT_IMAGE_ACCEPT}
drag={true} drag={true}
multiple={false} multiple={false}
handleUpdateImgList={handleUpdateImageList} handleUpdateImgList={handleUpdateImageList}
+4
View File
@@ -191,3 +191,7 @@ export const scaleImageSize = (size: { width: number; height: number }) => {
const newHeight = Math.floor(height / scale) * scale; const newHeight = Math.floor(height / scale) * scale;
return { width: newWidth, height: newHeight }; return { width: newWidth, height: newHeight };
}; };
// png, jpg, jpeg
const acceptImageType = ['image/png', 'image/jpg', 'image/jpeg'];
export const EDIT_IMAGE_ACCEPT = acceptImageType.join(',');