feat(editor): 支持配置页面过滤函数

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>

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 = {

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;

packages/editor/src/layouts/page-bar/PageBar.vue

@@ -81,10 +81,16 @@ defineOptions({
   name: 'MEditorPageBar',
 });
 
-defineProps<{
+const props = withDefaults(
-  disabledPageFragment: boolean;
+  defineProps<{
-  pageBarSortOptions?: PageBarSortOptions;
+    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;
     }

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,
   },
 ]);