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;