完善页面

src/components/tools/OtherRunJS.vue

@@ -1,14 +1,142 @@
 <template>
-    <div class="detail-elem">
-        开发中，敬请期待。
+    <div class="tool-elem">
+
+        <!-- 输入 -->
+        <div class="input">
+            <div class="title">代码</div>
+            <el-input v-model="input.value" type="textarea" class="text"
+                :placeholder="input.placeholder" rows="10"
+            ></el-input>
+        </div>
+
+        <!-- 操作 -->
+        <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>
+            </div>
+        </div>
+
+        <!-- 输出 -->
+        <div class="output">
+            <div class="title">输出</div>
+            <div class="text">
+                <p v-for="line in output.lines" :key="line.id"
+                    :class="['line', line.type]"
+                >{{ line.message }}</p>
+            </div>
+        </div>
+
     </div>
 </template>
 
 <script>
 export default {
-    name: 'OtherRunJS'
+    name: 'OtherRunJS',
+    data() {
+        return {
+            input: {
+                value: '',
+                placeholder: '请在此处输入 JavaScript 代码'
+            },
+            output: {
+                id: 0,
+                lines: []
+            }
+        }
+    },
+    methods: {
+
+        // 运行
+        btnRun() {
+            var output = this.output;
+
+            output.lines = [];
+
+            try {
+
+                window.eval(this.input.value);
+
+            } catch (err) {
+                
+                let time = new Date();
+
+                output.id += 1;
+                output.lines.push({
+                    id: output.id + '_' + time.getTime(),
+                    message: err.message,
+                    stack: err.stack,
+                    type: 'error'
+                });
+
+            }
+        },
+
+        // 清空
+        btnClear() {
+            this.$confirm('确定要清空输入和输出的内容吗？', '确认', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+
+                this.input.value = '';
+                this.output.lines = [];
+                this.$message({
+                    message: '已清除',
+                    type: 'success'
+                });
+
+            }).catch(() => {
+
+                this.$message({
+                    message: '取消清除',
+                    type: 'info'
+                });
+
+            });
+        }
+
+    },
 }
 </script>
 
 <style lang="less" scoped>
+.tool-elem {
+    @lineHeight: 1.2rem;
+
+    > div {
+        .text {
+            line-height: @lineHeight;
+            font-family: monospace;
+            font-size: 0.8rem;
+        }
+    }
+
+    .input {
+        /deep/ .text textarea {
+            padding: 0.75rem;
+            line-height: @lineHeight;
+        }
+    }
+
+    .output {
+        .text {
+            padding: 1rem;
+            height: calc(@lineHeight * 10);
+            border: 0.1rem solid #EEE;
+            border-radius: 0.32rem;
+            overflow: auto;
+            user-select: text;
+            resize: vertical;
+        }
+
+        .line {
+            &.error {
+                color: @colorRed;
+            }
+        }
+    }
+}
 </style>

src/views/Tools.vue

@@ -23,13 +23,12 @@
         </div>
 
         <!-- 弹出 -->
-        <el-drawer direction="btt" size="100%" :append-to-body="true" :destroy-on-close="true"
-            :title="detail.title" :visible.sync="detail.show" :before-close="closeDetail"
+        <el-drawer custom-class="drawer-full" direction="btt" size="100%"
+            :append-to-body="true" :destroy-on-close="true" :title="detail.title"
+            :visible.sync="detail.show" :before-close="closeDetail"
         >
-            <!-- 内容页 -->
-            <div class="tool-content">
-                <router-view></router-view>
-            </div>
+            <!-- 内容 -->
+            <router-view></router-view>
         </el-drawer>
 
     </el-container>
@@ -207,8 +206,4 @@ export default {
         }
     }
 }
-
-.tool-content {
-    padding: 0 2rem 2rem 2rem;
-}
 </style>

src/views/ToolsDetail.vue

@@ -1,18 +1,17 @@
 <template>
     <div class="tools-detail">
-        <component :is="detailElem" />
+        <component :is="toolElem" />
     </div>
 </template>
 
 <script>
-
 export default {
     name: 'ToolsDetail',
     data() {
         return {
             utils: this.$root.utils,
             routeQuery: {},
-            detailElem: null
+            toolElem: null
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -23,7 +22,7 @@ export default {
             console.log('[打开工具] params', params);
             console.log('[打开工具] query', query);
 
-            vm.detailElem = () => {
+            vm.toolElem = () => {
                 // 动态引入组件
                 var elem = import(`@/components/tools/${query.component}.vue`);
 
@@ -35,5 +34,22 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.tools-detail {
+    display: flex;
+    align-items: top;
+    justify-content: center;
 
+    /deep/ .tool-elem {
+        width: 100%;
+        max-width: 60rem;
+
+        > div {
+            > .title {
+                padding: 1rem 0;
+                font-size: 1rem;
+                font-weight: bold;
+            }
+        }
+    }
+}
 </style>