diff --git a/packages/biz/src/boxSelectTree/index.md b/packages/biz/src/boxSelectTree/index.md index 77d096e..48c22b1 100644 --- a/packages/biz/src/boxSelectTree/index.md +++ b/packages/biz/src/boxSelectTree/index.md @@ -4,10 +4,8 @@ title: BoxSelectTree 盒子树 toc: content demo: cols: 2 -toc: content group: title: 进阶组件 - order: 2 --- 盒子树 diff --git a/packages/biz/src/tree/index.md b/packages/biz/src/tree/index.md index a45cc4d..164a658 100644 --- a/packages/biz/src/tree/index.md +++ b/packages/biz/src/tree/index.md @@ -4,7 +4,6 @@ title: Tree 树 toc: content demo: cols: 2 -toc: content group: title: 数据展示 order: 2 diff --git a/packages/biz/src/treeTransferModal/index.md b/packages/biz/src/treeTransferModal/index.md index 179dd4c..de3a40e 100644 --- a/packages/biz/src/treeTransferModal/index.md +++ b/packages/biz/src/treeTransferModal/index.md @@ -3,7 +3,7 @@ category: Components title: TreeTransferModal 树穿梭框弹框 toc: content group: - title: 数据展示 + title: 进阶组件 order: 2 --- diff --git a/packages/meta/package.json b/packages/meta/package.json index 8374695..b1b58a0 100644 --- a/packages/meta/package.json +++ b/packages/meta/package.json @@ -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", diff --git a/packages/meta/src/CompareImage/CompareImage.tsx b/packages/meta/src/CompareImage/CompareImage.tsx index cda03e6..0b10d75 100644 --- a/packages/meta/src/CompareImage/CompareImage.tsx +++ b/packages/meta/src/CompareImage/CompareImage.tsx @@ -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((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(null); const [scale, setScale] = useState(0); @@ -95,7 +102,7 @@ const CompareImage = forwardRef((props, {!url ? (
暂无匹配数据
@@ -107,63 +114,65 @@ const CompareImage = forwardRef((props,
{/*
*/}
+ )} + {(showScore || score) && } + {showTools && ( +
+ + + {/* */} +
)} - {showScore && } -
- - - {/* */} - -
); }) diff --git a/packages/meta/src/CompareImage/demo/basic.tsx b/packages/meta/src/CompareImage/demo/basic.tsx index 11578c1..f9303fb 100644 --- a/packages/meta/src/CompareImage/demo/basic.tsx +++ b/packages/meta/src/CompareImage/demo/basic.tsx @@ -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 ( - - - + { + 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' + }) + }} + /> ) } diff --git a/packages/meta/src/CompareImage/demo/noTools.tsx b/packages/meta/src/CompareImage/demo/noTools.tsx new file mode 100644 index 0000000..e9d983d --- /dev/null +++ b/packages/meta/src/CompareImage/demo/noTools.tsx @@ -0,0 +1,21 @@ + +import React, { useRef } from 'react'; +import { CompareImage, Space } from '@zhst/meta' + + +export default () => { + const ref = useRef(null) + + return ( + + + + ) +} diff --git a/packages/meta/src/CompareImage/index.less b/packages/meta/src/CompareImage/index.less index 6b69829..a5955a8 100644 --- a/packages/meta/src/CompareImage/index.less +++ b/packages/meta/src/CompareImage/index.less @@ -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; } diff --git a/packages/meta/src/CompareImage/index.md b/packages/meta/src/CompareImage/index.md index d956e8d..6d9af33 100644 --- a/packages/meta/src/CompareImage/index.md +++ b/packages/meta/src/CompareImage/index.md @@ -9,14 +9,21 @@ title: CompareImage 图片预览 # CompareImage 图片预览 基本 +没有工具栏 ## 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; | - | | diff --git a/packages/meta/src/grid/index.zh-CN.md b/packages/meta/src/grid/index.zh-CN.md index 8fdc8e3..232f61a 100644 --- a/packages/meta/src/grid/index.zh-CN.md +++ b/packages/meta/src/grid/index.zh-CN.md @@ -2,8 +2,9 @@ category: Components subtitle: 栅格 group: 布局 -titltoc: content -: Grid 栅格 +title: Grid 栅格 +toc: content + --- 24 栅格系统。 diff --git a/packages/meta/src/utils/constants.ts b/packages/meta/src/utils/constants.ts index a10b628..48ce79d 100644 --- a/packages/meta/src/utils/constants.ts +++ b/packages/meta/src/utils/constants.ts @@ -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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'