perfect_dialog

src/views/components/View.vue

@@ -1350,35 +1350,37 @@ const downloadDataSet = () => {
 </style>
 
 <style lang="postcss">
-.t-dialog {
-  .t-dialog__body {
-    height: 450px;
-    /* overflow: auto; */
-  }
+.meta2d {
+  .t-dialog {
+    .t-dialog__body {
+      height: 450px;
+      /* overflow: auto; */
+    }
 
-  .form-item {
-    display: flex;
-    margin-bottom: 8px;
+    .form-item {
+      display: flex;
+      margin-bottom: 8px;
 
-    label {
-      width: 100px;
+      label {
+        width: 100px;
+      }
+    }
+    .t-textarea {
+      width: calc(100% - 150px);
     }
-  }
-  .t-textarea {
-    width: calc(100% - 150px);
-  }
 
-  .vip-label {
-    font-size: 10px;
-    background-color: #ff400030;
-    color: var(--color-bland);
-    padding: 0 6px;
-    margin-left: 4px;
-    border-radius: 2px;
-  }
-  .t-tab-panel {
-    overflow: auto;
-    height: 395px;
+    .vip-label {
+      font-size: 10px;
+      background-color: #ff400030;
+      color: var(--color-bland);
+      padding: 0 6px;
+      margin-left: 4px;
+      border-radius: 2px;
+    }
+    .t-tab-panel {
+      overflow: auto;
+      height: 395px;
+    }
   }
 }
 </style>

src/views/components/common/MonacoModal.vue

@@ -1,28 +1,35 @@
 <template>
-  <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"
+  <div class="monaco-dialog">
+    <t-dialog
+      :header="title"
+      :visible="visible"
+      width="900px"
+      :on-confirm="handleOk"
+      :on-cancel="cancel"
+      :on-close="cancel"
     >
-    <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>
+      <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;
@@ -32,7 +39,6 @@ export interface monacoOption {
   language: "javascript" | "json" | "markdown";
   example?: string;
 }
-
 </script>
 <script setup lang="ts">
 import {
@@ -75,11 +81,11 @@ const props = defineProps({
     },
   },
   options: {
-    type:Array as PropType<monacoOption[]>
-  }
+    type: Array as PropType<monacoOption[]>,
+  },
 });
 
-const emit = defineEmits(["update:visible", "changeCode","changeOptions"]);
+const emit = defineEmits(["update:visible", "changeCode", "changeOptions"]);
 
 let editor: any = null;
 
@@ -87,7 +93,7 @@ function handleOk() {
   // 按下确认以后修改外界值
   if (props.options) {
     props.options[currentValue.value].code = editor.getValue();
-    emit('changeOptions', props.options);
+    emit("changeOptions", props.options);
     emit("update:visible", false);
   } else {
     const code = editor.getValue();
@@ -111,10 +117,13 @@ const changeOption = (e: number) => {
       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 ||"");
+    monaco.editor.setModelLanguage(
+      editor.getModel(),
+      props.options[e].language || "javascript"
+    );
+    editor.setValue(props.options[e].code || props.options[e].example || "");
   }
-}
+};
 
 watch(
   () => props.visible,
@@ -131,17 +140,17 @@ watch(
         }
         if (props.options) {
           const option = props.options[currentValue.value];
-          editor.setValue(option.code||option.example||'');
+          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);
+        // 格式化
+        // setTimeout(() => {
+        //   editor.getAction(["editor.action.formatDocument"])._run();
+        // }, 300);
       });
     }
   }
@@ -153,11 +162,13 @@ onUnmounted(() => {
 </script>
 
 <style lang="postcss">
-.t-dialog__body {
-  /* padding: 0; */
-  overflow: hidden;
-  .monaco {
-    height: 400px;
+.monaco-dialog {
+  .t-dialog__body {
+    /* padding: 0; */
+    overflow: hidden;
+    .monaco {
+      height: 400px;
+    }
   }
 }
 </style>