优化“比例计算”和“WebSocket”工具

src/assets/js/navTools.js

@@ -23,8 +23,8 @@ let navTools = {
                 title: '比例计算',
                 desc: '按设定的比例计算给出的数值所对应的数值。',
                 component: 'CalcRatio',
-                update: '2021-11-14',
+                update: '2021-11-16',
-                version: '1',
+                version: '2',
                 enabled: true
             },
             'simple': {
@@ -125,8 +125,8 @@ let navTools = {
                 title: 'WebSocket',
                 desc: 'WebSocket 测试工具',
                 component: 'OtherWebSocket',
-                update: '2021-11-14',
+                update: '2021-11-19',
-                version: '3',
+                version: '4',
                 enabled: true
             },
         }

src/components/tools/CalcRatio.vue

@@ -11,11 +11,11 @@
       </div>
     </div>
 
-    <div class="digits">
+    <div class="decimals">
       <div class="title">小数位数</div>
       <div class="content">
         <el-input-number
-          v-model="digits"
+          v-model="decimals"
           controls-position="right"
           size="small"
           :min="0"
@@ -34,7 +34,10 @@
           v-model="base.a"
           controls-position="right"
           size="small"
+          :min="limit.min"
+          :max="limit.max"
           :step="1"
+          step-strictly
           @change="update()"
         ></el-input-number>
         <span class="split">:</span>
@@ -42,7 +45,10 @@
           v-model="base.b"
           controls-position="right"
           size="small"
+          :min="limit.min"
+          :max="limit.max"
           :step="1"
+          step-strictly
           @change="update()"
         ></el-input-number>
       </div>
@@ -75,7 +81,7 @@
 </template>
 
 <script>
-import { divide, multiply, round } from 'mathjs';
+import { bignumber, divide, floor, multiply, round } from 'mathjs';
 
 export default {
   name: 'CalcRatio',
@@ -92,7 +98,12 @@ export default {
         b: 1,
       },
       // 小数位数
-      digits: 5,
+      decimals: 5,
+      // 数值范围限制
+      limit: {
+        min: -99999999,
+        max: 99999999,
+      },
       // 模式
       mode: '1-to-2',
     }
@@ -102,20 +113,37 @@ export default {
     /**
      * 计算
      */
-    update() {
+    calculate() {
-      const base = this.base;
+      const { base, calc, decimals, mode } = this;
-      const calc = this.calc;
+      const { min, max } = this.limit;
-      const digits = this.digits;
+      const ratio = divide(bignumber(base.a), bignumber(base.b));
-      const mode = this.mode;
-      const ratio = base.a / base.b;
 
       if (mode === '1-to-2') {
-        calc.b = round(divide(calc.a, ratio), digits);
+        // 限制
+        (calc.a = floor(calc.a));
+        (calc.a < min) && (calc.a = min);
+        (calc.a > max) && (calc.a = max);
+        // 计算
+        calc.b = round(divide(bignumber(calc.a), ratio), decimals);
       } else if (mode === '2-to-1') {
-        calc.a = round(multiply(calc.b, ratio), digits);
+        // 限制
+        (calc.b = floor(calc.b));
+        (calc.b < min) && (calc.b = min);
+        (calc.b > max) && (calc.b = max);
+        // 计算
+        calc.a = round(multiply(bignumber(calc.b), ratio), decimals);
       }
     },
 
+    /**
+     * 更新
+     */
+    update() {
+      this.$nextTick(() => {
+        this.calculate();
+      });
+    },
+
   },
 }
 </script>

src/components/tools/OtherWebSocket.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="tool-page">
 
+    <!-- 注意 -->
+    <div class="inputs">
+      <div class="title">注意</div>
+      <div class="content">
+        <p>由于浏览器限制，通过 HTTPS 访问网站时只能连接带 SSL 的 WebSocket（WSS）；</p>
+        <p>若需要连接不带 SSL 的 WebSocket（WS），建议下载到本地后使用。</p>
+      </div>
+    </div>
+
     <!-- 输入 -->
     <div class="inputs">
       <div class="title">输入</div>
@@ -105,6 +114,19 @@
           ></el-input-number>
         </div>
 
+        <!-- 日志最大行数 -->
+        <div class="config-item">
+          <div class="title">日志最大行数</div>
+          <el-input-number
+            v-model="logsMax"
+            size="medium"
+            :min="1"
+            :max="8192"
+            :step="1"
+            step-strictly
+          ></el-input-number>
+        </div>
+
         <!-- 解析类型 -->
         <div class="config-item">
           <div class="title">解析类型</div>
@@ -168,6 +190,8 @@ export default {
       inputs: '',
       // 日志高度
       logsHeight: 20,
+      // 日志最大行数
+      logsMax: 100,
       // 接收内容
       messages: [],
       // 消息ID
@@ -231,6 +255,36 @@ export default {
       }).catch(() => { });
     },
 
+    /**
+     * 添加消息
+     * 
+     * @param {string} type 类型（receive、send）
+     * @param {string} msg 消息内容
+     */
+    pushMessage(type, msg = '') {
+      const types = ['receive', 'send'];
+
+      if (types.indexOf(type) === -1) {
+        return;
+      }
+
+      const current = this.messages.length;
+      const max = this.logsMax;
+
+      // 最大行数
+      if (current >= max) {
+        this.messages.splice(0, (current - max + 1));
+      }
+
+      this.messageID += 1;
+      this.messages.push({
+        id: this.messageID,
+        message: msg,
+        time: (new Date().getTime()),
+        type: type,
+      });
+    },
+
     /**
      * 提示信息
      * 
@@ -287,13 +341,7 @@ export default {
       console.log('%c%s', 'color: #2196F3;', '[接收]', (parsed || result));
 
       // 记录消息
-      this.messageID += 1;
+      this.pushMessage('receive', msg);
-      this.messages.push({
-        id: this.messageID,
-        message: msg,
-        time: (new Date().getTime()),
-        type: 'receive',
-      });
 
       // 自动滚动
       this.$nextTick(() => {
@@ -392,13 +440,7 @@ export default {
       if (ws && parsed) {
         console.log('%c%s', 'color: #4CAF50;', '[发送]', parsed);
         ws.send(msg);
-        this.messageID += 1;
+        this.pushMessage('send', msg);
-        this.messages.push({
-          id: this.messageID,
-          message: msg,
-          time: (new Date().getTime()),
-          type: 'send',
-        });
       }
     },