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

packages/editor/src/fields/CodeSelect.vue

@@ -1,21 +1,27 @@
 <template>
   <div class="m-fields-code-select" :key="fieldKey">
-    <m-fields-select
+    <el-card>
-      :config="selectConfig"
+      <template #header>
-      :model="model"
+        <m-fields-select
-      :prop="prop"
+          :config="selectConfig"
-      :name="name"
+          :model="model"
-      :size="size"
+          :prop="prop"
-      @change="changeHandler"
+          :name="name"
-    ></m-fields-select>
+          :size="size"
-    <el-button
+          @change="changeHandler"
-      type="primary"
+        ></m-fields-select>
-      :icon="View"
+      </template>
-      :size="size"
+      <div class="tool-bar">
-      @click="viewHandler"
+        <el-button
-      :disabled="props.model[props.name].length === 0"
+          type="primary"
-      >查看</el-button
+          :icon="View"
-    >
+          :size="size"
+          @click="viewHandler"
+          :disabled="props.model[props.name].length === 0"
+          >查看</el-button
+        >
+      </div>
+    </el-card>
   </div>
 </template>
 

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

@@ -1,70 +1,72 @@
 <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-tree
+      <el-card class="code-editor-side-menu">
-        v-if="!isEmpty(state.codeList)"
+        <el-tree
-        ref="tree"
+          v-if="!isEmpty(state.codeList)"
-        node-key="id"
+          ref="tree"
-        empty-text="暂无代码块"
+          node-key="id"
-        :data="state.codeList"
+          empty-text="暂无代码块"
-        :highlight-current="true"
+          :data="state.codeList"
-        @node-click="selectHandler"
+          :highlight-current="true"
-        class="code-editor-side-menu"
+          @node-click="selectHandler"
-        :current-node-key="state.codeList[0].id"
+          :current-node-key="state.codeList[0].id"
-      >
+          class="side-tree"
-        <template #default="{ data }">
+        >
-          <div :id="data.id">
+          <template #default="{ data }">
-            <div class="list-item">
+            <div :id="data.id" class="list-container">
-              <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+              <div class="list-item">
+                <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+              </div>
             </div>
-          </div>
+          </template>
-        </template>
+        </el-tree>
-      </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
-        <magic-code-editor
+            ref="codeEditor"
-          ref="codeEditor"
+            class="m-editor-container"
-          class="m-editor-content"
+            :init-values="`${codeConfig.content}`"
-          :init-values="`${codeConfig.content}`"
+            @save="saveCode"
-          @save="saveCode"
+            :options="{
-          :options="{
+              tabSize: 2,
-            tabSize: 2,
+              fontSize: 16,
-            fontSize: 16,
+              formatOnPaste: true,
-            formatOnPaste: true,
+              readOnly: !editable,
-            readOnly: !editable,
+            }"
-          }"
+          ></magic-code-editor>
-        ></magic-code-editor>
+          <div class="m-editor-content-bottom" v-if="editable">
-        <div class="m-editor-content-bottom clearfix" v-if="editable">
+            <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-          <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" v-else>
+            <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+          </div>
         </div>
-        <div class="m-editor-content-bottom clearfix" v-else>
+      </el-card>
-          <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
-        </div>
-      </div>
     </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,67 +50,112 @@
     }
   }
 }
-.m-editor-code-block-editor-panel {
-  position: absolute;
-  top: 0;
-  left: 4px;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: #fff;
 
-  .code-name-wrapper {
+.m-fields-code-select {
-    padding: 10px 20px;
+  width: 100%;
+  .el-card__body {
+    padding: 10px;
+  }
+  .tool-bar {
     display: flex;
     align-items: center;
+    justify-content: end;
   }
-
-  .m-editor-content-bottom {
-    text-align: right;
-    padding-right: 20px;
-    height: 40px;
-    position: absolute;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    bottom: 0;
-    right: 0;
-    background: #fff;
-    > button {
-      height: 30px;
-      margin-top: 4px;
-    }
-  }
-}
-.m-fields-code-select {
-  display: flex;
-  width: 100%;
-  align-items: center;
 }
 .code-editor-dialog {
   .el-dialog__body {
     height: 90%;
   }
-  .code-editor-side-menu {
+  .el-card {
-    width: 18%;
+    height: 100%;
-    height: 90%;
+    background: #fff;
-    overflow: auto;
+    .el-card__body {
-    margin-left: -25px;
+      height: 80%;
+      background: #fff;
+    }
+  }
 
-    .list-item {
+  .code-editor-side-menu {
-      width: 100%;
+    width: 20%;
-      margin: 10px 0;
+    position: absolute;
-      .code-name {
+    top: 0;
+    left: 0;
+    background: #fff;
+
+    .side-tree {
+      margin-top: 10px;
+      .list-container {
         width: 100%;
-        font-size: 14px;
+        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 {
-    width: 80%;
     position: absolute;
-    height: 90%;
+    top: 0;
     left: 20%;
-    top: 60px;
+    width: 80%;
+    height: 100%;
+    z-index: 10;
+    background: #fff;
+  }
+
+  .m-editor-code-block-editor-panel {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    background: #fff;
+  }
+
+  .m-editor-wrapper {
+    height: 100%;
+    .m-editor-container {
+      height: 100%;
+    }
+    .m-editor-content-bottom {
+      text-align: right;
+      height: 40px;
+      padding-right: 20px;
+      position: absolute;
+      width: calc(100% - 30px);
+      display: flex;
+      justify-content: end;
+      bottom: 20px;
+      right: 0;
+      background: #fff;
+      > button {
+        height: 30px;
+        margin-top: 5px;
+      }
+    }
   }
 }

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',