perf: 预览

src/api/generator/generator.ts

@@ -1,8 +1,8 @@
 import { http } from "@/utils/http";
-import { type ApiAbstract, VersionEntity } from "@/utils/http/ApiAbstract";
+import type { ApiAbstract } from "@/utils/http/ApiAbstract";
 import { baseUrlApi } from "../utils";
 
-export class Generator extends VersionEntity {
+export class Generator {
   name: string;
   content: string;
 }

src/views/editor/components/base.vue

@@ -2,30 +2,35 @@
 import "@wangeditor/editor/dist/css/style.css";
 import { IEditorConfig } from "@wangeditor/editor";
 import { Editor } from "@wangeditor/editor-for-vue";
-import { onMounted, onBeforeUnmount, shallowRef, ref } from "vue";
-import { type Generator } from "@/api/generator/generator";
+import {
+  onMounted,
+  onBeforeUnmount,
+  shallowRef,
+  defineProps,
+  defineEmits,
+  ref
+} from "vue";
 defineOptions({
   name: "BaseEditor"
 });
 
-const content = defineModel<Generator>("content");
-
+const content = defineProps({
+  content: {
+    type: String,
+    default: ""
+  }
+});
+const emits = defineEmits(["update:content"]);
 const mode = "default";
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef();
 
 // 内容 HTML
-const valueHtml = ref("");
 const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
 
-onMounted(() => {
-  console.log("content", content.value.content);
-  valueHtml.value =
-    '<pre><code class="language-java">' +
-    content.value.content +
-    "</code></pre>";
-  const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
-});
+console.log("content", content.content);
+const htmlText = ref(content.content);
+onMounted(() => {});
 const handleCreated = editor => {
   // 记录 editor 实例，重要！
   editorRef.value = editor;
@@ -40,12 +45,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="wangeditor">
+  <div>
     <Editor
-      v-model="valueHtml"
+      v-model="htmlText"
       :defaultConfig="editorConfig"
       :mode="mode"
-      style="height: 500px; overflow-y: hidden"
+      style="height: 100%; overflow-y: hidden"
       @onCreated="handleCreated"
     />
   </div>

src/views/monitor/generator/query-detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useDetail } from "./hook";
-import { onMounted, ref } from "vue";
-import { get } from "@/api/generator/generator";
+import { onMounted, ref, reactive } from "vue";
+import { get, type Generator } from "@/api/generator/generator";
 import { Base } from "@/views/editor/components";
 
 defineOptions({
@@ -11,20 +11,32 @@ defineOptions({
 const { initToDetail, getParameter } = useDetail();
 initToDetail("query");
 const datas = ref([]);
+const content = ref("");
 onMounted(() => {
   get(getParameter.id, 1).then(data => {
     console.log("data", data);
     datas.value = data.data;
+    content.value =
+      '<pre><code class="language-java">' +
+      data.data[0].content +
+      "</code></pre>";
   });
 });
+const clickFn = (item: String) => {
+  content.value = '<pre><code class="language-java">' + item + "</code></pre>";
+};
 </script>
 
 <template>
   <div>
-    <span v-for="(item, index) in datas" :key="index">
+    <span
+      v-for="(item, index) in datas"
+      :key="index"
+      @click="clickFn(item.content)"
+    >
       {{ item.name }} &nbsp;
     </span>
 
-    <Base v-model:content="datas[0]" />
+    <Base v-model:content="content" />
   </div>
 </template>