fix: 修改组件名

packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
 import WindowToggle from './components/WindowToggle';
 import WarningRecordList from './components/WarningRecordList';
-
+import { ConfigProvider } from '@zhst/meta';
 interface RealTimeMonitorProps {
+  prefixCls?: string
   videoDataSource?: VideoPlayerCardProps[];
   handleWindowClick?: (key?: string) => void;
   handleCloseButtonClick?: (key?: string) => void;
@@ -32,7 +33,11 @@ interface RealTimeMonitorProps {
 
 export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
 
-  const { videoDataSource,
+  const { ConfigContext } = ConfigProvider;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const {
+    prefixCls: customizePrefixCls,
+    videoDataSource,
     handleWindowClick,
     handleCloseButtonClick,
     selectedWindowKey,
@@ -43,9 +48,10 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
     selectedRecordId,
     isRecordListLoading,
   } = props
+  const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls);
 
   return (
-    <div className='zhst-biz-real-time-monitor' style={{ display: 'flex' }} >
+    <div className={componentName} style={{ display: 'flex' }} >
       <WindowToggle
         selectedWindowKey={selectedWindowKey}
         dataSource={videoDataSource}

packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx

@@ -1,10 +1,11 @@
 import { Card, Space, CardProps, Spin, Button } from 'antd';
 import { theme } from 'antd/lib';
-import { VideoPlayer, type VideoViewRef } from '@zhst/meta';
-import React, { useState, useEffect, ReactNode, useRef } from 'react';
+import { ConfigProvider, VideoPlayer, type VideoViewRef, } from '@zhst/meta';
+import React, { useState, useEffect, ReactNode, useRef, useContext } from 'react';
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less'
 export interface VideoPlayerCardProps {
+  prefixCls?: string;
   windowKey?: string;
   selectedWindowKey?: string;
   showType?: 'video' | "image";
@@ -21,8 +22,10 @@ export interface VideoPlayerCardProps {
 
 export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
 
-  const componentName = `zhst-biz-video-player-card`;
-  const { showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props;
+  const { ConfigContext } = ConfigProvider;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props;
+  const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls);
   const [cardContent, setCardContent] = useState<JSX.Element | null>(null);
   const { useToken } = theme
   const { token } = useToken()

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -1,7 +1,8 @@
-import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
+import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react';
 import { Modal, ModalProps, Space, SpaceProps } from 'antd';
 import theme from 'antd/lib/theme';
 import { DownloadOutlined } from '@ant-design/icons';
+import { ConfigProvider } from '@zhst/meta';
 import './index.less'
 
 type ViewLargerImageModalParams = {
@@ -18,6 +19,7 @@ export interface ViewLargerImageModalRef {
 }
 
 export interface ViewLargerImageModalProps {
+  prefixCls?: string
   imgStyle?: React.CSSProperties;
   downloadImg?: (imgSrc?: string) => void;
   title?: string;
@@ -28,8 +30,11 @@ export interface ViewLargerImageModalProps {
 
 export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
   (props, ref) => {
-
-    const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
+    
+    const { ConfigContext } = ConfigProvider;
+    const { getPrefixCls } = useContext(ConfigContext);
+    const { prefixCls: customizePrefixCls, modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
+    const componentName = getPrefixCls('biz-view-warning-larger-image-modalr', customizePrefixCls);
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
@@ -53,7 +58,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
 
     return (
       <Modal
-        className='zhst-biz-view-warning-larger-image-modal'
+        className={componentName}
         open={open}
         destroyOnClose
         title={title}

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,7 +1,8 @@
 import { Card, Space, Divider, CardProps } from 'antd';
 import { theme } from 'antd/lib';
-import React from 'react';
+import React, { useContext } from 'react';
 import dayjs from 'dayjs';
+import { ConfigProvider } from '@zhst/meta';
 import './index.less'
 export interface IRecord {
 
@@ -53,6 +54,7 @@ export interface IRecord {
 };
 
 export interface WarningRecordCardProps {
+  prefixCls?: string;
   record?: IRecord;
   onRecordClick?: (record?: IRecord) => void;
   style?: React.CSSProperties;
@@ -63,9 +65,11 @@ export interface WarningRecordCardProps {
 };
 
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
-
-  const componentName = `zhst-biz-warning-record-card`;
-  const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
+  
+  const { ConfigContext } = ConfigProvider;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
+  const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls);
   const { imgSrc, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
   const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
   const warningTimeShow = warningTime ? warningTime : formattedDate

packages/meta/src/ButtonList/ButtonList.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useMemo, ReactNode, useRef, useEffect } from 'react';
+import React, { useState, useMemo, ReactNode, useRef, useEffect, useContext } from 'react';
 import { Button, Col, Dropdown, Row } from 'antd';
 import { Gutter } from 'antd/es/grid/row';
+import { ConfigContext } from '../config-provider';
 import './index.less';
 
 
@@ -17,18 +18,20 @@ export interface IButtonItem {
 };
 export interface IButtonItemWithoutWeight extends Omit<IButtonItem, 'weight'> { }
 export interface ButtonListProps {
+  prefixCls?: string;
   buttons: Array<IButtonItem>
   gutter?: Gutter;
 };
 
-const componentName = 'zhst-button-list';
+const ButtonList: React.FC<ButtonListProps> = (props) => {
 
-const ButtonList: React.FC<ButtonListProps> = (Props) => {
-  const { buttons, gutter } = Props
-  const [activeKey, setActiveKey] = useState<string | null>(null);
+  const { getPrefixCls } = useContext(ConfigContext);
+  const { buttons, gutter, prefixCls: customizePrefixCls } = props
+  const componentName = getPrefixCls('button-list', customizePrefixCls);
   const buttonListRef = useRef<HTMLDivElement>(null);
-  const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0)
   const centerButtonRef = useRef<HTMLDivElement>(null);
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+  const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0)
 
   const sortedButtons = useMemo(() => {
     let buttonList = buttons.map((btn, index) => {