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;
}
}