fix: no request, search model

src/pages/playground/components/thumb-img.tsx

@@ -23,12 +23,19 @@ const ThumbImg: React.FC<{
     <div className="thumb-list-wrap">
       {_.map(dataList, (item: any) => {
         return (
-          <span key={item.uid} className="thumb-img">
+          <span
+            key={item.uid}
+            className="thumb-img"
+            style={{
+              width: item.width,
+              height: item.height
+            }}
+          >
             <span className="img">
               <Image
                 src={item.dataUrl}
-                width={56}
-                height={56}
+                width={item.width}
+                height={item.height}
                 preview={{
                   mask: <EyeOutlined />
                 }}

src/pages/playground/components/upload-img.tsx

@@ -3,11 +3,12 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce } from 'lodash';
+import { debounce, round } from 'lodash';
 import React, { useCallback, useRef } from 'react';
 
 interface UploadImgProps {
   size?: 'small' | 'middle' | 'large';
+  height?: number;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -15,6 +16,7 @@ interface UploadImgProps {
 
 const UploadImg: React.FC<UploadImgProps> = ({
   handleUpdateImgList,
+  height = 100,
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -36,6 +38,22 @@ const UploadImg: React.FC<UploadImgProps> = ({
     [handleUpdateImgList, intl]
   );
 
+  const getImgDimensions = useCallback(
+    (file: any): Promise<{ ratio: number }> => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({ ratio: round(img.width / img.height, 2) });
+        };
+        img.onerror = () => {
+          resolve({ ratio: 1 });
+        };
+        img.src = URL.createObjectURL(file);
+      });
+    },
+    []
+  );
+
   const handleChange = useCallback(
     async (info: any) => {
       const { fileList } = info;
@@ -44,7 +62,12 @@ const UploadImg: React.FC<UploadImgProps> = ({
         fileList.map(async (item: UploadFile) => {
           if (item.originFileObj && !item.url) {
             const base64 = await getBase64(item.originFileObj as RcFile);
+            const { ratio } = await getImgDimensions(
+              item.originFileObj as RcFile
+            );
+
             item.url = base64;
+            item.ratio = ratio;
           }
           return item;
         })
@@ -56,7 +79,9 @@ const UploadImg: React.FC<UploadImgProps> = ({
           .map((item: UploadFile) => {
             return {
               dataUrl: item.url as string,
-              uid: item.uid
+              uid: item.uid,
+              height: height,
+              width: height * item.ratio
             };
           });