fix(editor): 解决修改代码名称后已选择的select tag不更新的问题,优化一些样式

packages/editor/src/fields/CodeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-fields-code-select">
+  <div class="m-fields-code-select" :key="fieldKey">
     <m-fields-select
       :config="selectConfig"
       :model="model"
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref } from 'vue';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { View } from '@element-plus/icons-vue';
 import { map } from 'lodash-es';
 
@@ -62,22 +62,47 @@ const selectConfig = computed(() => {
     ...props.config.selectConfig,
   };
 });
+const fieldKey = ref('');
+const combineIds = ref<string[]>([]);
 
-const combineIds = ref();
+watchEffect(async () => {
+  console.log('--combineIds.value--', combineIds.value);
+  if (!combineIds.value) return;
+  const combineNames = await Promise.all(
+    combineIds.value.map(async (id) => {
+      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
+      return name;
+    }),
+  );
+  fieldKey.value = combineNames.join('-');
+});
+// watch(
+//   () => services?.codeBlockService.getCodeEditorShowStatus(),
+//   (value, oldValue) => {
+//     if (oldValue && !value) {
+//       // 由打开到关闭
+//       fieldKey.value = '222'
+//       // const selectedValue = props.model[props.name];
+//       // props.model[props.name] = null;
+//       // props.model[props.name] = selectedValue;
+//     }
+//   },
+//   { immediate: true },
+// );
 
 const changeHandler = async (value: any) => {
   // 记录组件与代码块的绑定关系
   const { id = '' } = services?.editorService.get('node') || {};
   await services?.codeBlockService.setCompRelation(id, value);
+  combineIds.value = props.model[props.name];
+  if (typeof props.model[props.name] === 'string') {
+    combineIds.value = [props.model[props.name]];
+  }
   emit('change', value);
 };
 
 const viewHandler = async () => {
   await services?.codeBlockService.setMode(EditorMode.LIST);
-  combineIds.value = props.model[props.name];
-  if (typeof props.model[props.name] === 'string') {
-    combineIds.value = [props.model[props.name]];
-  }
   await services?.codeBlockService.setCombineIds(combineIds.value);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
 };

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -5,9 +5,10 @@
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
+    custom-class="code-editor-dialog"
   >
     <template v-if="mode === EditorMode.LIST">
-      <el-menu :default-active="selectedIds[0]" class="el-menu-vertical-demo code-editor-side-menu">
+      <el-menu :default-active="selectedIds[0]" class="code-editor-side-menu">
         <el-menu-item v-for="(value, key) in selectedValue" :index="key" :key="key" @click="menuSelectHandler">
           <template #title>{{ value.name }}（{{ key }}）</template>
         </el-menu-item>
@@ -22,7 +23,7 @@
     >
       <slot name="code-block-edit-panel-header" :id="id"></slot>
       <el-row class="code-name-wrapper" justify="start">
-        <el-col :span="2">
+        <el-col :span="3">
           <span>代码块名称</span>
         </el-col>
         <el-col :span="6">

packages/editor/src/theme/code-block.scss

@@ -75,13 +75,20 @@
   width: 100%;
   align-items: center;
 }
-.code-editor-side-menu {
-  width: 20%;
-}
-.m-editor-code-block-editor-panel-list-mode {
-  width: 80%;
-  position: absolute;
-  height: 90%;
-  left: 20%;
-  top: 60px;
+.code-editor-dialog {
+  .el-dialog__body {
+    height: 90%;
+  }
+  .code-editor-side-menu {
+    width: 20%;
+    height: 90%;
+    overflow: auto;
+  }
+  .m-editor-code-block-editor-panel-list-mode {
+    width: 80%;
+    position: absolute;
+    height: 90%;
+    left: 20%;
+    top: 60px;
+  }
 }

playground/src/configs/dsl.ts

@@ -23,9 +23,7 @@ export default {
   methods: {
     l7znj1q24wilb357ay6: {
       name: 'getData',
-      content: () => {
-        console.log('this is getData function');
-      },
+      content: `() => {\n  console.log("this is getData function")\n}`,
     },
   },
   items: [