feat: 优化图片预览组件

This commit is contained in:
NICE CODE BY DEV 2024-04-08 16:40:58 +08:00
parent 39a11cbed3
commit 8b2902f7fa
11 changed files with 129 additions and 91 deletions

View File

@ -4,10 +4,8 @@ title: BoxSelectTree 盒子树
toc: content
demo:
cols: 2
toc: content
group:
title: 进阶组件
order: 2
---
盒子树

View File

@ -4,7 +4,6 @@ title: Tree 树
toc: content
demo:
cols: 2
toc: content
group:
title: 数据展示
order: 2

View File

@ -3,7 +3,7 @@ category: Components
title: TreeTransferModal 树穿梭框弹框
toc: content
group:
title: 数据展示
title: 进阶组件
order: 2
---

View File

@ -67,9 +67,9 @@
"@types/tar": "^6.1.10",
"@types/throttle-debounce": "^5.0.2",
"@types/warning": "^3.0.3",
"@zhst/types": "workspace:^",
"@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0",
"@zhst/types": "workspace:^",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-countup": "^6.5.0",
@ -88,6 +88,7 @@
"@types/downloadjs": "^1.4.6",
"@zhst/func": "workspace:^",
"@zhst/hooks": "workspace:^",
"@zhst/icon": "workspace:^",
"@zhst/meta": "workspace:^",
"antd": "^5.12.5",
"antd-img-crop": "^4.21.0",

View File

@ -1,15 +1,15 @@
import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, useContext } from 'react'
// @ts-ignore
import { generateImg, get, addEventListenerWrapper } from '@zhst/func';
import { useUpdateEffect } from '@zhst/hooks';
import { IconFont } from '@zhst/icon'
import Button from '../button';
import classNames from 'classnames'
import Viewer from '../ImageEditor/viewer';
import Icon from '../iconfont'
import CornerScore from './components/CornerScore';
import './index.less'
const componentName = `zhst-image__compater-view`;
import { ConfigContext } from '../config-provider';
import { EMPTY_BASE64 } from '../utils/constants';
export interface CompareImageProps {
/**
@ -17,9 +17,11 @@ export interface CompareImageProps {
* @default "默认值"
*/
label?: string;
showTools?: boolean;
prefixCls?: string;
openRoll?: boolean; //开启翻页
url: string;
score?: number;
score?: number | string;
onPre?: () => void;
onNext?: () => void;
preDisable?: boolean; // 向前翻页禁用
@ -35,16 +37,21 @@ export interface CompareImageRefProps {
// 对比图组件
const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
label = '标题',
openRoll = true,
url = '',
score = 0,
preDisable,
nextDisable,
showScore = true,
showScore,
onNext,
showTools = true,
onPre
} = props;
const { getPrefixCls } = useContext(ConfigContext);
const componentName = getPrefixCls('image__compater-view', customizePrefixCls);
const imgContainerRef = useRef(null);
const imgInsRef = useRef<any>(null);
const [scale, setScale] = useState(0);
@ -95,7 +102,7 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
{!url ? (
<div className={classNames(`${componentName}__empty`)}>
<img
src="data:image/png;base64,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" title="暂无数据"
src={EMPTY_BASE64} title="暂无数据"
></img>
<span className={classNames(`${componentName}__empty--text`)}></span>
</div>
@ -107,28 +114,29 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
<div className={classNames(`${componentName}__scoll-module`)}>
{/* <div> </div> */}
<Button
type={'default'}
className={classNames(`${componentName}__scoll-module__btn`)}
disabled={preDisable}
onClick={() => {
onPre?.();
}}
onClick={onPre}
type='primary'
shape='circle'
style={{ width: '56px', height: '56px' }}
icon={<IconFont icon="icon-qiehuanzuo" size={32} color='#fff' />}
>
<Icon icon="icon-qiehuanzuo" size={40} />
</Button>
<Button
type={'default'}
className={classNames(`${componentName}__scoll-module__btn`)}
disabled={nextDisable}
onClick={() => {
onNext?.();
}}
>
<Icon icon="icon-qiehuanyou" size={40} />
</Button>
onClick={onNext}
type='primary'
shape='circle'
style={{ width: '56px', height: '56px' }}
icon={<IconFont icon="icon-qiehuanyou" size={32} color='#fff' />}
/>
</div>
)}
{showScore && <CornerScore scoreTxt={score || 0} />}
{(showScore || score) && <CornerScore scoreTxt={score || 0} />}
{showTools && (
<div className={classNames(`${componentName}__tool`)}>
<Button
type="text"
@ -136,7 +144,7 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
imgInsRef?.current?.scaleTo?.(0.1);
}}
>
<Icon size={16} icon={'icon-fangda'} />
<IconFont size={16} icon={'icon-fangda'} />
<span>{'放大'}</span>
</Button>
<Button
@ -145,7 +153,7 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
imgInsRef?.current?.scaleTo?.(-0.1);
}}
>
<Icon size={16} icon={'icon-suoxiao'} />
<IconFont size={16} icon={'icon-suoxiao'} />
<span>{'缩小'}</span>
</Button>
{/* <Button type="text"> */}
@ -160,10 +168,11 @@ const CompareImage = forwardRef<CompareImageRefProps, CompareImageProps>((props,
imgInsRef?.current?.reset?.();
}}
>
<Icon size={16} icon={'icon-zhongzhi3'} />
<IconFont size={16} icon={'icon-zhongzhi3'} />
<span>{'重置'}</span>
</Button>
</div>
)}
</div>
);
})

