优化滚动条样式，修复滚动条影响可视宽度的问题

Author: tzfun

src/Terminal.js

@@ -216,13 +216,15 @@ export default {
             } else if (type === 'focus') {
                 this._focus()
             } else if (type === 'elementInfo') {
-                let windowRect = this.$refs.terminalWindow.getBoundingClientRect()
+                let windowEle = this.$refs.terminalWindow
+                let windowRect = windowEle.getBoundingClientRect()
                 let containerRect = this.$refs.terminalContainer.getBoundingClientRect()
+                let hasScroll = windowEle.scrollHeight > windowEle.clientHeight || windowEle.offsetHeight > windowEle.clientHeight
                 return {
                     pos: this._getPosition(),           //  窗口所在位置
                     screenWidth: containerRect.width,   //  窗口整体宽度
                     screenHeight: containerRect.height, //  窗口整体高度
-                    clientWidth: windowRect.width - 40, //  可显示内容范围高度，减去padding值
+                    clientWidth: hasScroll ? (windowRect.width - 48) : (windowRect.width - 40), //  可显示内容范围高度，减去padding值，如果有滚动条去掉滚动条宽度
                     clientHeight: windowRect.height,    //  可显示内容范围高度
                     charWidth: {
                         en: this.byteLen.en,            //  单个英文字符宽度

src/css/style.css

@@ -85,6 +85,34 @@
     background-color: #2ec971;
 }
 
+.t-window::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.t-window::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+}
+
+.t-window::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    border-style: dashed;
+    border-color: transparent;
+    border-width: 2px;
+    background-color: rgba(157, 165, 183, 0.4);
+    background-clip: padding-box;
+}
+
+.t-window::-webkit-scrollbar-thumb:hover {
+    background: rgba(157, 165, 183, 0.7);
+}
+
+.t-window::-webkit-scrollbar-track {
+    border-radius: 6px;
+}
+
 .t-window,.t-ask-input, .t-window p,.t-window div {
     font-size: 13px;
     font-family: Monaco, Menlo, Consolas, monospace;