@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.3

package/src/services/editor.ts

@@ -80,6 +80,7 @@ class Editor extends BaseService {
         'undo',
         'redo',
         'highlight',
+        'dragTo',
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -253,7 +254,7 @@ class Editor extends BaseService {
 
     if (!parent) return node;
 
-    const index = getNodeIndex(node, parent);
+    const index = getNodeIndex(node.id, parent);
 
     const nextNode = parent.items[index + 1] || parent.items[0];
 
@@ -270,7 +271,7 @@ class Editor extends BaseService {
     if (!page) throw new Error('page不能为空');
     if (!root) throw new Error('root不能为空');
 
-    const index = getNodeIndex(page, root);
+    const index = getNodeIndex(page.id, root);
 
     const nextPage = root.items[index + 1] || root.items[0];
 
@@ -418,7 +419,7 @@ class Editor extends BaseService {
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
-    const index = getNodeIndex(curNode, parent);
+    const index = getNodeIndex(curNode.id, parent);
 
     if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
 
@@ -503,7 +504,7 @@ class Editor extends BaseService {
     if (!parent) throw new Error('获取不到父级节点');
 
     const parentNodeItems = parent.items;
-    const index = getNodeIndex(newConfig, parent);
+    const index = getNodeIndex(newConfig.id, parent);
 
     if (!parentNodeItems || typeof index === 'undefined' || index === -1) throw new Error('更新的节点未找到');
 
@@ -737,7 +738,7 @@ class Editor extends BaseService {
 
     const stage = this.get('stage');
     if (root && node && parent && stage) {
-      const index = getNodeIndex(node, parent);
+      const index = getNodeIndex(node.id, parent);
       parent.items?.splice(index, 1);
 
       await stage.remove({ id: node.id, parentId: parent.id, root });
@@ -769,6 +770,45 @@ class Editor extends BaseService {
     }
   }
 
+  public async dragTo(config: MNode, targetParent: MContainer, targetIndex: number) {
+    if (!targetParent || !Array.isArray(targetParent.items)) return;
+
+    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode.id, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    if (parent.id === targetParent.id) {
+      if (index === targetIndex) return;
+
+      if (index < targetIndex) {
+        targetIndex -= 1;
+      }
+    }
+
+    parent.items?.splice(index, 1);
+    targetParent.items?.splice(targetIndex, 0, config);
+
+    const page = this.get('page');
+    const root = this.get('root');
+    const stage = this.get('stage');
+
+    if (stage && page && root) {
+      stage.update({
+        config: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root),
+      });
+    }
+
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+
+    this.pushHistoryState();
+  }
+
   /**
    * 撤销当前操作
    * @returns 上一次数据

package/src/theme/common/var.scss

@@ -1,11 +1,11 @@
 $--theme-color: #2882e0;
 
-$--font-color: #070303;
+$--font-color: #313a40;
 $--border-color: #d9dbdd;
 $--hover-color: #f3f5f9;
 
 $--nav-height: 35px;
-$--nav-color: #070303;
+$--nav-color: #313a40;
 $--nav--background-color: #ffffff;
 
 $--sidebar-heder-background-color: $--theme-color;

package/src/theme/content-menu.scss

@@ -44,30 +44,32 @@
       }
     }
 
-    &.active {
-      background-color: $--theme-color;
-      .tmagic-design-button,
-      .tmagic-design-button:active,
-      .tmagic-design-button:focus {
-        color: #fff;
-        background-color: $--theme-color;
-      }
+    &.button {
+      &:hover {
+        background-color: $--hover-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: $--font-color;
+        }
 
-      &.menu-item i {
-        color: #fff;
+        &.menu-item i {
+          color: $--font-color;
+        }
       }
-    }
 
-    &:hover {
-      background-color: $--hover-color;
-      .tmagic-design-button,
-      .tmagic-design-button:active,
-      .tmagic-design-button:focus {
-        color: $--font-color;
-      }
+      &.active {
+        background-color: $--theme-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: #fff;
+          background-color: transparent;
+        }
 
-      &.menu-item i {
-        color: $--font-color;
+        &.menu-item i {
+          color: #fff;
+        }
       }
     }
   }

package/src/theme/framework.scss

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
+    Microsoft YaHei, sans-serif;
 
   &-content {
     height: calc(100% - #{$--nav-height});

package/src/theme/layer-panel.scss

@@ -1,75 +1,75 @@
 .magic-editor-layer-panel {
+  $--node-height: 22px;
+
   background: $--sidebar-content-background-color;
 
   .magic-editor-layer-tree {
     padding-top: 48px;
-  }
+    background-color: $--sidebar-content-background-color;
+    color: $--font-color;
+    font-size: 13px;
 
-  .node-content {
-    flex: 1;
-    display: flex;
-    width: 100%;
-    > div {
-      width: 8px;
-    }
-    > span {
-      width: calc(100% - 68px);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    > i {
-      margin-right: 10px;
-      font-size: 20px;
-      &.lock {
-        color: #bbb;
-      }
-    }
-  }
-}
-.magic-editor-layer-panel,
-.magic-editor-layer-panel .el-tree {
-  background-color: $--sidebar-content-background-color;
-  color: #313a40;
-}
+    .magic-editor-layer-node {
+      cursor: pointer;
 
-.magic-editor-layer-panel
-  .el-tree--highlight-current
-  .el-tree-node.is-current
-  > .el-tree-node__content {
-  background-color: $--sidebar-heder-background-color;
-  color: #fff;
-}
+      .layer-node {
+        display: flex;
+        align-items: center;
 
-.magic-editor-layer-panel .cus-tree-node {
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
+        &:hover {
+          background-color: $--hover-color;
+          color: $--font-color;
+        }
 
-  .layer-node-tool {
-    margin-right: 15px;
-  }
-}
+        &.selected {
+          background-color: $--theme-color;
+          color: $--hover-color;
+        }
 
-.magic-editor-layer-panel .cus-tree-node-hover {
-  background-color: $--hover-color;
-  width: 100%;
-}
+        &.drag-inner {
+          .layer-node-content {
+            background-color: rgba($color: $--theme-color, $alpha: 0.5);
+            color: $--hover-color;
+          }
+        }
 
-.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
-  background-color: $--sidebar-heder-background-color;
-  color: #fff;
-}
-.ui-tree-tip {
-  width: 100%;
-  height: 25px;
-  margin-left: 10px;
-  background: $--sidebar-content-background-color;
-  font-style: italic;
-  color: #555554;
-  position: absolute;
-  top: 40px;
-  left: 0;
-  z-index: 1;
+        &.drag-before {
+          .layer-node-content {
+            border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
+          }
+        }
+
+        &.drag-after {
+          .layer-node-content {
+            border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+          }
+        }
+
+        .expand-icon {
+          padding: 4px;
+          box-sizing: content-box;
+          font-size: 14px;
+        }
+
+        .layer-node-content {
+          display: flex;
+          flex: 1;
+          justify-content: space-between;
+          height: $--node-height;
+          border-top: 2px solid transparent;
+          border-bottom: 2px solid transparent;
+          .layer-node-label {
+            line-height: $--node-height;
+            flex: 1;
+          }
+        }
+
+        .layer-node-tool {
+          margin-right: 15px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
 }

package/src/theme/props-panel.scss

@@ -20,6 +20,14 @@
   .el-input__wrapper {
     border-radius: 0;
   }
+
+  .m-fields-group-list {
+    .tmagic-design-table {
+      th {
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 .m-editor-props-panel-popper {

package/src/theme/sidebar.scss

@@ -49,14 +49,10 @@
     overflow: auto;
   }
 
-  .el-scrollbar {
+  .tmagic-design-scrollbar {
     height: 100%;
   }
 
-  .el-tree {
-    min-height: 100%;
-  }
-
   .fold-icon {
     position: absolute;
     bottom: 8px;

package/src/type.ts

@@ -41,6 +41,54 @@ import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
 import type { UndoRedo } from './utils/undo-redo';
 
+export interface FrameworkSlots {
+  header(props: {}): any;
+  nav(props: {}): any;
+  'content-before'(props: {}): any;
+  'content-after'(props: {}): any;
+  'src-code'(props: {}): any;
+  sidebar(props: {}): any;
+  empty(props: {}): any;
+  workspace(props: {}): any;
+  'props-panel'(props: {}): any;
+  'footer'(props: {}): any;
+}
+
+export interface WorkspaceSlots {
+  stage(props: {}): any;
+  'workspace-content'(props: {}): any;
+  'page-bar-title'(props: { page: MPage }): any;
+  'page-bar-popover'(props: { page: MPage }): any;
+}
+
+export interface ComponentListPanelSlots {
+  'component-list-panel-header'(props: {}): any;
+  'component-list-item'(props: { component: ComponentItem }): any;
+}
+
+export interface CodeBlockListPanelSlots extends CodeBlockListSlots {
+  'code-block-panel-search'(props: {}): any;
+  'code-block-panel-header'(props: {}): any;
+}
+
+export interface CodeBlockListSlots {
+  'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
+}
+
+export interface LayerNodeSlots {
+  'layer-node-content'(props: { data: MNode }): any;
+}
+
+export interface LayerPanelSlots extends LayerNodeSlots {
+  'layer-panel-header'(props: {}): any;
+}
+
+export interface PropsPanelSlots {
+  'props-panel-header'(props: {}): any;
+}
+
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
+
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
@@ -418,6 +466,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
   name: string;
   type: 'event-select';
+  src: 'datasource' | 'component';
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */
@@ -506,6 +555,7 @@ export interface DataSourceMethodSelectConfig {
 export interface DataSourceFieldSelectConfig {
   type: 'data-source-field-select';
   name: string;
+  value?: 'key' | 'value';
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
@@ -527,3 +577,14 @@ export interface DatasourceTypeOption {
   type: string;
   text: string;
 }
+
+export interface LayerNodeStatus {
+  visible: boolean;
+  expand: boolean;
+  selected: boolean;
+}
+
+export enum DragType {
+  COMPONENT_LIST = 'component-list',
+  LAYER_TREE = 'layer-tree',
+}

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

@@ -29,6 +29,29 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '事件配置',
+    display: false,
+    items: [
+      {
+        name: 'events',
+        src: 'datasource',
+        type: 'event-select',
+      },
+    ],
+  },
+  {
+    type: 'panel',
+    title: 'mock数据',
+    items: [
+      {
+        name: 'mocks',
+        type: 'data-source-mocks',
+        defaultValue: () => [],
+      },
+    ],
+  },
 ];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {

package/src/utils/dep.ts

@@ -1,10 +1,11 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
+import { type CodeBlockContent, HookType, type Id } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import dataSourceService from '@editor/services/dataSource';
 import { Target } from '@editor/services/dep';
-import { DepTargetType, HookData } from '@editor/type';
+import { DepTargetType, type HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({
@@ -29,22 +30,36 @@ export const createDataSourceTarget = (id: Id) =>
   new Target({
     type: DepTargetType.DATA_SOURCE,
     id,
-    isTarget: (key: string | number, value: any) =>
+    isTarget: (key: string | number, value: any) => {
       // 关联数据源对象或者在模板在使用数据源
-      (value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+      if ((value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`))) {
+        return true;
+      }
+
+      // 关联数据源字段，格式为 [前缀+数据源ID, 字段名]
+      if (!Array.isArray(value) || typeof value[0] !== 'string') {
+        return false;
+      }
+
+      const [prefixId] = value;
+      const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+
+      if (prefixIndex === -1) {
+        return false;
+      }
+
+      const dsId = prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
+
+      return dsId === id && Boolean(dataSourceService.getDataSourceById(id));
+    },
   });
 
 export const createDataSourceCondTarget = (id: string) =>
   new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key: string | number, value: any) => {
-      if (!Array.isArray(value) || value[0] !== id) return false;
-
-      const ds = dataSourceService.getDataSourceById(id);
-
-      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
-    },
+    isTarget: (key: string | number, value: any) =>
+      Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id)),
   });
 
 export const createDataSourceMethodTarget = (id: string) =>

package/src/utils/editor.ts

@@ -18,7 +18,7 @@
 
 import serialize from 'serialize-javascript';
 
-import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
@@ -77,9 +77,9 @@ export const generatePageNameByApp = (app: MApp): string => generatePageName(get
  */
 export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
 
-export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number => {
+export const getNodeIndex = (id: Id, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
-  return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
+  return items.findIndex((item: MNode) => `${item.id}` === `${id}`);
 };
 
 export const getRelativeStyle = (style: Record<string, any> = {}): Record<string, any> => ({
@@ -251,3 +251,14 @@ export const serializeConfig = (config: any) =>
     space: 2,
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
+
+export const traverseNode = (node: MNode, cb: (node: MNode, parents: MNode[]) => void, parents: MNode[] = []) => {
+  cb(node, parents);
+
+  if (node.items?.length) {
+    parents.push(node);
+    node.items.forEach((item: MNode) => {
+      traverseNode(item, cb, parents);
+    });
+  }
+};

package/src/utils/props.ts

@@ -205,6 +205,7 @@ export const eventTabConfig: TabPaneConfig = {
   items: [
     {
       name: 'events',
+      src: 'component',
       type: 'event-select',
     },
   ],
@@ -236,6 +237,8 @@ export const displayTabConfig: TabPaneConfig = {
     {
       type: 'groupList',
       name: 'displayConds',
+      titlePrefix: '条件组',
+      expandAll: true,
       items: [
         {
           type: 'table',
@@ -244,6 +247,7 @@ export const displayTabConfig: TabPaneConfig = {
             {
               type: 'data-source-field-select',
               name: 'field',
+              value: 'key',
               label: '字段',
             },
             {