feat: 图片集优化

baidu · Nov 16, 2023 · 09a4599 · 09a4599
1 parent 68e079b
commit 09a4599
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 21 deletions.
diff --git a/packages/amis-ui/scss/components/_image-gallery.scss b/packages/amis-ui/scss/components/_image-gallery.scss
@@ -20,20 +20,46 @@
   // max-width: calc(100% - #{px2rem(128px)});
   padding: px2rem(44px) 0 px2rem(24px);
 
+  &-reverse {
+    flex-direction: row-reverse;
+
+    .#{$ns}ImageGallery-main {
+      margin-left: px2rem(14px);
+      margin-right: 0;
+    }
+  }
+
   &-overlay {
     background: rgba(7, 12, 20, .5);
   }
 
   &-embed {
+    display: inline-flex;
+    position: relative;
     min-height: px2rem(370px);
-    width: px2rem(768px);
+    max-width: px2rem(768px);
+    width: auto;
     padding: 0;
 
+    &-title {
+      min-height: px2rem(410px);
+      padding-top: px2rem(40px);
+    }
+
+    .#{$ns}ImageGallery-toptitle {
+      color: var(--dark);
+    }
+
     .#{$ns}ImageGallery-main {
       width: px2rem(546px);
+      height: unset;
       flex: 0 0 px2rem(436px);
     }
 
+    .#{$ns}ImageGallery-image {
+      height: calc(100% - #{px2rem(56px)});
+    }
+
     .#{$ns}ImageGallery-info {
       width: px2rem(208px);
       background: var(--white);
@@ -70,6 +96,21 @@
           }
         }
       }
+
+      &-pagination {
+
+
+        > ul {
+
+          li {
+            color: var(--dark);
+
+            svg {
+              color: var(--dark);
+            }
+          }
+        }
+      }
     }
   }
 
@@ -169,6 +210,23 @@
     user-select: none;
     position: relative;
     overflow: hidden;
+
+    &-reverse {
+      flex-direction: column-reverse;
+
+      .#{$ns}ImageGallery-image {
+        height: calc(100% - #{px2rem(56px)});
+        margin: 0 0 px2rem(16px) 0;
+      }
+
+      .#{$ns}ImageGallery-image-bottom {
+        margin: 0;
+      }
+
+      .#{$ns}ImageGallery-toolbar {
+        margin: 0 0 px2rem(16px) 0;
+      }
+    }
   }
 
   &-image {

diff --git a/packages/amis-ui/scss/components/_images.scss b/packages/amis-ui/scss/components/_images.scss
@@ -1,15 +1,14 @@
 @use 'sass:math';
 
 .#{$ns}Images {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 120px);
+  grid-row-gap: 8px;
+  grid-column-gap: 8px;
   margin: calc(var(--gap-xs) * -1);
 
   &-item {
     display: flex;
-    margin: var(--image-images-item-marginTop)
-      var(--image-images-item-marginRight) var(--image-images-item-marginBottom)
-      var(--image-images-item-marginLeft);
   }
 }
 

diff --git a/packages/amis-ui/src/components/ImageGallery.tsx b/packages/amis-ui/src/components/ImageGallery.tsx
@@ -49,7 +49,7 @@ interface ImageGalleryItem {
 
 interface ImageGalleryPosition {
   toolbar: 'top' | 'bottom';
-  list: 'top' | 'bottom';
+  description: 'left' | 'right';
 }
 
 export interface ImageGalleryProps
@@ -536,7 +536,8 @@ export class ImageGallery extends React.Component<
       actions,
       imageLoadInfo,
       isNaturalSize,
-      imageLoading
+      imageLoading,
+      position
     } = this.state;
     const {translate: __, loadingConfig} = this.props;
 
@@ -559,8 +560,22 @@ export class ImageGallery extends React.Component<
       ~index && items[index] ? (
         <>
           <div className={cx('ImageGallery-main')} ref={this.galleryMainRef}>
-            <div className={cx('ImageGallery-preview')}>
-              <div className={cx('ImageGallery-image')}>
+            <div
+              className={cx(
+                'ImageGallery-preview',
+                position?.toolbar === 'top'
+                  ? 'ImageGallery-preview-reverse'
+                  : ''
+              )}
+            >
+              <div
+                className={cx(
+                  'ImageGallery-image',
+                  enlargeWithGallary === false
+                    ? 'ImageGallery-image-bottom'
+                    : ''
+                )}
+              >
                 <div className={cx('ImageGallery-image-wrap')}>
                   <img
                     draggable={false}
@@ -645,9 +660,21 @@ export class ImageGallery extends React.Component<
     ];
   }
 
