fix : 修复实施图片

src/components/codeEdit/JavaCodeEdit.vue

@@ -1,69 +1,69 @@
-<template>
-  <codemirror
-      v-model="javaCode"
-      :placeholder="editorPlaceholder"
-      :style="{ height: editorHeight+'px' }"
-      :autofocus="true"
-      :indent-with-tab="true"
-      :tabSize="tabSize"
-      :extensions="extensions"
-      :scrollbarStyle="null"
-  />
-</template>
-
-<script setup>
-import {Codemirror} from "vue-codemirror";
-import {java, javaLanguage} from "@codemirror/lang-java";
-
-const emit = defineEmits()
-const props = defineProps({
-  value: {
-    type: String,
-    default: "",
-  },
-  editorPlaceholder: {
-    type: String,
-    default: "请输入代码",
-  },
-  editorHeight: {
-    type: String,
-    default: "300",
-  },
-  tabSize: {
-    type: Number,
-    default: 2,
-  }
-})
-const _value = computed({
-  get() {
-    return props.value || ""
-  },
-  set(value) {
-    emit('update:value', value)
-  }
-})
-const javaCode = ref();
-const customJavaCodeTips = (context) => {
-  let word = context.matchBefore(/\w*/)
-  if (word.from == word.to && !context.explicit) return null;
-  return {
-    from: word.from?word.from:context.pos,
-    options: [
-      {label: "function", type: "keyword",apply:"function name(params) {\n\t\n}",detail: "definition"},
-      // {label: "hello", type: "variable", info: "(World)"},
-      {label: "fori", type: "keyword",apply:"for (let i = 0; i < list.length; i++) {\n\n}", detail: "loop"},
-      {label: "for", type: "keyword",apply:"for (let name of list) {\n\n}", detail: "of loop"},
-      {label: "psf", type: "keyword",apply:"public static final ", detail: "public static final"},
-      {label: "psv", type: "keyword",apply:"public static void name(){\n\n}", detail: "public static void"},
-      {label: "psfi", type: "keyword",apply:"public static final int ", detail: "public static final int"},
-      {label: "psfs", type: "keyword",apply:"public static final String ", detail: "public static final String"},
-      {label: "psvm", type: "keyword", apply: "public static void main(String[] args){\n\t\n}", detail: "main() 方法声明"}
-    ]
-  }
-}
-
-const javaSnippets = javaLanguage.data.of({
-  autocomplete: customJavaCodeTips,
-})
-const extensions = ref([java(), javaSnippets]);
-</script>
+<template>
+  <codemirror
+      v-model="javaCode"
+      :placeholder="editorPlaceholder"
+      :style="{ height: editorHeight+'px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tabSize="tabSize"
+      :extensions="extensions"
+      :scrollbarStyle="null"
+  />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {java, javaLanguage} from "@codemirror/lang-java";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const javaCode = ref();
+const customJavaCodeTips = (context) => {
+  let word = context.matchBefore(/\w*/)
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from?word.from:context.pos,
+    options: [
+      {label: "function", type: "keyword",apply:"function name(params) {\n\t\n}",detail: "definition"},
+      // {label: "hello", type: "variable", info: "(World)"},
+      {label: "fori", type: "keyword",apply:"for (let i = 0; i < list.length; i++) {\n\n}", detail: "loop"},
+      {label: "for", type: "keyword",apply:"for (let name of list) {\n\n}", detail: "of loop"},
+      {label: "psf", type: "keyword",apply:"public static final ", detail: "public static final"},
+      {label: "psv", type: "keyword",apply:"public static void name(){\n\n}", detail: "public static void"},
+      {label: "psfi", type: "keyword",apply:"public static final int ", detail: "public static final int"},
+      {label: "psfs", type: "keyword",apply:"public static final String ", detail: "public static final String"},
+      {label: "psvm", type: "keyword", apply: "public static void main(String[] args){\n\t\n}", detail: "main() 方法声明"}
+    ]
+  }
+}
+
+const javaSnippets = javaLanguage.data.of({
+  autocomplete: customJavaCodeTips,
+})
+const extensions = ref([java(), javaSnippets]);
+</script>

src/components/codeEdit/JsCodeEdit.vue

