✨ feat: 前端增加代码显示

.gitignore

@@ -55,6 +55,7 @@ backend/backupData.json
 config.ini
 *.epk
 *.bc
+*.lock
 
 tools/build_out/application/config.py
 tools/build_out/logs

evm_module_tools @ 55b1249c

-Subproject commit 0ec1baa3d93da20ef57c3dd937c19ac80bf9abad
+Subproject commit 55b1249c57b4912e8fe706d87620889b3f97bdc2

frontend/package.json

@@ -20,6 +20,7 @@
     "local-storage": "^2.0.0",
     "mockjs": "^1.1.0",
     "moment": "^2.29.1",
+    "monaco-editor": "^0.30.1",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -30,6 +31,7 @@
     "vue-count-to": "^1.0.13",
     "vue-grid-layout": "^2.3.12",
     "vue-loading-spinner": "^1.0.11",
+    "vue-monaco-editor": "^0.0.19",
     "vue-plyr": "^7.0.0",
     "vue-router": "^3.1.3",
     "vue-star-rating": "^1.7.0",

frontend/src/api/store.js

@@ -32,6 +32,14 @@ export function postByteCodeFile(data) {
   });
 }
 
+export function getFileContent(data) {
+  return request({
+    url: "/api/v1/evm_store/system/getFileContent",
+    method: "post",
+    data
+  });
+}
+
 export function postCHeaderFile(data) {
   return request({
     url: "/api/v1/evm_store/system/parseCHeader",

frontend/src/views/system/evm-module-tool.vue

@@ -8,31 +8,82 @@
     </div>
     <el-tabs v-model="activeName" type="border-card">
       <el-tab-pane label="解析文件" name="first">
-        <div style="margin: 10px 0px">
-          <el-form>
-            <el-form-item>
-              <el-upload
-                name="binfile"
-                drag
-                multiple
-                ref="upload"
-                action="null"
-                :auto-upload="false"
-                :http-request="handleUploadFile"
-                :on-remove="handleUploadRemove"
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <div style="margin: 10px 0px">
+              <el-form>
+                <el-form-item>
+                  <el-upload
+                    name="binfile"
+                    drag
+                    multiple
+                    ref="upload"
+                    action="null"
+                    :auto-upload="false"
+                    :http-request="handleUploadFile"
+                    :on-remove="handleUploadRemove"
+                  >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      将文件拖到此处，或<em>点击上传</em>
+                    </div>
+                    <div class="el-upload__tip" slot="tip">请选择C头文件</div>
+                  </el-upload>
+                </el-form-item>
+                <el-form-item label="模块名称">
+                  <el-input
+                    v-model="form.name"
+                    placeholder="请输入模块名称，不填则以文件名为准"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="注册类型">
+                  <el-select v-model="form.type" placeholder="请选择">
+                    <el-option
+                      v-for="item in optionList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="uploadFile">开始上传</el-button>
+                  <el-button @click="handleDownloadFile">下载文件</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div style="margin: 10px">
+              <el-select
+                v-model="form.file"
+                placeholder="请选择文件"
+                @change="onFileChange"
               >
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">
-                  将文件拖到此处，或<em>点击上传</em>
-                </div>
-                <div class="el-upload__tip" slot="tip">请选择C头文件</div>
-              </el-upload>
-            </el-form-item>
-            <el-form-item>
-              <el-button @click="uploadFile">开始上传</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
+                <el-option
+                  v-for="(item, index) in newFileList"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                ></el-option>
+              </el-select>
+            </div>
+            <MonacoEditor
+              height="600"
+              width="100%"
+              class="vs"
+              style="text-align: left; background-color: #fff"
+              :language="lang"
+              :key="randomkey"
+              :code="code"
+              :editorOptions="options"
+              @mounted="onMounted"
+              @codeChange="onCodeChange"
+            >
+            </MonacoEditor>
+          </el-col>
+        </el-row>
       </el-tab-pane>
       <el-tab-pane label="类型管理" name="second">
         <el-table :data="markType" size="medium" style="width: 50%">
@@ -120,14 +171,32 @@ import {
   processCHeaderFile,
   getMarkType,
   updateMarkType,
+  getFileContent,
 } from "@/api/store";
 
+import MonacoEditor from "vue-monaco-editor";
+
 export default {
   name: "EvmModule",
   data() {
     return {
+      code: 'function evm() {\t\n\tconsole.log("Hello world!");\n}',
+      editor: null,
+      randomkey: 1231231,
+      lang: "javascript",
+      options: {
+        theme: "vs",
+        selectOnLineNumbers: true,
+        roundedSelection: false,
+        readOnly: false,
+        automaticLayout: true,
+        glyphMargin: true,
+        showFoldingControls: "always",
+        formatOnPaste: true,
+        formatOnType: true,
+        folding: true,
+      },
       activeName: "first",
-      fileList: [],
       page: "evm-module-tool.vue",
       dir: null,
       baseType: [
@@ -138,13 +207,43 @@ export default {
         { label: "指针", value: "void *" },
         { label: "void", value: "void" },
       ],
+      optionList: [
+        { label: "EVM注册", value: "evm" },
+        { label: "CFFI注册", value: "cffi" },
+      ],
+      form: {
+        type: "evm",
+        name: null,
+        file: null,
+      },
+      fileList: [],
+      newFileList: [],
+      typeList: ["evm", "cffi"],
       undefined_type: [],
       error_tips: [],
       dialogVisible: false,
       markType: [],
+      result: null,
     };
   },
+  components: {
+    MonacoEditor,
+  },
   methods: {
+    createRamdomKey() {
+      return Math.floor(Math.random() * (10, 1000000012313));
+    },
+    onMounted(editor) {
+      this.editor = editor;
+    },
+    onCodeChange(editor) {
+      console.log(editor);
+    },
+    onFileChange(file) {
+      console.log(file, this.form.file);
+      if (!this.result) return;
+      this.getFileContent(file);
+    },
     createFile(content, filename) {
       const a = document.createElement("a");
       const blob = new Blob([content]);
@@ -156,7 +255,7 @@ export default {
     },
     handleUploaded(response) {
       if (response.code === 200) {
-        this.downloadFile(response);
+        this.downloadFile(response.data);
       } else {
         this.$message.warning(response.message);
       }
@@ -164,6 +263,9 @@ export default {
     handleUploadFile(file) {
       this.fileList.push(file);
     },
+    handleDownloadFile() {
+      this.downloadFile(this.result);
+    },
     handleUploadRemove(file, fileList) {
       console.log(fileList);
       for (let i = 0; i < this.fileList.length; i++) {
@@ -173,10 +275,25 @@ export default {
         }
       }
     },
+    getFileContent(file) {
+      getFileContent({ file: file })
+        .then((res) => {
+          this.code = res.data;
+          this.lang = "c";
+          this.randomkey = this.createRamdomKey();
+          this.$message.success(res.message);
+        })
+        .catch((err) => {
+          console.log(err);
+          this.$message.error(err.message);
+        });
+    },
     downloadFile(result) {
+      if (!this.result) return;
+
       const a = document.createElement("a");
-      a.download = result.data.filename;
-      a.href = result.data.url;
+      a.download = result.file;
+      a.href = result.url;
       a.target = "";
       a.click();
     },
@@ -203,12 +320,16 @@ export default {
     uploadFile() {
       this.$refs.upload.submit();
       let formData = new FormData();
+      formData.append("type", this.form.type);
+      formData.append("name", this.form.name);
       this.fileList.forEach((item) => {
         formData.append("binfile", item.file);
       });
       postCHeaderFile(formData)
         .then((res) => {
-          this.downloadFile(res);
+          this.result = res.data;
+          this.newFileList = res.data.sources;
+          if (res.data.sources.length) this.getFileContent(res.data.sources[0]);
         })
         .catch((err) => {
           if (err.code == 400) {
@@ -230,10 +351,11 @@ export default {
       this.error_tips.forEach((item) => {
         types[item.type] = item.mark;
       });
-
-      processCHeaderFile({ dir: this.dir, type: types })
+      processCHeaderFile({ dir: this.dir, type: types, module: this.form.type })
         .then((res) => {
-          this.downloadFile(res);
+          this.result = res.data;
+          this.newFileList = res.data.sources;
+          if (res.data.sources.length) this.getFileContent(res.data.sources[0]);
         })
         .catch((err) => {
           if (err.code == 400) {
@@ -251,7 +373,12 @@ export default {
         });
     },
   },
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      this.code = "console.log(123456)";
+      console.log(this.code);
+    }, 2000);
+  },
   created() {
     this.getMarkType();
   },