添加语言转换显示

jsonEditor/public/preload.js

@@ -32,7 +32,7 @@ window.open = function (url) {
 }
 
 globalThis._quickType = quickType
-globalThis._convertJson = async function (targetLanguage, typeName, jsonString) {
+globalThis._convertJson = async function (targetLanguage, typeName, jsonString, options) {
     const jsonInput = quickType.jsonInputForTargetLanguage(targetLanguage);
 
     // We could add multiple samples for the same desired
@@ -46,8 +46,8 @@ globalThis._convertJson = async function (targetLanguage, typeName, jsonString)
     const inputData = new quickType.InputData();
     inputData.addInput(jsonInput);
 
-    return await quickType.quicktype({
+    return await quickType.quicktype(Object.assign({
         inputData,
         lang: targetLanguage,
-    });
+    }, options));
 }

jsonEditor/src/components/DetailViewer.vue

@@ -31,6 +31,7 @@ const props = defineProps<{
   word-break: break-all;
   word-wrap: break-word;
   white-space: break-spaces;
+
   &.v-enter-active, &.v-leave-active {
     transition: right .3s;
   }
@@ -43,7 +44,7 @@ const props = defineProps<{
     display: none;
   }
 
-  &:focus{
+  &:focus {
     outline: none;
   }
 

jsonEditor/src/components/ExposeViewer.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import MonacoEditor, { EditorType, MonacoType } from './MonacoEditor.vue';
+import { ref } from "vue";
+// props
+const props = defineProps<{
+  json: string
+}>();
+// data
+const editorOption = {
+  lineNumbers: 'off',
+  glyphMargin: false,
+  folding: false,
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 0,
+  readOnly: true,
+  contextmenu: false
+}
+const code = ref("");
+const language = ref('java'), className = ref('')
+
+async function convert() {
+  const {lines} = await _convertJson(
+      "Java",
+      "Json",
+      props.json
+  );
+  code.value = lines.join("\n");
+}
+
+
+// method
+function onEditorMounted(editor: EditorType, monaco: MonacoType) {
+}
+
+</script>
+
+<template>
+  <div class="expose-editor-wrapper">
+    <monaco-editor ref="editorRef"
+                   :value="code" class="expose-editor" :language="language"
+                   :editor-mounted="onEditorMounted" :option="editorOption"/>
+    <div class="json-path-input-wrapper">
+      <span class="json-path-start">$</span><input type="text" class="json-path-input" v-model="pathExpression"
+                                                   placeholder="请输入Json Path表达式">
+    </div>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+
+.json-path-editor-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .json-path-input-wrapper {
+    width: 100%;
+    height: 40px;
+    display: flex;
+
+    .json-path-start {
+      width: 40px;
+      line-height: 40px;
+      text-align: center;
+      background-color: #303133;
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .json-path-input {
+      flex: 1;
+      background-color: #505050;
+      padding: 0 0.5rem;
+      color: #fff;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+  }
+
+  .json-path-editor {
+    flex: 1;
+    width: 100%;
+  }
+}
+</style>

jsonEditor/src/components/JsonViewer.vue

@@ -11,6 +11,14 @@ import JsonPathViewer from './JsonPathViewer.vue';
 import xmlToJson from '@/tools/xml/xmlToJson'
 import xmlToJsonConvertor from "@/tools/xml/xmlToJsonConvertor";
 
+const exposeViewerEditorConfig = {
+  lineNumbers: 'off',
+  glyphMargin: false,
+  folding: false,
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 0,
+  contextmenu: false
+}
 const props = withDefaults(defineProps<{
   value: string
 }>(), {});
@@ -19,7 +27,8 @@ let openMultipleCursorDialog = ref(false), openHistoryPanel = ref(false);
 let multipleCursorPoints = reactive({start: undefined, end: undefined});
 let monacoEditor: EditorType;
 let openJsonPathViewer = ref(false);
-let jsonPathObj = computed(() => {
+const detailViewerShow = ref(false);
+const jsonPathObj = computed(() => {
   if (!openJsonPathViewer.value) {
     return {};
   }
@@ -29,6 +38,7 @@ let jsonPathObj = computed(() => {
     return 'json格式错误';
   }
 })
+const exposeObj = ref('')
 // emit
 const emit = defineEmits<{
   (e: 'update:value', value: string | undefined): void
@@ -137,6 +147,26 @@ function multipleCursors(points: { start: number, end: number }) {
   }
 }
 
+function jsonPathClick() {
+  openJsonPathViewer.value = !openJsonPathViewer.value;
+  detailViewerShow.value = false;
+}
+
+async function convert() {
+  detailViewerShow.value = !detailViewerShow.value;
+  openJsonPathViewer.value = false;
+  if (detailViewerShow.value) {
+    const {lines: JavaCodes} = await _convertJson(
+        "Java",
+        "Json",
+        getEditor()?.getValue(),
+        {
+          rendererOptions: {'just-types': 'true'}
+        }
+    );
+    exposeObj.value = JavaCodes.join("\n");
+  }
+}
 
 function onHistorySelect(history: History) {
   updateValue(history.text)
@@ -160,27 +190,21 @@ function onEditorMounted(editor: EditorType, monaco: MonacoType) {
 }
 
 
-async function convert() {
-  const {lines: JavaCodes} = await _convertJson(
-      "Java",
-      "Test",
-      getEditor()?.getValue()
-  );
-  console.log(JavaCodes.join("\n"));
-}
-
 </script>
 
 <template>
   <div style="height: 100vh" class="d-flex flex-column ">
     <div class="editor-panel">
-      <div class="json-editor-wrapper" :class="{'half-width':openJsonPathViewer}">
+      <div class="json-editor-wrapper" :class="{'half-width':openJsonPathViewer||detailViewerShow}">
         <monaco-editor :value="props.value" ref="editorRef" @update:value="$emit('update:value',$event)"
                        :editor-mounted="onEditorMounted" language="json"/>
       </div>
-      <div class="json-path-viewer-wrapper" v-show="openJsonPathViewer">
+      <div class="other-viewer-wrapper json-path-viewer-wrapper" v-show="openJsonPathViewer">
         <json-path-viewer :json="jsonPathObj"/>
       </div>
+      <div class="other-viewer-wrapper expose-viewer-wrapper" v-show="detailViewerShow">
+        <monaco-editor v-model:value="exposeObj" language="java" :option="exposeViewerEditorConfig"/>
+      </div>
     </div>
 
     <div class="tools-list">
@@ -190,9 +214,9 @@ async function convert() {
       <v-btn color="blue" size="small" variant="text" @click="clearEscape">去转义</v-btn>
       <v-btn color="blue" size="small" variant="text" @click="convertBase64">去base64</v-btn>
       <v-btn color="blue" size="small" variant="text" @click="multipleCursors(null)">多光标</v-btn>
-      <v-btn color="blue" size="small" variant="text" @click="openJsonPathViewer = !openJsonPathViewer">JSON-PATH
+      <v-btn color="blue" size="small" variant="text" @click="jsonPathClick">JSON-PATH
       </v-btn>
-      <v-btn color="blue" size="small" variant="text" @click="convert">转换</v-btn>
+      <v-btn color="blue" size="small" variant="text" @click="convert">语言转换</v-btn>
     </div>
     <history-panel v-model:show="openHistoryPanel" @itemClick="onHistorySelect"/>
     <v-dialog v-model="openMultipleCursorDialog" persistent>
@@ -224,6 +248,7 @@ async function convert() {
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <!--    <detail-viewer :detail="exposeObj" v-model:show="detailViewerShow"/>-->
   </div>
 </template>
 
@@ -249,7 +274,7 @@ $history-list-header-height: 48px;
     }
   }
 
-  .json-path-viewer-wrapper {
+  .other-viewer-wrapper {
     height: 100%;
     width: 50%;
   }

jsonEditor/src/components/MonacoEditor.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
 import * as monaco from 'monaco-editor';
-import { onDeactivated, onMounted, ref, Ref, watch, defineComponent, PropType } from "vue";
+import { defineComponent, onDeactivated, onMounted, PropType, ref, watch } from "vue";
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import TypeScriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import '@/monaco-syntax'
 
 if (!(self as any).MonacoEnvironment) {
   (self as any).MonacoEnvironment = {
@@ -34,7 +35,7 @@ export default defineComponent({
     value: {type: String, required: true},
     language: {
       type: String,
-      validator: (language: string) => ['javascript', 'typescript', 'json', 'html', 'css'].indexOf(language) >= 0
+      validator: (language: string) => ['javascript', 'typescript', 'json', 'html', 'css', 'java'].indexOf(language) >= 0
     },
     option: {
       type: Object as PropType<monaco.editor.IStandaloneEditorConstructionOptions>
@@ -47,8 +48,11 @@ export default defineComponent({
     let editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
     const editorContainer = ref<HTMLElement | null>(null);
     watch(() => props.value, (newValue) => {
+      if (newValue === editor?.getValue()) {
+        return;
+      }
       if (props.option?.readOnly) {
-        editor?.setValue(newValue)
+        editor?.setValue(newValue);
       } else {
         editor?.executeEdits('', [{
           // @ts-ignore

jsonEditor/src/model/expose.ts

@@ -0,0 +1,19 @@
+export interface BaseExposeConfig {
+  language: string,
+  className: string
+  onlyType: boolean
+}
+
+export interface HasPackageExposeConfig extends BaseExposeConfig {
+  packageName: string
+}
+
+
+export interface JavaExposeConfig extends HasPackageExposeConfig {
+}
+
+export interface GoExposeConfig extends HasPackageExposeConfig {
+}
+
+export interface JavaScriptExposeConfig extends BaseExposeConfig {
+}

jsonEditor/src/monaco-syntax/index.ts

@@ -0,0 +1 @@
+import './java'