Merge branch 'main' of github.com:le5le-com/visualization-design

src/views/components/View.vue

@@ -1352,5 +1352,12 @@ const downloadDataSet = () => {
       background: var(--color-background);
     }
   }
+  .form-item {
+    display: flex;
+    margin-bottom: 8px;
+    label {
+      width: 100px;
+    }
+  }
 }
 </style>

src/views/components/common/MonacoModal.vue_

@@ -1,168 +0,0 @@
-<template>
-  <div class="monaco-dialog">
-    <t-dialog
-      :header="title"
-      :visible="visible"
-      width="900px"
-      :on-confirm="handleOk"
-      :on-cancel="cancel"
-      :on-close="cancel"
-    >
-      <t-radio-group
-        v-if="options"
-        size="small"
-        v-model="currentValue"
-        :default-value="0"
-        @change="changeOption"
-      >
-        <t-tooltip
-          v-for="option in options"
-          :content="option.tip"
-          placement="top"
-        >
-          <t-radio-button :value="option.value">
-            {{ option.name }}</t-radio-button
-          >
-        </t-tooltip>
-      </t-radio-group>
-      <div ref="monacoDom" class="monaco"></div>
-    </t-dialog>
-  </div>
-</template>
-<script lang="ts">
-export interface monacoOption {
-  key: string;
-  value?: number | string;
-  name?: string;
-  tip?: string;
-  code?: string;
-  language: 'javascript' | 'json' | 'markdown';
-  example?: string;
-}
-</script>
-<script setup lang="ts">
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  PropType,
-  reactive,
-  ref,
-  watch,
-} from 'vue';
-import { monaco } from './customMonaco';
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    require: true,
-  },
-  title: {
-    type: String,
-    default: () => {
-      return 'JavaScript';
-    },
-  },
-  code: {
-    type: String,
-    default: () => {
-      return '';
-    },
-  },
-  language: {
-    type: String,
-    default: () => {
-      return 'javascript';
-    },
-    validator: (value: string) => {
-      // 这个值必须匹配下列字符串中的一个
-      return ['javascript', 'json', 'markdown'].includes(value);
-    },
-  },
-  options: {
-    type: Array as PropType<monacoOption[]>,
-  },
-});
-
-const emit = defineEmits(['update:visible', 'changeCode', 'changeOptions']);
-
-let editor: any = null;
-
-function handleOk() {
-  // 按下确认以后修改外界值
-  if (props.options) {
-    props.options[currentValue.value].code = editor.getValue();
-    emit('changeOptions', props.options);
-    emit('update:visible', false);
-  } else {
-    const code = editor.getValue();
-    emit('changeCode', code);
-    emit('update:visible', false);
-  }
-}
-
-function cancel() {
-  emit('update:visible', false);
-}
-
-const curTheme = 'vs-dark'; // 暗主题
-const monacoDom: any = ref(null);
-
-const currentValue = ref(0);
-let beforeValue = 0;
-const changeOption = (e: number) => {
-  if (editor && props.options) {
-    if (beforeValue !== e) {
-      props.options[beforeValue].code = editor.getValue();
-      beforeValue = e;
-    }
-    monaco.editor.setModelLanguage(
-      editor.getModel(),
-      props.options[e].language || 'javascript'
-    );
-    editor.setValue(props.options[e].code || props.options[e].example || '');
-  }
-};
-
-watch(
-  () => props.visible,
-  (newV) => {
-    // console.log("props.visible", props.visible);
-    if (newV) {
-      nextTick(async () => {
-        if (!editor) {
-          editor = monaco.editor.create(monacoDom.value, {
-            theme: curTheme,
-            automaticLayout: true,
-            language: props.language,
-          });
-        }
-        if (props.options) {
-          const option = props.options[currentValue.value];
-          editor.setValue(option.code || option.example || '');
-          monaco.editor.setModelLanguage(editor.getModel(), option.language);
-        } else {
-          // 可见状态
-          editor.setValue(props.code);
-          monaco.editor.setModelLanguage(editor.getModel(), props.language);
-        }
-        // 格式化
-        // setTimeout(() => {
-        //   editor.getAction(["editor.action.formatDocument"])._run();
-        // }, 300);
-      });
-    }
-  }
-);
-
-onUnmounted(() => {
-  editor?.dispose();
-});
-</script>
-
-<style lang="postcss" scoped>
-.monaco {
-  height: 400px;
-}
-</style>