@tmagic/editor 1.3.0-beta.2 → 1.3.0-beta.4

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/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;
 
@@ -507,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;
@@ -528,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

@@ -41,6 +41,17 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    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

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

package/types/editorProps.d.ts

@@ -1,127 +1,81 @@
-import type { PropType } from 'vue';
 import type { EventOption } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
-import type { DataSourceSchema, MApp, MNode } from '@tmagic/schema';
+import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, UpdateDragEl } from '@tmagic/stage';
 import type { ComponentGroup, DatasourceTypeOption, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
-declare const _default: {
+export interface EditorProps {
     /** 页面初始值 */
-    modelValue: {
-        type: PropType<MApp>;
-        default: () => {};
-        require: boolean;
-    };
-    /** 左侧面板中的组件列表 */
-    componentGroupList: {
-        type: PropType<ComponentGroup[]>;
-        default: () => never[];
-    };
-    /** 左侧面板中的组件列表 */
-    datasourceList: {
-        type: PropType<DatasourceTypeOption[]>;
-        default: () => never[];
-    };
+    modelValue?: MApp;
+    /** 左侧面板中的组件类型列表 */
+    componentGroupList?: ComponentGroup[];
+    /** 左侧面板中的数据源类型列表 */
+    datasourceList?: DatasourceTypeOption[];
     /** 左侧面板配置 */
-    sidebar: {
-        type: PropType<SideBarData>;
-    };
+    sidebar?: SideBarData;
     /** 顶部工具栏配置 */
-    menu: {
-        type: PropType<MenuBarData>;
-        default: () => {
-            left: never[];
-            right: never[];
-        };
-    };
+    menu?: MenuBarData;
     /** 组件树右键菜单 */
-    layerContentMenu: {
-        type: PropType<(MenuButton | MenuComponent)[]>;
-        default: () => never[];
-    };
+    layerContentMenu?: (MenuButton | MenuComponent)[];
     /** 画布右键菜单 */
-    stageContentMenu: {
-        type: PropType<(MenuButton | MenuComponent)[]>;
-        default: () => never[];
-    };
+    stageContentMenu?: (MenuButton | MenuComponent)[];
     /** 中间工作区域中画布渲染的内容 */
-    render: {
-        type: PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>;
-    };
+    render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
     /** 中间工作区域中画布通过iframe渲染时的页面url */
-    runtimeUrl: StringConstructor;
+    runtimeUrl?: string;
     /** 选中时是否自动滚动到可视区域 */
-    autoScrollIntoView: BooleanConstructor;
+    autoScrollIntoView?: boolean;
     /** 组件的属性配置表单的dsl */
-    propsConfigs: {
-        type: PropType<Record<string, FormConfig>>;
-        default: () => {};
-    };
+    propsConfigs?: Record<string, FormConfig>;
     /** 添加组件时的默认值 */
-    propsValues: {
-        type: PropType<Record<string, Partial<MNode>>>;
-        default: () => {};
-    };
+    propsValues?: Record<string, Partial<MNode>>;
     /** 组件联动事件选项列表 */
-    eventMethodList: {
-        type: PropType<Record<string, {
-            events: EventOption[];
-            methods: EventOption[];
-        }>>;
-        default: () => {};
-    };
+    eventMethodList?: Record<string, {
+        events: EventOption[];
+        methods: EventOption[];
+    }>;
     /** 添加数据源时的默认值 */
-    datasourceValues: {
-        type: PropType<Record<string, Partial<DataSourceSchema>>>;
-        default: () => {};
-    };
+    datasourceValues?: Record<string, Partial<DataSourceSchema>>;
     /** 数据源的属性配置表单的dsl */
-    datasourceConfigs: {
-        type: PropType<Record<string, FormConfig>>;
-        default: () => {};
-    };
+    datasourceConfigs?: Record<string, FormConfig>;
+    datasourceEventMethodList?: Record<string, {
+        events: EventOption[];
+        methods: EventOption[];
+    }>;
     /** 画布中组件选中框的移动范围 */
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)>;
-    };
+    moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
     /** 编辑器初始化时默认选中的组件ID */
-    defaultSelected: {
-        type: (NumberConstructor | StringConstructor)[];
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-        default: (el: HTMLElement) => boolean;
-    };
-    isContainer: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-        default: (el: HTMLElement) => boolean;
-    };
-    containerHighlightClassName: {
-        type: StringConstructor;
-        default: string;
-    };
-    containerHighlightDuration: {
-        type: NumberConstructor;
-        default: number;
-    };
-    containerHighlightType: {
-        type: PropType<ContainerHighlightType>;
-        default: ContainerHighlightType;
-    };
-    stageRect: {
-        type: PropType<StageRect>;
-    };
-    codeOptions: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    updateDragEl: {
-        type: PropType<UpdateDragEl>;
-    };
-    disabledDragStart: {
-        type: BooleanConstructor;
-    };
-    extendFormState: {
-        type: PropType<(state: FormState) => Record<string, any> | Promise<Record<string, any>>>;
-    };
+    defaultSelected?: Id;
+    canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+    containerHighlightClassName?: string;
+    containerHighlightDuration?: number;
+    containerHighlightType?: ContainerHighlightType;
+    stageRect?: StageRect;
+    codeOptions?: {
+        [key: string]: any;
+    };
+    updateDragEl?: UpdateDragEl;
+    disabledDragStart?: boolean;
+    extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+}
+export declare const defaultEditorProps: {
+    componentGroupList: () => never[];
+    datasourceList: () => never[];
+    menu: () => {
+        left: never[];
+        right: never[];
+    };
+    layerContentMenu: () => never[];
+    stageContentMenu: () => never[];
+    propsConfigs: () => {};
+    propsValues: () => {};
+    eventMethodList: () => {};
+    datasourceValues: () => {};
+    datasourceConfigs: () => {};
+    canSelect: (el: HTMLElement) => boolean;
+    isContainer: (el: HTMLElement) => boolean;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
+    codeOptions: () => {};
 };
-export default _default;

package/types/fields/Code.vue.d.ts

@@ -1,19 +1,23 @@
 import type { FieldProps } from '@tmagic/form';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
     language?: string | undefined;
-    options?: Object | undefined;
+    options?: {
+        [key: string]: any;
+    } | undefined;
     height?: string | undefined;
+    parse?: boolean | undefined;
 }>>, {
     disabled: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
     language?: string | undefined;
-    options?: Object | undefined;
+    options?: {
+        [key: string]: any;
+    } | undefined;
     height?: string | undefined;
+    parse?: boolean | undefined;
 }>>, {
     disabled: boolean;
-}>>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-}, {
+}>>>, {
     disabled: boolean;
 }, {}>;
 export default _default;

package/types/fields/DataSourceMocks.vue.d.ts

@@ -0,0 +1,32 @@
+import { type FieldProps } from '@tmagic/form';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    type: "data-source-mocks";
+}>>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    type: "data-source-mocks";
+}>>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/index.d.ts

@@ -18,10 +18,11 @@ export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
-export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMocks } from './fields/DataSourceMocks.vue';
 export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';