fix: accept image in edit page
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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(',');
|
||||||
|
|||||||
Reference in New Issue
Block a user