chore: images create

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

@@ -1,6 +1,6 @@
 import AutoImage from '@/components/auto-image';
 import { CloseCircleOutlined } from '@ant-design/icons';
-import { Spin } from 'antd';
+import { Col, Progress, Row } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
 import '../style/thumb-img.less';
@@ -11,7 +11,20 @@ const ThumbImg: React.FC<{
   onDelete?: (uid: number) => void;
   loading?: boolean;
   style?: React.CSSProperties;
-}> = ({ dataList, editable, onDelete, loading, style }) => {
+  responseable?: boolean;
+  gutter?: number | number[] | object;
+  justify?: any;
+  autoSize?: boolean;
+}> = ({
+  dataList,
+  editable,
+  responseable,
+  gutter,
+  onDelete,
+  loading,
+  autoSize,
+  style
+}) => {
   const handleOnDelete = useCallback(
     (uid: number) => {
       onDelete?.(uid);
@@ -23,52 +36,119 @@ const ThumbImg: React.FC<{
     return null;
   }
 
+  const renderImageItem = (item: any) => {
+    return (
+      <span
+        key={item.uid}
+        className="thumb-img"
+        style={{
+          width: item.width,
+          height: item.height
+        }}
+      >
+        <>
+          {loading ? (
+            <span
+              className="progress-wrap"
+              style={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                border: '1px solid var(--ant-color-split)',
+                borderRadius: 'var(--border-radius-base)',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '10px',
+                overflow: 'hidden'
+              }}
+            >
+              <Progress percent={item.progress} type="circle" />
+            </span>
+          ) : (
+            <span className="img">
+              <AutoImage
+                autoSize={autoSize}
+                src={item.dataUrl}
+                width={item.width || 100}
+                height={item.height || 100}
+              />
+            </span>
+          )}
+        </>
+
+        {editable && (
+          <span className="del" onClick={() => handleOnDelete(item.uid)}>
+            <CloseCircleOutlined />
+          </span>
+        )}
+      </span>
+    );
+  };
+
   return (
     <>
       {
         <div className="thumb-list-wrap" style={{ ...style }}>
-          {_.map(dataList, (item: any) => {
-            return (
-              <span
-                key={item.uid}
-                className="thumb-img"
+          {responseable ? (
+            <>
+              <Row
+                gutter={gutter || []}
+                className="flex-center"
                 style={{
-                  width: item.width || 100,
-                  height: item.height || 100
+                  height: dataList.length > 2 ? '50%' : '100%',
+                  flex: 'none',
+                  width: '100%',
+                  justifyContent:
+                    dataList.length === 1 ? 'center' : 'flex-start'
                 }}
               >
-                <span className="img">
-                  {loading ? (
-                    <span
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                        display: 'flex',
-                        border: '1px solid var(--ant-color-split)',
-                        borderRadius: 'var(--border-radius-base)'
-                      }}
+                {_.map(_.slice(dataList, 0, 2), (item: any, index: string) => {
+                  return (
+                    <Col
+                      span={item.span}
+                      key={`1-${index}`}
+                      className="flex-center justify-center"
+                      style={{ height: '100%', width: '100%' }}
                     >
-                      <Spin
+                      {renderImageItem(item)}
+                    </Col>
+                  );
+                })}
+              </Row>
+              {dataList.length > 2 && (
+                <Row
+                  gutter={gutter || []}
+                  style={{
+                    height: '50%',
+                    flex: 'none',
+                    width: '100%',
+                    justifyContent:
+                      dataList.length === 1 ? 'center' : 'flex-start'
+                  }}
+                  className="flex-center"
+                >
+                  {_.map(_.slice(dataList, 2), (item: any, index: string) => {
+                    return (
+                      <Col
+                        span={item.span}
+                        key={`2-${index}`}
                         className="flex-center justify-center"
-                        style={{ width: '100%', height: '100%' }}
-                      ></Spin>
-                    </span>
-                  ) : (
-                    <AutoImage src={item.dataUrl} height={item.height || 100} />
-                  )}
-                </span>
-
-                {editable && (
-                  <span
-                    className="del"
-                    onClick={() => handleOnDelete(item.uid)}
-                  >
-                    <CloseCircleOutlined />
-                  </span>
-                )}
-              </span>
-            );
-          })}
+                        style={{ height: '100%', width: '100%' }}
+                      >
+                        {renderImageItem(item)}
+                      </Col>
+                    );
+                  })}
+                </Row>
+              )}
+            </>
+          ) : (
+            <>
+              {_.map(dataList, (item: any) => {
+                return renderImageItem(item);
+              })}
+            </>
+          )}
         </div>
       }
     </>