fix(editor): 修改样式,修改代码块ID生成逻辑

packages/editor/src/fields/CodeSelect.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="m-fields-code-select" :key="fieldKey">
+    <el-card>
+      <template #header>
         <m-fields-select
           :config="selectConfig"
           :model="model"
@@ -8,6 +10,8 @@
           :size="size"
           @change="changeHandler"
         ></m-fields-select>
+      </template>
+      <div class="tool-bar">
         <el-button
           type="primary"
           :icon="View"
@@ -17,6 +21,8 @@
           >查看</el-button
         >
       </div>
+    </el-card>
+  </div>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,13 +1,14 @@
 <template>
   <el-dialog
     v-model="isShowCodeBlockEditor"
-    title="代码块编辑面板"
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
     custom-class="code-editor-dialog"
   >
+    <!-- 左侧列表 -->
     <template v-if="mode === EditorMode.LIST">
+      <el-card class="code-editor-side-menu">
         <el-tree
           v-if="!isEmpty(state.codeList)"
           ref="tree"
@@ -16,38 +17,38 @@
           :data="state.codeList"
           :highlight-current="true"
           @node-click="selectHandler"
-        class="code-editor-side-menu"
           :current-node-key="state.codeList[0].id"
+          class="side-tree"
         >
           <template #default="{ data }">
-          <div :id="data.id">
+            <div :id="data.id" class="list-container">
               <div class="list-item">
                 <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
               </div>
             </div>
           </template>
         </el-tree>
+      </el-card>
     </template>
+    <!-- 右侧区域 -->
     <div
       v-if="!isEmpty(codeConfig)"
       :class="[
-        mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : '',
+        mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : 'm-editor-code-block-editor-panel',
-        'm-editor-code-block-editor-panel',
       ]"
     >
       <slot name="code-block-edit-panel-header" :id="id"></slot>
-      <el-row class="code-name-wrapper" justify="start">
+      <el-card shadow="never">
-        <el-col :span="3">
+        <template #header>
-          <span>代码块名称</span>
+          <div class="code-name-wrapper">
-        </el-col>
+            <div class="code-name-label">代码块名称</div>
-        <el-col :span="6">
+            <el-input class="code-name-input" size="small" v-model="codeConfig.name" :disabled="!editable" />
-          <el-input size="small" v-model="codeConfig.name" :disabled="!editable" />
+          </div>
-        </el-col>
+        </template>
-      </el-row>
+        <div class="m-editor-wrapper">
-      <div class="m-editor-content">
           <magic-code-editor
             ref="codeEditor"
-          class="m-editor-content"
+            class="m-editor-container"
             :init-values="`${codeConfig.content}`"
             @save="saveCode"
             :options="{
@@ -57,14 +58,15 @@
               readOnly: !editable,
             }"
           ></magic-code-editor>
-        <div class="m-editor-content-bottom clearfix" v-if="editable">
+          <div class="m-editor-content-bottom" v-if="editable">
             <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-          <el-button type="primary" class="button" @click="saveAndClose">保存并关闭</el-button>
+            <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
           </div>
-        <div class="m-editor-content-bottom clearfix" v-else>
+          <div class="m-editor-content-bottom" v-else>
             <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
           </div>
         </div>
+      </el-card>
     </div>
   </el-dialog>
 </template>

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

@@ -8,7 +8,7 @@
           placeholder="输入关键字进行过滤"
           clearable
           v-model="filterText"
-          @change="filterTextChangeHandler"
+          @input="filterTextChangeHandler"
         ></el-input>
         <el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</el-button

packages/editor/src/services/codeBlock.ts

@@ -278,7 +278,7 @@ class CodeBlock extends BaseService {
    * @returns {string} 代码块唯一id
    */
   public async getUniqueId(): Promise<string> {
-    const newId = (Date.now().toString(36) + Math.random().toString(36).substring(2)).padEnd(19, '0');
+    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
     const existedIds = keys(dsl);

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

@@ -50,6 +50,82 @@
     }
   }
 }
+
+.m-fields-code-select {
+  width: 100%;
+  .el-card__body {
+    padding: 10px;
+  }
+  .tool-bar {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+}
+.code-editor-dialog {
+  .el-dialog__body {
+    height: 90%;
+  }
+  .el-card {
+    height: 100%;
+    background: #fff;
+    .el-card__body {
+      height: 80%;
+      background: #fff;
+    }
+  }
+
+  .code-editor-side-menu {
+    width: 20%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+
+    .side-tree {
+      margin-top: 10px;
+      .list-container {
+        width: 100%;
+        overflow: hidden;
+        margin-left: -20px;
+        .list-item {
+          width: 100%;
+          margin: 10px 0;
+          line-height: 30px;
+          .code-name {
+            width: 100%;
+            font-size: 14px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+
+  .code-name-wrapper {
+    margin: 10px 0 10px 10px;
+    display: flex;
+    align-items: center;
+    .code-name-label {
+      width: 80px;
+    }
+    .code-name-input {
+      width: 300px;
+    }
+  }
+
+  .m-editor-code-block-editor-panel-list-mode {
+    position: absolute;
+    top: 0;
+    left: 20%;
+    width: 80%;
+    height: 100%;
+    z-index: 10;
+    background: #fff;
+  }
+
   .m-editor-code-block-editor-panel {
     position: absolute;
     top: 0;
@@ -58,59 +134,28 @@
     height: 100%;
     z-index: 10;
     background: #fff;
-
-  .code-name-wrapper {
-    padding: 10px 20px;
-    display: flex;
-    align-items: center;
   }
 
+  .m-editor-wrapper {
+    height: 100%;
+    .m-editor-container {
+      height: 100%;
+    }
     .m-editor-content-bottom {
       text-align: right;
-    padding-right: 20px;
       height: 40px;
+      padding-right: 20px;
       position: absolute;
-    width: 100%;
+      width: calc(100% - 30px);
       display: flex;
-    justify-content: center;
+      justify-content: end;
-    bottom: 0;
+      bottom: 20px;
       right: 0;
       background: #fff;
       > button {
         height: 30px;
-      margin-top: 4px;
+        margin-top: 5px;
       }
     }
   }
-.m-fields-code-select {
-  display: flex;
-  width: 100%;
-  align-items: center;
-}
-.code-editor-dialog {
-  .el-dialog__body {
-    height: 90%;
-  }
-  .code-editor-side-menu {
-    width: 18%;
-    height: 90%;
-    overflow: auto;
-    margin-left: -25px;
-
-    .list-item {
-      width: 100%;
-      margin: 10px 0;
-      .code-name {
-        width: 100%;
-        font-size: 14px;
-      }
-    }
-  }
-  .m-editor-code-block-editor-panel-list-mode {
-    width: 80%;
-    position: absolute;
-    height: 90%;
-    left: 20%;
-    top: 60px;
-  }
 }

playground/src/configs/dsl.ts

@@ -21,7 +21,7 @@ export default {
   name: 'test',
   type: 'app',
   methods: {
-    l7znj1q24wilb357ay6: {
+    code_5336: {
       name: 'getData',
       // eslint-disable-next-line no-eval
       content: eval(`(vm) => {\n  console.log("this is getData function")\n}`),
@@ -51,7 +51,7 @@ export default {
         fontWeight: '',
       },
       events: [],
-      created: ['l7znj1q24wilb357ay6'],
+      created: ['code_5336'],
       items: [
         {
           type: 'text',