@tmagic/editor 1.0.0-beta.12 → 1.0.0-beta.15

package/src/theme/content-menu.scss

@@ -2,38 +2,45 @@
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 
-  .separation {
-    width: 100%;
-    height: 0;
-    border-color: rgba(155, 155, 155, 0.1);
-  }
-
-  .subMenu {
-    position: absolute;
-    right: 0;
-    transform: translate(100%, 0);
-    background-color: #fff;
+  .menu-item {
     color: #333;
-    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-    top: 0;
-    height: 223px;
-  }
-}
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    min-width: 140px;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+    border-left: 2px solid transparent;
+
+    .el-button {
+      width: 100%;
+      justify-content: flex-start;
+    }
 
-.magic-editor-content-menu-item {
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  cursor: pointer;
-  min-width: 140px;
-  transition: all 0.2s ease 0s;
-  padding: 10px 14px;
-  border-left: 2px solid transparent;
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &.divider {
+      padding: 0 14px;
+
+      .el-divider {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
 }

package/src/theme/layer-panel.scss

@@ -52,10 +52,11 @@
 
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
+  overflow: hidden;
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {
-  background-color: #f3f5f9;
+  background-color: $--hover-color;
   width: 100%;
 }
 

package/src/theme/nav-menu.scss

@@ -43,13 +43,17 @@
     display: flex !important;
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
-    margin: 0 5px;
+    margin: 0;
 
     .is-disabled {
       opacity: 0.5;
     }
 
-    .el-button--text,
+    .is-text {
+      padding: 5px;
+    }
+
+    .is-text,
     i {
       color: $--font-color;
     }

package/src/theme/page-bar.scss

@@ -40,7 +40,7 @@
       z-index: 1;
     }
 
-    .m-editor-page-bar-title {
+    &-title {
       max-width: 150px;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -48,3 +48,24 @@
     }
   }
 }
+
+.page-bar-popover {
+  &.el-popper.el-popover {
+    padding: 10px 0;
+  }
+
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
+}

package/src/type.ts

@@ -53,6 +53,7 @@ export interface StoreState {
   highlightNode: MNode | null;
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
+  pageLength: number;
 }
 
 export interface PropsState {
@@ -125,6 +126,8 @@ export interface MenuButton {
    * zoom: 放大缩小
    */
   type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  /** 当type为divider时有效，分割线方向, 默认vertical */
+  direction?: 'horizontal' | 'vertical';
   /** 展示的文案 */
   text?: string;
   /** 鼠标悬浮是显示的气泡中的文案 */
@@ -136,14 +139,9 @@ export interface MenuButton {
   /** 是否显示，默认为true */
   display?: boolean | ((data?: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
-  handler?: (data?: Services) => Promise<any> | any;
-  /** type为dropdown时，下拉的菜单列表 */
-  items?: {
-    /** 展示的文案 */
-    text: string;
-    /** 点击运行的方法 */
-    handler(data: Services): any;
-  }[];
+  handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
+  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  items?: MenuButton[];
 }
 
 export interface MenuComponent {

package/src/utils/editor.ts

@@ -125,7 +125,7 @@ export const setNewItemId = (config: MNode, parent?: MPage) => {
  */
 export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
 
-export const getNodeIndex = (node: MNode, parent: MContainer): number => {
+export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
   return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
 };
@@ -144,7 +144,7 @@ const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
   const style = node.style || {};
   const height = style.height || 0;
 
-  if (!stage || style.top || !parentNode.style || !isNumber(height)) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style || !isNumber(height)) return style;
 
   const { height: parentHeight } = parentNode.style;
 
@@ -213,7 +213,11 @@ export const change2Fixed = (node: MNode, root: MApp) => {
   return node;
 };
 
-export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => {
+export const Fixed2Other = async (
+  node: MNode,
+  root: MApp,
+  getLayout: (parent: MNode, node?: MNode) => Promise<Layout>,
+) => {
   const path = getNodePath(node.id, root.items);
   const cur = path.pop();
   const offset = {

package/{vite.config.ts → src/utils/polyfills.ts}

@@ -16,15 +16,7 @@
  * limitations under the License.
  */
 
-import path from 'path';
-
-import { defineConfig } from 'vite';
-
-import { getBaseConfig } from '../vite-config';
-
-import pkg from './package.json';
-
-const deps = Object.keys(pkg.dependencies);
-const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];
-
-export default defineConfig(getBaseConfig(deps, 'TMagicEditor', alias));
+// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
+if (typeof (window as any).global === 'undefined') {
+  (window as any).global = window;
+}

package/src/utils/props.ts

@@ -142,6 +142,25 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '字体',
+                items: [
+                  {
+                    name: 'color',
+                    text: '颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'fontSize',
+                    text: '大小',
+                  },
+                  {
+                    name: 'fontWeight',
+                    text: '粗细',
+                  },
+                ],
+              },
             ],
           },
         ],