@tmagic/editor 1.3.5 → 1.3.7

package/src/services/storage.ts

@@ -25,7 +25,14 @@ export class WebStorage extends BaseService {
   private namespace = 'tmagic';
 
   constructor() {
-    super(['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem']);
+    super([
+      { name: 'getStorage', isAsync: false },
+      { name: 'getNamespace', isAsync: false },
+      { name: 'clear', isAsync: false },
+      { name: 'getItem', isAsync: false },
+      { name: 'removeItem', isAsync: false },
+      { name: 'setItem', isAsync: false },
+    ]);
   }
 
   /**
@@ -38,26 +45,27 @@ export class WebStorage extends BaseService {
    *    },
    * });
    */
-  public async getStorage(): Promise<Storage> {
+  public getStorage(): Storage {
     return this.storage;
   }
 
-  public async getNamespace(): Promise<string> {
+  public getNamespace(): string {
     return this.namespace;
   }
 
   /**
    * 清理，支持storageService.usePlugin
    */
-  public async clear(): Promise<void> {
-    const storage = await this.getStorage();
+  public clear(): void {
+    const storage = this.getStorage();
     storage.clear();
   }
   /**
    * 获取存储项，支持storageService.usePlugin
    */
-  public async getItem(key: string, options: Options = {}): Promise<any> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public getItem(key: string, options: Options = {}): any {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     const { protocol = options.protocol, item } = this.getValueAndProtocol(
       storage.getItem(`${options.namespace || namespace}:${key}`),
     );
@@ -80,24 +88,26 @@ export class WebStorage extends BaseService {
   /**
    * 获取指定索引位置的key
    */
-  public async key(index: number): Promise<string | null> {
-    const storage = await this.getStorage();
+  public key(index: number): string | null {
+    const storage = this.getStorage();
     return storage.key(index);
   }
 
   /**
    * 移除存储项，支持storageService.usePlugin
    */
-  public async removeItem(key: string, options: Options = {}): Promise<void> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public removeItem(key: string, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     storage.removeItem(`${options.namespace || namespace}:${key}`);
   }
 
   /**
    * 设置存储项，支持storageService.usePlugin
    */
-  public async setItem(key: string, value: any, options: Options = {}): Promise<void> {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+  public setItem(key: string, value: any, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
     let item = value;
     const protocol = options.protocol ? `${options.protocol}:` : '';
     if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) {

package/src/services/ui.ts

@@ -52,7 +52,10 @@ const state = reactive<UiState>({
 
 class Ui extends BaseService {
   constructor() {
-    super(['zoom', 'calcZoom']);
+    super([
+      { name: 'zoom', isAsync: true },
+      { name: 'calcZoom', isAsync: true },
+    ]);
   }
 
   public set<K extends keyof UiState, T extends UiState[K]>(name: K, value: T) {

package/src/theme/code-block.scss

@@ -1,21 +1,5 @@
 .m-editor-code-block-list {
   height: 100%;
-
-  .list-container {
-    .list-item {
-      .codeIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-
-      .compIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-    }
-  }
 }
 
 .m-fields-code-select {

package/src/theme/floating-box.scss

@@ -0,0 +1,30 @@
+.m-editor-float-box {
+  position: absolute;
+  background-color: #fff;
+  z-index: 100;
+  border: 1px solid $--border-color;
+  display: flex;
+  flex-direction: column;
+
+  .m-editor-float-box-title {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 5px;
+    cursor: move;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $--border-color;
+  }
+
+  .m-editor-float-box-body {
+    padding: 5px;
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.m-editor-floating-box-moveable {
+  opacity: 0;
+}

package/src/theme/layer-panel.scss

@@ -4,4 +4,23 @@
   .m-editor-tree {
     padding-top: 48px;
   }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
 }

package/src/theme/page-bar.scss

@@ -1,7 +1,24 @@
-.m-editor-page-bar {
+.m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
   left: 0;
+  width: 100%;
+
+  .tmagic-design-button.m-editor-page-bar-switch-type-button {
+    margin-left: 7px;
+    position: relative;
+    top: 1px;
+    border-radius: 3px 3px 0 0;
+    border: 1px solid $--border-color;
+    border-bottom: 1px solid transparent;
+
+    &.active {
+      background-color: #f3f3f3;
+    }
+  }
+}
+
+.m-editor-page-bar {
   display: flex;
   width: 100%;
   height: $--page-bar-height;

package/src/theme/stage.scss

@@ -25,3 +25,27 @@
     width: 0 !important;
   }
 }
+
+.m-editor-stage-float-button {
+  cursor: pointer;
+  transform: translateY(-50%);
+  width: 12px;
+  font-size: 12px;
+  line-height: 1.2;
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  padding: 5px;
+  background-color: #ffffff;
+  transition: background-color 0.2s;
+  color: rgba(0, 0, 0, 0.88);
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.m-editor-node-list-menu {
+  height: 100%;
+  width: 100%;
+  min-width: 300px;
+  max-height: 500px;
+}

package/src/theme/theme.scss

@@ -16,7 +16,6 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
-@import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
 @import "./data-source-methods.scss";
@@ -24,3 +23,4 @@
 @import "./key-value.scss";
 @import "./floatbox.scss";
 @import "./tree.scss";
+@import "./floating-box.scss";

package/src/theme/tree.scss

@@ -59,13 +59,24 @@
           width: 100px;
           overflow: hidden;
           text-overflow: ellipsis;
+
+          .disabled {
+            cursor: default;
+          }
+
+          .hook {
+            color: #999;
+          }
         }
       }
 
       .tree-node-tool {
-        margin-right: 15px;
         display: flex;
         align-items: center;
+
+        .tmagic-design-icon {
+          margin-right: 10px;
+        }
       }
     }
   }

package/src/type.ts

@@ -19,12 +19,14 @@
 import type { Component } from 'vue';
 
 import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
+  GuidesOptions,
   MoveableOptions,
+  RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
 
@@ -52,13 +54,13 @@ export interface FrameworkSlots {
   workspace(props: {}): any;
   'props-panel'(props: {}): any;
   'footer'(props: {}): any;
+  'page-bar-title'(props: { page: MPage | MPageFragment }): any;
+  'page-bar-popover'(props: { page: MPage | MPageFragment }): 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 {
@@ -72,7 +74,7 @@ export interface CodeBlockListPanelSlots extends CodeBlockListSlots {
 }
 
 export interface CodeBlockListSlots {
-  'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
+  'code-block-panel-tool'(props: { id: Id; data: any }): any;
 }
 
 export interface DataSourceListSlots {
@@ -81,12 +83,12 @@ export interface DataSourceListSlots {
 
 export interface LayerNodeSlots {
   'layer-node-content'(props: { data: MNode }): any;
+  'layer-node-tool'(props: { data: MNode }): any;
+  'layer-node-label'(props: { data: MNode }): any;
 }
 
 export interface LayerPanelSlots extends LayerNodeSlots {
   'layer-panel-header'(props: {}): any;
-  'layer-node-tool'(props: { data: MNode }): any;
-  'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface PropsPanelSlots {
@@ -129,18 +131,24 @@ export interface StageOptions {
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl: UpdateDragEl;
+  renderType: RenderType;
+  guidesOptions: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
 }
 
 export interface StoreState {
   root: MApp | null;
-  page: MPage | null;
+  page: MPage | MPageFragment | null;
   parent: MContainer | null;
   node: MNode | null;
   highlightNode: MNode | null;
   nodes: MNode[];
   stage: StageCore | null;
+  stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
+  pageFragmentLength: number;
+  disabledMultiSelect: boolean;
 }
 
 export type StoreStateKey = keyof StoreState;
@@ -148,6 +156,7 @@ export type StoreStateKey = keyof StoreState;
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
   propsValueMap: Record<string, Partial<MNode>>;
+  relateIdMap: Record<Id, Id>;
 }
 
 export interface ComponentGroupState {
@@ -220,7 +229,7 @@ export interface UiState {
 export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
-  page: MPage | null;
+  page: MPage | MPageFragment | null;
 }
 
 export interface AddMNode {
@@ -485,7 +494,7 @@ export interface CodeParamStatement {
 }
 
 export interface StepValue {
-  data: MPage;
+  data: MPage | MPageFragment;
   modifiedNodeIds: Map<Id, Id>;
   nodeId: Id;
 }
@@ -568,7 +577,7 @@ export interface KeyBindingCacheItem {
   command: KeyBindingCommand | string;
   keybinding?: string | string[];
   eventType: 'keyup' | 'keydown';
-  binded: boolean;
+  bound: boolean;
 }
 
 export interface CodeSelectColConfig {
@@ -580,6 +589,15 @@ export interface CodeSelectColConfig {
   display?: boolean | FilterFunction;
 }
 
+export interface PageFragmentSelectConfig {
+  type: 'page-fragment-select';
+  name: string;
+  text: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
 export interface DataSourceMethodSelectConfig {
   type: 'data-source-method-select';
   name: string;

package/src/utils/compose.ts

@@ -2,7 +2,7 @@
  * @param {Array} middleware
  * @return {Function}
  */
-export const compose = (middleware: Function[]) => {
+export const compose = (middleware: Function[], isAsync: boolean) => {
   if (!Array.isArray(middleware)) throw new TypeError('Middleware 必须是一个数组!');
   for (const fn of middleware) {
     if (typeof fn !== 'function') throw new TypeError('Middleware 必须由函数组成!');
@@ -17,16 +17,35 @@ export const compose = (middleware: Function[]) => {
     // last called middleware #
     let index = -1;
     return dispatch(0);
-    function dispatch(i: number): Promise<void> {
-      if (i <= index) return Promise.reject(new Error('next() 被多次调用'));
+    function dispatch(i: number): Promise<void> | void {
+      if (i <= index) {
+        const error = new Error('next() 被多次调用');
+        if (isAsync) {
+          return Promise.reject(error);
+        }
+        throw error;
+      }
       index = i;
       let fn = middleware[i];
       if (i === middleware.length && next) fn = next;
-      if (!fn) return Promise.resolve();
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
+      }
+
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
       try {
-        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        return fn(...args, dispatch.bind(null, i + 1));
       } catch (err) {
-        return Promise.reject(err);
+        throw err;
       }
     }
   };

package/src/utils/content-menu.ts

@@ -1,19 +1,21 @@
-import { computed, markRaw, Ref, ref } from 'vue';
+import { computed, markRaw, 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 { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { MenuButton, Services } from '@editor/type';
 
+import { COPY_STORAGE_KEY } from './editor';
+
 export const useDeleteMenu = (): MenuButton => ({
   type: 'button',
   text: '删除',
   icon: Delete,
   display: (services) => {
     const node = services?.editorService?.get('node');
-    return node?.type !== NodeType.ROOT && !isPage(node);
+    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
   },
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');
@@ -21,8 +23,6 @@ export const useDeleteMenu = (): MenuButton => ({
   },
 });
 
-const canPaste = ref(false);
-
 export const useCopyMenu = (): MenuButton => ({
   type: 'button',
   text: '复制',
@@ -30,7 +30,6 @@ export const useCopyMenu = (): MenuButton => ({
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');
     nodes && services?.editorService?.copy(nodes);
-    canPaste.value = true;
   },
 });
 
@@ -38,7 +37,7 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),
-  display: () => canPaste.value,
+  display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');
     if (!nodes || nodes.length === 0) return;

package/src/utils/editor.ts

@@ -18,24 +18,29 @@
 
 import serialize from 'serialize-javascript';
 
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
+import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
 /**
  * 获取所有页面配置
- * @param app DSL跟节点
+ * @param root DSL跟节点
  * @returns 所有页面配置
  */
-export const getPageList = (app: MApp): MPage[] => {
-  if (app.items && Array.isArray(app.items)) {
-    return app.items.filter((item: MPage) => item.type === NodeType.PAGE);
-  }
-  return [];
+export const getPageList = (root?: MApp | null): MPage[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPage(item)) as MPage[];
+};
+
+export const getPageFragmentList = (root?: MApp | null): MPageFragment[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPageFragment(item)) as MPageFragment[];
 };
 
 /**
@@ -43,22 +48,23 @@ export const getPageList = (app: MApp): MPage[] => {
  * @param pages 所有页面配置
  * @returns 所有页面名称
  */
-export const getPageNameList = (pages: MPage[]): string[] => pages.map((page: MPage) => page.name || 'index');
+export const getPageNameList = (pages: (MPage | MPageFragment)[]): string[] =>
+  pages.map((page) => page.name || 'index');
 
 /**
  * 新增页面时，生成页面名称
  * @param {Object} pageNameList 所有页面名称
  * @returns {string}
  */
-export const generatePageName = (pageNameList: string[]): string => {
+export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string => {
   let pageLength = pageNameList.length;
 
-  if (!pageLength) return 'index';
+  if (!pageLength) return `${type}_index`;
 
-  let pageName = `page_${pageLength}`;
+  let pageName = `${type}_${pageLength}`;
   while (pageNameList.includes(pageName)) {
     pageLength += 1;
-    pageName = `page_${pageLength}`;
+    pageName = `${type}_${pageLength}`;
   }
 
   return pageName;
@@ -69,7 +75,8 @@ export const generatePageName = (pageNameList: string[]): string => {
  * @param {Object} app 所有页面配置
  * @returns {string}
  */
-export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
+export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
+  generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
 
 /**
  * @param {Object} node
@@ -129,7 +136,7 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
   return style;
 };
 
-export const setChilrenLayout = (node: MContainer, layout: Layout) => {
+export const setChildrenLayout = (node: MContainer, layout: Layout) => {
   node.items?.forEach((child: MNode) => {
     setLayout(child, layout);
   });
@@ -257,13 +264,22 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export const traverseNode = (node: MNode, cb: (node: MNode, parents: MNode[]) => void, parents: MNode[] = []) => {
+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 (node.items?.length) {
     parents.push(node);
-    node.items.forEach((item: MNode) => {
-      traverseNode(item, cb, parents);
+    node.items.forEach((item) => {
+      traverseNode(item as T, cb, [...parents]);
     });
   }
 };

package/src/utils/operator.ts

@@ -1,8 +1,8 @@
 import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
-import { Id, MContainer, MNode } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -40,8 +40,7 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
       if (pastePosition.top && configItem.style?.top) {
         pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
       }
-
-      const pasteConfig = await propsService.setNewItemId(configItem);
+      const pasteConfig = await propsService.setNewItemId(configItem, false);
 
       if (pasteConfig.style) {
         const { left, top } = pasteConfig.style;
@@ -59,8 +58,8 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
         };
       }
       const root = editorService.get('root');
-      if (isPage(pasteConfig) && root) {
-        pasteConfig.name = generatePageNameByApp(root);
+      if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
       }
       return pasteConfig as MNode;
     }),

package/types/components/CodeBlockEditor.vue.d.ts

@@ -9,13 +9,17 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
 }>, {
     show(): void;
     hide(): void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (values: CodeBlockContent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
     dataSourceType?: string | undefined;
     slideType?: SlideType | undefined;
-}>>>, {}, {}>;
+}>>> & {
+    onSubmit?: ((values: CodeBlockContent) => any) | undefined;
+}, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/CodeParams.vue.d.ts

@@ -5,7 +5,9 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     disabled?: boolean | undefined;
     name: string;
     paramsConfig: CodeParamStatement[];
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     model: any;
     size?: "default" | "small" | "large" | undefined;
     disabled?: boolean | undefined;