From d8dab224cae1f3fe2f849075797151b0430a28b5 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Thu, 29 Feb 2024 13:48:50 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=88=97=E8=A1=A8=20ButtonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 79 ++++++++++++++++++ packages/meta/src/ButtonList/index.less | 14 ++++ packages/meta/src/ButtonList/index.md | 90 +++++++++++++++++++++ packages/meta/src/ButtonList/index.tsx | 4 + packages/meta/src/index.tsx | 2 +- 5 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 packages/meta/src/ButtonList/ButtonList.tsx create mode 100644 packages/meta/src/ButtonList/index.less create mode 100644 packages/meta/src/ButtonList/index.md create mode 100644 packages/meta/src/ButtonList/index.tsx diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx new file mode 100644 index 0000000..f5e7dad --- /dev/null +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -0,0 +1,79 @@ +import React, {useState ,useMemo ,ReactNode} from 'react'; +import './index.less'; +import { Button, Col, Dropdown, Row } from 'antd/es'; +import { Gutter } from '../grid/row'; + +type ButtonItem = { + key: string; + text: ReactNode; + onClick: () => void; + children?: Array; + // 用于排序 + weight: number; + icon?: ReactNode + className?: string; +}; + +type Props = { + buttons: Array + customButton?: ButtonItem; + gutter?: Gutter; +}; + +const componentName = 'zhst-button-list'; + +const ButtonList: React.FC = (Props) => { + const { buttons, customButton ,gutter} = Props + const [activeKey, setActiveKey] = useState(null); + + + const sortedButtons = useMemo(() => { + let buttonList=[...buttons] + + if (customButton) { + buttonList = [...buttons,customButton] + } + + return buttonList.sort((a, b) => a.weight - b.weight); + }, [buttons, customButton]); + + const handleButtonClick = (key: string, item: ButtonItem) => { + setActiveKey(activeKey === key ? null : key); + if (!item.children ) { + item.onClick(); + } + }; + + return ( +
+ + {sortedButtons.map((item) => ( + + {item.children ? ( + ({ + key: child.key, + label: {child.text}, + onClick: () => child.onClick(), + })), + }} + open={activeKey === item.key} + onOpenChange={(visible:boolean) => { + if (!visible) setActiveKey(null); + }} + trigger={['click']} + > + + + ) : ( + + )} + + ))} + +
+ ); +}; + +export default ButtonList; \ No newline at end of file diff --git a/packages/meta/src/ButtonList/index.less b/packages/meta/src/ButtonList/index.less new file mode 100644 index 0000000..a0eae06 --- /dev/null +++ b/packages/meta/src/ButtonList/index.less @@ -0,0 +1,14 @@ + + + + +.zhst-button-list { + .ant-btn-text:hover{ + background: none !important; + color: #247fdb !important; + } +} + + + + diff --git a/packages/meta/src/ButtonList/index.md b/packages/meta/src/ButtonList/index.md new file mode 100644 index 0000000..13e4592 --- /dev/null +++ b/packages/meta/src/ButtonList/index.md @@ -0,0 +1,90 @@ +--- +group: 通用 +category: Components +subtitle: 按钮列表 +title: ButtonList 按钮列表组件 +--- + +# ButtonList 按钮列表组件 + +```jsx +import React, { useState, useRef ,useMemo} from 'react'; +import { Button, Space } from 'antd' +import { DownloadOutlined } from '@ant-design/icons'; +import { ButtonList } from '@zhst/meta' + + + + + +export default () => { +const [isPlay,setIsPlay] = useState(true); + +const props = useMemo(() => { + return { + buttons: [ + { + key: 'button1', + text: '一级按钮1', + onClick: () => console.log('一级按钮1被点击'), + children: [ + { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击') , icon: }, + { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, + ], + weight: 1, + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + children: null, + weight: 2, + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + children: null, + weight: 3, + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + weight: 4, + }, + { + key: 'button5', + text: '一级按钮5' , + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + weight: 5, + }, + ], + customButton: + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => {setIsPlay(!isPlay)}, + weight: 3.5, + } +}},[isPlay]) + return ( + + + + ) +} +``` + +## API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ---- | ---- | ---- | ------ | ---- | +| buttons | 传入按钮列表 |ButtonItem[]| - | - | +| customButton | 传入自定义按钮 | ButtonItem | - | - | +| gutter | 控制间隙 | Gutter | - | - | + diff --git a/packages/meta/src/ButtonList/index.tsx b/packages/meta/src/ButtonList/index.tsx new file mode 100644 index 0000000..496c280 --- /dev/null +++ b/packages/meta/src/ButtonList/index.tsx @@ -0,0 +1,4 @@ +import ButtonList from './ButtonList' + + +export default ButtonList diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx index 544fb69..9fcf70f 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -80,4 +80,4 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi export { default as Tour } from './tour' export type { TourLocale, TourProps, TourStepProps } from './tour/interface' export { default as Segmented } from './segmented' -export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented' +export { default as ButtonList } from './ButtonList' From 34af6f9c5eb489ddd577078fbb33101cb4ea612b Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Thu, 29 Feb 2024 13:53:47 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=88=97=E8=A1=A8=20ButtonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/meta/src/index.tsx b/packages/meta/src/index.tsx index 9fcf70f..84e9055 100644 --- a/packages/meta/src/index.tsx +++ b/packages/meta/src/index.tsx @@ -80,4 +80,5 @@ export type { TooltipAlignConfig, TooltipProps, TooltipPlacement, TooltipPropsWi export { default as Tour } from './tour' export type { TourLocale, TourProps, TourStepProps } from './tour/interface' export { default as Segmented } from './segmented' +export type { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from './segmented' export { default as ButtonList } from './ButtonList' From a3aefaf499aeaaa5c00bf88262e082fa7f6fa2f7 Mon Sep 17 00:00:00 2001 From: YuanHongbo <782242184@qq.com> Date: Sat, 20 Apr 2024 15:36:36 +0800 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E5=A4=A7=E5=9B=BE?= =?UTF-8?q?=E3=80=80buttonList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 90 ++++++++++++++------ packages/meta/src/ButtonList/demo/base.tsx | 69 +++++++++++++++ packages/meta/src/ButtonList/demo/index.less | 5 ++ packages/meta/src/ButtonList/index.less | 9 +- packages/meta/src/ButtonList/index.md | 73 +--------------- 5 files changed, 142 insertions(+), 104 deletions(-) create mode 100644 packages/meta/src/ButtonList/demo/base.tsx create mode 100644 packages/meta/src/ButtonList/demo/index.less diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index f5e7dad..22db3dc 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -1,54 +1,83 @@ -import React, {useState ,useMemo ,ReactNode} from 'react'; +import React, { useState, useMemo, ReactNode, useRef, useEffect } from 'react'; +import { Button, Col, Dropdown, Row } from 'antd'; +import { Gutter } from 'antd/es/grid/row'; import './index.less'; -import { Button, Col, Dropdown, Row } from 'antd/es'; -import { Gutter } from '../grid/row'; -type ButtonItem = { + +export interface IButtonItem { key: string; text: ReactNode; onClick: () => void; - children?: Array; + children?: Array>; // 用于排序 - weight: number; + weight: number; icon?: ReactNode className?: string; + isCenter?: boolean; }; - -type Props = { - buttons: Array - customButton?: ButtonItem; +export interface IButtonItemWithoutWeight extends Omit { } +export interface ButtonListProps { + buttons: Array gutter?: Gutter; }; const componentName = 'zhst-button-list'; -const ButtonList: React.FC = (Props) => { - const { buttons, customButton ,gutter} = Props +const ButtonList: React.FC = (Props) => { + const { buttons, gutter } = Props const [activeKey, setActiveKey] = useState(null); + const buttonListRef = useRef(null); + const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) + const centerButtonRef = useRef(null); const sortedButtons = useMemo(() => { - let buttonList=[...buttons] - - if (customButton) { - buttonList = [...buttons,customButton] - } + let buttonList = [...buttons] - return buttonList.sort((a, b) => a.weight - b.weight); - }, [buttons, customButton]); - const handleButtonClick = (key: string, item: ButtonItem) => { + return buttonList?.sort((a, b) => a.weight - b.weight); + }, [buttons]); + + const handleButtonClick = (key: string, item: IButtonItem) => { setActiveKey(activeKey === key ? null : key); - if (!item.children ) { + if (!item.children) { item.onClick(); } }; + useEffect(() => { + // 如果获取不到 需要居中的 + if (!centerButtonRef) return + // 获取 buttonList 宽度 + const buttonListWidth: number = buttonListRef.current?.offsetWidth as number; + // 获取 centerButton 宽度 + const centerButtonWidth: number = centerButtonRef.current?.offsetWidth as number + // 获取 buttonList 相对视口左偏移量 + const buttonListOffset: number = buttonListRef.current?.offsetLeft as number + // 获取 buttonList 中心点 距视口左边距离 + const buttonListCenterOffset = buttonListOffset + buttonListWidth / 2 + // 获取 centerButton 中心点 相对视口左偏移量 + const centerButtonOffset: number = centerButtonRef.current?.offsetLeft as number + centerButtonWidth / 2 + /* + 计算 centerButton 修正距离 + 用 buttonList 中心点 距视口左边距离 - centerButton 中心点 相对视口左偏移量 + 作为 buttonListWrap marginLeft 修正距离 + */ + + // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 + const buttonListWrapMarginLeft = (buttonListCenterOffset - centerButtonOffset) * 2 + setButtonListWrapMarginLeft(buttonListWrapMarginLeft) + + }, []) + + + + return ( -
- - {sortedButtons.map((item) => ( - +
+ + {sortedButtons?.map((item) => ( + {item.children ? ( = (Props) => { })), }} open={activeKey === item.key} - onOpenChange={(visible:boolean) => { + onOpenChange={(visible: boolean) => { if (!visible) setActiveKey(null); }} trigger={['click']} > - + ) : ( - + )} ))} diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx new file mode 100644 index 0000000..fd7f191 --- /dev/null +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -0,0 +1,69 @@ +import React, { useState, useMemo } from 'react'; +import { Space } from 'antd' +import { DownloadOutlined } from '@ant-design/icons'; +import { ButtonList } from '@zhst/meta' +import { ButtonListProps } from '../ButtonList'; +import "./index.less" + +export default () => { + const [isPlay, setIsPlay] = useState(true); + + const props: ButtonListProps = useMemo(() => { + return { + buttons: [ + { + key: 'button1', + text: '一级按钮1', + onClick: () => console.log('一级按钮1被点击'), + children: [ + { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击'), icon: }, + { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, + ], + weight: 1, + // icon:, + }, + { + key: 'button2', + text: '一级按钮2', + onClick: () => console.log('一级按钮2被点击'), + weight: 2, + }, + { + key: '播放', + text: isPlay ? '播放按钮' : '图片按钮', + onClick: () => { setIsPlay(!isPlay) }, + weight: 3, + isCenter: true + }, + { + key: 'button3', + text: '一级按钮3', + onClick: () => console.log('一级按钮3被点击'), + weight: 3, + }, + { + key: 'button4', + text: '一级按钮4', + onClick: () => console.log('一级按钮4被点击'), + weight: 4, + // isCenter: true + + }, + { + key: 'button5', + text: '一级按钮5', + onClick: () => console.log('一级按钮5被点击'), + children: [ + { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, + ], + weight: 5, + }, + ], + } + }, [isPlay]) + return ( + + + + ) +} \ No newline at end of file diff --git a/packages/meta/src/ButtonList/demo/index.less b/packages/meta/src/ButtonList/demo/index.less new file mode 100644 index 0000000..8e145ab --- /dev/null +++ b/packages/meta/src/ButtonList/demo/index.less @@ -0,0 +1,5 @@ +#buttonlist-demo-base { + .dumi-default-previewer-demo>div { + width: 100%; + } +} \ No newline at end of file diff --git a/packages/meta/src/ButtonList/index.less b/packages/meta/src/ButtonList/index.less index a0eae06..3ec235b 100644 --- a/packages/meta/src/ButtonList/index.less +++ b/packages/meta/src/ButtonList/index.less @@ -1,10 +1,11 @@ - - - .zhst-button-list { + width: 100%; + display: flex; + justify-content: center; + .ant-btn-text:hover{ - background: none !important; + background: none !important ; color: #247fdb !important; } } diff --git a/packages/meta/src/ButtonList/index.md b/packages/meta/src/ButtonList/index.md index 13e4592..980fd8c 100644 --- a/packages/meta/src/ButtonList/index.md +++ b/packages/meta/src/ButtonList/index.md @@ -7,78 +7,7 @@ title: ButtonList 按钮列表组件 # ButtonList 按钮列表组件 -```jsx -import React, { useState, useRef ,useMemo} from 'react'; -import { Button, Space } from 'antd' -import { DownloadOutlined } from '@ant-design/icons'; -import { ButtonList } from '@zhst/meta' - - - - - -export default () => { -const [isPlay,setIsPlay] = useState(true); - -const props = useMemo(() => { - return { - buttons: [ - { - key: 'button1', - text: '一级按钮1', - onClick: () => console.log('一级按钮1被点击'), - children: [ - { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击') , icon: }, - { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, - ], - weight: 1, - // icon:, - }, - { - key: 'button2', - text: '一级按钮2', - onClick: () => console.log('一级按钮2被点击'), - children: null, - weight: 2, - }, - { - key: 'button3', - text: '一级按钮3', - onClick: () => console.log('一级按钮3被点击'), - children: null, - weight: 3, - }, - { - key: 'button4', - text: '一级按钮4', - onClick: () => console.log('一级按钮4被点击'), - weight: 4, - }, - { - key: 'button5', - text: '一级按钮5' , - onClick: () => console.log('一级按钮5被点击'), - children: [ - { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, - ], - weight: 5, - }, - ], - customButton: - { - key: '播放', - text: isPlay ? '播放按钮' : '图片按钮', - onClick: () => {setIsPlay(!isPlay)}, - weight: 3.5, - } -}},[isPlay]) - return ( - - - - ) -} -``` + ## API From fc681c510c67a64012279d6ca9190ba91ac60687 Mon Sep 17 00:00:00 2001 From: chaiying Date: Mon, 22 Apr 2024 10:57:45 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96ws=E5=AE=9E=E7=8E=B0=E4=BB=A3=E7=A0=81(=E4=BB=8Eahokks?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=94=B9=E4=B8=BA=E4=BD=BF=E7=94=A8=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E4=BB=A3=E7=A0=81)=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../material/src/centerLink/CenterLink.tsx | 17 +++--- .../centerLink/components/TerminalForm.tsx | 9 ++- .../src/centerLink/components/WebTerminal.tsx | 57 ++++++++++++------- .../material/src/centerLink/demo/basic.tsx | 2 +- 4 files changed, 55 insertions(+), 30 deletions(-) diff --git a/packages/material/src/centerLink/CenterLink.tsx b/packages/material/src/centerLink/CenterLink.tsx index 2adb726..862b4ec 100644 --- a/packages/material/src/centerLink/CenterLink.tsx +++ b/packages/material/src/centerLink/CenterLink.tsx @@ -1,8 +1,7 @@ -import React,{useRef} from 'react' +import React,{useRef,useState} from 'react' import TerminalForm from './components/TerminalForm' import WebTerminal from './components/WebTerminal' import './index.less'; -import style from 'packages/meta/src/badge/style'; interface CenterLinkProps{ websocketUrl:string; // websocket服务地址 @@ -22,8 +21,8 @@ const materialName='center-link'; const CenterLink:React.FC=(props:CenterLinkProps)=>{ const { - websocketUrl, ip, + websocketUrl, token, terminalStyle, onConnect, @@ -35,22 +34,24 @@ const CenterLink:React.FC=(props:CenterLinkProps)=>{ style }=props; const webRef=useRef(null); + const [ipUrl,setIpUrl]=useState(ip); // 处理开始连接服务器ip的事件 const handleConnectClick=(values:any)=>{ const {ip}=values; - if(ip&&token&&websocketUrl&&webRef.current){ - webRef.current.connect(); - } + setIpUrl(( + pre + )=>(ip)) onConnect&&onConnect(values); } + return (
- + void; // 导出日志事件 } const TerminalForm:React.FC=(props:TerminalFormProps)=> { const { + ip, onConnect, onExportLogs, }=props; const [form] = Form.useForm(); + useEffect(()=>{ + form.setFieldsValue({ + ip, + }); + },[]) return (

连接中心服务器

diff --git a/packages/material/src/centerLink/components/WebTerminal.tsx b/packages/material/src/centerLink/components/WebTerminal.tsx index 4beafaf..7adb349 100644 --- a/packages/material/src/centerLink/components/WebTerminal.tsx +++ b/packages/material/src/centerLink/components/WebTerminal.tsx @@ -1,7 +1,6 @@ import React,{useRef,useEffect, useImperativeHandle, forwardRef,} from 'react'; -import { useWebSocket } from '@zhst/hooks'; import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; import 'xterm/css/xterm.css'; @@ -56,21 +55,10 @@ const WebTerminal:React.FC=forwardRef((props: onMessage, onError, }=props; - const { readyState, sendMessage, latestMessage, disconnect, connect }:WebsocketResult = useWebSocket( - `${websocketUrl}?ip=${ip}&Authorization=${token}`,{manual:true,reconnectLimit:0,onOpen, - onClose, - onMessage, - onError} - ); const termRef = useRef(null); const termClassRef=useRef(null) // const currLine=useRef(null); - - useEffect(()=>{ - if(termClassRef?.current){ - termClassRef.current.write(latestMessage?.data+'\r\n\x1b[33m$\x1b[0m '); - } - },[latestMessage]); + const wsRef=useRef(null); // terminal初始化 useEffect(()=>{ @@ -113,14 +101,43 @@ const WebTerminal:React.FC=forwardRef((props: },[]); + useEffect(()=>{ + if(ip&&websocketUrl&&token){ + const ws=new WebSocket(`${websocketUrl}?ip=${ip}&Authorization=${token}`); + wsRef.current=ws; + if(wsRef?.current){ + wsRef.current.onopen=(event: WebSocketEventMap['open'], instance: WebSocket)=>{ + if(onOpen){ + onOpen(event,instance); + } + } + wsRef.current.onclose=(event: WebSocketEventMap['close'], instance: WebSocket)=>{ + if(onClose){ + onClose(event,instance); + } + } + wsRef.current.onmessage=(message: WebSocketEventMap['message'], instance: WebSocket)=>{ + if(termClassRef.current){ + termClassRef.current.write(message?.data+'\r\n\x1b[33m$\x1b[0m '); + } + if(onMessage){ + onMessage(message,instance); + } + } + wsRef.current.onerror=(event: WebSocketEventMap['error'], instance: WebSocket)=>{ + if(onError){ + onError(event,instance); + } + } + } + + } + },[ip,websocketUrl,token]) + // 自定义暴露给父组件的实例 - useImperativeHandle(ref,()=>({ - readyState, - sendMessage, - latestMessage, - disconnect, - connect - })); + useImperativeHandle(ref,()=>( + wsRef.current + )); return (
diff --git a/packages/material/src/centerLink/demo/basic.tsx b/packages/material/src/centerLink/demo/basic.tsx index 2f33cda..10ff6ff 100644 --- a/packages/material/src/centerLink/demo/basic.tsx +++ b/packages/material/src/centerLink/demo/basic.tsx @@ -6,7 +6,7 @@ const demo = () => { { From ecd528c71af2906e379bbf2a6ce9eafebf822bf5 Mon Sep 17 00:00:00 2001 From: chaiying Date: Mon, 22 Apr 2024 11:07:35 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E6=B7=BB=E5=8A=A0ign?= =?UTF-8?q?ore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/segmented/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/meta/src/segmented/index.tsx b/packages/meta/src/segmented/index.tsx index 5b32cda..0ef9a40 100644 --- a/packages/meta/src/segmented/index.tsx +++ b/packages/meta/src/segmented/index.tsx @@ -99,6 +99,7 @@ const Segmented = React.forwardRef((props, ref) const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style }; return wrapCSSVar( + // @ts-ignore Date: Mon, 22 Apr 2024 12:12:17 +0800 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BC=A0=E5=8F=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/meta/src/ButtonList/ButtonList.tsx | 18 +++++++++++------- packages/meta/src/ButtonList/demo/base.tsx | 9 +-------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index 22db3dc..9597fcf 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/packages/meta/src/ButtonList/ButtonList.tsx @@ -10,7 +10,7 @@ export interface IButtonItem { onClick: () => void; children?: Array>; // 用于排序 - weight: number; + weight?: number; icon?: ReactNode className?: string; isCenter?: boolean; @@ -30,12 +30,16 @@ const ButtonList: React.FC = (Props) => { const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const centerButtonRef = useRef(null); - const sortedButtons = useMemo(() => { - let buttonList = [...buttons] - - - return buttonList?.sort((a, b) => a.weight - b.weight); + let buttonList = buttons.map((btn, index) => { + if (btn.weight === undefined) { + return { ...btn, weight: index } + } else { + return { ...btn, weight: btn.weight } + } + }) + const newButtonList = buttonList?.sort((a, b) => a.weight - b.weight) + return newButtonList; }, [buttons]); const handleButtonClick = (key: string, item: IButtonItem) => { @@ -64,7 +68,7 @@ const ButtonList: React.FC = (Props) => { 作为 buttonListWrap marginLeft 修正距离 */ - // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 + // 这里为什么要 * 2 由于 justify-content: center; marginLeft 需要 * 2才是 正确的值 具体原因 还在研究 const buttonListWrapMarginLeft = (buttonListCenterOffset - centerButtonOffset) * 2 setButtonListWrapMarginLeft(buttonListWrapMarginLeft) diff --git a/packages/meta/src/ButtonList/demo/base.tsx b/packages/meta/src/ButtonList/demo/base.tsx index fd7f191..13be8c3 100644 --- a/packages/meta/src/ButtonList/demo/base.tsx +++ b/packages/meta/src/ButtonList/demo/base.tsx @@ -19,34 +19,28 @@ export default () => { { key: 'subButton1-1', text: '二级按钮1-1', onClick: () => console.log('二级按钮1-1被点击'), icon: }, { key: 'subButton1-2', text: '二级按钮1-2', onClick: () => console.log('二级按钮1-2被点击') }, ], - weight: 1, // icon:, }, { key: 'button2', text: '一级按钮2', onClick: () => console.log('一级按钮2被点击'), - weight: 2, }, { key: '播放', text: isPlay ? '播放按钮' : '图片按钮', onClick: () => { setIsPlay(!isPlay) }, - weight: 3, - isCenter: true + // isCenter: true }, { key: 'button3', text: '一级按钮3', onClick: () => console.log('一级按钮3被点击'), - weight: 3, }, { key: 'button4', text: '一级按钮4', onClick: () => console.log('一级按钮4被点击'), - weight: 4, - // isCenter: true }, { @@ -56,7 +50,6 @@ export default () => { children: [ { key: 'subButton5-1', text: '二级按钮5-1', onClick: () => console.log('二级按钮5-1被点击') }, ], - weight: 5, }, ], } From efee26019a2d049440cfc28f86151e23a225da5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Mon, 22 Apr 2024 15:25:15 +0800 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/RealTimeMonitor/RealTimeMonitor.tsx | 14 ++++++++++---- .../biz/src/VideoPlayerCard/VideoPlayerCard.tsx | 11 +++++++---- .../ViewLargerImageModal/ViewLargerImageModal.tsx | 13 +++++++++---- .../src/WarningRecordCard/WarningRecordCard.tsx | 12 ++++++++---- packages/meta/src/ButtonList/ButtonList.tsx | 15 +++++++++------ 5 files changed, 43 insertions(+), 22 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index 73d7dd4..81ea7c7 100644 --- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx +++ b/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 = (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 = (props) => { selectedRecordId, isRecordListLoading, } = props + const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls); return ( -
+
= (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(null); const { useToken } = theme const { token } = useToken() diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index f4475bd..f07c81e 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/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( (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(false); @@ -53,7 +58,7 @@ export const ViewLargerImageModal = forwardRef void; style?: React.CSSProperties; @@ -63,9 +65,11 @@ export interface WarningRecordCardProps { }; export const WarningRecordCard: React.FC = (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 diff --git a/packages/meta/src/ButtonList/ButtonList.tsx b/packages/meta/src/ButtonList/ButtonList.tsx index 9597fcf..d610916 100644 --- a/packages/meta/src/ButtonList/ButtonList.tsx +++ b/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 { } export interface ButtonListProps { + prefixCls?: string; buttons: Array gutter?: Gutter; }; -const componentName = 'zhst-button-list'; +const ButtonList: React.FC = (props) => { -const ButtonList: React.FC = (Props) => { - const { buttons, gutter } = Props - const [activeKey, setActiveKey] = useState(null); + const { getPrefixCls } = useContext(ConfigContext); + const { buttons, gutter, prefixCls: customizePrefixCls } = props + const componentName = getPrefixCls('button-list', customizePrefixCls); const buttonListRef = useRef(null); - const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const centerButtonRef = useRef(null); + const [activeKey, setActiveKey] = useState(null); + const [buttonListWrapMarginLeft, setButtonListWrapMarginLeft] = useState(0) const sortedButtons = useMemo(() => { let buttonList = buttons.map((btn, index) => { From 868ede50eb3f29e9b9a3b8b2a2f89192d63ef3f3 Mon Sep 17 00:00:00 2001 From: chaiying Date: Mon, 22 Apr 2024 15:44:52 +0800 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20ts=E6=A0=A1=E9=AA=8C=E4=B8=8D?= =?UTF-8?q?=E9=80=9A=E8=BF=87,=E6=9A=82=E6=97=B6=E7=94=A8ts-nocheck?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/material/es/index.js | 1 + packages/material/es/utils/index.d.ts | 1 + packages/material/es/utils/index.js | 14 +++++++ packages/material/lib/index.js | 3 ++ packages/material/lib/utils/index.d.ts | 1 + packages/material/lib/utils/index.js | 39 +++++++++++++++++++ .../material/src/centerLink/CenterLink.tsx | 4 +- .../src/centerLink/components/WebTerminal.tsx | 19 ++++----- .../material/src/centerLink/demo/basic.tsx | 2 +- 9 files changed, 72 insertions(+), 12 deletions(-) diff --git a/packages/material/es/index.js b/packages/material/es/index.js index 1b18d5e..723f5f9 100644 --- a/packages/material/es/index.js +++ b/packages/material/es/index.js @@ -2,5 +2,6 @@ export { default as AlgorithmConfigModal } from "./algorithmConfigModal"; export { default as AlgorithmConfig } from "./algorithmConfig"; export { default as Login } from "./login"; export { default as Password } from "./password"; +export { default as CenterLink } from "./centerLink"; export { default as SchemaFormModal } from "./algorithmConfig/components/schemaFormModal"; export * from 'rc-util'; \ No newline at end of file diff --git a/packages/material/es/utils/index.d.ts b/packages/material/es/utils/index.d.ts index e69de29..c730920 100644 --- a/packages/material/es/utils/index.d.ts +++ b/packages/material/es/utils/index.d.ts @@ -0,0 +1 @@ +export declare const createAElement: (url: string, isBlank: boolean) => void; diff --git a/packages/material/es/utils/index.js b/packages/material/es/utils/index.js index e69de29..aaffb11 100644 --- a/packages/material/es/utils/index.js +++ b/packages/material/es/utils/index.js @@ -0,0 +1,14 @@ +// 可应用于页面跳转以及文件下载 +// 第一个参数：文件的下载路径/要跳转页面的路径(可携带参数) +// 第二个参数：是否新打开一个页面，true为新开一个页面，false是在当前页面进行操作； +export var createAElement = function createAElement(url, isBlank) { + var newLink = document.createElement('a'); + newLink.className = 'create-link'; + newLink.href = url; + if (isBlank) { + newLink.target = '_blank'; + } + document.body.appendChild(newLink); + newLink.click(); + document.body.removeChild(newLink); +}; \ No newline at end of file diff --git a/packages/material/lib/index.js b/packages/material/lib/index.js index b86b1de..e7a9e59 100644 --- a/packages/material/lib/index.js +++ b/packages/material/lib/index.js @@ -32,6 +32,7 @@ var src_exports = {}; __export(src_exports, { AlgorithmConfig: () => import_algorithmConfig.default, AlgorithmConfigModal: () => import_algorithmConfigModal.default, + CenterLink: () => import_centerLink.default, Login: () => import_login.default, Password: () => import_password.default, SchemaFormModal: () => import_schemaFormModal.default @@ -41,12 +42,14 @@ var import_algorithmConfigModal = __toESM(require("./algorithmConfigModal")); var import_algorithmConfig = __toESM(require("./algorithmConfig")); var import_login = __toESM(require("./login")); var import_password = __toESM(require("./password")); +var import_centerLink = __toESM(require("./centerLink")); var import_schemaFormModal = __toESM(require("./algorithmConfig/components/schemaFormModal")); __reExport(src_exports, require("rc-util"), module.exports); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { AlgorithmConfig, AlgorithmConfigModal, + CenterLink, Login, Password, SchemaFormModal, diff --git a/packages/material/lib/utils/index.d.ts b/packages/material/lib/utils/index.d.ts index e69de29..c730920 100644 --- a/packages/material/lib/utils/index.d.ts +++ b/packages/material/lib/utils/index.d.ts @@ -0,0 +1 @@ +export declare const createAElement: (url: string, isBlank: boolean) => void; diff --git a/packages/material/lib/utils/index.js b/packages/material/lib/utils/index.js index e69de29..53c7998 100644 --- a/packages/material/lib/utils/index.js +++ b/packages/material/lib/utils/index.js @@ -0,0 +1,39 @@ +var __defProp = Object.defineProperty; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __getOwnPropNames = Object.getOwnPropertyNames; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); +}; +var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; +}; +var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + +// src/utils/index.ts +var utils_exports = {}; +__export(utils_exports, { + createAElement: () => createAElement +}); +module.exports = __toCommonJS(utils_exports); +var createAElement = (url, isBlank) => { + var newLink = document.createElement("a"); + newLink.className = "create-link"; + newLink.href = url; + if (isBlank) { + newLink.target = "_blank"; + } + document.body.appendChild(newLink); + newLink.click(); + document.body.removeChild(newLink); +}; +// Annotate the CommonJS export names for ESM import in node: +0 && (module.exports = { + createAElement +}); diff --git a/packages/material/src/centerLink/CenterLink.tsx b/packages/material/src/centerLink/CenterLink.tsx index 862b4ec..520bc8e 100644 --- a/packages/material/src/centerLink/CenterLink.tsx +++ b/packages/material/src/centerLink/CenterLink.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React,{useRef,useState} from 'react' import TerminalForm from './components/TerminalForm' import WebTerminal from './components/WebTerminal' @@ -39,8 +40,7 @@ const CenterLink:React.FC=(props:CenterLinkProps)=>{ // 处理开始连接服务器ip的事件 const handleConnectClick=(values:any)=>{ const {ip}=values; - setIpUrl(( - pre + setIpUrl(( )=>(ip)) onConnect&&onConnect(values); } diff --git a/packages/material/src/centerLink/components/WebTerminal.tsx b/packages/material/src/centerLink/components/WebTerminal.tsx index 7adb349..14c5421 100644 --- a/packages/material/src/centerLink/components/WebTerminal.tsx +++ b/packages/material/src/centerLink/components/WebTerminal.tsx @@ -1,4 +1,4 @@ - +// @ts-nocheck import React,{useRef,useEffect, useImperativeHandle, forwardRef,} from 'react'; import { Terminal } from 'xterm'; @@ -55,10 +55,10 @@ const WebTerminal:React.FC=forwardRef((props: onMessage, onError, }=props; - const termRef = useRef(null); - const termClassRef=useRef(null) + const termRef = useRef|null>(null); + const termClassRef=useRef|null>(null) // const currLine=useRef(null); - const wsRef=useRef(null); + const wsRef=useRef|null>(null); // terminal初始化 useEffect(()=>{ @@ -66,12 +66,12 @@ const WebTerminal:React.FC=forwardRef((props: if(!termRef.current){ return; } - termClassRef.current=new Terminal({ + let term=new Terminal({ fontFamily: 'Menlo, Monaco, "Courier New", monospace', fontWeight: 400, fontSize: 14, rows: Math.ceil( - (termRef.current?.clientHeight - + (termRef.current.clientHeight - 150) / 14, ), @@ -86,12 +86,12 @@ const WebTerminal:React.FC=forwardRef((props: background: "#1a1a1d", //背景色 cursor: "help", //设置光标 } - }) + }); - let term=termClassRef.current; + termClassRef.current=term; term.open(termRef.current); term.focus(); // 光标聚集 - term.promp=(_)=>{ + term.promp=()=>{ term.write('\r\n\x1b[33m$\x1b[0m '); } const fitAddon=new FitAddon(); @@ -102,6 +102,7 @@ const WebTerminal:React.FC=forwardRef((props: },[]); useEffect(()=>{ + // @ts-ignore if(ip&&websocketUrl&&token){ const ws=new WebSocket(`${websocketUrl}?ip=${ip}&Authorization=${token}`); wsRef.current=ws; diff --git a/packages/material/src/centerLink/demo/basic.tsx b/packages/material/src/centerLink/demo/basic.tsx index 10ff6ff..bc55fe5 100644 --- a/packages/material/src/centerLink/demo/basic.tsx +++ b/packages/material/src/centerLink/demo/basic.tsx @@ -5,7 +5,7 @@ const demo = () => { return ( Date: Mon, 22 Apr 2024 15:52:38 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=90=8D=E8=BF=87=E9=95=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx | 4 ++-- packages/biz/src/ViewLargerImageModal/index.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index f07c81e..815f017 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -30,11 +30,11 @@ export interface ViewLargerImageModalProps { export const ViewLargerImageModal = forwardRef( (props, ref) => { - + 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 componentName = getPrefixCls('biz-warning-larger-image', customizePrefixCls); const { useToken } = theme const { token } = useToken() const [open, setOpen] = useState(false); diff --git a/packages/biz/src/ViewLargerImageModal/index.less b/packages/biz/src/ViewLargerImageModal/index.less index 32363d0..5790f12 100644 --- a/packages/biz/src/ViewLargerImageModal/index.less +++ b/packages/biz/src/ViewLargerImageModal/index.less @@ -1,4 +1,4 @@ -.zhst-biz-view-warning-larger-image-modal { +.zhst-biz-warning-larger-image { font-family: MicrosoftYaHei; .ant-modal-content {