@tmagic/editor 1.3.15 → 1.4.0-beta.1

package/src/theme/sidebar.scss

@@ -72,12 +72,15 @@
 }
 
 .m-editor-slide-list-box {
-  min-width: 270px;
+  display: flex;
+  min-width: 240px;
   min-height: 500px;
-  max-height: 1024px;
   > div {
     &:first-child {
-      width: 100%;
+      min-width: 240px;
     }
   }
+  .m-form-box {
+    border-left: 1px solid #e0e0e0;
+  }
 }

package/src/type.ts

@@ -17,9 +17,20 @@
  */
 
 import type { Component } from 'vue';
+import type { PascalCasedProperties } from 'type-fest';
 
-import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
+import type {
+  CodeBlockContent,
+  CodeBlockDSL,
+  DataSourceFieldType,
+  Id,
+  MApp,
+  MContainer,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -81,6 +92,7 @@ export interface CodeBlockListSlots {
 
 export interface DataSourceListSlots {
   'data-source-panel-tool'(props: { data: any }): any;
+  'data-source-panel-search'(props: {}): any;
 }
 
 export interface LayerNodeSlots {
@@ -224,20 +236,16 @@ export interface UiState {
   propsPanelSize: 'large' | 'default' | 'small';
   /** 是否显示新增页面按钮 */
   showAddPageButton: boolean;
-
-  /** slide 拖拽悬浮窗 state */
-  floatBox: Map<
-    string,
-    {
-      status: boolean;
-      zIndex: number;
-      top: number;
-      left: number;
-    }
-  >;
-
   /** 是否隐藏侧边栏 */
   hideSlideBar: boolean;
+
+  // navMenu 的宽高
+  navMenuRect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
 }
 
 export interface EditorNodeInfo {
@@ -594,42 +602,44 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
-export interface CodeSelectColConfig {
+export interface CodeSelectColConfig extends FormItem {
   type: 'code-select-col';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface PageFragmentSelectConfig {
+export interface PageFragmentSelectConfig extends FormItem {
   type: 'page-fragment-select';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceMethodSelectConfig {
+export interface DataSourceSelect extends FormItem, Input {
+  type: 'data-source-select';
+  /** 数据源类型: base、http... */
+  dataSourceType?: string;
+  /** 是否要编译成数据源的data。
+   * id: 不编译，就是要数据源id;
+   * value: 要编译（数据源data）
+   * */
+  value?: 'id' | 'value';
+}
+
+export interface DataSourceMethodSelectConfig extends FormItem {
   type: 'data-source-method-select';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceFieldSelectConfig {
+export interface DataSourceFieldSelectConfig extends FormItem {
   type: 'data-source-field-select';
-  name: string;
+  /** 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
   value?: 'key' | 'value';
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
+  /** 是否严格的遵守父子节点不互相关联 */
+  checkStrictly?: boolean;
+  dataSourceFieldType?: DataSourceFieldType[];
+  fieldConfig?: ChildConfig;
 }
 
 /** 可新增的数据源类型选项 */
@@ -669,3 +679,38 @@ export interface TreeNodeData {
   items?: TreeNodeData[];
   [key: string]: any;
 }
+
+export type AsyncBeforeHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (...args: Parameters<C[K]>) => Promise<Parameters<C[K]>> | Parameters<C[K]>;
+};
+
+export type AsyncAfterHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (
+    result: Awaited<ReturnType<C[K]>>,
+    ...args: Parameters<C[K]>
+  ) => ReturnType<C[K]> | Awaited<ReturnType<C[K]>>;
+};
+
+export type SyncBeforeHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (...args: Parameters<C[K]>) => Parameters<C[K]>;
+};
+
+export type SyncAfterHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (result: ReturnType<C[K]>, ...args: Parameters<C[K]>) => ReturnType<C[K]>;
+};
+
+export type AddPrefixToObject<T, P extends string> = {
+  [K in keyof T as K extends string ? `${P}${K}` : never]: T[K];
+};
+
+export type AsyncHookPlugin<
+  T extends Array<string>,
+  C extends Record<T[number], (...args: any) => any>,
+> = AddPrefixToObject<PascalCasedProperties<AsyncBeforeHook<T, C>>, 'before'> &
+  AddPrefixToObject<PascalCasedProperties<AsyncAfterHook<T, C>>, 'after'>;
+
+export type SyncHookPlugin<
+  T extends Array<string>,
+  C extends Record<T[number], (...args: any) => any>,
+> = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> &
+  AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;

package/src/utils/operator.ts

@@ -15,55 +15,53 @@ import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/edito
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export const beforePaste = async (position: PastePosition, config: MNode[]): Promise<MNode[]> => {
+export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] => {
   if (!config[0]?.style) return config;
   const curNode = editorService.get('node');
   // 将数组中第一个元素的坐标作为参照点
   const { left: referenceLeft, top: referenceTop } = config[0].style;
   // 坐标校准后的粘贴数据
-  const pasteConfigs: MNode[] = await Promise.all(
-    config.map(async (configItem: MNode): Promise<MNode> => {
-      // 解构 position 对象，从 position 删除 offsetX、offsetY字段
-      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-      let pastePosition = positionClone;
+  const pasteConfigs: MNode[] = config.map((configItem: MNode): MNode => {
+    // 解构 position 对象，从 position 删除 offsetX、offsetY字段
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
 
-      if (!isEmpty(pastePosition) && curNode?.items) {
-        // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
-        // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
-        pastePosition = getPositionInContainer(pastePosition, curNode.id);
-      }
+    if (!isEmpty(pastePosition) && curNode?.items) {
+      // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
+      // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
+      pastePosition = getPositionInContainer(pastePosition, curNode.id);
+    }
 
-      // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
-      if (pastePosition.left && configItem.style?.left) {
-        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-      }
-      if (pastePosition.top && configItem.style?.top) {
-        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-      }
-      const pasteConfig = await propsService.setNewItemId(configItem, false);
+    // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
+    if (pastePosition.left && configItem.style?.left) {
+      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+    }
+    if (pastePosition.top && configItem.style?.top) {
+      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+    }
+    const pasteConfig = propsService.setNewItemId(configItem, false);
 
-      if (pasteConfig.style) {
-        const { left, top } = pasteConfig.style;
-        // 判断能转换为数字时，做粘贴偏移量计算
-        if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
-          pasteConfig.style.left = Number(left) + offsetX;
-        }
-        if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
-          pasteConfig.style.top = Number(top) + offsetY;
-        }
-
-        pasteConfig.style = {
-          ...pasteConfig.style,
-          ...pastePosition,
-        };
+    if (pasteConfig.style) {
+      const { left, top } = pasteConfig.style;
+      // 判断能转换为数字时，做粘贴偏移量计算
+      if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
+        pasteConfig.style.left = Number(left) + offsetX;
       }
-      const root = editorService.get('root');
-      if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+      if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
+        pasteConfig.style.top = Number(top) + offsetY;
       }
-      return pasteConfig as MNode;
-    }),
-  );
+
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition,
+      };
+    }
+    const root = editorService.get('root');
+    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig as MNode;
+  });
   return pasteConfigs;
 };
 

package/src/utils/props.ts

@@ -41,7 +41,6 @@ const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
-  labelWidth: '80px',
   items: [
     {
       name: 'style',
@@ -51,30 +50,59 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '位置',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'position',
-              type: 'checkbox',
-              activeValue: 'fixed',
-              inactiveValue: 'absolute',
-              defaultValue: 'absolute',
               text: '固定定位',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'checkbox',
+                activeValue: 'fixed',
+                inactiveValue: 'absolute',
+                defaultValue: 'absolute',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'left',
               text: 'left',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'top',
               text: 'top',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
               disabled: (vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedBottom',
             },
             {
+              type: 'data-source-field-select',
               name: 'right',
               text: 'right',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'bottom',
               text: 'bottom',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
               disabled: (vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedTop',
             },
@@ -85,12 +113,42 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '盒子',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'width',
               text: '宽度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'height',
               text: '高度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              text: 'overflow',
+              name: 'overflow',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'visible', value: 'visible' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'clip', value: 'clip' },
+                  { text: 'scroll', value: 'scroll' },
+                  { text: 'auto', value: 'auto' },
+                  { text: 'overlay', value: 'overlay' },
+                ],
+              },
             },
           ],
         },
