From 1fdceb89b192b4f857b15872070d5d122b3a19c8 Mon Sep 17 00:00:00 2001 From: dev <710328466@qq.com> Date: Wed, 17 Jan 2024 19:25:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=9B=BE=E5=88=9D=E7=A8=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/BigImageModal/BigImageModal.tsx | 151 +++++++--- .../components/CombineImage/index.tsx | 28 ++ packages/biz/src/BigImageModal/demo/index.tsx | 66 +++++ packages/biz/src/BigImageModal/index.less | 269 +----------------- packages/biz/src/BigImageModal/index.md | 65 +---- packages/biz/src/BigImageModal/mock.ts | 149 ++++++++++ .../adapter/BigImageModalAdapter/index.tsx | 75 ++--- packages/biz/src/adapter/index.ts | 2 +- .../src/BigImagePreview/BigImagePreview.tsx | 10 +- packages/meta/src/BigImagePreview/index.tsx | 2 +- .../meta/src/CompareImage/CompareImage.tsx | 16 +- packages/meta/src/CompareImage/index.less | 3 +- .../src/descriptions/demo/component-token.tsx | 13 +- packages/meta/src/descriptions/style/index.ts | 10 +- packages/meta/src/divider/index.zh-CN.md | 8 +- packages/meta/src/index.tsx | 9 +- packages/meta/src/radio/index.ts | 2 +- packages/meta/src/score/Score.tsx | 57 ++++ packages/meta/src/score/index.less | 48 ++++ packages/meta/src/score/index.md | 17 ++ packages/meta/src/score/index.ts | 3 + packages/meta/tsconfig.json | 6 +- packages/types/BigImageModal.d.ts | 3 + 23 files changed, 546 insertions(+), 466 deletions(-) create mode 100644 packages/biz/src/BigImageModal/components/CombineImage/index.tsx create mode 100644 packages/biz/src/BigImageModal/demo/index.tsx create mode 100644 packages/meta/src/score/Score.tsx create mode 100644 packages/meta/src/score/index.less create mode 100644 packages/meta/src/score/index.md create mode 100644 packages/meta/src/score/index.ts diff --git a/packages/biz/src/BigImageModal/BigImageModal.tsx b/packages/biz/src/BigImageModal/BigImageModal.tsx index 28ae31c..a29d050 100644 --- a/packages/biz/src/BigImageModal/BigImageModal.tsx +++ b/packages/biz/src/BigImageModal/BigImageModal.tsx @@ -1,11 +1,14 @@ // @ts-nocheck import React, { useRef, useState } from 'react' -import { Descriptions, Modal, Tabs } from 'antd'; +import { ConfigProvider, Descriptions, Modal, Tabs, Button, BigImagePreview } from '@zhst/meta'; import classNames from 'classnames' -import type { ModalProps, DescriptionsProps, TabsProps } from 'antd' +import type { ModalProps, DescriptionsProps, TabsProps } from '@zhst/meta' import { get } from '@zhst/func'; +import { MODEL_TYPE, TAB_TYPE } from '@zhst/types'; import './index.less' import Navigation from './components/navigation'; +import CombineImage from './components/CombineImage' +import { BIG_IMAGE_DATA } from './mock' const DescriptionsItem = Descriptions.Item @@ -21,12 +24,14 @@ export interface BigImageModalProps extends ModalProps { } tabsConfig: { // 导航栏配置 data: Pick & { - key: 'NORMAL' | 'COMPATER' | 'TRACK' + key: TAB_TYPE } // 导航栏列表 } dataSource: any imageData: any relatedData: any + mode?: MODEL_TYPE + changeMode?: (mode: MODEL_TYPE) => void } const initialStyle ={ @@ -42,35 +47,52 @@ const BigImageModal: React.FC = (props) => { descriptionConfig = { data: [] }, - tabsConfig = { - data: [ + dataSource = [], + imageData = [], + relatedData = [], + mode = 'IMAGE', + changeMode + } = props + + const tabsConfig = { + data: [ { label: '对比图模式', key: '1', - children: '对比图组件', + children: ( + + ) }, { label: '场景图模式', key: '2', - children: '场景图组件', + children: ( + + ) } - ], - }, - dataSource = [], - imageData = [], - relatedData = [], - } = props + ] + } const showCropRef = useRef(false); const scaleRef = useRef(0); // ========================== 头切换 ========================= - const [activeKey, setActiveKey] = useState(get(tabsConfig, 'data[0].key')); + const [tab, setTab] = useState(get(tabsConfig, 'data[0].key')); + const [activeKey, setActiveKey] = useState('related'); // ========================= 预览切换下标 ========================= const [previewIndex, setPreviewIndex] = useState(0) const [isRelated, setIsRelated] = useState(false) + // ========================= 模式切换 ============================ + const [currentMode, setCurrentMode] = useState(mode) + return ( = (props) => { title={title} {...props} > - {descriptionConfig.data.map(descriptions => ( - - {descriptions.title} -

