From 9e1fb42783afa05849bde8a9e27082a02d9ff69a Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Fri, 16 Sep 2022 12:48:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=A2=9E=E5=8A=A0=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=9D=97=E6=90=9C=E7=B4=A2,=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=90=8C=E6=AD=A5=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=8F=AF=E7=BC=96=E8=BE=91=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?,=E4=BF=AE=E5=A4=8D=E4=B8=8D=E5=8F=AF=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E5=BC=B9=E7=AA=97=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sidebar/code-block/CodeBlockEditor.vue    |  3 +-
 .../sidebar/code-block/CodeBlockList.vue      | 34 ++++++++++++++++---
 packages/editor/src/theme/code-block.scss     | 17 ++++++++--
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 0e2edc81..a3ff580c 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/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 {
     // 代码内容
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 89065a08..fdf3af01 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/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>
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 9f4a66a0..dcf21910 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/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 {