@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/src/services/editor.ts

@@ -19,11 +19,12 @@
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, mergeWith, uniq } from 'lodash-es';
 
-import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockDSL, Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
+import codeBlockService from '../services/codeBlock';
 import historyService, { StepValue } from '../services/history';
 import storageService, { Protocol } from '../services/storage';
 import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
@@ -80,6 +81,8 @@ class Editor extends BaseService {
         'undo',
         'redo',
         'highlight',
+        'getCodeDsl',
+        'setCodeDsl',
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -419,6 +422,9 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(parent.id);
+
+    // 通知codeBlockService解除绑定关系
+    codeBlockService.deleteCompsInRelation(node);
   }
 
   /**
@@ -760,6 +766,26 @@ class Editor extends BaseService {
     this.get<Map<Id, Id>>('modifiedNodeIds').clear();
   }
 
+  /**
+   * 从dsl中的codeBlocks字段读取活动的代码块
+   * @returns {CodeBlockDSL | null}
+   */
+  public async getCodeDsl(): Promise<CodeBlockDSL | null> {
+    const root = this.get<MApp | null>('root');
+    if (!root) return null;
+    return root.codeBlocks || null;
+  }
+
+  /**
+   * 设置代码块到dsl的codeBlocks字段
+   * @param {CodeBlockDSL} codeDsl 代码DSL
+   * @returns {void}
+   */
+  public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
+    if (!this.state.root) return;
+    this.state.root.codeBlocks = codeDsl;
+  }
+
   private addModifiedNodeId(id: Id) {
     if (!this.isHistoryStateChange) {
       this.get<Map<Id, Id>>('modifiedNodeIds').set(id, id);

package/src/theme/code-block.scss

@@ -0,0 +1,184 @@
+.m-editor-code-block-list {
+  margin-top: 5px;
+  .el-tree-node__content {
+    height: auto;
+  }
+  .code-header-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .code-filter-input {
+      margin: 0 5px;
+    }
+    .code-filter-input-no-btn {
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .create-code-button {
+      margin-left: 2px;
+      margin-right: 10px;
+    }
+  }
+
+  .divider {
+    margin: 10px 0 0 0;
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    margin-left: -25px;
+    .list-item {
+      display: flex;
+      align-items: center;
+      .right-tool {
+        position: absolute;
+        right: 15px;
+        padding-left: 5px;
+        display: flex;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .code-name {
+        font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 10px 15px;
+        margin-right: 60px;
+      }
+    }
+    .code-comp-map-wrapper {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-left: 20px;
+      margin-bottom: 5px;
+      .arrow-left {
+        transform: rotate(-45deg);
+        width: 20px;
+        height: 20px;
+      }
+      .code-comp {
+        margin-left: 5px;
+        padding: 5px;
+        .comp-delete-icon {
+          margin-left: 3px;
+        }
+      }
+    }
+  }
+}
+
+.m-fields-code-select {
+  width: 100%;
+  .el-card__body {
+    padding: 5px;
+  }
+  .tool-bar {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    height: 20px;
+    .tool-item {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.code-editor-dialog {
+  .el-dialog__body {
+    height: 90%;
+    padding-top: 10px;
+  }
+  .el-card {
+    height: 100%;
+    background: #fff;
+    .el-card__body {
+      height: calc(100% - 80px);
+      background: #fff;
+    }
+  }
+
+  .code-editor-layout {
+    height: 100%;
+    border: 1px solid #e4e7ed;
+
+    .side-tree {
+      height: 100%;
+      overflow: auto;
+
+      .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;
+          }
+        }
+      }
+    }
+  }
+
+  .code-name-wrapper {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    .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%;
+    .m-editor-container {
+      height: calc(100% - 70px);
+    }
+    .m-editor-content-bottom {
+      height: 40px;
+      width: 100%;
+      display: flex;
+      justify-content: end;
+      background: #fff;
+      > button {
+        height: 30px;
+        margin-top: 15px;
+      }
+    }
+  }
+}

package/src/theme/index.scss

@@ -1,14 +1,2 @@
 @import "./common/var.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 "./theme.scss";

package/src/theme/layout.scss

@@ -0,0 +1,5 @@
+.m-editor-layout {
+  width: 100%;
+  display: flex;
+  justify-self: space-between;
+}

package/src/theme/theme.scss

@@ -0,0 +1,15 @@
+@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 "./layout.scss";

package/src/type.ts

@@ -23,6 +23,7 @@ import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
+import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -46,6 +47,7 @@ export interface Services {
   propsService: PropsService;
   componentListService: ComponentListService;
   uiService: UiService;
+  codeBlockService: CodeBlockService;
 }
 
 export interface StageOptions {
@@ -243,7 +245,7 @@ export interface SideComponent extends MenuComponent {
  * component-list: 组件列表
  * layer: 已选组件树
  */
-export type SideItem = 'component-list' | 'layer' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {
@@ -305,3 +307,87 @@ export interface ScrollViewerEvent {
   scrollHeight: number;
   scrollWidth: number;
 }
+
+export interface CodeBlockDSL {
+  [id: string]: CodeBlockContent;
+}
+
+export interface CodeBlockContent {
+  /** 代码块名称 */
+  name: string;
+  /** 代码块内容 */
+  content: string;
+  /** 代码块与组件的绑定关系 */
+  comps?: CodeRelation;
+  /** 扩展字段 */
+  [propName: string]: any;
+}
+
+export type CodeState = {
+  /** 是否展示代码块编辑区 */
+  isShowCodeEditor: boolean;
+  /** 代码块DSL数据源 */
+  codeDsl: CodeBlockDSL | null;
+  /** 当前选中的代码块id */
+  id: string;
+  /** 代码块是否可编辑 */
+  editable: boolean;
+  /** 代码编辑面板的展示模式 */
+  mode: CodeEditorMode;
+  /** list模式下左侧展示的代码列表 */
+  combineIds: string[];
+  /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
+  undeletableList: string[];
+};
+
+export type CodeRelation = {
+  /** 组件id:['created'] */
+  [compId: string | number]: string[];
+};
+
+export enum CodeEditorMode {
+  /** 左侧菜单，右侧代码 */
+  LIST = 'list',
+  /** 全屏代码 */
+  EDITOR = 'editor',
+}
+
+export interface CodeDslList {
+  /** 代码块id */
+  id: string;
+  /** 代码块名称 */
+  name: string;
+  /** 代码块函数内容 */
+  codeBlockContent?: CodeBlockContent;
+  /** 是否展示代码绑定关系 */
+  showRelation?: boolean;
+}
+
+export interface ListState {
+  /** 代码块列表 */
+  codeList: CodeDslList[];
+}
+
+export interface ListRelationState extends ListState {
+  /** 与代码块绑定的组件id信息 */
+  bindComps: {
+    /** 代码块id : 组件信息 */
+    [id: string]: MNode[];
+  };
+}
+
+export enum CodeDeleteErrorType {
+  /** 代码块存在于不可删除列表中 */
+  UNDELETEABLE = 'undeleteable',
+  /** 代码块存在绑定关系 */
+  BIND = 'bind',
+}
+
+export enum CodeSelectOp {
+  /** 增加 */
+  ADD = 'add',
+  /** 删除 */
+  DELETE = 'delete',
+  /** 单选修改 */
+  CHANGE = 'change',
+}

package/src/utils/props.ts

@@ -221,13 +221,19 @@ export const fillConfig = (config: FormConfig = []) => [
       },
       {
         title: '高级',
-        labelWidth: '80px',
+        lazy: true,
         items: [
           {
-            type: 'code-link',
             name: 'created',
             text: 'created',
-            formTitle: 'created',
+            type: 'code-select',
+            labelWidth: '100px',
+          },
+          {
+            name: 'mounted',
+            text: 'mounted',
+            type: 'code-select',
+            labelWidth: '100px',
           },
         ],
       },

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

@@ -7,6 +7,8 @@ declare const _default: {
             name: string;
             config: {
                 language?: string | undefined;
+                options?: Object | undefined;
+                height?: string | undefined;
             };
             prop: string;
         }>>> & {
@@ -30,6 +32,8 @@ declare const _default: {
             name: string;
             config: {
                 language?: string | undefined;
+                options?: Object | undefined;
+                height?: string | undefined;
             };
             prop: string;
         }>>> & {
@@ -59,6 +63,8 @@ declare const _default: {
         name: string;
         config: {
             language?: string | undefined;
+            options?: Object | undefined;
+            height?: string | undefined;
         };
         prop: string;
     }>>> & {
@@ -72,6 +78,8 @@ declare const _default: {
     name: string;
     config: {
         language?: string | undefined;
+        options?: Object | undefined;
+        height?: string | undefined;
     };
     prop: string;
 }>>> & {

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

@@ -8,6 +8,7 @@ declare const _default: {
                 name: string;
                 text?: string;
                 formTitle?: string;
+                codeOptions?: Object;
             };
             model: any;
             name: string;
@@ -34,6 +35,7 @@ declare const _default: {
                 name: string;
                 text?: string;
                 formTitle?: string;
+                codeOptions?: Object;
             };
             model: any;
             name: string;
@@ -66,6 +68,7 @@ declare const _default: {
             name: string;
             text?: string;
             formTitle?: string;
+            codeOptions?: Object;
         };
         model: any;
         name: string;
@@ -82,6 +85,7 @@ declare const _default: {
         name: string;
         text?: string;
         formTitle?: string;
+        codeOptions?: Object;
     };
     model: any;
     name: string;

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

@@ -0,0 +1,96 @@
+import { SelectConfig } from '@tmagic/form';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            config: {
+                selectConfig?: SelectConfig | undefined;
+            };
+            model: any;
+            prop: string;
+            name: string;
+            size: string;
+        }>>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            config: {
+                selectConfig?: SelectConfig | undefined;
+            };
+            model: any;
+            prop: string;
+            name: string;
+            size: string;
+        }>>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+        config: {
+            selectConfig?: SelectConfig | undefined;
+        };
+        model: any;
+        prop: string;
+        name: string;
+        size: string;
+    }>>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        selectConfig?: SelectConfig | undefined;
+    };
+    model: any;
+    prop: string;
+    name: string;
+    size: string;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare 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;
+    };
+};

package/types/index.d.ts

@@ -12,8 +12,11 @@ export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
+export { default as codeBlockService } from './services/codeBlock';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as CodeSelect } from './fields/CodeSelect.vue';
+export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';

package/types/layouts/AddPageBox.vue.d.ts

@@ -1,4 +1,46 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    clickHandler(): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: ((event: string, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
 export default _default;