improve(desktop): improve experience with avro

src/components/ImportScript.vue

@@ -12,9 +12,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item :label="$t('connections.importFormat')">
-            <el-select size="small" v-model="record.importFormat">
-              <el-option v-for="item in format" :key="item.value" :value="item.value" :label="item.label"> </el-option>
-            </el-select>
+            <el-input size="small" v-model="format" readonly></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="22">
@@ -66,12 +64,11 @@ export default class ImportScript extends Vue {
   @Prop({ default: false }) public visible!: boolean
   @Prop({ required: true }) public title!: string
   @Prop({ required: true }) public extension!: string
-  @Prop({ required: true }) public format!: FunctionList[]
+  @Prop({ required: true }) public format!: FunctionType | SchemaType
 
   private showDialog: boolean = this.visible
   private confirmLoading: boolean = false
   private record: ImportScriptForm = {
-    importFormat: this.format[0].value,
     filePath: '',
     fileName: '',
     fileContent: '',
@@ -82,17 +79,13 @@ export default class ImportScript extends Vue {
     this.showDialog = val
   }
 
-  @Watch('format')
-  private onFormatChanged(val: FunctionList[]) {
-    this.record.importFormat = val[0].value
-  }
-
   private getFileData() {
     let loading: ElLoadingComponent | undefined = undefined
+    const extensions = this.extension === 'avsc' ? ['avsc', 'json'] : [`${this.extension}`]
     remote.dialog
       .showOpenDialog({
         properties: ['openFile'],
-        filters: [{ name: '', extensions: [`${this.extension}`] }],
+        filters: [{ name: '', extensions }],
       })
       .then((res) => {
         const { filePaths } = res
@@ -105,7 +98,9 @@ export default class ImportScript extends Vue {
           this.getFileContentByFs(filePath)
         }
       })
-      .catch(() => {})
+      .catch((err: Error) => {
+        this.$message.error(err.message)
+      })
       .finally(() => {
         loading?.close()
       })
@@ -155,7 +150,6 @@ export default class ImportScript extends Vue {
     this.showDialog = false
     this.$emit('update:visible', false)
     this.record = {
-      importFormat: this.format[0].value,
       filePath: '',
       fileName: '',
       fileContent: '',

src/types/global.d.ts

@@ -405,7 +405,6 @@ declare global {
   }
 
   interface ImportScriptForm {
-    importFormat: SchemaType | FunctionType | ''
     filePath: string
     fileName: string
     fileContent: string

src/views/script/index.vue

@@ -73,24 +73,11 @@
         @qucik-save="handleTest"
       />
       <Editor
-        v-if="activeTab === schemaTab && currentSchema === 'protobuf'"
+        v-if="activeTab === schemaTab"
         ref="schemaEditor"
         id="schema-editor"
         :key="2"
-        :lang="currentFunction"
-        :isCustomerLang="true"
-        v-model="schemaEditorValue"
-        lineNumbers="on"
-        :lineNumbersMinChars="5"
-        renderHighlight="line"
-        @qucik-save="handleTest"
-      />
-      <Editor
-        v-if="activeTab === schemaTab && currentSchema === 'avro'"
-        ref="schemaEditor"
-        id="schema-editor"
-        :key="3"
-        :lang="currentFunction"
+        :lang="scriptEditorLang"
         :isCustomerLang="true"
         v-model="schemaEditorValue"
         lineNumbers="on"
@@ -127,7 +114,7 @@
         :key="3"
         ref="functionInput"
         id="function-input"
-        :lang="functionEditorLang"
+        :lang="functionInputLang"
         lineNumbers="on"
         :lineNumbersMinChars="2"
         v-model="functionInputValue"
@@ -137,7 +124,7 @@
         :key="4"
         ref="schemaInput"
         id="schema-input"
-        :lang="schemaEditorLang"
+        :lang="schemaInputLang"
         lineNumbers="on"
         :lineNumbersMinChars="2"
         v-model="schemaInputValue"
@@ -183,7 +170,7 @@
       @finish="handleUpload"
       :title="activeTab === functionTab ? $t('script.importFunction') : $t('script.importSchema')"
       :extension="extension"
-      :format="activeTab === functionTab ? functionList : schemaList"
+      :format="activeTab === functionTab ? currentFunction : currentSchema"
       :visible.sync="showImportScript"
     />
   </div>
@@ -219,7 +206,6 @@ export default class Script extends Vue {
     { label: 'Avro', value: 'avro' },
   ]
   private functionList: FunctionList[] = [{ label: 'JavaScript', value: 'javascript' }]
-  // TODO: Because the editor does not support the parsing of the protobuf language, the editor language is temporarily set to javascript.
   private currentSchema: SchemaType = 'protobuf'
   private currentFunction: FunctionType = 'javascript'
   private readonly inputTypeList: PayloadType[] = ['JSON', 'Plaintext', 'Base64', 'Hex']
@@ -255,8 +241,8 @@ export default class Script extends Vue {
   private tempScriptId: string = ''
   private functionInputType: PayloadType = 'JSON'
   private schemaInputType: PayloadType = 'JSON'
-  private functionEditorLang = 'json'
-  private schemaEditorLang = 'json'
+  private functionInputLang = 'json'
+  private schemaInputLang = 'json'
   // record content
   private protoName: string = ''
   private record: ScriptModel = {
@@ -314,12 +300,12 @@ message Person {
 
   @Watch('functionInputType')
   handleFunctionInputTypeChange(val: PayloadType) {
-    this.functionEditorLang = val === 'JSON' ? 'json' : 'plaintext'
+    this.functionInputLang = val === 'JSON' ? 'json' : 'plaintext'
   }
 
   @Watch('schemaInputType')
   handleSchemaInputTypeChange(val: PayloadType) {
-    this.schemaEditorLang = val === 'JSON' ? 'json' : 'plaintext'
+    this.schemaInputLang = val === 'JSON' ? 'json' : 'plaintext'
   }
 
   get inUseScript() {
@@ -328,6 +314,24 @@ message Person {
     )
   }
 
+  get scriptEditorLang() {
+    switch (this.activeTab) {
+      case 'functionTab':
+        return 'javascript'
+
+      case 'schemaTab':
+        return (
+          {
+            protobuf: 'plaintext',
+            avro: 'json',
+          }[this.currentSchema] || 'plaintext'
+        )
+
+      default:
+        return 'plaintext'
+    }
+  }
+
   private created() {
     this.functionEditorValue = this.defaultFunction[this.currentFunction].content
     this.schemaEditorValue = this.defaultSchema[this.currentSchema].content