+  renderTitle() {
+    const {classnames: cx} = this.props;
+    const {items, index} = this.state;
+
+    return items[index]?.title && !items[index]?.caption ? (
+      <span className={cx('ImageGallery-toptitle')}>{items[index].title}</span>
+    ) : null;
+  }
+
   render() {
     const {children, modalContainer, embed, classnames: cx} = this.props;
-    const {items, index, imageGallaryClassName, isOpened} = this.state;
+    const {items, index, imageGallaryClassName, isOpened, position} =
+      this.state;
+
+    const isTopTitle = items[index]?.title && !items[index]?.caption;
 
     return (
       <>
@@ -660,28 +687,30 @@ export class ImageGallery extends React.Component<
             size="full"
             onHide={this.close}
             show={isOpened}
-            contentClassName={cx('ImageGallery', imageGallaryClassName)}
+            contentClassName={cx(
+              'ImageGallery',
+              imageGallaryClassName,
+              position?.description === 'left' ? 'ImageGallery-reverse' : ''
+            )}
             modalMaskClassName={cx('ImageGallery-overlay')}
             container={modalContainer}
           >
             <span className={cx('ImageGallery-close')} onClick={this.close}>
               <Icon icon="close" className="icon" />
             </span>
-            {items[index]?.title && !items[index]?.caption ? (
-              <span className={cx('ImageGallery-toptitle')}>
-                {items[index].title}
-              </span>
-            ) : null}
+            {this.renderTitle()}
             {this.renderBody()}
           </Modal>
         ) : (
           <div
             className={cx(
               'ImageGallery',
               imageGallaryClassName,
-              'ImageGallery-embed'
+              'ImageGallery-embed',
+              isTopTitle ? 'ImageGallery-embed-title' : ''
             )}
           >
+            {this.renderTitle()}
             {this.renderBody()}
           </div>
         )}

diff --git a/packages/amis/src/renderers/Image.tsx b/packages/amis/src/renderers/Image.tsx
@@ -166,6 +166,12 @@ export interface ImageSchema extends BaseSchema {
    * 工具栏配置
    */
   toolbarActions?: ImageToolbarAction[];
+
+  /** 位置 */
+  position?: {
+    toolbar: 'top' | 'bottom';
+    description: 'left' | 'right';
+  };
 }
 
 export interface ImageThumbProps

diff --git a/packages/amis/src/renderers/Images.tsx b/packages/amis/src/renderers/Images.tsx
@@ -123,8 +123,10 @@ export interface ImagesSchema extends BaseSchema {
   /** 位置 */
   position?: {
     toolbar: 'top' | 'bottom';
-    list: 'top' | 'bottom';
+    description: 'left' | 'right';
   };
+
+  imageStyle?: React.CSSProperties;
 }
 
 export interface ImagesProps
@@ -218,7 +220,8 @@ export class ImagesField extends React.Component<ImagesProps> {
       env,
       themeCss,
       embed,
-      position
+      position,
+      imageStyle
     } = this.props;
 
     let value: any;
@@ -280,6 +283,7 @@ export class ImagesField extends React.Component<ImagesProps> {
             {list.map((item: any, index: number) => (
               <Image
                 index={index}
+                style={imageStyle}
                 className={cx('Images-item')}
                 key={index}
                 src={item.src}
@@ -291,8 +295,11 @@ export class ImagesField extends React.Component<ImagesProps> {
                 enlargeAble={enlargeAble!}
                 enlargeWithGallary={enlargeWithGallary}
                 onEnlarge={this.handleEnlarge}
+                position={position}
                 showToolbar={showToolbar}
-                imageGallaryClassName={`${imageGallaryClassName} ${setThemeClassName(
+                imageGallaryClassName={`${
+                  imageGallaryClassName ?? ''
+                } ${setThemeClassName(
                   'imageGallaryClassName',
                   id,
                   themeCss