工艺页面缓存优化

Ben Lin

2024-10-22 78999ce1626d2a786f3a705281eeba79c2f1d6dd

 src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -1,5 +1,9 @@
<template>
  <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
  <div
    class="relative !h-full w-full overflow-hidden"
    :class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
    ref="el"
  ></div>
</template>

<script lang="ts" setup>
@@ -16,17 +20,24 @@
  import type { Nullable } from '@vben/types';
  import { useWindowSizeFn } from '@vben/hooks';
  import { useDebounceFn } from '@vueuse/core';
  import { useAppStore } from '/@/store/modules/app';
  import { useAppStore } from '@/store/modules/app';
  import CodeMirror from 'codemirror';
  import { MODE } from './../typing';
  import type { EditorConfiguration } from 'codemirror';
  import { MODE, parserDynamicImport } from './../typing';
  // css
  import './codemirror.css';
  import 'codemirror/lib/codemirror.css';
  import 'codemirror/theme/idea.css';
  import 'codemirror/theme/material-palenight.css';
  // modes
  import 'codemirror/mode/javascript/javascript';
  import 'codemirror/mode/css/css';
  import 'codemirror/mode/htmlmixed/htmlmixed';

  // 代码段折叠功能
  import 'codemirror/addon/fold/foldgutter.css';
  import 'codemirror/addon/fold/foldcode.js';
  import 'codemirror/addon/fold/foldgutter';
  import 'codemirror/addon/fold/brace-fold';
  import 'codemirror/addon/fold/comment-fold';
  import 'codemirror/addon/fold/markdown-fold';
  import 'codemirror/addon/fold/xml-fold';
  import 'codemirror/addon/fold/indent-fold';

  const props = defineProps({
    mode: {
@@ -39,6 +50,8 @@
    },
    value: { type: String, default: '' },
    readonly: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    config: { type: Object as PropType<EditorConfiguration>, default: () => {} },
  });

  const emit = defineEmits(['change']);
@@ -61,7 +74,8 @@
    { flush: 'post' },
  );

  watchEffect(() => {
  watchEffect(async () => {
    await parserDynamicImport(props.mode)();
    editor?.setOption('mode', props.mode);
  });

@@ -91,7 +105,7 @@
      autoCloseBrackets: true,
      autoCloseTags: true,
      foldGutter: true,
      gutters: ['CodeMirror-linenumbers'],
      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    };

    editor = CodeMirror(el.value!, {
@@ -103,6 +117,7 @@
      lineWrapping: true,
      lineNumbers: true,
      ...addonOptions,
      ...props.config,
    });
    editor?.setValue(props.value);
    setTheme();