Move options to bottom #110

src/views/tool/jwt.vue

 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle('decode')">解码</Button>
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.header">header</Checkbox>
-                <Checkbox v-model="current.payload">payload</Checkbox>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
-    </div>
+    <heightResize @resize="resize">
+        <Row :gutter="10">
+            <Col span="12">
+                <input-block bottom="4px">
+                    <code-editor :height="editorheight" :placeholder="$t('jwt_input')"  hideLineNumbers v-model="current.input"></code-editor>
+                    <template slot="extra">
+                        <Checkbox v-model="current.header">header</Checkbox>
+                        <Checkbox v-model="current.payload">payload</Checkbox>
+                    </template>
+                </input-block>
+            </Col>
+            <Col span="12">
+                <code-editor :height="editorheight" :placeholder="$t('jwt_output')" :value="output" language="json"></code-editor>
+            </Col>
+        </Row>
+    </heightResize>
 </template>
 <script>
 import jwtDecode from "jwt-decode"
+import codeEditor from "./components/codeEditor";
+import jsonFormatter from "./library/formatter/json";
+import heightResize from "./components/heightResize";
 
 export default {
+    components: {
+        codeEditor,
+        heightResize
+    },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData("input"))
+        this.$initToolData('input')
     },
-    methods: {
-        handle(v) {
-            if (this.current.input) {
-                try {
-                    let data = {};
-                    if (this.current.header) {
-                        data.header = jwtDecode(this.current.input, {header: true})
-                    }
-                    if (this.current.payload) {
-                        data.payload = jwtDecode(this.current.input)
-                    }
-                    this.current.output = JSON.stringify(
-                        Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
-                        null,4
-                    );
-                    this.current.operation = v;
-                    this.$clipboardCopy(this.current.output);
-                    this.$saveToolData(this.current);
-                } catch (e) {
-                    this.$Message.error("解码失败")
-                    console.log(e)
+    computed: {
+        output() {
+            if(!this.current.input.trim()){
+                return ""
+            }
+            try {
+                let data = {};
+                if (this.current.header) {
+                    data.header = jwtDecode(this.current.input, {header: true})
+                }
+                if (this.current.payload) {
+                    data.payload = jwtDecode(this.current.input)
                 }
+                this.$saveToolData(this.current);
+                return jsonFormatter.objectBeautify(
+                    Object.keys(data).length === 1 ? data[Object.keys(data)[0]] : data,
+                );
+            } catch (e) {
+                return this.$t('jwt_decode_fail',[e.message])
             }
         }
     },
+    methods:{
+        resize(height){
+            this.editorheight = height+"px"
+        }
+    },
     data() {
         return {
             current: {
                 input: "",
-                output: "",
                 header: false,
                 payload: true,
-                operation: ""
-            }
+            },
+            editorheight:"100%",
         }
     },
 }
-</script>
\ No newline at end of file
+</script>