ssh-3(前端固定参数已调通)

src/forge/DevOps/OpsDetailRightpanel.jsx

@@ -68,53 +68,55 @@ export default ({
     }
   }
   return (
-    <Spin spinning={spining}>
+    <React.Fragment>
       <Menu className="devopsNav" onClick={(e)=>{setNav(e.key)}} selectedKeys={[nav]} mode="horizontal">
         <Menu.Item key={'0'} value="0">文件</Menu.Item>
         <Menu.Item key={'1'} value="1">命令行</Menu.Item>
       </Menu>
       {
         nav === "0" &&
-        <div className="rightMainContent">
-          {data && data.status !== "error" ? (
-            <div>
-              <FlexAJ className="items">
-                <span>{step && step.name}</span>
-                <AlignCenter>
-                  {step && step.duration_time}
-                  <i className="iconfont icon-sanjiaoxing-down"></i>
-                </AlignCenter>
-              </FlexAJ>
+        <Spin spinning={spining}>
+          <div className="rightMainContent">
+            {data && data.status !== "error" ? (
               <div>
-                {coders && coders.length > 0 ? (
-                  coders.map((item, key) => {
-                    return (
-                      <div className="opsDetailOut">
-                        <span>{key + 1}</span>
-                        <p>{item.out}</p>
-                      </div>
-                    );
-                  })
-                ) : empty ? (
-                  <div className="opsDetailOut">
-                    <span>1</span>
-                    <p>
-                      {stage && stage.name} – {step && step.name}: Skipped
-                    </p>
-                  </div>
-                ) : (
-                  ""
-                )}
+                <FlexAJ className="items">
+                  <span>{step && step.name}</span>
+                  <AlignCenter>
+                    {step && step.duration_time}
+                    <i className="iconfont icon-sanjiaoxing-down"></i>
+                  </AlignCenter>
+                </FlexAJ>
+                <div>
+                  {coders && coders.length > 0 ? (
+                    coders.map((item, key) => {
+                      return (
+                        <div className="opsDetailOut">
+                          <span>{key + 1}</span>
+                          <p>{item.out}</p>
+                        </div>
+                      );
+                    })
+                  ) : empty ? (
+                    <div className="opsDetailOut">
+                      <span>1</span>
+                      <p>
+                        {stage && stage.name} – {step && step.name}: Skipped
+                      </p>
+                    </div>
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
-            </div>
-          ) : (
-            <div style={{ color: "red" }}>error:{data && data.error}</div>
-          )}
-        </div>
+            ) : (
+              <div style={{ color: "red" }}>error:{data && data.error}</div>
+            )}
+          </div>
+        </Spin>
       }
       {
         nav === "1" && <CodeSSH />
       }
-    </Spin>
+    </React.Fragment>
   );
 };

src/forge/DevOps/ssh/Index.jsx

@@ -1,14 +1,32 @@
-import React, { useState } from 'react';
-import XmlPanel from './XmlPanel';
-import mediator from './mediator';
+import React, { useState, useEffect } from "react";
+import XmlPanel from "./XmlPanel";
+import mediator from "./mediator";
 
-function Index(){
-  const [ sshConfigData ,setSshConfigData ] = useState(undefined);
+function Index() {
+  const [sshConfigData, setSshConfigData] = useState(undefined);
 
-  return(
-    <div>
-      <XmlPanel sshConfigData={sshConfigData || {}} sid={1} />
-    </div>
-  )
+  useEffect(() => {
+    if (!sshConfigData) {
+      init();
+    }
+    setTimeout(() => {
+      mediator.publish("create-socket", 1);
+    }, 300);
+  }, [sshConfigData]);
+
+  // 获取服务器连接信息
+  function init() {}
+  return (
+    <XmlPanel
+      sshConfigData={{
+        host: "106.75.231.63",
+        port: "2021",
+        ws_url: "wss://pre-webssh.educoder.net/ws",
+        username: "root",
+        secret: "Dron_123123",
+      }}
+      sid={1}
+    />
+  );
 }
-export default Index;
+export default Index;

src/forge/DevOps/ssh/XmlPanel.jsx

@@ -16,6 +16,7 @@ function getColsAndRows(width, height, term) {
 
 function onLayout(term, el) {
   const ro = new ResizeObserver(entries => {
+    console.log(entries);
     for (let entry of entries) {
       if (entry.target.offsetHeight > 0 || entry.target.offsetWidth > 0) {
         const [cols, rows] = getColsAndRows(
@@ -48,7 +49,7 @@ const TimeTicket = 30000;
 export default ({ sshConfigData, sid }) => {
   const [term, setTerm] = useState(null);
 
-  const { ws_url, password, port } = sshConfigData;
+  const { ws_url, password, port, secret } = sshConfigData;
   const el = useRef();
   const socket = useRef();
   const isFirstConnected = useRef(false);
@@ -96,7 +97,7 @@ export default ({ sshConfigData, sid }) => {
               tp: 'init',
               data: {
                 ...sshConfigData,
-                secret: password,
+                secret: secret,
                 width,
                 height,
                 rows: term.rows,
@@ -108,7 +109,7 @@ export default ({ sshConfigData, sid }) => {
                 tp: 'init',
                 data: {
                   ...sshConfigData,
-                  secret: password,
+                  secret: secret,
                   width,
                   height,
                   rows: term.rows,
@@ -211,8 +212,8 @@ export default ({ sshConfigData, sid }) => {
   }, [term, ws_url, port]);
 
   return (
-    <div ref={el} className="xterm-panel">
+    <div ref={el} className="xterm-panel" style={{height:"100%"}}>
       {!ws_url ? <p style={{ color: '#fff' }}>正在连接命令行服务...</p> : null}
     </div>
   );
-};
+};

src/forge/DevOps/ssh/mediator.jsx

@@ -43,4 +43,4 @@ function Mediator(obj) {
   return obj ? Object.assign(obj, mediator) : mediator;
 }
 const mediator = new Mediator();
-export default mediator;
+export default mediator;