diff --git a/src/components/auto-image/index.tsx b/src/components/auto-image/index.tsx index bb736fea..41034448 100644 --- a/src/components/auto-image/index.tsx +++ b/src/components/auto-image/index.tsx @@ -70,8 +70,9 @@ const AutoImage: React.FC< setIsError(false); }, [props.onLoad]); - const handleOnError = useCallback(() => { + const handleOnError = useCallback((e: any) => { setIsError(true); + e.target.src = fallbackImg; }, []); useEffect(() => { @@ -127,4 +128,4 @@ const AutoImage: React.FC< ); }; -export default React.memo(AutoImage); +export default AutoImage; diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 84eb5c8a..7e062134 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -158,8 +158,7 @@ export default { 'playground.uploadfile.sizeError': 'File size exceeds the limit. Maximum allowed: {size}.', 'playground.uploadImage.url.invalid': - 'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.', - 'playground.uploadImage.url.holder': - 'Enter an image URL (supports .png, .jpeg, .jpg)', + 'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.', + 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL' }; diff --git a/src/locales/ja-JP/playground.ts b/src/locales/ja-JP/playground.ts index 9e24427b..13783e9d 100644 --- a/src/locales/ja-JP/playground.ts +++ b/src/locales/ja-JP/playground.ts @@ -161,9 +161,8 @@ export default { 'playground.uploadfile.sizeError': 'File size exceeds the limit. Maximum allowed: {size}.', 'playground.uploadImage.url.invalid': - 'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.', - 'playground.uploadImage.url.holder': - 'Enter an image URL (supports .png, .jpeg, .jpg)', + 'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.', + 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL' }; @@ -171,7 +170,7 @@ export default { // 1. 'playground.rerank.query.validate': 'The query is required.' // 2. 'playground.image.generate.error': 'Something went wrong. The image could not be generated.', // 3. 'playground.uploadfile.sizeError': 'File size exceeds the limit. Maximum allowed: {size}.' -// 4. 'playground.uploadImage.url.invalid': 'Please enter a direct .png or .jpg image URL(e.g. https://.../image.png). Press ESC to cancel.', -// 5. 'playground.uploadImage.url.holder': 'Enter an image URL (supports .png, .jpeg, .jpg)' +// 4. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.', +// 5. 'playground.uploadImage.url.holder': 'Enter an image URL' // 6. 'playground.uploadImage.url.button': 'Add Image from URL' // ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/playground.ts b/src/locales/ru-RU/playground.ts index 8a12541b..fb6cb8c3 100644 --- a/src/locales/ru-RU/playground.ts +++ b/src/locales/ru-RU/playground.ts @@ -155,14 +155,13 @@ export default { 'playground.uploadfile.sizeError': 'Размер файла превышает ограничение. Максимальный размер: {size}.', 'playground.uploadImage.url.invalid': - 'Please enter a direct .png or .jpg image URL (e.g. https://.../image.png). Press ESC to cancel.', - 'playground.uploadImage.url.holder': - 'Enter an image URL (supports .png, .jpeg, .jpg)', + 'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.', + 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== -// 1. 'playground.uploadImage.url.invalid': 'Please enter a direct .png or .jpg image URL(e.g. https://.../image.png). Press ESC to cancel.', -// 2. 'playground.uploadImage.url.holder': 'Enter an image URL (supports .png, .jpeg, .jpg)', +// 1. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.', +// 2. 'playground.uploadImage.url.holder': 'Enter an image URL', // 3. 'playground.uploadImage.url.button': 'Add Image from URL' // ========== End of To-Do List ========== diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index d89b2320..b4a44481 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -151,8 +151,7 @@ export default { 'playground.uploadfile.sizeError': '上传的文件大小超过限制,最大允许 {size}。', 'playground.uploadImage.url.invalid': - '请输入直接的 .png 或 .jpg 图片链接(例如:https://…/image.png)。按 ESC 可取消。', - 'playground.uploadImage.url.holder': - '请输入图片链接(支持 .png、.jpeg、.jpg 格式)', + '请输入直接的图片链接(例如:https://…/image.png)。按 ESC 可取消。', + 'playground.uploadImage.url.holder': '请输入图片链接', 'playground.uploadImage.url.button': '从链接添加图片' }; diff --git a/src/pages/playground/hooks/use-add-image.tsx b/src/pages/playground/hooks/use-add-image.tsx index e23e912f..fffa0c82 100644 --- a/src/pages/playground/hooks/use-add-image.tsx +++ b/src/pages/playground/hooks/use-add-image.tsx @@ -1,5 +1,6 @@ import DropDownActions from '@/components/drop-down-actions'; import { + DeleteOutlined, LinkOutlined, PictureOutlined, UploadOutlined @@ -7,9 +8,25 @@ import { import { useIntl } from '@umijs/max'; import { Button, Input, Tooltip } from 'antd'; import { useRef, useState } from 'react'; +import styled from 'styled-components'; import UploadImg from '../components/upload-img'; -const regex = /(https?:\/\/\S+\.(png|jpg|jpeg))/gi; +const ImgInputWrapper = styled.div` + position: relative; + .del-btn { + display: none; + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + background: var(--ant-color-bg-container); + } + &:hover { + .del-btn { + display: flex; + } + } +`; const useAddImage = (options: { size?: 'small' | 'middle' | 'large'; @@ -31,29 +48,39 @@ const useAddImage = (options: { }, 100); }; - const handleInputImageUrl = (e: any) => { - const url = e.target.value; - const isValid = regex.test(url); - setOpenImgTips(!isValid); - if (isValid) { + const handleInputImageUrl = async (e: any) => { + const url = e.target.value?.trim(); + + if (url) { handleUpdateImgList([ { uid: updateUidCount(), - dataUrl: e.target.value + dataUrl: url } ]); - setIsFromUrl(false); - } - - setTimeout(() => { setOpenImgTips(false); - }, 2000); + setIsFromUrl(false); + } else { + setOpenImgTips(true); + } + // set openImgTips to false after next frame if is not valid + if (!url) { + requestAnimationFrame(() => { + setTimeout(() => { + setOpenImgTips(false); + }, 3000); + }); + } + }; + + const handleClose = () => { + setIsFromUrl(false); + setOpenImgTips(false); }; const handleOnEscape = (e: any) => { if (e.key === 'Escape') { - setIsFromUrl(false); - setOpenImgTips(false); + handleClose(); } }; @@ -64,17 +91,27 @@ const useAddImage = (options: { id: 'playground.uploadImage.url.invalid' })} > - + + +
+ +
+
) : null;