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

baidu · Jan 8, 2024 · ab6d0d9 · ab6d0d9
1 parent f575308
commit ab6d0d9
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 301 deletions.
diff --git a/docs/zh-CN/components/image.md b/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 --git a/docs/zh-CN/components/images.md b/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 --git a/packages/amis-ui/scss/components/_drag-progress.scss b/packages/amis-ui/scss/components/_drag-progress.scss
diff --git a/packages/amis-ui/scss/components/_image-gallery.scss b/packages/amis-ui/scss/components/_image-gallery.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 --git a/packages/amis-ui/scss/components/_images.scss b/packages/amis-ui/scss/components/_images.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 --git a/packages/amis-ui/scss/themes/_common.scss b/packages/amis-ui/scss/themes/_common.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 --git a/packages/amis-ui/src/components/DragProgress.tsx b/packages/amis-ui/src/components/DragProgress.tsx
diff --git a/packages/amis-ui/src/components/ImageGallery.tsx b/packages/amis-ui/src/components/ImageGallery.tsx
@@ -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 --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx
@@ -113,6 +113,11 @@ export interface BasicPaginationProps {
  */
  size?: string;
 
+ /**
+ * 简单模式不显示输入框
+ */
+ hasInputNumber?: boolean;
+
  onPageChange?: (page: number, perPage?: number, dir?: string) => void;
 }
 export interface PaginationProps