feat(editor): 页面/页面片不再使用tab分开显示，新增搜索页面

packages/editor/src/Editor.vue

@@ -114,6 +114,7 @@
     </template>
 
     <template #page-bar><slot name="page-bar"></slot></template>
+    <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>
     <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>

packages/editor/src/layouts/Framework.vue

@@ -39,6 +39,7 @@
 
         <slot name="page-bar">
           <PageBar :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+            <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>
             <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>

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

@@ -3,9 +3,31 @@
     v-if="showAddPageButton"
     id="m-editor-page-bar-add-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-    @click="addPage"
   >
-    <Icon :icon="Plus"></Icon>
+    <TMagicPopover popper-class="data-source-list-panel-add-menu">
+      <template #reference>
+        <Icon :icon="Plus"></Icon>
+      </template>
+
+      <ToolButton
+        :data="{
+          type: 'button',
+          text: '页面',
+          handler: () => {
+            addPage(NodeType.PAGE);
+          },
+        }"
+      ></ToolButton>
+      <ToolButton
+        :data="{
+          type: 'button',
+          text: '页面片',
+          handler: () => {
+            addPage(NodeType.PAGE_FRAGMENT);
+          },
+        }"
+      ></ToolButton>
+    </TMagicPopover>
   </div>
   <div v-else style="width: 21px"></div>
 </template>
