feat: update the resize

src/app/replay-page/json/json.component.css

+
 #term {
-  padding: 20px;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+}
+
+#term > div {
+  height: 100%;
+}
+
+.terminal {
+  border: #000 solid 5px;
+  color: #f0f0f0;
+  box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+  white-space: nowrap;
+  display: inline-block;
+  height: 100%;
+}
+
+#term .terminal div span {
+  min-width: 12px;
 }

src/app/replay-page/json/json.component.ts

@@ -22,18 +22,32 @@ export class JsonComponent implements OnInit {
   pos = 0;
   scrubber: number;
 
-// Todo: initial the term size
   constructor() {
   }
 
   ngOnInit() {
+    let col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+    let row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
     this.term = new Terminal({
-      cols: '180',
-      rows: '35',
+      cols: col,
+      rows: row,
       useStyle: true,
       screenKeys: true,
     });
     this.term.open(document.getElementById('term'), true);
+    const that = this;
+    window.onresize = function () {
+      let col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+      let row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+
+      if (col < 80) {
+        col = 80;
+      }
+      if (row < 24) {
+        row = 24;
+      }
+      that.term.resize(col, row);
+    };
   }