From b7253e8c2959681018c88703cb08bc268d6bccde Mon Sep 17 00:00:00 2001 From: lujs Date: Fri, 19 Jan 2024 15:20:46 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DTerminal=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=AF=BC=E8=87=B4=E7=9A=84=E6=98=BE=E7=A4=BA=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/docs/src/terminal/demo-module/app.tsx | 193 ++++++++++----------- packages/libro-terminal/src/view.tsx | 12 +- 2 files changed, 98 insertions(+), 107 deletions(-) diff --git a/apps/docs/src/terminal/demo-module/app.tsx b/apps/docs/src/terminal/demo-module/app.tsx index 8a1b35c5..bf8e3a52 100644 --- a/apps/docs/src/terminal/demo-module/app.tsx +++ b/apps/docs/src/terminal/demo-module/app.tsx @@ -1,5 +1,6 @@ import type { TerminalViewOption } from '@difizen/libro-terminal'; import { TerminalManager, LibroTerminalView } from '@difizen/libro-terminal'; +import type { Disposable } from '@difizen/mana-app'; import { BaseView, ViewInstance, @@ -10,18 +11,19 @@ import { useInject, view, } from '@difizen/mana-app'; -import { Button, Card, Checkbox, Flex, Form, Input, Space } from 'antd'; +import { Button, Card, Checkbox, Flex, Form, Input, Space, Tabs } from 'antd'; +import type { FC } from 'react'; import { forwardRef, useCallback, useEffect, useState } from 'react'; const gridStyle: React.CSSProperties = { width: '50%', }; -const Terminal = function Terminal(props: { +const Terminal: FC<{ // options: TerminalViewOption; viewRender: LibroTerminalView; updateList: () => void; -}) { +}> = function Terminal(props) { // const instance = useInject(ViewInstance); const [pasteVal, setPasteVal] = useState(''); const [writeLineVal, setWriteLineVal] = useState(''); @@ -42,34 +44,59 @@ const Terminal = function Terminal(props: { // message useEffect(() => { + const disposes: Disposable[] = []; if (view) { - view.onDidOpen((v) => { - setonDidOpenVal(JSON.stringify(v)); - }); - view.onDidOpenFailure((v) => { - setonDidOpenFailureVal(JSON.stringify(v)); - }); - view.onSizeChanged((v) => { - setonSizeChangedVal(JSON.stringify(v)); - }); - view.onData((v) => { - setonDataVal(JSON.stringify(v)); - }); - view.onKey((v) => { - setonKeyVal(JSON.stringify(v)); - }); - view.onReady(() => { - forceUpdate({}); - }); - view.onTitleChange(() => { - forceUpdate({}); - }); + disposes.push( + view.onDidOpen((v) => { + setonDidOpenVal(JSON.stringify(v)); + }), + ); + + disposes.push( + view.onDidOpenFailure((v) => { + setonDidOpenFailureVal(JSON.stringify(v)); + }), + ); + disposes.push( + view.onSizeChanged((v) => { + setonSizeChangedVal(JSON.stringify(v)); + }), + ); + disposes.push( + view.onData((v) => { + setonDataVal(JSON.stringify(v)); + }), + ); + disposes.push( + view.onKey((v) => { + setonKeyVal(JSON.stringify(v)); + }), + ); + disposes.push( + view.onReady(() => { + forceUpdate({}); + }), + ); + disposes.push( + view.onTitleChange(() => { + forceUpdate({}); + props.updateList(); + }), + ); + + disposes.push( + view.onReady(() => { + setReady(true); + }), + ); + } - view.onReady(() => { - setReady(true); + return () => { + disposes.forEach((d) => { + d.dispose(); }); - } - }, [view]); + }; + }, [props, view]); if (view === null) { return null; @@ -250,84 +277,12 @@ const Terminal = function Terminal(props: { }; export const App = forwardRef(function App() { - const instance = useInject(ViewInstance); + const [views, setViews] = useState([]); - // const [terminalViews, setTerminalViews] = useState>( - // {}, - // ); - - // const updateList = useCallback(() => { - // instance.terminalManager.requestRunning(); - // }, [instance.terminalManager]); - - // useEffect(() => { - // const disposed = instance.terminalManager.runningChanged((models) => { - // // delete - // function diffAndDeleteRender() { - // function diffValuesInA1(a1: string[], a2: string[]): string[] { - // // 存储差异值的数组 - // const diffArr: string[] = []; - - // // 遍历 a2 数组中的每个值 - // for (const value of a2) { - // // 如果该值在 a1 中不存在，则将其加入差异值数组 - // if (!a1.includes(value)) { - // diffArr.push(value); - // } - // } - - // return diffArr; - // } - // const diff = diffValuesInA1( - // models.map((v) => v.name), - // Object.keys(terminalViews), - // ); - // console.log('delete ids', diff); - // diff.forEach((v) => { - // delete terminalViews[v]; - // }); - // } - // diffAndDeleteRender(); - - // if (Object.keys(terminalViews).length === 0) { - // const initRenderLise = (models: TerminalModel[]) => { - // Promise.all( - // models - // .filter((v) => { - // return !terminalViews[v.name]; - // }) - // .map(async (m) => { - // const view = await instance.factory(m); - // return { [m.name]: view }; - // }), - // ) - // .then((views) => { - // setTerminalViews((s) => { - // return { - // ...s, - // ...views.reduce((acc, v) => { - // return { - // ...acc, - // ...v, - // }; - // }, {}), - // }; - // }); - // return; - // }) - // .catch((e) => { - // console.error(e); - // }); - // }; - // initRenderLise(models); - // } - // }); - // return () => { - // disposed.dispose(); - // }; - // }, [instance, instance.terminalManager, terminalViews]); + const [activeKey, setActiveKey] = useState(views[0]?.id); + // - const [views, setViews] = useState([]); + const instance = useInject(ViewInstance); const updateViews = useCallback( function updateViews() { @@ -337,6 +292,8 @@ export const App = forwardRef(function App() { ) .then((v) => { setViews(v); + setActiveKey(v[v.length - 1]?.id); + return; }) .catch((e) => { @@ -369,6 +326,14 @@ export const App = forwardRef(function App() { }; }, [instance, updateViews, views.length]); + const items = views.map((v) => { + return { + label: (v.title.label as string) || 'loading', + children: , + key: v.id, + }; + }); + return (
@@ -431,9 +396,25 @@ export const App = forwardRef(function App() { - {views.map((view) => { + { + setActiveKey(key); + }} + activeKey={activeKey} + type="editable-card" + onEdit={(targetKey: any, action: 'add' | 'remove') => { + if (action === 'remove') { + const targetView = views.find((v) => v.id === targetKey); + targetView?.dispose(); + updateViews(); + } + }} + items={items} + > + {/* {views.map((view) => { return ; - })} + })} */}
); diff --git a/packages/libro-terminal/src/view.tsx b/packages/libro-terminal/src/view.tsx index 834a4511..bad401dd 100644 --- a/packages/libro-terminal/src/view.tsx +++ b/packages/libro-terminal/src/view.tsx @@ -182,6 +182,7 @@ export class LibroTerminalView extends BaseStatefulView { this.toDispose.push( this.term.onResize((data) => { this.onSizeChangedEmitter.fire(data); + this.setSessionSize(); }), ); @@ -455,13 +456,22 @@ export class LibroTerminalView extends BaseStatefulView { if (!this.isVisible) { return; } + if (this.container?.current) { + if (this.container.current.offsetHeight === 0) { + return; + } + if (this.container.current.offsetWidth === 0) { + return; + } + } + + // 触发term的resize 事件 this.processResize(); }; protected processResize = () => { this.open(); this.resizeTerminal(); - this.setSessionSize(); }; protected open = (): void => {