@@ -15,8 +37,10 @@ import { computed, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
+import { TMagicPopover } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
@@ -24,23 +48,19 @@ defineOptions({
   name: 'MEditorPageBarAddButton',
 });
 
-const props = defineProps<{
-  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
-}>();
-
 const services = inject<Services>('services');
 const uiService = services?.uiService;
 const editorService = services?.editorService;
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
 
-const addPage = () => {
+const addPage = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
   if (!editorService) return;
   const root = toRaw(editorService.get('root'));
   if (!root) throw new Error('root 不能为空');
   const pageConfig = {
-    type: props.type,
+    type,
-    name: generatePageNameByApp(root, props.type),
+    name: generatePageNameByApp(root, type),
     items: [],
   };
   editorService.add(pageConfig);

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

@@ -1,10 +1,10 @@
 <template>
   <div class="m-editor-page-bar-tabs">
-    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
+    <PageBarScrollContainer :page-bar-sort-options="pageBarSortOptions" :length="list.length">
-
-    <PageBarScrollContainer :type="active" :page-bar-sort-options="pageBarSortOptions">
       <template #prepend>
-        <AddButton :type="active"></AddButton>
+        <slot name="page-bar-add-button"><AddButton></AddButton></slot>
+
+        <Search v-model:query="query"></Search>
         <PageList :list="list">
           <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
         </PageList>
@@ -63,21 +63,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';
-import { getPageFragmentList, getPageList } from '@editor/utils';
 
 import AddButton from './AddButton.vue';
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 import PageList from './PageList.vue';
-import SwitchTypeButton from './SwitchTypeButton.vue';
+import Search from './Search.vue';
 
 defineOptions({
   name: 'MEditorPageBar',
@@ -88,69 +86,35 @@ defineProps<{
   pageBarSortOptions?: PageBarSortOptions;
 }>();
 
-const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
-
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
-const pageList = computed(() => getPageList(root.value));
-const pageFragmentList = computed(() => getPageFragmentList(root.value));
 
-const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
+const query = ref<{
+  pageType: NodeType[];
+  keyword: string;
+}>({
+  pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
+  keyword: '',
+});
 
-const activePage = ref<Id>('');
+const list = computed(() => {
-const activePageFragment = ref<Id>('');
+  const { pageType, keyword } = query.value;
-
+  if (pageType.length === 0) {
-watch(
+    return [];
-  page,
-  (page) => {
-    if (!page) {
-      if (active.value === NodeType.PAGE) {
-        activePage.value = '';
-      }
-      if (active.value === NodeType.PAGE_FRAGMENT) {
-        activePageFragment.value = '';
-      }
-      return;
-    }
-
-    if (isPage(page)) {
-      activePage.value = page?.id;
-      if (active.value !== NodeType.PAGE) {
-        active.value = NodeType.PAGE;
-      }
-    } else if (isPageFragment(page)) {
-      activePageFragment.value = page?.id;
-      if (active.value !== NodeType.PAGE_FRAGMENT) {
-        active.value = NodeType.PAGE_FRAGMENT;
-      }
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(active, (active) => {
-  if (active === NodeType.PAGE) {
-    if (!activePage.value && !pageList.value.length) {
-      editorService?.selectRoot();
-      return;
-    }
-    switchPage(activePage.value);
-    return;
   }
 
-  if (active === NodeType.PAGE_FRAGMENT) {
+  return (root.value?.items || []).filter((item) => {
-    // 之前没有选中过页面片并且当前没有页面片
+    if (pageType.includes(item.type)) {
-    if (!activePageFragment.value && !pageFragmentList.value.length) {
+      if (keyword) {
-      editorService?.selectRoot();
+        return item.name?.includes(keyword);
-      return;
+      }
+      return true;
     }
-    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
+    return false;
-  }
+  });
 });
 
 const switchPage = (id: Id) => {

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

@@ -6,12 +6,7 @@
       <Icon :icon="ArrowLeftBold"></Icon>
     </div>
 
-    <div
+    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
-      v-if="(type === NodeType.PAGE && pageLength) || (type === NodeType.PAGE_FRAGMENT && pageFragmentLength)"
-      class="m-editor-page-bar-items"
-      ref="itemsContainer"
-      :style="`width: ${itemsContainerWidth}px`"
-    >
       <slot></slot>
     </div>
 
@@ -22,21 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-  computed,
-  type ComputedRef,
-  inject,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-  type WatchStopHandle,
-} from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
-import Sortable, { SortableEvent } from 'sortablejs';
+import Sortable, { type SortableEvent } from 'sortablejs';
 
-import { Id, NodeType } from '@tmagic/core';
+import type { Id } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';
@@ -46,8 +31,8 @@ defineOptions({
 });
 
 const props = defineProps<{
-  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
   pageBarSortOptions?: PageBarSortOptions;
+  length: number;
 }>();
 
 const services = inject<Services>('services');
@@ -63,11 +48,12 @@ const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 const itemsContainerWidth = ref(0);
 
 const setCanScroll = () => {
-  // 减去新增、左移、右移三个按钮的宽度
+  // 减去新增、搜索、页面列表、左移、右移5个按钮的宽度
   // 37 = icon width 16 + padding 10 * 2 + border-right 1
   itemsContainerWidth.value =
     (pageBar.value?.clientWidth || 0) -
     37 * 2 -
+    37 -
     (showAddPageButton.value ? 37 : 21) -
     (showPageListButton.value ? 37 : 0);
 
@@ -119,71 +105,46 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const pageFragmentLength = computed(() => editorService?.get('pageFragmentLength') || 0);
-
-const crateWatchLength = (length: ComputedRef<number>) =>
-  watch(
-    length,
-    (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
-          scroll('start');
-        } else {
-          scroll('end');
-        }
-        if (length > 1) {
-          const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
-          let beforeDragList: Id[] = [];
-          const options = {
-            ...{
-              dataIdAttr: 'page-id', // 获取排序后的数据
-              onStart: async (event: SortableEvent) => {
-                if (typeof props.pageBarSortOptions?.beforeStart === 'function') {
-                  await props.pageBarSortOptions.beforeStart(event, sortable);
-                }
-                beforeDragList = sortable.toArray();
-              },
-              onUpdate: async (event: SortableEvent) => {
-                await editorService?.sort(
-                  beforeDragList[event.oldIndex as number],
-                  beforeDragList[event.newIndex as number],
-                );
-                if (typeof props.pageBarSortOptions?.afterUpdate === 'function') {
-                  await props.pageBarSortOptions.afterUpdate(event, sortable);
-                }
-              },
-            },
-            ...{
-              ...(props.pageBarSortOptions ? props.pageBarSortOptions : {}),
-            },
-          };
-          if (!el) return;
-          const sortable = new Sortable(el, options);
-        }
-      });
-    },
-    {
-      immediate: true,
-    },
-  );
-
-let unWatchPageLength: WatchStopHandle | null;
-let unWatchPageFragmentLength: WatchStopHandle | null;
-
 watch(
-  () => props.type,
+  () => props.length,
-  (type) => {
+  (length = 0, preLength = 0) => {
-    if (type === NodeType.PAGE) {
+    setTimeout(() => {
-      unWatchPageFragmentLength?.();
+      setCanScroll();
-      unWatchPageFragmentLength = null;
+      if (length < preLength) {
-      unWatchPageLength = crateWatchLength(pageLength);
+        scroll('start');
-    } else {
+      } else {
-      unWatchPageLength?.();
+        scroll('end');
-      unWatchPageLength = null;
+      }
-      unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
+      if (length > 1) {
-    }
+        const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
+        let beforeDragList: Id[] = [];
+        const options = {
+          ...{
+            dataIdAttr: 'page-id', // 获取排序后的数据
+            onStart: async (event: SortableEvent) => {
+              if (typeof props.pageBarSortOptions?.beforeStart === 'function') {
+                await props.pageBarSortOptions.beforeStart(event, sortable);
+              }
+              beforeDragList = sortable.toArray();
+            },
+            onUpdate: async (event: SortableEvent) => {
+              await editorService?.sort(
+                beforeDragList[event.oldIndex as number],
+                beforeDragList[event.newIndex as number],
+              );
+              if (typeof props.pageBarSortOptions?.afterUpdate === 'function') {
+                await props.pageBarSortOptions.afterUpdate(event, sortable);
+              }
+            },
+          },
+          ...{
+            ...(props.pageBarSortOptions ? props.pageBarSortOptions : {}),
+          },
+        };
+        if (!el) return;
+        const sortable = new Sortable(el, options);
+      }
+    });
   },
   {
     immediate: true,

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

@@ -47,7 +47,7 @@ defineOptions({
 });
 
 defineProps<{
-  list: MPage[] | MPageFragment[];
+  list: (MPage | MPageFragment)[];
 }>();
 
 const services = inject<Services>('services');

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search">
+    <Icon :icon="Search" @click="visible = !visible" :class="{ 'icon-active': visible }"></Icon>
+    <Teleport to=".m-editor-page-bar-tabs" v-if="visible">
+      <MForm
+        v-if="query"
+        class="m-editor-page-bar-search-panel"
+        :inline="true"
+        :config="formConfig"
+        :init-values="query"
+        @change="onFormChange"
+      ></MForm>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+import { createForm, MForm } from '@tmagic/form';
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+
+interface Query {
+  pageType: NodeType[];
+  keyword: string;
+}
+
+const emit = defineEmits<{
+  search: [value: Query];
+}>();
+
+const query = defineModel<Query>('query');
+
+const formConfig = createForm([
+  {
+    type: 'checkbox-group',
+    name: 'pageType',
+    options: [
+      {
+        value: NodeType.PAGE,
+        text: '页面',
+      },
+      {
+        value: NodeType.PAGE_FRAGMENT,
+        text: '页面片段',
+      },
+    ],
+  },
+  {
+    name: 'keyword',
+    placeholder: '请输入关键字',
+  },
+]);
+
+const visible = ref(false);
+
+const onFormChange = (values: Query) => {
+  query.value = values;
+  emit('search', values);
+};
+</script>

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

@@ -1,45 +0,0 @@
-<template>
-  <TMagicButton
-    v-for="item in data"
-    class="m-editor-page-bar-switch-type-button"
-    size="small"
-    :key="item.type"
-    link
-    :class="{ active: modelValue === item.type }"
-    :type="modelValue === item.type ? 'primary' : ''"
-    @click="clickHandler(item.type)"
-    >{{ item.text }}</TMagicButton
-  >
-</template>
-
-<script setup lang="ts">
-import { NodeType } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-
-defineOptions({
-  name: 'MEditorPageBarSwitchTypeButton',
-});
-
-defineProps<{
-  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
-}>();
-
-const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
-  {
-    type: NodeType.PAGE,
-    text: '页面',
-  },
-  {
-    type: NodeType.PAGE_FRAGMENT,
-    text: '页面片',
-  },
-];
-
-const emit = defineEmits<{
-  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
-}>();
-
-const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
-  emit('update:modelValue', value);
-};
-</script>

packages/editor/src/services/editor.ts

@@ -474,11 +474,11 @@ class Editor extends BaseService {
     if (isPage(node)) {
       this.state.pageLength -= 1;
 
-      await selectDefault(getPageList(root));
+      await selectDefault(rootItems);
     } else if (isPageFragment(node)) {
       this.state.pageFragmentLength -= 1;
 
-      await selectDefault(getPageFragmentList(root));
+      await selectDefault(rootItems);
     } else {
       await this.select(parent);
       stage?.select(parent.id);

packages/editor/src/theme/page-bar.scss

@@ -3,19 +3,13 @@
   bottom: 0;
   left: 0;
   width: 100%;
+  user-select: none;
+}
 
-  .tmagic-design-button.m-editor-page-bar-switch-type-button {
+.m-editor-page-bar-item-icon {
-    margin-left: 10px;
+  .icon-active {
-    position: relative;
+    font-weight: bold;
-    top: 1px;
+    color: $--theme-color;
-    border-radius: 3px 3px 0 0;
-    border: 1px solid $--border-color;
-    border-bottom: 1px solid transparent;
-    padding: 5px 10px;
-
-    &.active {
-      background-color: #f3f3f3;
-    }
   }
 }
 
@@ -101,3 +95,16 @@
     }
   }
 }
+
+.m-editor-page-bar-search-panel {
+  position: absolute;
+  bottom: $--page-bar-height;
+  border: 1px solid $--border-color;
+  padding: 6px 10px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .tmagic-design-form-item {
+    margin-bottom: 0;
+  }
+}

packages/editor/src/type.ts

@@ -77,9 +77,10 @@ export interface FrameworkSlots {
   'props-panel'(props: {}): any;
   'footer'(props: {}): any;
   'page-bar'(props: {}): any;
+  'page-bar-add-button'(props: {}): any;
   'page-bar-title'(props: { page: MPage | MPageFragment }): any;
   'page-bar-popover'(props: { page: MPage | MPageFragment }): any;
-  'page-list-popover'(props: { list: MPage[] | MPageFragment[] }): any;
+  'page-list-popover'(props: { list: (MPage | MPageFragment)[] }): any;
 }
 
 export interface WorkspaceSlots {