- } - column={8} - style={{ padding: '0 64px' }} - > - {descriptions?.children?.map(item => ( - {item.children} - ))} - - ))} - + + {descriptionConfig.data.map(descriptions => ( + + {descriptions.title} +

+ } + column={8} + style={{ padding: '0 64px' }} + > + {descriptions?.children?.map(item => ( + {item.children} + ))} + + ))} +
= (props) => { : {} } > + setTab(v)} + tabBarStyle={{ fontSize: '18px', fontWeight:'bold' }} + items={tabsConfig.data} + {...tabsConfig} + /> + {/* 切换按钮组件 */} { - activeKey !== 'TRACK' && ( + tab !== 'TRACK' && ( <> {/* ----------------------------------- 上一张按钮 ---------------------------------- */} = (props) => { ) } + {/* --------------------------------- 模型碰撞组件 --------------------------------- */} + {isRelated && tab !== 'TRACK' && ( +
+ { + setActiveKey(key); + }} + items={tabList.map((item) => { + return { + label: item.label, + key: item.key, + children: item.children, + }; + })} + /> +
+ )}
) diff --git a/packages/biz/src/BigImageModal/components/CombineImage/index.tsx b/packages/biz/src/BigImageModal/components/CombineImage/index.tsx new file mode 100644 index 0000000..54df452 --- /dev/null +++ b/packages/biz/src/BigImageModal/components/CombineImage/index.tsx @@ -0,0 +1,28 @@ + +import React, { FC } from 'react'; +import { CompareImage, Flex, Score } from '@zhst/meta' + +interface ComBineImageProps { + targetData: { + url: string; + score: number; + }[] + compareData: { + url: string; + score: number + }[] +} + +const ComBineImage: FC = (props) => { + const { targetData = [], compareData = [] } = props + + return ( + + + + + + ) +} + +export default ComBineImage diff --git a/packages/biz/src/BigImageModal/demo/index.tsx b/packages/biz/src/BigImageModal/demo/index.tsx new file mode 100644 index 0000000..d43a767 --- /dev/null +++ b/packages/biz/src/BigImageModal/demo/index.tsx @@ -0,0 +1,66 @@ + +import React from 'react'; +import { BigImageModal } from '@zhst/biz' +import { DescriptionsProps } from '@zhst/meta' +import { IMAGE_DATA, BIG_IMAGE_DATA } from '../mock' +import { bigImageModalAdapter } from '@zhst/biz' + +const descriptionList: DescriptionsProps['items'] = [ + { + title: '人员属性', + children: [ + { + key: '1', + label: '性别', + children: '男', + }, + { + key: '2', + label: '年龄', + children: '成年', + }, + { + key: '3', + label: '帽子', + children: '无', + }, + { + key: '4', + label: '上身颜色', + children: '灰', + }, + { + key: '5', + label: '下身颜色', + children: '蓝色', + }, + { + key: '6', + label: '附着物', + children: '无', + }, + { + key: '7', + label: '骑行', + children: '否', + }, + ] + } +]; + +export default () => { + const imageDataAdapter = bigImageModalAdapter(IMAGE_DATA) + + console.log(imageDataAdapter) + + return ( + + ) +} diff --git a/packages/biz/src/BigImageModal/index.less b/packages/biz/src/BigImageModal/index.less index 2253df2..f4439e8 100644 --- a/packages/biz/src/BigImageModal/index.less +++ b/packages/biz/src/BigImageModal/index.less @@ -1,5 +1,4 @@ .zhst-image { - .zhst-dialog-content { box-shadow: 0 4px 12px rgb(0 0 0 / 20%); } @@ -8,7 +7,6 @@ &-view-container { position: relative; width: 100%; - height: 532px; margin-bottom: 16px; &__nav { @@ -227,232 +225,6 @@ } } -.zhst-image__header { - width: 100%; - // margin-top: 3px; - margin-bottom: 10px; - - &__pad0 { - padding: 0; - } - - &__pad66 { - padding: 0 66px; - } - - &__bar { - display: flex; - width: 100%; - background: #f6f6f6; - // box-shadow: 0px 0px 8px 0px rgba(172, 172, 172, 0.5); - justify-content: center; - // border-color: #f0f0f0; - // border-bottom-width: 1px; - // border-bottom-style: solid; - } - - &__barNoColor { - display: flex; - width: 100%; - justify-content: center; - - border-color: #f0f0f0; - border-bottom-width: 1px; - border-bottom-style: solid; - } - - &__item { - position: relative; - display: flex; - height: 40px; - align-items: center; - justify-content: center; - margin: 0 15px; - color: #999; - cursor: pointer; - font-size: 14px; - font-weight: bold; - line-height: 19px; - transition: font-size 0.3s ease; - - &:hover { - // font-size: 18px; - color: #333; - } - - &::before { - position: absolute; - bottom: 0; - left: 50%; - width: 0; - border-bottom: 2px solid #09f; - content: ''; - transition: all 0.3s ease; - } - - &--active { - background-color: transparent; - color: #333; - font-size: 18px; - - // color: #0099ff; - &::before { - left: 0; - width: 100%; - } - } - } -} - - -.zhst-image__compater-view { - display: flex; - width: 100%; - align-items: center; - justify-content: center; - - &>div:first-child { - margin-right: 25px; - } - - &>div:last-child { - margin-left: 25px; - } - - &__container { - position: relative; - width: 345px; - height: 460px; - box-sizing: content-box; - border: 1px solid #f0f0f0; - } - - &__view { - width: 345px; - height: 460px; - } - - &__label { - position: absolute; - z-index: 99; - top: 0; - left: 0; - display: flex; - height: 34px; - align-items: center; - justify-content: center; - - // width: 48px; - padding: 0 6px; - background: #09f; - color: #fff; - } - - &__tool { - display: flex; - width: 345px; - height: 40px; - align-items: center; - justify-content: center; - background: #f9f9f9; - - i, - span { - color: #333 !important; - } - - i { - margin-right: 4px; - } - - &>*:not(:last-child) { - margin-right: 20px; - } - - &__scale { - display: inline-block; - width: 38px; - height: 16px; - - // margin-left: 15px; - box-sizing: content-box; - border: 1px solid rgb(77 77 77 / 100%); - background: rgb(255 255 255 / 100%); - border-radius: 2px; - color: #4d4d4d; - cursor: default; - font-size: 12px; - line-height: 16px; - text-align: center; - } - - &__line { - width: 1px; - height: 14px; - background: #e6e6e6; - } - } - - &__empty { - position: absolute; - z-index: 9; - display: flex; - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; - background: #f9f9f9; - transform: translateY(-100%); - - &>img { - width: 140px; - height: 80px; - } - - &--text { - color: #999; - font-size: 14px; - line-height: 22px; - } - } - - &__scoll-module { - position: absolute; - top: 0%; - left: 0%; - display: flex; - width: 100%; - height: 100%; - align-items: flex-end; - justify-content: space-between; - pointer-events: none; - - &__btn { - display: flex; - width: 50px; - height: 50px; - align-items: center; - justify-content: center; - margin: 6px; - border-radius: 50%; - opacity: 0.5; - pointer-events: all; - - &>span { - display: flex; - align-items: center; - justify-content: center; - } - } - - &__btn:hover { - background-color: #09f !important; - color: #fff !important; - } - } -} - .zhst-image__trackmodel { &__panel { position: relative; @@ -645,23 +417,6 @@ } } -.zhst-image__null { - display: flex; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; - - &__text { - // margin-left: 105px; - margin-top: 8px; - color: #999; - font-size: 14px; - width: 100%; - text-align: center; - } -} - .zhst-image__attributePanel { margin: 0 66px; background: #f6f6f6; @@ -710,45 +465,27 @@ .relatedContent { width: 100%; height: 100px; - display: flex; .relatedPics { width: 742px; height: 100px; - // display: flex; - // box-sizing: border-box; - // background: #fafafa; - // border-radius: 2px; - // border: 1px solid #f0f0f0; - // .LeftBtn, - // .RighttBtn { - // width: 34px; - // height: 100%; - // display: flex; - // justify-content: center; - // align-items: center; - // } - // .ListContent { - // flex: 1; - // height: 100%; - // } } .disabled { - color: rgba(0, 0, 0, 0.25); + color: rgba(0, 0, 0, 25%); } .relatedBtn { flex: 1; font-size: 14px; - color: #333333; + color: #333; display: flex; align-items: flex-end; cursor: pointer; &:hover { - color: #0099ff; + color: #09f; } } } diff --git a/packages/biz/src/BigImageModal/index.md b/packages/biz/src/BigImageModal/index.md index 621318d..f002565 100644 --- a/packages/biz/src/BigImageModal/index.md +++ b/packages/biz/src/BigImageModal/index.md @@ -9,68 +9,5 @@ group: # 大图弹框 -```jsx -import React from 'react'; -import { Button } from 'antd' -import { BigImageModal } from '@zhst/biz' -import { DescriptionsProps } from '@zhst/biz' -import { IMAGE_DATA } from './mock.ts' +基本 -const descriptionList: DescriptionsProps['items'] = [ - { - title: '人员属性', - children: [ - { - key: '1', - label: '性别', - children: '男', - }, - { - key: '2', - label: '年龄', - children: '成年', - }, - { - key: '3', - label: '帽子', - children: '无', - }, - { - key: '4', - label: '上身颜色', - children: '灰', - }, - { - key: '5', - label: '下身颜色', - children: '蓝色', - }, - { - key: '6', - label: '附着物', - children: '无', - }, - { - key: '7', - label: '骑行', - children: '否', - }, - ] - } -]; - -export default () => { - console.log(IMAGE_DATA) - - return ( - - ) -} -``` diff --git a/packages/biz/src/BigImageModal/mock.ts b/packages/biz/src/BigImageModal/mock.ts index 28f7a67..d750fdb 100644 --- a/packages/biz/src/BigImageModal/mock.ts +++ b/packages/biz/src/BigImageModal/mock.ts @@ -900,3 +900,152 @@ export const IMAGE_DATA = { }, "specialTitle": "" } + +export const BIG_IMAGE_DATA = [ + { + imageKey: 'http://10.0.0.120:30003/file/singer-20240110/1/5/1744894622934503424.jpg', + odRect:{ + "x":0.5445312, + "y":0.19166666, + "w":0.08671875, + "h":0.40138888 + }, + attachImg: [ + { + "url": "http://10.0.0.120:30003/file/singer-20240110/1/5/1744894622695428096.jpg","label": "形体" + },{ + "url": "http://10.0.0.120:30003/file/singer-20240110/1/5/1744894588427964418.jpg", + "label": "人脸" + } + ], + score: '0.6', // 人脸质量分 + showScore: true, // 人脸质量分 + cameraPosition: 'string', // 摄像头位置 + time: '2022-01-01', // 摄像头拍摄时间 + objects: [ + { + "objectIndex": { + "objectId": "1746832189053474816", + "solutionId": "0", + "deviceId": "0", + "fragmentId": "0" + }, + "objectType": "OBJECT_TYPE_PEDESTRAIN", + "sourceObjectId": "0", + "level": 0, + "confidence": 0.881164, + "frameInfo": { + "frameId": "0", + "frameTimestamp": "1705312223057", + "width": 0, + "height": 0, + "originWidth": 0, + "originHeight": 0, + "offsetTime": "0", + "skipNumber": "0" + }, + "infoOnSource": { + "bboxInFrame": { + "bboxRatio": { + "x": 0.61418945, + "y": 0.34309354, + "w": 0.067661405, + "h": 0.34659258 + }, + }, + "countInSource": 0, + "indexInSource": 0 + }, + "qualityScore": 0, + } + ] + }, + { + imageKey: 'http://10.0.0.120:30003/file/singer-20240115/1/9/1746795581994436608.jpg', + odRect:{ + "x":0.553125,"y":0.29722223,"w":0.048958335,"h":0.2462963 + }, + attachImg: [ + { + "url": "http://10.0.0.120:30003/file/singer-20240115/1/9/1746795581163964416.jpg","label": "形体" + },{ + "url": "http://10.0.0.120:30003/file/singer-20240115/1/9/1746795546867140608.jpg", + "label": "人脸" + } + ], + score: 0.815207, // 人脸质量分 + showScore: true, // 人脸质量分 + cameraPosition: 'string', // 摄像头位置 + time: '2022-01-01', // 摄像头拍摄时间 + objects: [ + { + "objectIndex": { + "objectId": "1746816737430472704", + "solutionId": "0", + "deviceId": "0", + "fragmentId": "0" + }, + "objectType": "OBJECT_TYPE_PEDESTRAIN", + "sourceObjectId": "0", + "frameInfo": { + "frameId": "0", + "frameTimestamp": "1705308539109", + "width": 0, + "height": 0, + "originWidth": 0, + "originHeight": 0, + "offsetTime": "0", + "skipNumber": "0" + }, + "infoOnSource": { + "bboxInFrame": { + "bboxRatio": { + "x": 0.5519352, + "y": 0.2965385, + "w": 0.05185461, + "h": 0.24698898 + }, + }, + "countInSource": 0, + "indexInSource": 0 + }, + "qualityScore": 0, + }, + { + "objectIndex": { + "objectId": "1746816737430472705", + "solutionId": "0", + "deviceId": "0", + "fragmentId": "0" + }, + "objectType": "OBJECT_TYPE_PEDESTRAIN", + "sourceObjectId": "0", + "level": 0, + "confidence": 0.9310699, + "frameInfo": { + "frameId": "0", + "frameTimestamp": "1705308539109", + "width": 0, + "height": 0, + "originWidth": 0, + "originHeight": 0, + "offsetTime": "0", + "skipNumber": "0" + }, + "infoOnSource": { + "bboxInFrame": { + "bboxRatio": { + "x": 0.58543766, + "y": 0.3203356, + "w": 0.052037954, + "h": 0.2664015 + }, + }, + "countInSource": 0, + "indexInSource": 0 + }, + "qualityScore": 0, + } + ] + } + ] diff --git a/packages/biz/src/adapter/BigImageModalAdapter/index.tsx b/packages/biz/src/adapter/BigImageModalAdapter/index.tsx index 3aa70ec..c3b7a59 100644 --- a/packages/biz/src/adapter/BigImageModalAdapter/index.tsx +++ b/packages/biz/src/adapter/BigImageModalAdapter/index.tsx @@ -2,44 +2,12 @@ * 适配老的大屏组件数据格式传入 */ import React from 'react'; -import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect, ViewOption, AlignType, IScreenshotButtonProp, ODRECT } from '@zhst/types' +import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect, IScreenshotButtonProp } from '@zhst/types' +import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta' export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK'; export type MODEL_TYPE = 'VIDEO' | 'IMAGE'; -export interface ImgViewProps extends React.HTMLAttributes { - imageKey: string; //不在监听url变化 更新走销毁 - odRect: ODRECT; - attachImg?: Array<{ label: string; url: string }>; - showAttachImgLabel: boolean; - /* 截图渲染 */ - screenshotButtonAlign: AlignType; - screenshotButtonRender: (screenshotButtonProp: IScreenshotButtonProp) => React.ReactElement; - /* 可观测值 */ - scale$?: number; - showCrop$?: boolean; - hideLeftTopBtn?: boolean; - score?: number; - viewOption?: ViewOption; -} - -export interface VideoViewProps { - /* 播放地址 */ - flvUrl: string; - /* 播放总时间 */ - maxDuration?: number; - /* 截图渲染 */ - screenshotButtonAlign?: AlignType; - screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => React.ReactElement; - /* 默认截图框 */ - defautlNormalizationRect?: Rect; - /* 截图回调 */ - onCropChange?: (showCrop: boolean, normalizationRect: null | Rect) => void; - - /* 可观测值 */ - showCrop$?: boolean; -} - export interface CarouselProps { hasPre?: boolean; hasNext?: boolean; @@ -60,21 +28,6 @@ export interface HeaderProps { tabsFilter: TAB_TYPE[]; } -export interface ImgViewRef { - /* 图片实例 */ - imgInsRef: React.MutableRefObject; - /* 切换图片模式 */ - setShowCrop: React.Dispatch>; -} - - -export interface VideoViewRef { - /* 当前图片模式 */ - cropAble: boolean; - setShowCrop: React.Dispatch>; - downloadVideoframe: () => void; -} - export interface ParamProps { tab: string; selectItem: ISelectItem; @@ -134,9 +87,9 @@ interface IOldImageData { hasNext?: boolean; selectIndex?: number; onSelectIndexChange?: (i: number) => void; - dataSource: any[]; - dataSources: any[]; - relatedData?: any[]; + dataSource: BigImageData[]; + dataSources: BigImageData[]; + relatedData?: BigImageData[]; transformPropFunc: (item: any) => ISelectItem; transformVideoPropFunc: ( item: ISelectItem @@ -170,8 +123,18 @@ export interface ToolProps { disableVideo: boolean; } -export default (data: IOldImageData) => { - const newData = data - - return newData +export interface ImageModalDataProps { + targetData: [] + compactData: [] } + +const adapter = (data: IOldImageData): ImageModalDataProps => { + + return { + targetData: [], + compactData: [], + } +} + + +export default adapter diff --git a/packages/biz/src/adapter/index.ts b/packages/biz/src/adapter/index.ts index bd39690..c6cf646 100644 --- a/packages/biz/src/adapter/index.ts +++ b/packages/biz/src/adapter/index.ts @@ -1 +1 @@ -export { default as BigImageModalAdapter } from './BigImageModalAdapter' +export { default as bigImageModalAdapter } from './bigImageModalAdapter' diff --git a/packages/meta/src/BigImagePreview/BigImagePreview.tsx b/packages/meta/src/BigImagePreview/BigImagePreview.tsx index f7fbf93..a196400 100644 --- a/packages/meta/src/BigImagePreview/BigImagePreview.tsx +++ b/packages/meta/src/BigImagePreview/BigImagePreview.tsx @@ -47,17 +47,17 @@ export interface ImgViewProps extends React.HTMLAttributes { time?: string | number objects: any[] }> - showAttachImgLabel: boolean; // 是否显示缩略图 - showOpt: boolean; // 是否显示操作面板 + showAttachImgLabel?: boolean; // 是否显示缩略图 + showOpt?: boolean; // 是否显示操作面板 width?: string | number; // 画布宽度 height?: string | number; // 画布高度 /* 截图渲染 */ - screenshotButtonAlign: AlignType; - screenshotButtonRender: (screenshotButtonProp: IScreenshotButtonProp) => ReactElement; + screenshotButtonAlign?: AlignType; + screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => ReactElement; hideLeftTopBtn?: boolean; showScore?: boolean // 是否显示相似度 viewOption?: ViewOption; - objects: IOdRectOrigin[] // 图片人物框选 + objects?: IOdRectOrigin[] // 图片人物框选 } export interface ImgViewRef { /* 图片实例 */ diff --git a/packages/meta/src/BigImagePreview/index.tsx b/packages/meta/src/BigImagePreview/index.tsx index b24e175..17118c8 100644 --- a/packages/meta/src/BigImagePreview/index.tsx +++ b/packages/meta/src/BigImagePreview/index.tsx @@ -1,5 +1,5 @@ import BigImagePreview from './BigImagePreview' -export type { ImgViewProps } from './BigImagePreview' +export type { ImgViewProps, ImgViewRef } from './BigImagePreview' export default BigImagePreview diff --git a/packages/meta/src/CompareImage/CompareImage.tsx b/packages/meta/src/CompareImage/CompareImage.tsx index 8ad3926..e88e891 100644 --- a/packages/meta/src/CompareImage/CompareImage.tsx +++ b/packages/meta/src/CompareImage/CompareImage.tsx @@ -15,14 +15,14 @@ export interface CompareImageProps { * @description 属性描述 * @default "默认值" */ - label: string; - openRoll?: boolean; //开启滚动模式 + label?: string; + openRoll?: boolean; //开启翻页 dataSource?: Array<{ url: string; - score: number; + score: number | string; }>; showScore?: boolean; // 是否展示相似度 - current: number; // 当前图片下标 + current?: number; // 当前图片下标 } export interface CompareImageRefProps { @@ -31,7 +31,7 @@ export interface CompareImageRefProps { // 对比图组件 const CompareImage = forwardRef((props, ref) => { - const { label, openRoll = false, dataSource = [], showScore = true, current = 0 } = props; + const { label = '标题', openRoll = true, dataSource = [], showScore = true, current = 0 } = props; const imgContainerRef = useRef(null); const imgInsRef = useRef(null); const [scale, setScale] = useState(0); @@ -40,6 +40,8 @@ const CompareImage = forwardRef((props, // 初始化页面 useEffect(() => { + if (!dataSource?.length) return + const handleTransformChange = addEventListenerWrapper( imgContainerRef.current, 'viewer-transform-change', @@ -87,6 +89,8 @@ const CompareImage = forwardRef((props, handleIndexChange })); + if (!dataSource) return null + return (
{label}
@@ -125,7 +129,7 @@ const CompareImage = forwardRef((props,
)} - {showScore && } + {showScore && }