diff --git a/overrides.less b/overrides.less index e3e5880a..8d50a673 100644 --- a/overrides.less +++ b/overrides.less @@ -1 +1,28 @@ // only for third party libraries styles + +.simplebar-scrollbar.simplebar-visible::before { + opacity: 1; +} + +.simplebar-scrollbar::before { + background: var(--scrollbar-handle-bg); + width: var(--scrollbar-size); +} + +.simplebar-scrollbar.simplebar-visible.simplebar-hover { + &::before { + background: var(--scrollbar-handle-hover-bg); + } +} + +.simplebar-scrollbar.scrollbar-handle-light { + &::before { + background-color: var(--scrollbar-handle-light-bg); + } +} + +.simplebar-scrollbar.simplebar-visible.simplebar-hover.scrollbar-handle-light { + &::before { + background: var(--scrollbar-handle-light-bg); + } +} diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 929101b1..20549f5d 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -7,6 +7,7 @@ import { } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Slider, Tooltip } from 'antd'; +import dayjs from 'dayjs'; import _ from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import IconFont from '../icon-font'; @@ -25,6 +26,8 @@ type CanvasImageEditorProps = { imageStatus: { isOriginal: boolean; isResetNeeded: boolean; + width: number; + height: number; }; }; @@ -244,7 +247,7 @@ const CanvasImageEditor: React.FC = ({ const mask = generateMask(); const link = document.createElement('a'); - link.download = 'mask.png'; + link.download = `mask_${dayjs().format('YYYYMMDDHHmmss')}.png`; link.href = mask || ''; link.click(); }, [generateMask]); @@ -494,15 +497,37 @@ const CanvasImageEditor: React.FC = ({ redrawStrokes(newStrokes); }; - const download = () => { + const downloadOriginImage = () => { + console.log('Downloading original image', imageStatus); const canvas = canvasRef.current!; const link = document.createElement('a'); - link.download = 'image.png'; + link.download = `image_${dayjs().format('YYYYMMDDHHmmss')}.png`; link.href = canvas.toDataURL('image/png'); link.click(); link.remove(); }; + const downloadNewImage = () => { + const url = imageSrc || ''; + const filename = `${imageStatus.width}x${imageStatus.height}_${dayjs().format('YYYYMMDDHHmmss')}.png`; + + const link = document.createElement('a'); + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + link.remove(); + }; + + const download = () => { + console.log('Downloading image:', imageStatus); + if (imageStatus.isOriginal) { + downloadOriginImage(); + } else { + downloadNewImage(); + } + }; + const drawImage = useCallback(async () => { if (!containerRef.current || !canvasRef.current) return; return new Promise((resolve) => { diff --git a/src/global.less b/src/global.less index 3adaff89..dc10115b 100644 --- a/src/global.less +++ b/src/global.less @@ -1,6 +1,7 @@ @import url('src/assets/styles/common.less'); @import url('src/assets/styles/menu.less'); @import url('src/assets/styles/driver.less'); +@import url('./overrides.less'); html { --font-family: 'noto sans', sans-serif; @@ -604,21 +605,6 @@ body { } } -.simplebar-scrollbar.simplebar-visible::before { - opacity: 1; -} - -.simplebar-scrollbar::before { - background: var(--scrollbar-handle-bg); - width: var(--scrollbar-size); -} - -.simplebar-scrollbar.simplebar-visible.simplebar-hover { - &::before { - background: var(--scrollbar-handle-hover-bg); - } -} - .rc-virtual-list-scrollbar { width: var(--scrollbar-size) !important; } diff --git a/src/pages/llmodels/components/file-parts.tsx b/src/pages/llmodels/components/file-parts.tsx index f1d933f7..0ee02029 100644 --- a/src/pages/llmodels/components/file-parts.tsx +++ b/src/pages/llmodels/components/file-parts.tsx @@ -7,7 +7,10 @@ const FileParts: React.FC<{ fileList: any[]; }> = ({ fileList }) => { return ( - +
{fileList.map((file, index) => { return ( diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 0ca64672..90fde20e 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -183,7 +183,11 @@ const InstanceItem: React.FC = ({ {item.computed_resource_claim?.total_layers !== @@ -221,6 +225,11 @@ const InstanceItem: React.FC = ({ = ({ = forwardRef((props, ref) => { const [imageStatus, setImageStatus] = useState<{ isOriginal: boolean; isResetNeeded: boolean; + width: number; + height: number; }>({ isOriginal: false, - isResetNeeded: false + isResetNeeded: false, + width: 512, + height: 512 }); const doneImage = useRef(false); const cacheFormData = useRef({}); @@ -661,16 +665,20 @@ const GroundImages: React.FC = forwardRef((props, ref) => { setActiveImgUid(_.get(base64List, '[0].uid', '')); setImageStatus({ isOriginal: false, - isResetNeeded: true + isResetNeeded: true, + width: _.get(currentImg, 'width', 512), + height: _.get(currentImg, 'height', 512) }); setImageList([]); }, []); const handleOnSave = useCallback( (data: { img: string; mask: string | null }) => { - setImageStatus({ - isOriginal: true, - isResetNeeded: false + setImageStatus((pre) => { + return { + ...pre, + isResetNeeded: false + }; }); setMask(data.mask || null); setImage(data.img); @@ -731,7 +739,9 @@ const GroundImages: React.FC = forwardRef((props, ref) => { setImage(item.dataUrl); setImageStatus({ isOriginal: isOrigin, - isResetNeeded: false + isResetNeeded: false, + width: item.width, + height: item.height }); }, []);