From 09a4599f2684f8211183ac849357df847efb2886 Mon Sep 17 00:00:00 2001 From: sqzhou Date: Thu, 9 Nov 2023 21:44:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E9=9B=86=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/components/_image-gallery.scss | 60 ++++++++++++++++++- packages/amis-ui/scss/components/_images.scss | 9 ++- .../amis-ui/src/components/ImageGallery.tsx | 53 ++++++++++++---- packages/amis/src/renderers/Image.tsx | 6 ++ packages/amis/src/renderers/Images.tsx | 13 +++- 5 files changed, 120 insertions(+), 21 deletions(-) diff --git a/packages/amis-ui/scss/components/_image-gallery.scss b/packages/amis-ui/scss/components/_image-gallery.scss index 0f2e79b1e720..ae3711ea123f 100644 --- 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 index 8e470f4fa379..ca0628aa0295 100644 --- 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 index 2320a6610d8d..41d8c7bacc19 100644 --- 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] ? ( <>
-
-
+
+
{items[index].title} + ) : 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,18 +687,18 @@ 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} > - {items[index]?.title && !items[index]?.caption ? ( - - {items[index].title} - - ) : null} + {this.renderTitle()} {this.renderBody()} ) : ( @@ -679,9 +706,11 @@ export class ImageGallery extends React.Component< className={cx( 'ImageGallery', imageGallaryClassName, - 'ImageGallery-embed' + 'ImageGallery-embed', + isTopTitle ? 'ImageGallery-embed-title' : '' )} > + {this.renderTitle()} {this.renderBody()}
)} diff --git a/packages/amis/src/renderers/Image.tsx b/packages/amis/src/renderers/Image.tsx index cdb9986720b9..b68f8a19ab2c 100644 --- 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 index 386f5bd1a121..09943f92b98f 100644 --- 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 { env, themeCss, embed, - position + position, + imageStyle } = this.props; let value: any; @@ -280,6 +283,7 @@ export class ImagesField extends React.Component { {list.map((item: any, index: number) => ( { enlargeAble={enlargeAble!} enlargeWithGallary={enlargeWithGallary} onEnlarge={this.handleEnlarge} + position={position} showToolbar={showToolbar} - imageGallaryClassName={`${imageGallaryClassName} ${setThemeClassName( + imageGallaryClassName={`${ + imageGallaryClassName ?? '' + } ${setThemeClassName( 'imageGallaryClassName', id, themeCss