@tmagic/editor 1.5.0-beta.9 → 1.5.0

package/src/layouts/workspace/Workspace.vue

@@ -4,7 +4,8 @@
 
     <slot name="stage">
       <MagicStage
-        v-if="page"
+        v-if="page && (stageOptions?.render || stageOptions?.runtimeUrl)"
+        :stage-options="stageOptions"
         :disabled-stage-overlay="disabledStageOverlay"
         :stage-content-menu="stageContentMenu"
         :custom-content-menu="customContentMenu"
@@ -18,7 +19,7 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@editor/type';
+import type { MenuButton, MenuComponent, Services, StageOptions, WorkspaceSlots } from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
@@ -40,6 +41,8 @@ withDefaults(
   },
 );
 
+const stageOptions = inject<StageOptions>('stageOptions');
+
 const services = inject<Services>('services');
 
 const page = computed(() => services?.editorService.get('page'));

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

@@ -3,6 +3,8 @@
     class="m-editor-stage"
     ref="stageWrap"
     tabindex="-1"
+    v-loading="stageLoading"
+    element-loading-text="Runtime 加载中..."
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -62,8 +64,9 @@ defineOptions({
   name: 'MEditorStage',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    stageOptions: StageOptions;
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
@@ -77,7 +80,8 @@ let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
 const services = inject<Services>('services');
-const stageOptions = inject<StageOptions>('stageOptions');
+
+const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
 const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
 const stageContainer = ref<HTMLDivElement>();
@@ -96,9 +100,9 @@ watchEffect(() => {
   if (stage || !page.value) return;
 
   if (!stageContainer.value) return;
-  if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
+  if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
-  stage = useStage(stageOptions);
+  stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
     stageWrap.value?.container?.focus();
@@ -125,6 +129,7 @@ watchEffect(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  services?.editorService.set('stage', null);
 });
 
 watch(zoom, (zoom) => {
@@ -132,9 +137,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);
@@ -201,7 +217,9 @@ const dropHandler = async (e: DragEvent) => {
   e.preventDefault();
 
   const doc = stage?.renderer?.contentWindow?.document;
-  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(
+    `.${props.stageOptions?.containerHighlightClassName}`,
+  );
 
   let parent: MContainer | undefined | null = page.value;
   const parentId = getIdFromEl()(parentEl);

package/src/services/dataSource.ts

@@ -4,7 +4,7 @@ import type { Writable } from 'type-fest';
 
 import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
 import { Target, Watcher } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
+import type { ChangeRecord, FormConfig } from '@tmagic/form';
 import { guid, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
@@ -115,15 +115,22 @@ class DataSource extends BaseService {
     return newConfig;
   }
 
-  public update(config: DataSourceSchema) {
+  public update(config: DataSourceSchema, { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {}) {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
 
-    this.emit('update', config);
+    const oldConfig = dataSources[index];
+    const newConfig = cloneDeep(config);
 
-    return config;
+    dataSources[index] = newConfig;
+
+    this.emit('update', newConfig, {
+      oldConfig,
+      changeRecords,
+    });
+
+    return newConfig;
   }
 
   public remove(id: string) {

package/src/services/dep.ts

@@ -31,11 +31,29 @@ export interface DepEvents {
   collected: [nodes: MNode[], deep: boolean];
 }
 
+interface State {
+  collecting: boolean;
+}
+
+type StateKey = keyof State;
+
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
+  private state = reactive<State>({
+    collecting: false,
+  });
+
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
   public removeTargets(type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
 
@@ -71,33 +89,40 @@ class Dep extends BaseService {
   }
 
   public collect(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
       this.collectNode(node, target, depExtendedData, deep);
     });
+    this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
   }
 
   public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
+    let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-      idleTask.enqueueTask(
-        ({ node, deep, target }) => {
-          this.collectNode(node, target, depExtendedData, deep);
-        },
-        {
-          node,
-          deep,
-          target,
-        },
-      );
+      startTask = true;
+
+      this.enqueueTask(node, target, depExtendedData, deep);
     });
 
-    idleTask.once('finish', () => {
-      this.emit('collected', nodes, deep);
+    return new Promise<void>((resolve) => {
+      if (!startTask) {
+        this.emit('collected', nodes, deep);
+        this.set('collecting', false);
+        resolve();
+        return;
+      }
+      idleTask.once('finish', () => {
+        this.emit('collected', nodes, deep);
+        this.set('collecting', false);
+        resolve();
+      });
     });
   }
 
-  collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
+  public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {
       Object.entries(target.deps).forEach(([depKey, dep]) => {
@@ -128,6 +153,10 @@ class Dep extends BaseService {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
 
+  public clearIdleTasks() {
+    idleTask.clearTasks();
+  }
+
   public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
     eventName: Name,
     listener: (...args: Param) => void | Promise<void>,
@@ -145,6 +174,25 @@ class Dep extends BaseService {
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
     return super.emit(eventName, ...args);
   }
+
+  private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
+    idleTask.enqueueTask(
+      ({ node, deep, target }) => {
+        this.collectNode(node, target, depExtendedData, deep);
+      },
+      {
+        node,
+        deep: false,
+        target,
+      },
+    );
+
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      node.items.forEach((item) => {
+        this.enqueueTask(item, target, depExtendedData, deep);
+      });
+    }
+  }
 }
 
 export type DepService = Dep;

package/src/services/editor.ts

@@ -20,10 +20,20 @@ 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 type { ChangeRecord } from '@tmagic/form';
 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';
@@ -59,7 +69,7 @@ export interface EditorEvents {
   select: [node: MNode | null];
   add: [nodes: MNode[]];
   remove: [nodes: MNode[]];
-  update: [nodes: MNode[]];
+  update: [nodes: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]];
   'move-layer': [offset: number | LayerOffset];
   'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
   'history-change': [data: MPage | MPageFragment];
@@ -175,36 +185,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 +475,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);
@@ -529,7 +510,10 @@ class Editor extends BaseService {
     this.emit('remove', nodes);
   }
 
-  public async doUpdate(config: MNode) {
+  public async doUpdate(
+    config: MNode,
+    { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {},
+  ): Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }> {
     const root = this.get('root');
     if (!root) throw new Error('root为空');
 
@@ -539,7 +523,7 @@ class Editor extends BaseService {
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
-    const node = cloneDeep(toRaw(info.node));
+    const node = toRaw(info.node);
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
 
@@ -561,7 +545,11 @@ class Editor extends BaseService {
 
     if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig as MApp);
-      return newConfig;
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords,
+      };
     }
 
     const { parent } = info;
@@ -586,11 +574,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);
@@ -598,7 +582,11 @@ class Editor extends BaseService {
 
     this.addModifiedNodeId(newConfig.id);
 
-    return newConfig;
+    return {
+      oldNode: node,
+      newNode: newConfig,
+      changeRecords,
+    };
   }
 
   /**
@@ -606,17 +594,20 @@ class Editor extends BaseService {
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */
-  public async update(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+  public async update(
+    config: MNode | MNode[],
+    data: { changeRecords?: ChangeRecord[] } = {},
+  ): Promise<MNode | MNode[]> {
     const nodes = Array.isArray(config) ? config : [config];
 
-    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+    const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
 
-    if (newNodes[0]?.type !== NodeType.ROOT) {
+    if (updateData[0].oldNode?.type !== NodeType.ROOT) {
       this.pushHistoryState();
     }
 
-    this.emit('update', newNodes);
-    return Array.isArray(config) ? newNodes : newNodes[0];
+    this.emit('update', updateData);
+    return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
   }
 
   /**
@@ -863,7 +854,7 @@ class Editor extends BaseService {
 
       const layout = await this.getLayout(target);
 
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+      const newConfig = mergeWith(cloneDeep(node), config, (_objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
@@ -875,7 +866,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,20 +3,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-
-  .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;
-    }
-  }
+  user-select: none;
 }
 
 .m-editor-page-list-item {
@@ -70,6 +57,11 @@
     &-icon {
       position: relative;
       z-index: 1;
+
+      .icon-active {
+        font-weight: bold;
+        color: $--theme-color;
+      }
     }
 
     &-title {
@@ -78,6 +70,18 @@
       white-space: nowrap;
       overflow: hidden;
     }
+
+    &-left-icon,
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+    }
+
+    &-left-icon {
+      right: 34px;
+    }
   }
 }
 
@@ -91,13 +95,31 @@
     transition: all 0.2s ease 0s;
     padding: 5px 14px;
 
-    .el-button--text,
-    i {
+    .tmagic-design-button {
       color: $--font-color;
     }
 
     &:hover {
       background-color: $--hover-color;
     }
+
+    &.active {
+      .tmagic-design-button {
+        color: $--theme-color;
+      }
+    }
+  }
+}
+
+.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/theme/search-input.scss

@@ -7,6 +7,7 @@
   left: 0;
   box-sizing: border-box;
   z-index: 1;
+  background: transparent;
 
   .el-input__prefix {
     padding: 7px;

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/data-source/formConfigs/http.ts

@@ -40,6 +40,7 @@ export default [
         name: 'params',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '参数',
       },
       {
@@ -53,6 +54,7 @@ export default [
         name: 'headers',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '请求头',
       },
     ],

package/src/utils/data-source/index.ts

@@ -58,7 +58,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
       {
         title: '请求参数裁剪',
-        display: (formState: FormState, { model }: any) => model.type === 'http',
+        display: (_formState: FormState, { model }: any) => model.type === 'http',
         items: [
           {
             name: 'beforeRequest',
@@ -70,7 +70,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
       {
         title: '响应数据裁剪',
-        display: (formState: FormState, { model }: any) => model.type === 'http',
+        display: (_formState: FormState, { model }: any) => model.type === 'http',
         items: [
           {
             name: 'afterResponse',