diff --git a/src/layouts/defaultProps.tsx b/src/layouts/defaultProps.tsx
index f699ab6d..bfa54572 100644
--- a/src/layouts/defaultProps.tsx
+++ b/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: ,
+ icon: ,
component: '@/pages/terminal/index',
},
{
diff --git a/src/pages/terminal/index.tsx b/src/pages/terminal/index.tsx
index 3f229364..d66c1605 100644
--- a/src/pages/terminal/index.tsx
+++ b/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([]);
- const [filterData, setFilterData] = useState([]);
- 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(undefined);
const ref = useRef(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 (
{
},
}}
>
-
+
);
};
-export default Log;
+export default TerminalApp;