增加终端

src/layouts/defaultProps.tsx

@@ -7,7 +7,9 @@ import {
   FolderOutlined,
   RadiusSettingOutlined,
   ControlOutlined,
+  DesktopOutlined,
 } from '@ant-design/icons';
+import React from 'react';
 
 export default {
   route: {
@@ -33,7 +35,7 @@ export default {
       {
         path: '/terminal',
         name: '终端管理',
-        icon: <RadiusSettingOutlined />,
+        icon: <DesktopOutlined />,
         component: '@/pages/terminal/index',
       },
       {

src/pages/terminal/index.tsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, Key, useRef } from 'react';
+import {
+  useState,
+  useEffect,
+  useCallback,
+  Key,
+  useRef,
+  CSSProperties,
+} from 'react';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
@@ -8,94 +15,25 @@ import { AttachAddon } from 'xterm-addon-attach';
 import { FitAddon } from 'xterm-addon-fit';
 import { getToken } from '@/utils/auth';
 
-function getFilterData(keyword: string, data: any) {
-  const expandedKeys: string[] = [];
-  if (keyword) {
-    const tree: any = [];
-    data.forEach((item) => {
-      if (item.title.includes(keyword)) {
-        tree.push(item);
-        expandedKeys.push(...item.children.map((x) => x.key));
-      } else {
-        const children: any[] = [];
-        (item.children || []).forEach((subItem: any) => {
-          if (subItem.title.includes(keyword)) {
-            children.push(subItem);
-          }
-        });
-        if (children.length > 0) {
-          tree.push({
-            ...item,
-            children,
-          });
-          expandedKeys.push(...children.map((x) => x.key));
-        }
-      }
-    });
-    return { tree, expandedKeys };
-  }
-  return { tree: data, expandedKeys };
-}
-
-const Log = () => {
+const TerminalApp = () => {
   const [width, setWdith] = useState('100%');
   const [marginLeft, setMarginLeft] = useState(0);
   const [marginTop, setMarginTop] = useState(-72);
-  const [title, setTitle] = useState('请选择日志文件');
-  const [value, setValue] = useState('请选择日志文件');
-  const [select, setSelect] = useState();
-  const [data, setData] = useState<any[]>([]);
-  const [filterData, setFilterData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [isPhone, setIsPhone] = useState(false);
-
-  const getConfig = () => {
-    request.get(`${config.apiPrefix}logs`).then((data) => {
-      const result = formatData(data.dirs) as any;
-      setData(result);
-      setFilterData(result);
-    });
-  };
-
-  const formatData = (tree: any[]) => {
-    return tree.map((x) => {
-      x.title = x.name;
-      x.value = x.name;
-      x.disabled = x.isDir;
-      x.key = x.name;
-      x.children = x.files.map((y: string) => ({
-        title: y,
-        value: `${x.name}/${y}`,
-        key: `${x.name}/${y}`,
-        parent: x.name,
-        isLeaf: true,
-      }));
-      return x;
-    });
-  };
-
-  const getLog = (node: any) => {
-    setLoading(true);
-    request
-      .get(`${config.apiPrefix}logs/${node.value}`)
-      .then((data) => {
-        setValue(data.data);
-      })
-      .finally(() => setLoading(false));
-  };
-
-  const onSelect = (value: any, node: any) => {
-    setSelect(value);
-    setTitle(node.parent || node.value);
-    getLog(node);
-  };
+  const [style, setStyle] = useState<CSSProperties | undefined>(undefined);
 
   const ref = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    setLoading(true);
+    const term = new Terminal();
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    const cols = 80;
+    const rows = 24;
+    fitAddon.fit();
+    term.open(ref.current);
+    term.focus();
     request
-      .post(`${config.apiPrefix}terminals?cols=80&rows=24`)
+      .post(`${config.apiPrefix}terminals?cols=${cols}&rows=${rows}`)
       .then((pid) => {
         const ws = new WebSocket(
           `ws://${location.host}${
@@ -103,17 +41,10 @@ const Log = () => {
           }terminals/${pid}?token=${getToken()}`,
         );
         ws.onopen = () => {
-          const term = new Terminal();
           const attachAddon = new AttachAddon(ws);
-          const fitAddon = new FitAddon();
           term.loadAddon(attachAddon);
-          term.loadAddon(fitAddon);
-          term.open(ref.current);
-          fitAddon.fit();
-          term.focus();
         };
-      })
-      .finally(() => setLoading(false));
+      });
   }, []);
 
   useEffect(() => {
@@ -121,20 +52,17 @@ const Log = () => {
       setWdith('auto');
       setMarginLeft(0);
       setMarginTop(0);
-      setIsPhone(true);
     } else {
       setWdith('100%');
       setMarginLeft(0);
       setMarginTop(-72);
-      setIsPhone(false);
     }
-    getConfig();
   }, []);
 
   return (
     <PageContainer
       className="ql-container-wrapper terminal-wrapper"
-      title={title}
+      title={'终端'}
       header={{
         style: {
           padding: '4px 16px 4px 15px',
@@ -148,9 +76,9 @@ const Log = () => {
         },
       }}
     >
-      <div ref={ref}></div>
+      <div ref={ref} style={style}></div>
     </PageContainer>
   );
 };
 
-export default Log;
+export default TerminalApp;