feat: 图片集放大显示模式优化

Author: sqzhou

Diff for: docs/zh-CN/components/image.md

@@ -431,22 +431,6 @@ List 的内容、Card 卡片的内容配置同上
 }
 ```
 
-## 内嵌模式
-
-配置`"embed": true`，显示图片内嵌模式
-
-```schema
-{
-    "type": "page",
-    "body": {
-        "type": "image",
-        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
-        "embed": true,
-        "showToolbar": true
-    }
-}
-```
-
 ## 属性表
 
 | 属性名             | 类型                                             | 默认值    | 说明                                                                                          | 版本    |
@@ -474,7 +458,6 @@ List 的内容、Card 卡片的内容配置同上
 | imageMode          | `string`                                         | `thumb`   | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式                      |
 | showToolbar        | `boolean`                                        | `false`   | 放大模式下是否展示图片的工具栏                                                                | `2.2.0` |
 | toolbarActions     | `ImageAction[]`                                  |           | 图片工具栏，支持旋转，缩放，默认操作全部开启                                                  | `2.2.0` |
-| embed     | `boolean`                                  |           | 内嵌模式，当是 `true` 开启内嵌显示                                                  | `3.5.3` |
 | maxScale           | `number` 或 [模板](../../docs/concepts/template) |           | 执行调整图片比例动作时的最大百分比                                                            | `3.4.4` |
 | minScale           | `number` 或 [模板](../../docs/concepts/template) |           | 执行调整图片比例动作时的最小百分比                                                            | `3.4.4` |
 

Diff for: docs/zh-CN/components/images.md

@@ -420,6 +420,8 @@ Array<{
 
 ## 内嵌模式
 
+> 6.0.1 及以上版本
+
 在 **images 组件** 上，配置`embed`为`true`，支持放大预览
 
 ```schema
@@ -730,7 +732,7 @@ List 的内容、Card 卡片的内容配置同上。
 | thumbRatio         | `string`                                   | `1:1`     | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'`                                                                                            |
 | showToolbar        | `boolean`                                  | `false`   | 放大模式下是否展示图片的工具栏                                                                                                          | `2.2.0` |
 | toolbarActions     | `ImageAction[]`                            |           | 图片工具栏，支持旋转，缩放，默认操作全部开启                                                                                            | `2.2.0` |
-| embed     | `boolean`                                  |     `false`      | 内嵌模式，当是 `true` 开启内嵌显示                                                  | `3.5.3` |
-| imageStyle     | `object`                                  |           | 设置图片列表每一项的style                                                  | `3.5.3` |
-| position.toolbar     | `top' \| 'bottom'`                                  |      `'bottom'`     | 设置图片放大时，工具栏位置                                             | `3.5.3` |
-| position.description     | `'left' \| 'right'`                                  |     `'right'`     | 设置图片放大时，描述对应显示框位置                                                  | `3.5.3` |
+| embed     | `boolean`                                  |     `false`      | 内嵌模式，当是 `true` 开启内嵌显示                                                  | `6.0.1` |
+| imageStyle     | `object`                                  |           | 设置图片列表每一项的style                                                  | `6.0.1` |
+| position.toolbar     | `top' \| 'bottom'`                                  |      `'bottom'`     | 设置图片放大时，工具栏位置                                             | `6.0.1` |
+| position.description     | `'left' \| 'right'`                                  |     `'right'`     | 设置图片放大时，描述对应显示框位置                                                  | `6.0.1` |

Diff for: packages/amis-ui/scss/components/_drag-progress.scss

@@ -442,19 +442,18 @@
     }
   }
 
+  &-range {
+    width: px2rem(200px);
+  }
+
   &-pagination {
     flex: 1;
     text-align: right;
 
     > ul {
-      width: px2rem(102px);
 
       li {
         color: var(--white);
-        
-        span {
-          min-width: unset;
-        }
 
         svg {
           color: var(--white);

Diff for: packages/amis-ui/scss/components/_image-gallery.scss

@@ -2,9 +2,9 @@
 
 .#{$ns}Images {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 120px);
-  grid-row-gap: 8px;
-  grid-column-gap: 8px;
+  grid-template-columns: repeat(auto-fill, px2rem(120px));
+  grid-row-gap: px2rem(8px);
+  grid-column-gap: px2rem(8px);
   margin: calc(var(--gap-xs) * -1);
 
   &-item {

Diff for: packages/amis-ui/scss/components/_images.scss

@@ -67,7 +67,6 @@
 @import '../components/wrapper';
 @import '../components/status';
 @import '../components/carousel';
-@import '../components/drag-progress';
 @import '../components/sliding';
 @import '../components/image-gallery';
 @import '../components/images';

Diff for: packages/amis-ui/scss/themes/_common.scss

@@ -5,6 +5,7 @@ import {autobind} from 'amis-core';
 import Modal from './Modal';
 import {Icon} from './icons';
 import {LocaleProps, localeable} from 'amis-core';
+import Range from './Range';
 import Spinner, {SpinnerExtraProps} from './Spinner';
 import DragProgress from './DragProgress';
 import Sliding from './Sliding';
@@ -135,7 +136,7 @@ export class ImageGallery extends React.Component<
       },
       {
         key: ImageActionKey.DOWNLOAD,
-        icon: 'download-new',
+        icon: 'image-download',
         label: 'download'
       },
       {
@@ -356,7 +357,6 @@ export class ImageGallery extends React.Component<
   setIndex(cIndex: number) {
     const {items, index} = this.state;
     const bool = items[index].originalSrc === items[cIndex].originalSrc;
-    console.log(bool);
     this.setState({
       index: cIndex,
       imageLoading: !bool,
@@ -488,7 +488,7 @@ export class ImageGallery extends React.Component<
   }
 
   renderToolbar(actions: ImageAction[]) {
-    const {classnames: cx, translate: __, className, embed} = this.props;
+    const {classnames: cx, translate: __, className} = this.props;
     const {scale, index, items} = this.state;
 
     return (
@@ -497,12 +497,15 @@ export class ImageGallery extends React.Component<
           {actions.map(action => {
             if (action.key === ImageActionKey.DRAG) {
               return (
-                <DragProgress
-                  value={scale}
-                  onChange={this.handleDragProgress}
-                  skin={embed ? 'light' : 'dark'}
-                  max={2}
-                />
+                <div className={cx('ImageGallery-toolbar-range')}>
+                  <Range
+                    onChange={this.handleDragProgress}
+                    value={scale * 100}
+                    step={1}
+                    min={0}
+                    max={200}
+                  />
+                </div>
               );
             }
 

Diff for: packages/amis-ui/src/components/DragProgress.tsx

@@ -113,6 +113,11 @@ export interface BasicPaginationProps {
    */
   size?: string;
 
+  /**
+   * 简单模式不显示输入框
+   */
+  hasInputNumber?: boolean;
+
   onPageChange?: (page: number, perPage?: number, dir?: string) => void;
 }
 export interface PaginationProps