@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/src/theme/props-panel.scss

@@ -1,5 +1,78 @@
+@use "common/var" as *;
+
 .m-editor-props-panel {
-  padding: 0 10px 50px 10px;
+  height: 100%;
+  position: relative;
+
+  --props-style-panel-width: 300px;
+
+  .m-editor-props-form-panel {
+    padding-bottom: 10px;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+
+    .tmagic-design-scrollbar {
+      height: 100%;
+    }
+  }
+
+  .m-editor-props-property-panel {
+    &.show-style-panel {
+      padding-right: var(--props-style-panel-width);
+
+      .m-editor-props-panel-src-icon {
+        right: calc(15px + var(--props-style-panel-width));
+      }
+    }
+
+    .tmagic-design-form {
+      padding-right: 10px;
+      padding-left: 10px;
+
+      > .m-container-tab {
+        > .tmagic-design-tabs {
+          > .el-tabs__content {
+            padding-top: 55px;
+          }
+          > .el-tabs__header.is-top {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            background: #fff;
+            z-index: 2;
+          }
+        }
+      }
+    }
+  }
+
+  .m-editor-props-style-panel {
+    position: absolute;
+    width: var(--props-style-panel-width);
+    right: 0;
+    top: 0;
+    background: #fff;
+    z-index: 12;
+
+    $style-panel-title-height: 38px;
+
+    .tmagic-design-scrollbar {
+      height: calc(100% - $style-panel-title-height - 1px);
+    }
+
+    .m-editor-props-style-panel-title {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 600;
+      padding: 0 5px;
+      height: $style-panel-title-height;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 2px solid $border-color;
+    }
+  }
 
   .m-editor-props-panel-src-icon {
     position: absolute;
@@ -8,6 +81,13 @@
     z-index: 30;
   }
 
+  .m-editor-props-panel-style-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 60px;
+    z-index: 30;
+  }
+
   .m-editor-props-panel-src-code.magic-code-editor {
     position: absolute;
     left: 0;

package/src/theme/resizer.scss

@@ -20,7 +20,7 @@
     }
   }
 
