feat: 新增动态接口过滤器功能

src/components/Pages/MonacoEditor/index.hook.ts

@@ -0,0 +1,49 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
+
+export const useMonacoEditor = (language = 'json') => {
+  let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
+  let initReadOnly = false
+  const updateVal = async (val: string) => {
+    monacoEditor?.setValue(val)
+    setTimeout(async () => {
+      initReadOnly && monacoEditor?.updateOptions({ readOnly: false })
+      // await monacoEditor?.getAction('editor.action.formatDocument')?.run()
+      initReadOnly && monacoEditor?.updateOptions({ readOnly: true })
+    }, 100)
+  }
+
+  const createEditor = (
+    el: HTMLElement | null,
+    editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {}
+  ) => {
+    if (monacoEditor) {
+      return
+    }
+    initReadOnly = !!editorOption.readOnly
+    monacoEditor =
+      el &&
+      monaco.editor.create(el, {
+        language,
+        minimap: { enabled: false },
+        theme: 'vs-dark',
+        multiCursorModifier: 'ctrlCmd',
+        scrollbar: {
+          verticalScrollbarSize: 8,
+          horizontalScrollbarSize: 8
+        },
+        tabSize: 2,
+        automaticLayout: true, // 自适应宽高
+        ...editorOption
+      })
+    return monacoEditor
+  }
+  const onFormatDoc = () => {
+    monacoEditor?.getAction('editor.action.formatDocument').run()
+  }
+  return {
+    updateVal,
+    getEditor: () => monacoEditor,
+    createEditor,
+    onFormatDoc
+  }
+}

src/components/Pages/MonacoEditor/index.ts

@@ -0,0 +1,3 @@
+import MonacoEditor from './index.vue';
+
+export { MonacoEditor };

src/components/Pages/MonacoEditor/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="editor-area" :style="{ width, height }">
+  </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent, ref } from 'vue'
+import { useMonacoEditor } from './index.hook'
+
+export default defineComponent({
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '90vh'
+    },
+    language: {
+      type: String,
+      default: 'json'
+    },
+    preComment: {
+      type: String,
+      default: ''
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    editorOptions: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    modelValue(val) {
+      val !== this.getEditor()?.getValue() && this.updateMonacoVal(val)
+    }
+  },
+  setup(props) {
+    const { updateVal, getEditor, createEditor, onFormatDoc } = useMonacoEditor(props.language)
+    const isFull = ref(false)
+    return {
+      isFull,
+      updateVal,
+      getEditor,
+      createEditor,
+      onFormatDoc
+    }
+  },
+  methods: {
+    updateMonacoVal(_val?: string) {
+      const { modelValue, preComment } = this.$props
+      const val = preComment ? `${preComment}\n${_val || modelValue}` : (_val || modelValue)
+      this.updateVal(val)
+    }
+  },
+  mounted() {
+    if (this.$el) {
+      const monacoEditor = this.createEditor(this.$el, this.$props.editorOptions)
+      this.updateMonacoVal()
+      monacoEditor!.onDidChangeModelContent(() => {
+        this.$emit('update:modelValue', monacoEditor!.getValue())
+      })
+      monacoEditor!.onDidBlurEditorText(() => {
+        this.$emit('blur')
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.editor-area {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 5px;
+  padding-left: 0;
+  box-sizing: border-box;
+}
+</style>

src/components/Pages/ThemeColorSelect/index.vue

@@ -20,7 +20,7 @@
         <div class="content-right">
           <div class="color-name-detail">
             <n-text v-if="appThemeDetail" class="color-name">{{ appThemeDetail.name }}</n-text>
-            <n-text v-else="appThemeDetail" class="color-name">中国色</n-text>
+            <n-text v-else class="color-name">中国色</n-text>
             <n-text
               v-if="appThemeDetail"
               class="color-name-Pinyin"