@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.0

package/src/services/editor.ts

@@ -193,7 +193,7 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+  public async getLayout(parent: MNode, node?: MNode | null): Promise<Layout> {
     if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
 
     if (parent.layout) {
@@ -648,12 +648,14 @@ class Editor extends BaseService {
 
     if (doc) {
       const el = doc.getElementById(`${node.id}`);
-      const parentEl = el?.offsetParent;
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = '';
     }
 
     return node;
@@ -705,9 +707,9 @@ class Editor extends BaseService {
     brothers.splice(index, 1);
 
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
+      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
+      brothers.splice(isRelative ? brothers.length : 0, 0, node);
     } else {
       brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
@@ -792,20 +794,46 @@ class Editor extends BaseService {
     if (!node || isPage(node)) return;
 
     const { style, id, type } = node;
-    if (!style || style.position !== 'absolute') return;
-
-    if (top && !isNumber(style.top)) return;
-    if (left && !isNumber(style.left)) return;
-
-    this.update({
-      id,
-      type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top,
-      },
-    });
+    if (!style || !['absolute', 'fixed'].includes(style.position)) return;
+
+    const update = (style: { [key: string]: any }) =>
+      this.update({
+        id,
+        type,
+        style,
+      });
+
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: '',
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: '',
+        });
+      }
+    }
+
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: '',
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: '',
+        });
+      }
+    }
   }
 
   public resetState() {

package/src/services/props.ts

@@ -80,7 +80,7 @@ class Props extends BaseService {
     return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
   }
 
-  public setPropsValues(values: Record<string, MNode>) {
+  public setPropsValues(values: Record<string, Partial<MNode>>) {
     Object.keys(values).forEach((type: string) => {
       this.setPropsValue(toLine(type), values[type]);
     });
@@ -91,7 +91,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public async setPropsValue(type: string, value: MNode) {
+  public async setPropsValue(type: string, value: Partial<MNode>) {
     this.state.propsValueMap[type] = value;
   }
 

package/src/theme/code-block.scss

@@ -25,124 +25,12 @@
   }
 }
 
-.el-dialog.is-fullscreen.code-editor-dialog {
-  overflow: hidden;
-}
-
-.code-editor-dialog {
-  .tmagic-design-card {
-    .t-card__header {
-      display: block;
-    }
-  }
-
-  .el-dialog__body,
-  .t-dialog__body {
-    height: 90%;
-    padding-top: 10px;
-  }
-  .tmagic-design-card {
-    height: 100%;
-    background: #fff;
-    .el-card__body,
-    .t-card__body {
-      height: 100%;
-      background: #fff;
-    }
-  }
-
-  .code-editor-layout {
-    height: 100%;
-    border: 1px solid #e4e7ed;
-
-    .side-tree {
-      height: 100%;
-      overflow: auto;
-      .el-tree-node__label {
-        width: 100%;
-      }
-
-      .list-container {
-        width: 100%;
-        overflow: hidden;
-        margin-left: -10px;
-        .list-item {
-          width: 100%;
-          margin: 10px 0;
-          line-height: 30px;
-          .code-name {
-            width: 100%;
-            font-size: 14px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
+.m-editor-code-block-editor {
+  .tmagic-design-table {
+    height: 180px;
   }
 
-  .code-name-wrapper {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    margin-bottom: 10px;
-    .code-name-label {
-      margin-right: 10px;
-    }
-    .code-name-input {
-      width: 300px;
-    }
-  }
-
-  .m-editor-code-block-editor-panel-list-mode {
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-code-block-editor-panel {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    width: calc(100% - 9px);
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-wrapper {
-    height: 100%;
-    &.fullScreen {
-      height: 100%;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 100;
-    }
-    .m-editor-container {
-      height: calc(100% - 45px);
-    }
-    .m-editor-content-bottom {
-      height: 45px;
-      width: 100%;
-      display: flex;
-      justify-content: end;
-      background: #fff;
-      position: absolute;
-      right: 20px;
-      bottom: 0;
-      > button {
-        height: 30px;
-        margin-top: 5px;
-      }
-    }
+  .el-drawer__body {
+    padding: 10px 20px;
   }
 }

package/src/theme/code-editor.scss

@@ -1,7 +1,32 @@
 .magic-code-editor {
   width: 100%;
+}
+
+.magic-code-editor-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &.full-screen {
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+  }
+
+  .magic-code-editor-content {
+    width: 100%;
+    height: 100%;
+
+    .margin {
+      margin: 0;
+    }
+  }
 
-  .margin {
-    margin: 0;
+  .magic-code-editor-full-screen-icon {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    z-index: 11;
   }
 }

package/src/theme/content-menu.scss

@@ -8,7 +8,7 @@
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
-  max-height: 100%;
+  max-height: 80%;
 
   .menu-item {
     color: #333;

package/src/theme/data-source-methods.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-methods {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-methods-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/src/theme/data-source.scss

@@ -15,3 +15,14 @@
     }
   }
 }
+
+.data-source-list-panel-add-menu {
+  .tmagic-design-button {
+    width: 100%;
+    text-align: left;
+
+    span {
+      width: 100%;
+    }
+  }
+}

package/src/theme/event.scss

@@ -19,18 +19,21 @@
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
   }
 }
-.m-fields-code-select-col {
+.m-fields-code-select-col,
+.m-fields-data-source-method-select {
   width: 100%;
-  .code-select-container {
-    display: flex;
-    align-items: center;
-    .select {
-      flex: 10 0 100px;
-    }
-    .icon {
-      flex: 1 0 20px;
-      cursor: pointer;
-      margin-right: 5px;
-    }
+}
+
+.code-select-container,
+.data-source-method-select-container {
+  display: flex;
+  align-items: center;
+  .select {
+    flex: 10 0 100px;
+  }
+  .icon {
+    flex: 1 0 20px;
+    cursor: pointer;
+    margin-right: 5px;
   }
 }

package/src/theme/framework.scss

@@ -4,10 +4,7 @@
   width: 100%;
 
   &-content {
-    width: 100%;
     height: calc(100% - #{$--nav-height});
-    display: flex;
-    justify-self: space-between;
   }
 
   &-framework-center {

package/src/theme/layout.scss

@@ -2,4 +2,8 @@
   width: 100%;
   display: flex;
   justify-self: space-between;
+
+  &:has(.m-editor-resizer-draging) {
+    overflow: hidden;
+  }
 }

package/src/theme/sidebar.scss

@@ -1,76 +1,33 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
-  .t-tabs__header {
+  .m-editor-sidebar-header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
+    width: 40px;
 
-    .t-tabs__nav--card {
-      background-color: transparent;
-    }
-
-    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
-        .t-is-active
-      ):hover {
-      background-color: transparent;
-    }
-
-    &.is-left,
-    &.t-is-left {
-      width: 40px;
-      margin-right: 0;
-    }
-
-    .el-tabs__nav-wrap {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
+    .m-editor-sidebar-header-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
-          background: $--sidebar-content-background-color;
-          border: 0;
-
-          i {
-            color: #353140;
-          }
+      &.is-active {
+        background: $--sidebar-content-background-color;
 
-          .magic-editor-tab-panel-title {
-            color: #353140;
-          }
+        i {
+          color: #353140;
         }
 
-        &:first-child {
-          border-right: 0;
+        .magic-editor-tab-panel-title {
+          color: #353140;
         }
       }
     }
 
-    .t-tabs__nav-item {
-      padding: 7px;
-    }
-
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);
@@ -86,6 +43,12 @@
     }
   }
 
+  .m-editor-sidebar-content {
+    height: 100%;
+    width: calc(100% - 40px);
+    overflow: auto;
+  }
+
   .el-scrollbar {
     height: 100%;
   }
@@ -109,9 +72,4 @@
       background: rgba(0, 0, 0, 0.2);
     }
   }
-
-  .el-tabs__content,
-  .el-tab-pane {
-    height: 100%;
-  }
 }

package/src/theme/theme.scss

@@ -19,5 +19,6 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";

package/src/type.ts

@@ -18,7 +18,7 @@
 
 import type { Component } from 'vue';
 
-import type { FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -45,7 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface InstallOptions {
-  parseDSL: (dsl: string) => MApp;
+  parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
 
@@ -93,7 +93,7 @@ export type StoreStateKey = keyof StoreState;
 
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
-  propsValueMap: Record<string, MNode>;
+  propsValueMap: Record<string, Partial<MNode>>;
 }
 
 export interface ComponentGroupState {
@@ -334,18 +334,15 @@ export interface ScrollViewerEvent {
 }
 
 export type CodeState = {
-  /** 是否展示代码块编辑区 */
-  isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
-  /** 当前选中的代码块id */
-  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
+  paramsColConfig?: ColumnConfig;
 };
 
 export type HookData = {
@@ -429,6 +426,8 @@ export interface EventSelectConfig {
   compActionConfig?: FormItem;
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
 }
 
 export enum KeyBindingCommand {
@@ -485,3 +484,44 @@ export interface KeyBindingCacheItem {
   eventType: 'keyup' | 'keydown';
   binded: boolean;
 }
+
+export interface CodeSelectColConfig {
+  type: 'code-select-col';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceMethodSelectConfig {
+  type: 'data-source-method-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceFieldSelectConfig {
+  type: 'data-source-field-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export enum DepTargetType {
+  DEFAULT = 'default',
+  /** 代码块 */
+  CODE_BLOCK = 'code-block',
+  /** 数据源 */
+  DATA_SOURCE = 'data-source',
+  /** 数据源方法 */
+  DATA_SOURCE_METHOD = 'data-source-method',
+  /** 数据源条件 */
+  DATA_SOURCE_COND = 'data-source-cond',
+}
+
+export interface DatasourceTypeOption {
+  type: string;
+  text: string;
+}

package/src/utils/content-menu.ts

@@ -0,0 +1,92 @@
+import { computed, markRaw, Ref, ref } from 'vue';
+import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { MenuButton, Services } from '@editor/type';
+
+export const useDeleteMenu = (): MenuButton => ({
+  type: 'button',
+  text: '删除',
+  icon: Delete,
+  display: (services) => {
+    const node = services?.editorService?.get('node');
+    return node?.type !== NodeType.ROOT && !isPage(node);
+  },
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.remove(nodes);
+  },
+});
+
+const canPaste = ref(false);
+
+export const useCopyMenu = (): MenuButton => ({
+  type: 'button',
+  text: '复制',
+  icon: markRaw(CopyDocument),
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.copy(nodes);
+    canPaste.value = true;
+  },
+});
+
+export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+  type: 'button',
+  text: '粘贴',
+  icon: markRaw(DocumentCopy),
+  display: () => canPaste.value,
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    if (!nodes || nodes.length === 0) return;
+
+    if (menu?.value?.$el) {
+      const stage = services?.editorService?.get('stage');
+      const rect = menu.value.$el.getBoundingClientRect();
+      const parentRect = stage?.container?.getBoundingClientRect();
+      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+    } else {
+      services?.editorService?.paste();
+    }
+  },
+});
+
+const moveTo = (id: Id, services?: Services) => {
+  if (!services?.editorService) return;
+
+  const nodes = services.editorService.get('nodes') || [];
+  const parent = services.editorService.getNodeById(id) as MContainer;
+
+  if (!parent) return;
+
+  services?.editorService.add(nodes, parent);
+  services?.editorService.remove(nodes);
+};
+
+export const useMoveToMenu = (services?: Services): MenuButton => {
+  const root = computed(() => services?.editorService?.get('root'));
+
+  return {
+    type: 'button',
+    text: '移动至',
+    display: (services) => {
+      const node = services?.editorService?.get('node');
+      const pageLength = services?.editorService?.get('pageLength') || 0;
+      return !isPage(node) && pageLength > 1;
+    },
+    items: (root.value?.items || [])
+      .filter((page) => page.id !== services?.editorService?.get('page')?.id)
+      .map((page) => ({
+        text: `${page.name}(${page.id})`,
+        type: 'button',
+        handler: (services?: Services) => {
+          moveTo(page.id, services);
+        },
+      })),
+  };
+};