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 2adb726..520bc8e 100644 --- a/packages/material/src/centerLink/CenterLink.tsx +++ b/packages/material/src/centerLink/CenterLink.tsx @@ -1,8 +1,8 @@ -import React,{useRef} from 'react' +// @ts-nocheck +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 +22,8 @@ const materialName='center-link'; const CenterLink:React.FC=(props:CenterLinkProps)=>{ const { - websocketUrl, ip, + websocketUrl, token, terminalStyle, onConnect, @@ -35,22 +35,23 @@ 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(( + )=>(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..14c5421 100644 --- a/packages/material/src/centerLink/components/WebTerminal.tsx +++ b/packages/material/src/centerLink/components/WebTerminal.tsx @@ -1,7 +1,6 @@ - +// @ts-nocheck 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 termRef = useRef|null>(null); + const termClassRef=useRef|null>(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>(null); // terminal初始化 useEffect(()=>{ @@ -78,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, ), @@ -98,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(); @@ -113,14 +101,44 @@ 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; + 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..bc55fe5 100644 --- a/packages/material/src/centerLink/demo/basic.tsx +++ b/packages/material/src/centerLink/demo/basic.tsx @@ -5,8 +5,8 @@ const demo = () => { return ( { 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