@tmagic/editor 1.5.0-beta.11 → 1.5.0-beta.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.11",
+  "version": "1.5.0-beta.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -56,11 +56,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.0-beta.11",
-    "@tmagic/stage": "1.5.0-beta.11",
-    "@tmagic/form": "1.5.0-beta.11",
-    "@tmagic/table": "1.5.0-beta.11",
-    "@tmagic/utils": "1.5.0-beta.11"
+    "@tmagic/design": "1.5.0-beta.13",
+    "@tmagic/stage": "1.5.0-beta.13",
+    "@tmagic/form": "1.5.0-beta.13",
+    "@tmagic/table": "1.5.0-beta.13",
+    "@tmagic/utils": "1.5.0-beta.13"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -81,7 +81,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.5.0",
-    "@tmagic/core": "1.5.0-beta.11"
+    "@tmagic/core": "1.5.0-beta.13"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/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>
@@ -114,6 +118,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>

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

package/src/initService.ts

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
-import { cloneDeep, debounce } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 import type {
   CodeBlockContent,
@@ -19,7 +19,7 @@ import {
   DepTargetType,
   Target,
 } from '@tmagic/core';
-import { isPage, traverseNode } from '@tmagic/utils';
+import { getNodes, isPage, traverseNode } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
@@ -252,63 +252,24 @@ export const initServiceEvents = (
     return stage?.renderer?.runtime?.getApp?.();
   };
 
-  const updateDataSourceSchema = () => {
-    const root = editorService.get('root');
-
-    if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
-    }
-  };
-
-  const targetAddHandler = (target: Target) => {
-    const root = editorService.get('root');
-    if (!root) return;
-
-    if (target.type === DepTargetType.DATA_SOURCE) {
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
-      }
-      root.dataSourceDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_COND) {
-      if (!root.dataSourceCondDeps) {
-        root.dataSourceCondDeps = {};
-      }
-      root.dataSourceCondDeps[target.id] = target.deps;
-    }
-  };
-
-  const targetRemoveHandler = (id: string | number) => {
+  const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => {
     const root = editorService.get('root');
+    const app = getApp();
 
-    if (root?.dataSourceDeps) {
-      delete root.dataSourceDeps[id];
+    if (root && app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+      app.dsl.dataSources = root.dataSources;
     }
 
-    if (root?.dataSourceCondDeps) {
-      delete root.dataSourceCondDeps[id];
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
     }
-  };
 
-  const collectedHandler = debounce((nodes: MNode[], deep: boolean) => {
-    const root = editorService.get('root');
     const stage = editorService.get('stage');
 
     if (!root || !stage) return;
 
-    const app = getApp();
-
-    if (!app) return;
-
-    if (app.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
-    }
-
-    updateDataSourceSchema();
-
     const allNodes: MNode[] = [];
 
     if (deep) {
@@ -335,11 +296,60 @@ export const initServiceEvents = (
           });
       });
     });
-  }, 300);
+  };
+
+  const afterUpdateNodes = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    if (!root) return;
+    const stage = editorService.get('stage');
+    const app = getApp();
+    if (app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+    }
+    for (const node of nodes) {
+      stage?.update({
+        config: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root),
+      });
+    }
+  };
+
+  const targetAddHandler = (target: Target) => {
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+
+    if (!root) return;
+
+    if (root.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
+  };
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('collected', collectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -347,28 +357,33 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const collectIdle = (nodes: MNode[], deep: boolean) => {
-    nodes.forEach((node) => {
-      let pageId: Id | undefined;
-
-      if (isPage(node)) {
-        pageId = node.id;
-      } else {
-        const info = editorService.getNodeInfo(node.id);
-        pageId = info.page?.id;
-      }
-      depService.collectIdle([node], { pageId }, deep);
-    });
-  };
+  const collectIdle = (nodes: MNode[], deep: boolean) =>
+    Promise.all(
+      nodes.map((node) => {
+        let pageId: Id | undefined;
+
+        if (isPage(node)) {
+          pageId = node.id;
+        } else {
+          const info = editorService.getNodeInfo(node.id);
+          pageId = info.page?.id;
+        }
+        return depService.collectIdle([node], { pageId }, deep);
+      }),
+    );
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true);
+    collectIdle(nodes, true).then(() => {
+      afterUpdateNodes(nodes);
+    });
   };
 
   // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true);
+    collectIdle(nodes, true).then(() => {
+      afterUpdateNodes(nodes);
+    });
   };
 
   // 节点删除，清除对齐的依赖收集
@@ -378,7 +393,9 @@ export const initServiceEvents = (
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true);
+    collectIdle([page], true).then(() => {
+      updateDataSourceSchema([page], true);
+    });
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -413,7 +430,9 @@ export const initServiceEvents = (
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
 
-    collectIdle(root?.items || [], true);
+    collectIdle(root?.items || [], true).then(() => {
+      updateDataSourceSchema(root?.items || [], true);
+    });
   };
 
   const removeDataSourceTarget = (id: string) => {
@@ -423,8 +442,14 @@ export const initServiceEvents = (
   };
 
   const dataSourceRemoveHandler = (id: string) => {
+    const root = editorService.get('root');
+    const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
+    const nodes = getNodes(nodeIds, root?.items);
+    collectIdle(nodes, false).then(() => {
+      updateDataSourceSchema(nodes, false);
+    });
+
     removeDataSourceTarget(id);
-    getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
   dataSourceService.on('add', dataSourceAddHandler);
@@ -434,7 +459,6 @@ export const initServiceEvents = (
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/Framework.vue

@@ -38,7 +38,12 @@
         </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>
             <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
@@ -61,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';
@@ -80,6 +86,7 @@ defineOptions({
 defineProps<{
   disabledPageFragment: boolean;
   pageBarSortOptions?: PageBarSortOptions;
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }>();
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;

package/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,
-    name: generatePageNameByApp(root, props.type),
+    type,
+    name: generatePageNameByApp(root, type),
     items: [],
   };
   editorService.add(pageConfig);

package/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 :type="active" :page-bar-sort-options="pageBarSortOptions">
+    <PageBarScrollContainer :page-bar-sort-options="pageBarSortOptions" :length="list.length">
       <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,94 +63,64 @@
 </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',
 });
 
-defineProps<{
-  disabledPageFragment: boolean;
-  pageBarSortOptions?: PageBarSortOptions;
-}>();
-
-const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+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;
 
 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 activePage = ref<Id>('');
-const activePageFragment = ref<Id>('');
-
-watch(
-  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,
-  },
-);
+const query = ref<{
+  pageType: NodeType[];
+  keyword: string;
+}>({
+  pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
+  keyword: '',
+});
 
-watch(active, (active) => {
-  if (active === NodeType.PAGE) {
-    if (!activePage.value && !pageList.value.length) {
-      editorService?.selectRoot();
-      return;
-    }
-    switchPage(activePage.value);
-    return;
+const list = computed(() => {
+  const { pageType, keyword } = query.value;
+  if (pageType.length === 0) {
+    return [];
   }
 
-  if (active === NodeType.PAGE_FRAGMENT) {
-    // 之前没有选中过页面片并且当前没有页面片
-    if (!activePageFragment.value && !pageFragmentList.value.length) {
-      editorService?.selectRoot();
-      return;
+  return (root.value?.items || []).filter((item) => {
+    if (pageType.includes(item.type)) {
+      if (keyword) {
+        return props.filterFunction(item, keyword);
+      }
+      return true;
     }
-    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
-  }
+    return false;
+  });
 });
 
 const switchPage = (id: Id) => {