界面优化

src/views/tool/jsonToObject.vue

 <template>
     <Row :gutter="10">
         <Col span="10">
-            <div class="page-option-block">
-                <option-block style="padding: 0 0">
+            <Card :padding="0">
+                <p slot="title">JSON内容</p>
+                <codemirror ref="json" v-model="current.json" :options="options('Json')"></codemirror>
+            </Card>
+            <option-block>
+                <FormItem>
                     <Input v-model="current.package">
                         <div slot="prepend">namespace/package</div>
                     </Input>
-                </option-block>
-                <option-block>
+                </FormItem>
+            </option-block>
+            <option-block>
+                <FormItem>
                     <Input v-model="current.class">
                         <div slot="prepend">class/struct</div>
                     </Input>
-                </option-block>
-            </div>
-            <input-block top="10px" right="10px" :text="$t('jsonToObject_format')"
-                         @on-default-right-bottom-click="format">
-                <heightResize :append="['.page-option-block']">
-                    <code-editor v-model="current.input" :placeholder="$t('jsonToObject_input')" language="json"/>
-                </heightResize>
-            </input-block>
+                </FormItem>
+            </option-block>
         </Col>
         <Col span="14">
-            <input-block top="10px" right="10px">
-                <heightResize>
-                    <code-editor :placeholder="$t('jsonToObject_output')" :value="output"
-                                 :language="languages[current.type]"/>
-                </heightResize>
+            <Card :padding="0">
+                <p slot="title">转换结果</p>
                 <template slot="extra">
-                    <RadioGroup v-model="current.type" type="button" button-style="solid">
-                        <Radio :label="type" v-for="(type) in types" :key="type">
-                            <span>{{ type }}</span>
-                        </Radio>
-                    </RadioGroup>
+                    <Button style="margin-right: 5px" size="small" v-for="(item,key) in type" :key="key" type="primary"
+                            @click="handle(item)">转 {{ item }} 实体
+                    </Button>
                 </template>
-            </input-block>
+                <codemirror ref="output" v-model="current.output"
+                            :options="options(this.current.type)"></codemirror>
+            </Card>
         </Col>
     </Row>
 </template>
 <script>
-import codeEditor from "./components/codeEditor";
 import json2Go from './library/json2Go'
-import jsonFormatter from './library/formatter/json'
 import json2CSharp from './library/json2CSharp'
 import json2Java from './library/json2Java'
-import json2Dart from './library/json2Dart'
-import heightResize from "./components/heightResize";
+import {codemirror} from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/go/go.js'
+import 'codemirror/mode/clike/clike.js'
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+import 'codemirror/addon/fold/brace-fold.js'
+import 'codemirror/addon/fold/comment-fold.js'
+import 'codemirror/addon/fold/foldgutter.css'
 
 export default {
     components: {
-        codeEditor,
-        heightResize
+        codemirror,
     },
     created() {
-        this.$initToolData('input', (input) => {
-            try {
-                require('jsonlint').parse(input)
-            } catch (e) {
-                return false
-            }
-            return true
-        })
+        this.current = Object.assign(this.current, this.$getToolData())
     },
-    computed: {
-        output() {
-            if (!this.current.input.trim()) {
-                return "";
-            }
+    mounted() {
+        this.$refs.json.codemirror.setSize(null, window.innerHeight - 330)
+        this.$refs.output.codemirror.setSize(null, window.innerHeight - 230)
+    },
+    methods: {
+        handle(type) {
             try {
-                let result = "";
-                require('jsonlint').parse(this.current.input)
-                switch (this.current.type) {
+                require('jsonlint').parse(this.current.json)
+                if (!this.type.includes(type)) {
+                    throw new Error("转换类型错误")
+                }
+                this.current.type = type;
+
+                switch (type) {
                     case "Go":
-                        result = json2Go(this.current.input, this.current.class, this.current.package).go
-                        break
+                        this.current.output = json2Go(this.current.json, this.current.class, this.current.package).go
+                        break;
                     case "Java":
-                        result = json2Java(JSON.parse(this.current.input), this.current.class, this.current.package)
-                        break
-                    case "Dart":
-                        result = json2Dart(JSON.parse(this.current.input), this.current.class)
-                        break
+                        this.current.output = json2Java(JSON.parse(this.current.json), this.current.class, this.current.package)
+                        break;
                     case "C#":
-                        result = json2CSharp.convert(JSON.parse(this.current.input), this.current.class, this.current.package)
-                        break
-                    default:
-                        throw new Error(this.$t('jsonToObject_type_error').toString())
+                        this.current.output = json2CSharp.convert(JSON.parse(this.current.json), this.current.class, this.current.package)
+
+                        break;
                 }
-                this.$saveToolData(this.current)
-                return result;
             } catch (error) {
-                return this.$t('jsonToObject_error', [error.message]).toString()
+                this.$Notice.error({
+                    title: '错误提示',
+                    desc: error.message,
+                })
+                return
             }
+            this.$saveToolData(this.current)
         },
-        types() {
-            return Object.keys(this.languages)
-        }
-    },
-    methods: {
-        format() {
-            if (this.current.input.trim()) {
-                this.current.input = jsonFormatter.beautify(this.current.input)
+        options(mode) {
+            return {
+                mode: this.codemirrorMode[mode],
+                lineWrapping: false,
+                foldGutter: true,
+                indentUnit: 4,
+                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
             }
         }
     },
     data() {
         return {
             current: {
-                input: "",
+                json: "",
                 type: "Java",
                 package: "pag",
                 class: "RootName",
+                output: "",
             },
-            languages: {
-                "Java": "java",
-                "Dart": "dart",
-                "C#": "csharp",
-                "Go": "go"
+            type: ["Java", "C#", "Go"],
+            codemirrorMode: {
+                "Json": "application/json",
+                "Java": "text/x-java",
+                "C#": "text/x-csharp",
+                "Go": "text/x-go"
             },
         }
     },
 }
-</script>
+</script>
\ No newline at end of file

src/views/tool/uuid.vue

 <template>
     <div>
         <option-block>
-            <FormItem>
+            <FormItem style="width: 140px">
                 <Input v-model="current.amount">
-                    <div slot="prepend" style="width: 70px">生成数量</div>
+                    <div slot="prepend">生成数量</div>
                 </Input>
             </FormItem>
-            <FormItem>
+            <FormItem style="width: 140px">
                 <Input v-model="current.delimiter">
-                    <div slot="prepend" style="width: 70px">分隔符</div>
+                    <div slot="prepend">分隔符</div>
                 </Input>
             </FormItem>
             <FormItem>
@@ -27,11 +27,11 @@
                 <Button type="primary" @click="handle()">生成</Button>
             </FormItem>
         </option-block>
-        <Input v-model="current.output" :rows="12" type="textarea" placeholder="结果"></Input>
+        <Input v-model="current.output" :rows="14" type="textarea" placeholder="结果"></Input>
     </div>
 </template>
 <script>
-import {v4 as uuidV4,parse as uuidParse} from 'uuid';
+import {parse as uuidParse, v4 as uuidV4} from 'uuid';
 
 export default {
     created() {
@@ -48,8 +48,8 @@ export default {
         },
         generate() {
             let uuid = uuidV4()
-            if(this.current.uint8Array){
-                return "["+uuidParse(uuid).toString()+"]"
+            if (this.current.uint8Array) {
+                return "[" + uuidParse(uuid).toString() + "]"
             }
             if (this.current.filterLine) {
                 uuid = uuid.replace(/-/g, "")