feat(editor): 增加代码块搜索,代码编辑器同步设置是否可编辑属性,修复不可编辑状态下弹窗无法关闭的问题

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

@@ -54,6 +54,7 @@
             tabSize: 2,
             fontSize: 16,
             formatOnPaste: true,
+            readOnly: !editable,
           }"
         ></magic-code-editor>
         <div class="m-editor-content-bottom clearfix" v-if="editable">
@@ -115,7 +116,7 @@ watchEffect(async () => {
 
 // 保存代码
 const saveCode = async (): Promise<boolean> => {
-  if (!codeEditor.value || !codeConfig.value || !editable.value) return false;
+  if (!codeEditor.value || !codeConfig.value || !editable.value) return true;
 
   try {
     // 代码内容

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

@@ -1,10 +1,19 @@
 <template>
   <div class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
-      <div class="create-code-button">
-        <el-button type="primary" size="small" @click="createCodeBlock" :disabled="!editable">新增代码块</el-button>
+      <div class="code-header-wrapper">
+        <el-input
+          :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
+          size="small"
+          placeholder="输入关键字进行过滤"
+          clearable
+          v-model="filterText"
+          @change="filterTextChangeHandler"
+        ></el-input>
+        <el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
+          >新增</el-button
+        >
       </div>
-      <el-divider class="divider" />
     </slot>
 
     <!-- 代码块列表 -->
@@ -15,6 +24,7 @@
       empty-text="暂无代码块"
       :data="state.codeList"
       :highlight-current="true"
+      :filter-node-method="filterNode"
     >
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
@@ -44,14 +54,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, reactive, watchEffect } from 'vue';
+import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { flattenDeep, forIn, isEmpty, values } from 'lodash-es';
 
 import Icon from '../../../components/Icon.vue';
 import type { CodeBlockContent, Services } from '../../../type';
-import { EditorMode, ListState } from '../../../type';
+import { CodeDslList, EditorMode, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
 
@@ -124,4 +134,18 @@ const deleteCode = (key: string) => {
     }
   }
 };
+
+const filterText = ref('');
+const tree = ref();
+
+const filterNode = (value: string, data: CodeDslList): boolean => {
+  if (!value) {
+    return true;
+  }
+  return `${data.name}${data.id}`.indexOf(value) !== -1;
+};
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
 </script>

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

@@ -1,9 +1,20 @@
 .m-editor-code-block-list {
-  padding-top: 20px;
-  .create-code-button {
+  margin-top: 5px;
+  .code-header-wrapper {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    .code-filter-input {
+      margin: 0 5px;
+    }
+    .code-filter-input-no-btn {
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .create-code-button {
+      margin-left: 2px;
+      margin-right: 10px;
+    }
   }
 
   .divider {