feat: 扩展图片集，支持移动端滑动

docs/zh-CN/components/images.md

@@ -60,6 +60,48 @@ order: 53
 }
 ```
 
+## 展示模式
+
+通过配置 `displayMode` 可以设置图片集的展示模式,支持以下两种模式:
+
+- `thumb`: 缩略图模式(默认),将图片以缩略图网格的形式展示
+- `full`: 大图模式,以幻灯片形式展示单张大图,可左右滑动切换
+
+在大图模式下,可以通过`fullThumbMode`属性来控制图片的缩放模式:
+
+- `cover`: 保持图片比例,填充整个容器,可能会裁剪部分图片(默认)
+- `contain`: 保持图片比例,确保图片完整显示在容器内
+
+```schema
+{
+    "type": "page",
+    "data": {
+        "images": [
+            {
+                "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
+                "title": "图片1"
+            },
+            {
+                "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg",
+                "title": "图片2"
+            },
+            {
+                "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg",
+                "title": "图片3"
+            }
+        ]
+    },
+    "body": [
+        {
+            "type": "images",
+            "source": "${images}",
+            "displayMode": "full",
+            "fullThumbMode": "cover"
+        }
+    ]
+}
+```
+
 ## 值格式
 
 除了支持纯文本数组以外，也支持对象数组，如：
@@ -680,3 +722,5 @@ List 的内容、Card 卡片的内容配置同上。
 | thumbRatio         | `string`                                   | `1:1`     | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'`                                                                                            |
 | showToolbar        | `boolean`                                  | `false`   | 放大模式下是否展示图片的工具栏                                                                                                          | `2.2.0` |
 | toolbarActions     | `ImageAction[]`                            |           | 图片工具栏，支持旋转，缩放，默认操作全部开启                                                                                            | `2.2.0` |
+| displayMode        | `'thumb' \| 'full'`                        | `'thumb'` | 展示模式,支持缩略图模式（thumb）和大图模式（full）                                                                                      |
+| fullThumbMode      | `'cover' \| 'contain'`                     | `'cover'` | 大图模式下的图片缩放模式                                                                                                                |

packages/amis-editor/src/plugin/Images.tsx

@@ -20,7 +20,8 @@ export class ImagesPlugin extends BasePlugin {
   pluginIcon = 'images-plugin';
   scaffold = {
     type: 'images',
-    imageGallaryClassName: 'app-popover :AMISCSSWrapper'
+    imageGallaryClassName: 'app-popover :AMISCSSWrapper',
+    displayMode: 'thumb' // 默认缩略图模式
   };
   previewSchema = {
     ...this.scaffold,
@@ -126,6 +127,22 @@ export class ImagesPlugin extends BasePlugin {
                       }
                     ]
                   },
+                  {
+                    type: 'select',
+                    name: 'displayMode',
+                    label: '图片集模式',
+                    value: 'thumb',
+                    options: [
+                      {
+                        label: '缩略图模式',
+                        value: 'thumb'
+                      },
+                      {
+                        label: '大图模式',
+                        value: 'full'
+                      }
+                    ]
+                  },
                   getSchemaTpl('switch', {
                     name: 'enlargeAble',
                     label: '图片放大功能'
@@ -184,7 +201,8 @@ export class ImagesPlugin extends BasePlugin {
                     label: '铺满',
                     value: 'cover'
                   }
-                ]
+                ],
+                visibleOn: 'this.displayMode === "thumb"'
               },
 
               {
@@ -208,7 +226,8 @@ export class ImagesPlugin extends BasePlugin {
                     label: '16:9',
                     value: '16:9'
                   }
-                ]
+                ],
+                visibleOn: 'this.displayMode === "thumb"'
               }
             ]
           },

packages/amis-ui/scss/components/_images.scss

@@ -208,6 +208,77 @@
 .#{$ns}ImagesField {
   position: relative;
   @include clearfix();
+
+  &--full {
+    position: relative;
+
+    .#{$ns}Images {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      cursor: grab;
+
+      &-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 300px;
+      }
+
+      &-item {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      &-itemInner {
+        position: relative;
+        max-width: 100%;
+        max-height: 100vh;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .#{$ns}Image-image {
+        display: block;
+        max-width: 100%;
+        height: auto;
+
+        &--contain {
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+
+        &--cover {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-itemIndex {
+        position: absolute;
+        right: 16px;
+        bottom: 16px;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        z-index: 10;
+        pointer-events: none;
+      }
+    }
+  }
 }
 
 .Image-view-icon {