View File

@ -1,30 +1,35 @@
import React, { useRef } from 'react';
import React, { useRef, useState } from 'react';
import { CompareImage, Space, Button } from '@zhst/meta'
const props = {
label: "目标图",
openRoll:true,
dataSource:[
{
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
score: '0.5'
},
{
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
score: '0.8'
},
]
}
export default () => {
const ref = useRef(null)
const [data, setData] = useState({
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
score: '0.8'
})
return (
<Space>
<Button onClick={() => ref.current?.handleIndexChange(-1)}></Button>
<Button onClick={() => ref.current?.handleIndexChange(1)}></Button>
<CompareImage {...props} ref={ref} />
<CompareImage
label="目标图"
url={data.url}
score={data.score}
openRoll
ref={ref}
onPre={() => {
setData({
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
score: '0.8'
})
}}
onNext={() => {
setData({
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
score: '0.4'
})
}}
/>
</Space>
)
}

View File

@ -0,0 +1,21 @@
import React, { useRef } from 'react';
import { CompareImage, Space } from '@zhst/meta'
export default () => {
const ref = useRef(null)
return (
<Space>
<CompareImage
label="目标图"
showTools={false}
preDisable={true}
url="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
openRoll
ref={ref}
/>
</Space>
)
}

View File

@ -113,25 +113,17 @@
&__scoll-module {
position: absolute;
top: 0%;
left: 0%;
padding: 12px;
bottom: 48px;
display: flex;
width: 100%;
height: 100%;
align-items: flex-end;
justify-content: space-between;
pointer-events: none;
box-sizing: border-box;
&__btn {
display: flex;
width: 50px;
height: 50px;
bottom: 45px;
align-items: center;
justify-content: center;
margin: 6px;
border-radius: 50%;
opacity: 0.5;
opacity: 0.4;
pointer-events: all;
&>span {
@ -142,6 +134,7 @@
}
&__btn:hover {
opacity: 0.6;
background-color: #09f !important;
color: #fff !important;
}

View File

@ -9,14 +9,21 @@ title: CompareImage 图片预览
# CompareImage 图片预览
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/noTools.tsx">没有工具栏</code>
## API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| url | 链接 | string | - | |
| label | 左上角标题 | string必填 | - | |
| openRoll | 是否支持鼠标滚动放大缩小 | boolean | - | |
| urls | 链接数组 | string[] | - | |
| showTools | 是否展示底部工具栏 | boolean | true | |
| openRoll | 是否展示翻页组件 | boolean | - | |
| width | 宽度 | string选填 | - | |
| height | 高度 | string选填 | - | |
| score | 相似度 | string选填 | - | |
| nextDisable | 禁止下一页 | boolean | false | |
| preDisable | 禁止上一页 | boolean | false | |
| prefixCls | 样式前缀 | string | - | |
| onPre | 往前翻页 | () => void; | - | |
| onNext | 往后翻页 | () => void; | - | |

View File

@ -2,8 +2,9 @@
category: Components
subtitle: 栅格
group: 布局
titltoc: content
: Grid 栅格
title: Grid 栅格
toc: content
---
24 栅格系统。

View File

@ -1,3 +1,5 @@
import { Empty } from "antd";
export const CROP_TYPE = {
CUSTOM: 'CUSTOM',
AUTO: 'AUTO',
@ -11,3 +13,5 @@ export const defaultAlignOption = {
adjustY: true,
},
};
export const EMPTY_BASE64 = 'data:image/png;base64,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'