修复:透明输出在双行情况下显示错误,透明输出点击查看实体优化

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"
                 }}
             >
                 <div
                     id="TerminalTransparent"
                     className='terminal-output-area-transparent flexCol'
+                    ref={el => { this._OutputContainer = el; }}
                     style={{
-                        height: 110,
-                        top: -110,
+                        bottom: 0,
                         overflow: "hidden",
                         position: "absolute",
                     }}
                 >
                     <div className='terminal-pusher'></div>
                     <div className='terminal-output'
+                        ref={el => { this._CommandListContainer = el; }}
                     >
                         {
-                            store.promptList.slice(-5).map(cmd =>
+                            store.promptList.slice(-50).map(cmd =>
                             {
                                 if (store.showCmdTypeList.has(cmd.type))
                                     return <CommandLine key={cmd.key} msg={cmd} />;

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 ?
                                     <b
+                                        style={{
+                                            pointerEvents: "visible"
+                                        }}
                                         className='terminal-control'
                                         onClick={() =>
                                         {

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