@@ -1,48 +1,48 @@
-<template>
-    <codemirror
-        v-model="jsCode"
-        :placeholder="editorPlaceholder"
-        :style="{ height: editorHeight+'px' }"
-        :autofocus="true"
-        :indent-with-tab="true"
-        :tabSize="tabSize"
-        :extensions="extensions"
-        :scrollbarStyle="null"
-    />
-</template>
-
-<script setup>
-import {Codemirror} from "vue-codemirror";
-import {javascript} from "@codemirror/lang-javascript";
-import {defineEmits, ref, defineProps, computed} from "vue";
-
-const emit = defineEmits()
-const props = defineProps({
-  value: {
-    type: String,
-    default: "",
-  },
-  editorPlaceholder: {
-    type: String,
-    default: "请输入代码",
-  },
-  editorHeight: {
-    type: String,
-    default: "300",
-  },
-  tabSize: {
-    type: Number,
-    default: 2,
-  }
-})
-const _value = computed({
-  get() {
-    return props.value || ""
-  },
-  set(value) {
-    emit('update:value', value)
-  }
-})
-const jsCode = ref();
-const extensions = ref([javascript()]);
-</script>
+<template>
+    <codemirror
+        v-model="jsCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+    />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {javascript} from "@codemirror/lang-javascript";
+import {defineEmits, ref, defineProps, computed} from "vue";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const jsCode = ref();
+const extensions = ref([javascript()]);
+</script>

src/components/codeEdit/SqlCodeEdit.vue

@@ -1,83 +1,83 @@
-<template>
-    <codemirror
-        v-model="sqlCode"
-        :placeholder="editorPlaceholder"
-        :style="{ height: editorHeight+'px' }"
-        :autofocus="true"
-        :indent-with-tab="true"
-        :tabSize="tabSize"
-        :extensions="extensions"
-        :scrollbarStyle="null"
-        @change="emit('change',$event)"
-    />
-<!--    <div class="sql-format">-->
-<!--      <span @click="formatSql">格式化SQL</span>-->
-<!--      <span @click="clearVal">一键清空</span>-->
-<!--    </div>-->
-</template>
-
-<script setup>
-import {Codemirror} from "vue-codemirror";
-import {sql} from '@codemirror/lang-sql';
-import {defineEmits, ref, defineProps, computed} from "vue";
-import * as sqlFormatter from "sql-formatter";
-
-const emit = defineEmits()
-const props = defineProps({
-  value: {
-    type: String,
-    default: "",
-  },
-  editorPlaceholder: {
-    type: String,
-    default: "请输入代码",
-  },
-  editorHeight: {
-    type: String,
-    default: "300",
-  },
-  tabSize: {
-    type: Number,
-    default: 2,
-  }
-})
-const _value = computed({
-  get() {
-    return props.value || ""
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  }
-})
-
-const sqlCode = ref(_value);
-const extensions = ref([sql()]);
-//代码格式化
-const formatSql = () => {
-  sqlCode.value=sqlFormatter.format(sqlCode.value)
-}
-// 清除值
-const clearVal = () => {
-  sqlCode.value=''
-}
-</script>
-<style scoped lang="scss">
-.sql-format {
-  background-color: #f7f7f7;
-  text-align: right;
-  color: #2a99ff;
-  padding: 10px;
-
-  span:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  > span:first-child {
-    margin-right: 10px;
-  }
-}
-::v-deep .cm-line{
-  font-size: 16px;
-}
-</style>
+<template>
+    <codemirror
+        v-model="sqlCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+        @change="emit('change',$event)"
+    />
+<!--    <div class="sql-format">-->
+<!--      <span @click="formatSql">格式化SQL</span>-->
+<!--      <span @click="clearVal">一键清空</span>-->
+<!--    </div>-->
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {sql} from '@codemirror/lang-sql';
+import {defineEmits, ref, defineProps, computed} from "vue";
+import * as sqlFormatter from "sql-formatter";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const sqlCode = ref(_value);
+const extensions = ref([sql()]);
+//代码格式化
+const formatSql = () => {
+  sqlCode.value=sqlFormatter.format(sqlCode.value)
+}
+// 清除值
+const clearVal = () => {
+  sqlCode.value=''
+}
+</script>
+<style scoped lang="scss">
+.sql-format {
+  background-color: #f7f7f7;
+  text-align: right;
+  color: #2a99ff;
+  padding: 10px;
+
+  span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    margin-right: 10px;
+  }
+}
+::v-deep .cm-line{
+  font-size: 16px;
+}
+</style>