fix(project): fix json editor misalignment when opening modal with large data

apps/web-antd/src/views/ops/area/modules/device-config-modal.vue

@@ -17,6 +17,8 @@ const emit = defineEmits<{ (e: 'success'): void }>();
 const relation = ref<null | OpsAreaApi.AreaDeviceRelation>(null);
 const jsonValue = ref('');
 
+const isOpen = ref(false);
+
 const title = computed(() => {
   const r = relation.value;
   if (!r) return '设备配置';
@@ -60,8 +62,9 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
+  async onOpenChange(open: boolean) {
+    isOpen.value = open;
+    if (!open) {
       relation.value = null;
       jsonValue.value = '';
       return;
@@ -80,6 +83,7 @@ const [Modal, modalApi] = useVbenModal({
   <Modal :title="title">
     <div class="h-[400px] w-full px-4">
       <CodeEditor
+        v-if="isOpen"
         :value="jsonValue"
         :bordered="true"
         :auto-format="false"

packages/effects/plugins/src/code-editor/code-mirror.vue

@@ -15,7 +15,7 @@ import {
 
 import { usePreferences } from '@vben/preferences';
 
-import { useDebounceFn, useWindowSize } from '@vueuse/core';
+import { useDebounceFn, useElementSize } from '@vueuse/core';
 import CodeMirror from 'codemirror';
 
 import { MODE } from './types';
@@ -41,9 +41,10 @@ const props = withDefaults(defineProps<CodeEditorProps>(), {
 const emit = defineEmits(['change']);
 
 const { isDark } = usePreferences();
-const { width, height } = useWindowSize();
 
 const el = ref();
+const { width, height } = useElementSize(el);
+
 let editor: Nullable<CodeMirror.Editor>;
 
 const debounceRefresh = useDebounceFn(refresh, 100);