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

package/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 { NodeType } from '@tmagic/core';
+import { createForm, MForm } from '@tmagic/form';
+
+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>

package/src/layouts/workspace/viewer/Stage.vue

@@ -132,9 +132,20 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
+let timeoutId: NodeJS.Timeout | null = null;
 watch(page, (page) => {
   if (runtime && page) {
     services?.editorService.set('stageLoading', true);
+
+    if (timeoutId) {
+      globalThis.clearTimeout(timeoutId);
+    }
+
+    timeoutId = globalThis.setTimeout(() => {
+      services?.editorService.set('stageLoading', false);
+      timeoutId = null;
+    }, 3000);
+
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);

package/src/services/dep.ts

@@ -92,8 +92,11 @@ class Dep extends BaseService {
       );
     });
 
-    idleTask.once('finish', () => {
-      this.emit('collected', nodes, deep);
+    return new Promise<void>((resolve) => {
+      idleTask.once('finish', () => {
+        this.emit('collected', nodes, deep);
+        resolve();
+      });
     });
   }
 

package/src/services/editor.ts

@@ -20,10 +20,19 @@ import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
 import { NodeType, Target, Watcher } from '@tmagic/core';
 import { isFixed } from '@tmagic/stage';
-import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import {
+  calcValueByFontsize,
+  getElById,
+  getNodeInfo,
+  getNodePath,
+  isNumber,
+  isPage,
+  isPageFragment,
+  isPop,
+} from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -175,36 +184,7 @@ class Editor extends BaseService {
       root = toRaw(root);
     }
 
-    const info: EditorNodeInfo = {
-      node: null,
-      parent: null,
-      page: null,
-    };
-
-    if (!root) return info;
-
-    if (id === root.id) {
-      info.node = root;
-      return info;
-    }
-
-    const path = getNodePath(id, root.items);
-
-    if (!path.length) return info;
-
-    path.unshift(root);
-
-    info.node = path[path.length - 1] as MComponent;
-    info.parent = path[path.length - 2] as MContainer;
-
-    path.forEach((item) => {
-      if (isPage(item) || isPageFragment(item)) {
-        info.page = item as MPage | MPageFragment;
-        return;
-      }
-    });
-
-    return info;
+    return getNodeInfo(id, root);
   }
 
   /**
@@ -494,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);
@@ -586,11 +566,7 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', [...nodes]);
 
-    this.get('stage')?.update({
-      config: cloneDeep(newConfig),
-      parentId: parent.id,
-      root: cloneDeep(root),
-    });
+    // update后会触发依赖收集，收集完后会掉stage.update方法
 
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set('page', newConfig as MPage | MPageFragment);
@@ -875,7 +851,11 @@ class Editor extends BaseService {
       await stage.select(targetId);
 
       const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await stage.update({
+        config: cloneDeep(target),
+        parentId: targetParent?.id,
+        root: cloneDeep(root),
+      });
 
       await this.select(newConfig);
       stage.select(newConfig.id);

package/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 {
-    margin-left: 10px;
-    position: relative;
-    top: 1px;
-    border-radius: 3px 3px 0 0;
-    border: 1px solid $--border-color;
-    border-bottom: 1px solid transparent;
-    padding: 5px 10px;
-
-    &.active {
-      background-color: #f3f3f3;
-    }
+.m-editor-page-bar-item-icon {
+  .icon-active {
+    font-weight: bold;
+    color: $--theme-color;
   }
 }
 
@@ -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;
+  }
+}

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

package/src/utils/idle-task.ts

@@ -56,13 +56,14 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   private runTaskQueue(deadline: IdleDeadline) {
-    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+    // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
+    while ((deadline.timeRemaining() > 10 || deadline.didTimeout) && this.taskList.length) {
       const task = this.taskList.shift();
       task!.handler(task!.data);
     }
 
     if (this.taskList.length) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 10000 });
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
     } else {
       this.taskHandle = 0;
 

package/types/index.d.ts

@@ -306,7 +306,7 @@ declare class Dep extends export_default {
     removeTarget(id: Id, type?: string): void;
     clearTargets(): void;
     collect(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType): void;
-    collectIdle(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType): void;
+    collectIdle(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType): Promise<void>;
     collectNode(node: MNode, target: Target, depExtendedData?: DepExtendedData, deep?: boolean): void;
     clear(nodes?: MNode[]): void;
     clearByType(type: DepTargetType, nodes?: MNode[]): void;
@@ -840,6 +840,7 @@ 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;
@@ -847,7 +848,7 @@ interface FrameworkSlots {
         page: MPage | MPageFragment;
     }): any;
     'page-list-popover'(props: {
-        list: MPage[] | MPageFragment[];
+        list: (MPage | MPageFragment)[];
     }): any;
 }
 interface WorkspaceSlots {

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