-  &.m-editor-resizer-draging {
+  &.m-editor-resizer-dragging {
     &::after {
       content: "";
       position: absolute;

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/theme/sidebar.scss

@@ -1,9 +1,11 @@
+@use "common/var" as *;
+
 .m-editor-sidebar {
   display: flex;
   height: 100%;
 
   .m-editor-sidebar-header {
-    background: $--sidebar-heder-background-color;
+    background: $sidebar-heder-background-color;
     height: 100%;
     width: 40px;
 
@@ -16,7 +18,7 @@
       cursor: pointer;
 
       &.is-active {
-        background: $--sidebar-content-background-color;
+        background: $sidebar-content-background-color;
 
         i {
           color: #353140;

package/src/theme/stage.scss

@@ -1,7 +1,9 @@
+@use "common/var" as *;
+
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - #{$--page-bar-height});
+  height: calc(100% - #{$page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;

package/src/theme/theme.scss

@@ -1,28 +1,28 @@
-@import "./search-input.scss";
-@import "./nav-menu.scss";
-@import "./framework.scss";
-@import "./sidebar.scss";
-@import "./layer-panel.scss";
-@import "./component-list-panel.scss";
-@import "./resizer.scss";
-@import "./workspace.scss";
-@import "./page-bar.scss";
-@import "./props-panel.scss";
-@import "./content-menu.scss";
-@import "./stage.scss";
-@import "./code-editor.scss";
-@import "./icon.scss";
-@import "./code-block.scss";
-@import "./event.scss";
-@import "./layout.scss";
-@import "./breadcrumb.scss";
-@import "./data-source.scss";
-@import "./data-source-fields.scss";
-@import "./data-source-methods.scss";
-@import "./data-source-input.scss";
-@import "./key-value.scss";
-@import "./tree.scss";
-@import "./floating-box.scss";
-@import "./page-fragment-select.scss";
-@import "./data-source-field.scss";
-@import "./data-source-field-select.scss";
+@use "./search-input.scss";
+@use "./nav-menu.scss";
+@use "./framework.scss";
+@use "./sidebar.scss";
+@use "./layer-panel.scss";
+@use "./component-list-panel.scss";
+@use "./resizer.scss";
+@use "./workspace.scss";
+@use "./page-bar.scss";
+@use "./props-panel.scss";
+@use "./content-menu.scss";
+@use "./stage.scss";
+@use "./code-editor.scss";
+@use "./icon.scss";
+@use "./code-block.scss";
+@use "./event.scss";
+@use "./layout.scss";
+@use "./breadcrumb.scss";
+@use "./data-source.scss";
+@use "./data-source-fields.scss";
+@use "./data-source-methods.scss";
+@use "./data-source-input.scss";
+@use "./key-value.scss";
+@use "./tree.scss";
+@use "./floating-box.scss";
+@use "./page-fragment-select.scss";
+@use "./data-source-field.scss";
+@use "./data-source-field-select.scss";

package/src/theme/tree.scss

@@ -1,6 +1,8 @@
+@use "common/var" as *;
+
 .m-editor-tree {
-  $--node-height: 22px;
-  color: $--font-color;
+  $node-height: 22px;
+  color: $font-color;
   font-size: 13px;
 
   .m-editor-tree-node {
@@ -12,31 +14,31 @@
       align-items: center;
 
       &:hover {
-        background-color: $--hover-color;
-        color: $--font-color;
+        background-color: $hover-color;
+        color: $font-color;
       }
 
       &.selected {
-        background-color: $--theme-color;
-        color: $--hover-color;
+        background-color: $theme-color;
+        color: $hover-color;
       }
 
       &.drag-inner {
         .tree-node-content {
-          background-color: rgba($color: $--theme-color, $alpha: 0.5);
-          color: $--hover-color;
+          background-color: rgba($color: $theme-color, $alpha: 0.5);
+          color: $hover-color;
         }
       }
 
       &.drag-before {
         .tree-node-content {
-          border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-top-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
       &.drag-after {
         .tree-node-content {
-          border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-bottom-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
@@ -50,11 +52,11 @@
         display: flex;
         flex: 1;
         justify-content: space-between;
-        height: $--node-height;
+        height: $node-height;
         border-top: 2px solid transparent;
         border-bottom: 2px solid transparent;
         .tree-node-label {
-          line-height: $--node-height;
+          line-height: $node-height;
           flex: 1;
           width: 100px;
           overflow: hidden;

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 {
@@ -230,6 +231,8 @@ export interface UiState {
   uiSelectMode: boolean;
   /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
   showSrc: boolean;
+  /** 是否将样式配置单独一列显示， true: 显示， false: 不显示，默认为true */
+  showStylePanel: boolean;
   /** 画布显示放大倍数，默认为 1 */
   zoom: number;
   /** 画布容器的宽高 */
@@ -765,6 +768,7 @@ export type SyncHookPlugin<
 
 export interface EventBusEvent {
   'edit-data-source': [id: string];
+  'remove-data-source': [id: string];
   'edit-code': [id: string];
 }
 
@@ -786,3 +790,8 @@ export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onStart之前调用 */
   beforeStart?: (event: SortableEvent, sortable: Sortable) => void | Promise<void>;
 }
+
+export type CustomContentMenuFunction = (
+  menus: (MenuButton | MenuComponent)[],
+  type: 'layer' | 'data-source' | 'viewer' | 'code-block',
+) => (MenuButton | MenuComponent)[];

package/src/utils/content-menu.ts

@@ -1,4 +1,4 @@
-import { computed, markRaw, Ref } from 'vue';
+import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/core';
@@ -33,7 +33,7 @@ export const useCopyMenu = (): MenuButton => ({
   },
 });
 
-export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu> | null>): MenuButton => ({
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),

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',

package/src/utils/editor.ts

@@ -16,12 +16,23 @@
  * limitations under the License.
  */
 
+import { detailedDiff } from 'deep-object-diff';
+import { isObject } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { NodeType } from '@tmagic/core';
+import { NODE_CONDS_KEY, NodeType } from '@tmagic/core';
 import type StageCore from '@tmagic/stage';
-import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import {
+  calcValueByFontsize,
+  getElById,
+  getNodePath,
+  isNumber,
+  isPage,
+  isPageFragment,
+  isPop,
+  isValueIncludeDataSource,
+} from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 
@@ -272,26 +283,6 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export interface NodeItem {
-  items?: NodeItem[];
-  [key: string]: any;
-}
-
-export const traverseNode = <T extends NodeItem = NodeItem>(
-  node: T,
-  cb: (node: T, parents: T[]) => void,
-  parents: T[] = [],
-) => {
-  cb(node, parents);
-
-  if (Array.isArray(node.items) && node.items.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item as T, cb, [...parents]);
-    });
-  }
-};
-
 export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
   sourceIndices.sort((a, b) => a - b);
   for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -310,3 +301,68 @@ export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer
     }
   }
 };
+
+const isIncludeDataSourceByDiffAddResult = (diffResult: any) => {
+  for (const value of Object.values(diffResult)) {
+    const result = isValueIncludeDataSource(value);
+
+    if (result) {
+      return true;
+    }
+
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffAddResult(value);
+    }
+  }
+  return false;
+};
+
+const isIncludeDataSourceByDiffUpdatedResult = (diffResult: any, oldNode: any) => {
+  for (const [key, value] of Object.entries<any>(diffResult)) {
+    if (isValueIncludeDataSource(value)) {
+      return true;
+    }
+
+    if (isValueIncludeDataSource(oldNode[key])) {
+      return true;
+    }
+
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+    }
+  }
+  return false;
+};
+
+export const isIncludeDataSource = (node: MNode, oldNode: MNode) => {
+  const diffResult = detailedDiff(oldNode, node);
+
+  let isIncludeDataSource = false;
+
+  if (diffResult.updated) {
+    // 修改了显示条件
+    if ((diffResult.updated as any)[NODE_CONDS_KEY]) {
+      return true;
+    }
+
+    isIncludeDataSource = isIncludeDataSourceByDiffUpdatedResult(diffResult.updated, oldNode);
+    if (isIncludeDataSource) return true;
+  }
+
+  if (diffResult.added) {
+    isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.added);
+    if (isIncludeDataSource) return true;
+  }
+
+  if (diffResult.deleted) {
+    // 删除了显示条件
+    if ((diffResult.deleted as any)[NODE_CONDS_KEY]) {
+      return true;
+    }
+
+    isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.deleted);
+    if (isIncludeDataSource) return true;
+  }
+
+  return isIncludeDataSource;
+};

package/src/utils/idle-task.ts

@@ -26,6 +26,11 @@ export class IdleTask<T = any> extends EventEmitter {
 
   private taskHandle: number | null = null;
 
+  constructor() {
+    super();
+    this.setMaxListeners(1000);
+  }
+
   public enqueueTask(taskHandler: (data: T) => void, taskData: T) {
     this.taskList.push({
       handler: taskHandler,
@@ -37,6 +42,10 @@ export class IdleTask<T = any> extends EventEmitter {
     }
   }
 
+  public clearTasks() {
+    this.taskList = [];
+  }
+
   public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
     eventName: Name,
     listener: (...args: Param) => void | Promise<void>,
@@ -56,13 +65,36 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   private runTaskQueue(deadline: IdleDeadline) {
-    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
-      const task = this.taskList.shift();
-      task!.handler(task!.data);
+    // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
+    // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
+    // 执行不完不会影响配置，但是会影响画布渲染
+    while (deadline.timeRemaining() > 0 && this.taskList.length) {
+      const timeRemaining = deadline.timeRemaining();
+      let times = 0;
+      if (timeRemaining <= 5) {
+        times = 10;
+      } else if (timeRemaining <= 10) {
+        times = 100;
+      } else if (timeRemaining <= 15) {
+        times = 300;
+      } else {
+        times = 600;
+      }
+
+      for (let i = 0; i < times; i++) {
+        const task = this.taskList.shift();
+        if (task) {
+          task.handler(task.data);
+        }
+
+        if (this.taskList.length === 0) {
+          break;
+        }
+      }
     }
 
     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/src/utils/props.ts

@@ -18,6 +18,7 @@
  */
 
 import { NODE_CONDS_KEY } from '@tmagic/core';
+import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
 
 export const arrayOptions = [
@@ -41,6 +42,7 @@ export const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
+  display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
   items: [
     {
       name: 'style',
@@ -53,6 +55,7 @@ export const styleTabConfig: TabPaneConfig = {
               type: 'data-source-field-select',
               name: 'position',
               text: '固定定位',
+              labelPosition: 'left',
               checkStrictly: false,
               dataSourceFieldType: ['string'],
               fieldConfig: {
@@ -81,7 +84,7 @@ export const styleTabConfig: TabPaneConfig = {
               fieldConfig: {
                 type: 'text',
               },
-              disabled: (vm: FormState, { model }: any) =>
+              disabled: (_vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedBottom',
             },
             {
@@ -103,7 +106,7 @@ export const styleTabConfig: TabPaneConfig = {
               fieldConfig: {
                 type: 'text',
               },
-              disabled: (vm: FormState, { model }: any) =>
+              disabled: (_vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedTop',
             },
           ],
@@ -112,6 +115,27 @@ export const styleTabConfig: TabPaneConfig = {
           type: 'fieldset',
           legend: '盒子',
           items: [
+            {
+              type: 'data-source-field-select',
+              name: 'display',
+              text: 'display',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                clearable: true,
+                allowCreate: true,
+                options: [
+                  { text: 'block', value: 'block' },
+                  { text: 'flex', value: 'flex' },
+                  { text: 'none', value: 'none' },
+                  { text: 'inline-block', value: 'inline-block' },
+                  { text: 'grid', value: 'grid' },
+                  { text: 'inline', value: 'inline' },
+                  { text: 'initial', value: 'initial' },
+                ],
+              },
+            },
             {
               type: 'data-source-field-select',
               name: 'width',
@@ -140,6 +164,8 @@ export const styleTabConfig: TabPaneConfig = {
               dataSourceFieldType: ['string'],
               fieldConfig: {
                 type: 'select',
+                clearable: true,
+                allowCreate: true,
                 options: [
                   { text: 'visible', value: 'visible' },
                   { text: 'hidden', value: 'hidden' },
@@ -147,6 +173,7 @@ export const styleTabConfig: TabPaneConfig = {
                   { text: 'scroll', value: 'scroll' },
                   { text: 'auto', value: 'auto' },
                   { text: 'overlay', value: 'overlay' },
+                  { text: 'initial', value: 'initial' },
                 ],
               },
             },
@@ -213,7 +240,7 @@ export const styleTabConfig: TabPaneConfig = {
               checkStrictly: false,
               dataSourceFieldType: ['string'],
               fieldConfig: {
-                type: 'text',
+                type: 'img-upload',
               },
             },
             {
@@ -344,11 +371,13 @@ export const advancedTabConfig: TabPaneConfig = {
     {
       name: 'created',
       text: 'created',
+      labelPosition: 'top',
       type: 'code-select',
     },
     {
       name: 'mounted',
       text: 'mounted',
+      labelPosition: 'top',
       type: 'code-select',
     },
   ],
@@ -356,7 +385,7 @@ export const advancedTabConfig: TabPaneConfig = {
 
 export const displayTabConfig: TabPaneConfig = {
   title: '显示条件',
-  display: (vm: FormState, { model }: any) => model.type !== 'page',
+  display: (_vm: FormState, { model }: any) => model.type !== 'page',
   items: [
     {
       type: 'display-conds',
@@ -389,8 +418,21 @@ export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormCo
           // 组件id，必须要有
           {
             name: 'id',
-            type: 'display',
-            text: 'id',
+            text: 'ID',
+            type: 'text',
+            disabled: true,
+            append: {
+              type: 'button',
+              text: '复制',
+              handler: async (vm, { model }) => {
+                try {
+                  await navigator.clipboard.writeText(`${model.id}`);
+                  tMagicMessage.success('已复制');
+                } catch (err) {
+                  tMagicMessage.error('复制失败');
+                }
+              },
+            },
           },
           {
             name: 'name',