@@ -99,32 +157,48 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '边框',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'borderWidth',
               text: '宽度',
               defaultValue: '0',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'borderColor',
               text: '颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'borderStyle',
               text: '样式',
-              type: 'select',
               defaultValue: 'none',
-              options: [
-                { text: 'none', value: 'none' },
-                { text: 'hidden', value: 'hidden' },
-                { text: 'dotted', value: 'dotted' },
-                { text: 'dashed', value: 'dashed' },
-                { text: 'solid', value: 'solid' },
-                { text: 'double', value: 'double' },
-                { text: 'groove', value: 'groove' },
-                { text: 'ridge', value: 'ridge' },
-                { text: 'inset', value: 'inset' },
-                { text: 'outset', value: 'outset' },
-              ],
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'none', value: 'none' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'dotted', value: 'dotted' },
+                  { text: 'dashed', value: 'dashed' },
+                  { text: 'solid', value: 'solid' },
+                  { text: 'double', value: 'double' },
+                  { text: 'groove', value: 'groove' },
+                  { text: 'ridge', value: 'ridge' },
+                  { text: 'inset', value: 'inset' },
+                  { text: 'outset', value: 'outset' },
+                ],
+              },
             },
           ],
         },
@@ -133,31 +207,53 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '背景',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'backgroundImage',
               text: '背景图',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundColor',
               text: '背景颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundRepeat',
               text: '背景图重复',
