diff --git a/src/UI/Components/CommandInput/TransparentTerminal.tsx b/src/UI/Components/CommandInput/TransparentTerminal.tsx index 93ae03514..bb8774e6d 100644 --- a/src/UI/Components/CommandInput/TransparentTerminal.tsx +++ b/src/UI/Components/CommandInput/TransparentTerminal.tsx @@ -9,6 +9,14 @@ import { CommandLine } from "../CommandLine"; */ export class TransparentTerminal extends React.Component<{}, {}> { + //输出信息列表的容器 + _OutputContainer: HTMLElement; + _CommandListContainer: HTMLElement; + componentDidUpdate() + { + this._OutputContainer.scrollTop = this._CommandListContainer.offsetHeight; + } + render() { const store = CommandStore.GetInstance(); @@ -18,25 +26,26 @@ export class TransparentTerminal extends React.Component<{}, {}> style={{ height: 0, position: "relative", - // pointerEvents: "none",//保证点击实体的按钮可用 + pointerEvents: "none", display: store.isTransparentTerminalShow ? "block" : "none" }} >
{ this._OutputContainer = el; }} style={{ - height: 110, - top: -110, + bottom: 0, overflow: "hidden", position: "absolute", }} >
{ this._CommandListContainer = el; }} > { - store.promptList.slice(-5).map(cmd => + store.promptList.slice(-50).map(cmd => { if (store.showCmdTypeList.has(cmd.type)) return ; diff --git a/src/UI/Components/CommandLine.tsx b/src/UI/Components/CommandLine.tsx index c29fa3030..99873dc6d 100644 --- a/src/UI/Components/CommandLine.tsx +++ b/src/UI/Components/CommandLine.tsx @@ -18,6 +18,9 @@ export class CommandLine extends React.Component<{ msg: CommandMsg; }, {}> {msg.msg} {msg.entity && msg.entity.length > 0 ? { diff --git a/src/UI/Css/style.less b/src/UI/Css/style.less index 04404762b..7e1df5bb9 100644 --- a/src/UI/Css/style.less +++ b/src/UI/Css/style.less @@ -199,7 +199,8 @@ body { .terminal-output { flex: 1; - .terminal-control{ + + .terminal-control { margin-left: 5px; color: white; border-radius: 2px; @@ -216,9 +217,10 @@ body { height: 100%; } -.command-input-area{ +.command-input-area { position: relative; - .command-setting-wrench{ + + .command-setting-wrench { z-index: 30; position: absolute; top: -160px; @@ -228,18 +230,22 @@ body { padding: 10px; border: 1px solid #a8b2b8; border-radius: 4px; - .command-error{ + + .command-error { color: #ed5252; } - .command-warning-sign{ + + .command-warning-sign { color: #d7d223; } - .command-info-sign{ + + .command-info-sign { color: #48aff0; } } - .command-eject{ + + .command-eject { display: flex; justify-content: center; align-items: center; @@ -504,24 +510,26 @@ input[type=radio] { #CommandInput { - .terminal-error{ + .terminal-error { background-color: #db3737 !important; } - .terminal-warning{ + .terminal-warning { background-color: #cd5f01 !important; } - .terminal-info{ + .terminal-info { background-color: #007193 !important; } - .terminal-warning, .terminal-error, .terminal-info{ + .terminal-warning, + .terminal-error, + .terminal-info { color: white; border-radius: 1px; } - .strong-message{ + .strong-message { cursor: pointer; font-weight: 600; text-decoration-line: underline; @@ -529,7 +537,7 @@ input[type=radio] { font-style: italic; } - .normal-message{ + .normal-message { background: rgba(0, 0, 0, 0) !important; } } @@ -538,8 +546,9 @@ input[type=radio] { word-break: break-all; margin-bottom: 2px; display: flex; - span{ - padding: 1px 2px; + + span { + padding: 1px 2px; } } @@ -567,12 +576,14 @@ input[type=radio] { animation-iteration-count: 1; animation-fill-mode : forwards; opacity : 1; + visibility: visible; } //fade out 动画 @keyframes fade-out { 100% { opacity: 0; + visibility: hidden; } } @@ -1449,8 +1460,8 @@ img { } } - .bp3-dialog-footer{ - display : unset; + .bp3-dialog-footer { + display: unset; border-top: 1px solid #ccc; } } @@ -1484,26 +1495,26 @@ img { } //导出配置 -#modal{ - .leadingOut{ +#modal { + .leadingOut { padding: 10px; - .bp3-heading{ + .bp3-heading { margin-bottom: 3px; } - .checkOption{ - .bp3-checkbox{ + .checkOption { + .bp3-checkbox { margin: 0px 0px 2px; } max-height: 300px; - min-width : 200px; - padding : 5px; - overflow : auto; + min-width : 200px; + padding : 5px; + overflow : auto; } - .flex-between{ + .flex-between { margin-top: 2px; } }