From 13abe898a92c2b399d93e40290f4dc090ff066cd Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 9 Oct 2024 16:23:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=E8=BF=87=E6=BB=A4=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                   |  6 +++++-
 packages/editor/src/editorProps.ts               |  4 +++-
 packages/editor/src/layouts/Framework.vue        |  8 +++++++-
 packages/editor/src/layouts/page-bar/PageBar.vue | 16 +++++++++++-----
 packages/editor/src/layouts/page-bar/Search.vue  |  3 +++
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index f0bf681c..279d5c5d 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -1,5 +1,9 @@
 <template>
-  <Framework :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+  <Framework
+    :disabled-page-fragment="disabledPageFragment"
+    :page-bar-sort-options="pageBarSortOptions"
+    :page-filter-function="pageFilterFunction"
+  >
     <template #header>
       <slot name="header"></slot>
     </template>
diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index b299309c..06508dc6 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -1,4 +1,4 @@
-import type { DataSourceSchema, EventOption, Id, MApp, MNode } from '@tmagic/core';
+import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
@@ -97,6 +97,8 @@ export interface EditorProps {
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;
+  /** 页面搜索函数 */
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }
 
 export const defaultEditorProps = {
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 6494b122..f9cd8930 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -38,7 +38,11 @@
         </slot>
 
         <slot name="page-bar">
-          <PageBar :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+          <PageBar
+            :disabled-page-fragment="disabledPageFragment"
+            :page-bar-sort-options="pageBarSortOptions"
+            :filter-function="pageFilterFunction"
+          >
             <template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
             <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
             <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
@@ -62,6 +66,7 @@
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
+import type { MPage, MPageFragment } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
@@ -81,6 +86,7 @@ defineOptions({
 defineProps<{
   disabledPageFragment: boolean;
   pageBarSortOptions?: PageBarSortOptions;
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }>();
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index 7da98ff9..a1e306a4 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/packages/editor/src/layouts/page-bar/PageBar.vue
@@ -81,10 +81,16 @@ defineOptions({
   name: 'MEditorPageBar',
 });
 
-defineProps<{
-  disabledPageFragment: boolean;
-  pageBarSortOptions?: PageBarSortOptions;
-}>();
+const props = withDefaults(
+  defineProps<{
+    disabledPageFragment: boolean;
+    pageBarSortOptions?: PageBarSortOptions;
+    filterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+  }>(),
+  {
+    filterFunction: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword),
+  },
+);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -109,7 +115,7 @@ const list = computed(() => {
   return (root.value?.items || []).filter((item) => {
     if (pageType.includes(item.type)) {
       if (keyword) {
-        return item.name?.includes(keyword);
+        return props.filterFunction(item, keyword);
       }
       return true;
     }
diff --git a/packages/editor/src/layouts/page-bar/Search.vue b/packages/editor/src/layouts/page-bar/Search.vue
index efd1b5b7..2e88e6c3 100644
--- a/packages/editor/src/layouts/page-bar/Search.vue
+++ b/packages/editor/src/layouts/page-bar/Search.vue
@@ -8,6 +8,7 @@
         :inline="true"
         :config="formConfig"
         :init-values="query"
+        :prevent-submit-default="true"
         @change="onFormChange"
       ></MForm>
     </Teleport>
@@ -51,7 +52,9 @@ const formConfig = createForm([
   },
   {
     name: 'keyword',
+    type: 'text',
     placeholder: '请输入关键字',
+    clearable: true,
   },
 ]);