-              type: 'select',
               defaultValue: 'no-repeat',
-              options: [
-                { text: 'repeat', value: 'repeat' },
-                { text: 'repeat-x', value: 'repeat-x' },
-                { text: 'repeat-y', value: 'repeat-y' },
-                { text: 'no-repeat', value: 'no-repeat' },
-                { text: 'inherit', value: 'inherit' },
-              ],
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'repeat', value: 'repeat' },
+                  { text: 'repeat-x', value: 'repeat-x' },
+                  { text: 'repeat-y', value: 'repeat-y' },
+                  { text: 'no-repeat', value: 'no-repeat' },
+                  { text: 'inherit', value: 'inherit' },
+                ],
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundSize',
               text: '背景图大小',
               defaultValue: '100% 100%',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -166,17 +262,34 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '字体',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'color',
               text: '颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'fontSize',
               text: '大小',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'fontWeight',
               text: '粗细',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -186,12 +299,24 @@ export const styleTabConfig: TabPaneConfig = {
           name: 'transform',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'rotate',
               text: '旋转角度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'scale',
               text: '缩放',
+              checkStrictly: false,
+              dataSourceFieldType: ['number', 'string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -219,13 +344,11 @@ export const advancedTabConfig: TabPaneConfig = {
     {
       name: 'created',
       text: 'created',
-      labelWidth: '100px',
       type: 'code-select',
     },
     {
       name: 'mounted',
       text: 'mounted',
-      labelWidth: '100px',
       type: 'code-select',
     },
   ],
@@ -250,15 +373,23 @@ export const displayTabConfig: TabPaneConfig = {
               name: 'field',
               value: 'key',
               label: '字段',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
             },
             {
               type: 'select',
               options: (mForm, { model }) => {
-                const [id, field] = model.field;
+                const [id, ...fieldNames] = model.field;
 
                 const ds = dataSourceService.getDataSourceById(id);
 
-                const type = ds?.fields.find((f) => f.name === field)?.type;
+                let fields = ds?.fields || [];
+                let type = '';
+                (fieldNames || []).forEach((fieldName: string) => {
+                  const field = fields.find((f) => f.name === fieldName);
+                  fields = field?.fields || [];
+                  type = field?.type || '';
+                });
 
                 if (type === 'array') {
                   return arrayOptions;
@@ -290,11 +421,17 @@ export const displayTabConfig: TabPaneConfig = {
                 {
                   name: 'value',
                   type: (mForm, { model }) => {
-                    const [id, field] = model.field;
+                    const [id, ...fieldNames] = model.field;
 
                     const ds = dataSourceService.getDataSourceById(id);
 
-                    const type = ds?.fields.find((f) => f.name === field)?.type;
+                    let fields = ds?.fields || [];
+                    let type = '';
+                    (fieldNames || []).forEach((fieldName: string) => {
+                      const field = fields.find((f) => f.name === fieldName);
+                      fields = field?.fields || [];
+                      type = field?.type || '';
+                    });
 
                     if (type === 'number') {
                       return 'number';
@@ -331,13 +468,13 @@ export const displayTabConfig: TabPaneConfig = {
  * @param config 组件属性配置
  * @returns Object
  */
-export const fillConfig = (config: FormConfig = []) => [
+export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormConfig => [
   {
     type: 'tab',
+    labelWidth,
     items: [
       {
         title: '属性',
-        labelWidth: '80px',
         items: [
           // 组件类型，必须要有
           {