优化部分小工具

src/assets/js/navTools.js

@@ -118,13 +118,15 @@ const navTools = {
         list: {
             'edit-csv': {
                 title: 'CSV 编辑工具',
+                desc: '查看或编辑 CSV 文件',
                 component: 'OtherEditCSV',
                 update: '2022-03-17',
-                version: '1',
+                version: '2',
                 enabled: true,
             },
             'new-window': {
                 title: '新窗口（小窗）中打开',
+                desc: '从新的小窗口中打开指定的链接（仅支持 PC 端浏览器）',
                 component: 'OtherNewWindow',
                 update: '2021-05-03',
                 version: '1',
@@ -132,6 +134,7 @@ const navTools = {
             },
             'run-js': {
                 title: '执行 JavaScript',
+                desc: '执行简单的 JavaScript 代码片段',
                 component: 'OtherRunJS',
                 update: '2021-06-14',
                 version: '2',

src/components/Tools/GenRandomStr.vue

@@ -59,18 +59,20 @@
       <div class="content">
         <el-button
           type="primary"
+          size="small"
+          plain
           @click="btnGenerate()"
         >生成</el-button>
       </div>
     </div>
 
     <div class="reference">
-      <div class="title">参考资料</div>
+      <div class="title">算法参考</div>
       <div class="content">
         <el-link
           href="https://www.cnblogs.com/hankuksui/p/9892729.html"
           target="_blank"
-          type="primary"
+          type="success"
         >博客园 - hankuksui</el-link>
       </div>
     </div>

src/components/Tools/OtherEditCSV.vue

@@ -12,7 +12,7 @@
   <div class="tool-page">
 
     <div class="actions">
-      <div class="title">导入 / 导出</div>
+      <div class="title">打开 / 保存</div>
       <div class="content">
 
         <file-upload accept=".csv" @changed="importCSV">
@@ -20,7 +20,7 @@
             type="success"
             size="small"
             plain
-          >导入 CSV</el-button>
+          >打开 CSV</el-button>
         </file-upload>
 
         <el-button
@@ -28,7 +28,7 @@
           size="small"
           plain
           @click="exportCSV()"
-        >导出 CSV</el-button>
+        >保存 CSV</el-button>
 
         <el-button
           type="primary"
@@ -90,7 +90,30 @@
     <div class="editor">
       <div class="title">编辑区</div>
       <div class="content">
-        <div ref="dgxl" class="grid"></div>
+        <div
+          ref="dgxl"
+          class="grid"
+          :style="{ height: `${editorHeight}rem` }"
+        ></div>
+      </div>
+    </div>
+
+    <div class="config">
+      <div class="title">设置</div>
+      <div class="content">
+
+        <div class="config-item">
+          <div class="title">编辑区高度</div>
+          <el-input-number
+            v-model="editorHeight"
+            size="medium"
+            :min="15"
+            :max="50"
+            :step="1"
+            step-strictly
+          ></el-input-number>
+        </div>
+
       </div>
     </div>
 
@@ -185,6 +208,7 @@ export default {
   data() {
     return {
 
+      editorHeight: 25,
       gridInstance: null,
 
     }
@@ -296,12 +320,12 @@ export default {
 
     },
 
-    /** 导出 CSV */
+    /** 保存 CSV */
     exportCSV() {
       this.callGrid('downloadDataAsCSV');
     },
 
-    /** 导入 CSV */
+    /** 打开 CSV */
     importCSV(datas) {
 
       const files = datas.list;
@@ -388,7 +412,7 @@ export default {
 
   .grid {
     width: 100%;
-    height: 400px;
+    height: 25rem;
     border: 0.125rem solid #2196f3;
     border-radius: 0.375rem;
   }
@@ -427,4 +451,14 @@ export default {
     display: none !important;
   }
 }
+
+.config .config-item {
+  > div {
+    display: inline-block;
+  }
+
+  .title {
+    margin-right: 0.5em;
+  }
+}
 </style>

src/components/Tools/OtherNewWindow.vue

@@ -19,8 +19,16 @@
     <div class="action">
       <div class="title">操作</div>
       <div class="content">
-        <el-button type="primary" @click="btnOpen()">打开</el-button>
-        <el-button type="danger" @click="btnClear()">清空</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="btnOpen()"
+        >打开</el-button>
+        <el-button
+          type="danger"
+          plain
+          @click="btnClear()"
+        >清空</el-button>
       </div>
     </div>
 

src/components/Tools/OtherRunJS.vue

@@ -13,8 +13,18 @@
     <div class="action">
       <div class="title">操作</div>
       <div class="btns">
-        <el-button type="primary" @click="btnRun()">执行</el-button>
-        <el-button type="danger" @click="btnClear()">清空</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          @click="btnRun()"
+        >执行</el-button>
+        <el-button
+          type="danger"
+          size="small"
+          plain
+          @click="btnClear()"
+        >清空</el-button>
       </div>
     </div>