@maketribe/ms-app 3.2.24 → 3.2.26

package/dist/style/src/components/basic/doc-editor/index.scss

@@ -122,7 +122,7 @@
   &__stage_body{  
     z-index: 0;
     position: relative;
-    max-width: 900px;
+    max-width: 1200px;
     width: 100%;    
     min-height: 100%;
     margin: auto;
@@ -154,10 +154,12 @@
     margin: 0;
     border: 0;
   }
+
   &__view_warp{
     display: flex;
     background-color: var(--mk-container-border-color);
     overflow: auto;    
+    height: calc(100vh - 50px);
     padding-top: 10px;
     &.mobile{
       .mk-doc-editor__view_iframe{  
@@ -167,7 +169,7 @@
   
   }
   &__view_iframe{
-    max-width: 900px;
+    max-width: 1200px;
     margin: auto;
     padding: 20px;
     overflow: auto;
@@ -206,7 +208,9 @@
           &.active{
             border-color:#2196F3;
           }
-
+          &_title{
+            text-align:center;
+          }
           &.cover{
             img{
               object-fit: contain;

package/dist/style/src/components/index.scss

@@ -39,6 +39,8 @@
 @use "./basic/copy-container/copy-container.scss";
 @use "./image-cropper.scss";
 @use "./basic/visual-page-editor/index.scss" as *;
+@use "./upload-file-ui.scss";
+@use "./upload-video-ui.scss";
 
 :root {
   --el-aside-width: auto;

package/dist/style/src/components/upload-file-ui.scss

@@ -0,0 +1,89 @@
+.mk-upload-file-ui {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    line-height: 0;
+
+    .mk-upload-file-ui-item {
+        display: inline-block;
+        width: 180px;
+        height: 180px;
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: var(--el-transition-duration-fast);
+
+
+        &:hover {
+            border-color: var(--el-color-primary);
+
+            .mk-upload-file-ui-item__mask {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+
+        .mk-upload-file-ui-item__mask {
+            display: none;
+            position: absolute;
+            gap: 15px;
+            font-size: 18px;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: white;
+        }
+
+        .mk-upload-file {
+            width: 100%;
+            height: 100%;
+        }
+
+        .mk-upload-file-ui-item__wrapper {
+            width: 100%;
+            height: 100%;
+
+            .mk-upload-file-ui-item__wrapper__desc {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+                font-size: 28px;
+                color: #8c939d;
+
+                .mk-upload-file-ui-item__wrapper__desc__text {
+                    font-size: 16px;
+                    margin-top: 10px;
+                }
+            }
+        }
+
+        .mk-upload-file-ui-item__file {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 60px;
+            flex-direction: column;
+
+            .mk-upload-file-ui-item__file__name {
+                font-size: 12px;
+                margin-top: 10px;
+                width: 80%;
+                line-height: 12px;
+                //超出省略
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+}

package/dist/style/src/components/upload-image.scss

@@ -6,8 +6,8 @@
 
   &-item {
     display: inline-block;
-    width: 180px;
-    height: 180px;
+    // width: 180px;
+    max-height: 180px;
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
     cursor: pointer;
@@ -38,6 +38,7 @@
       height: 100%;
       font-size: 28px;
       color: #8c939d;
+      z-index: 10000;
     }
 
     &__image {

package/dist/style/src/components/upload-video-ui.scss

@@ -0,0 +1,139 @@
+.mk-upload-video {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    line-height: 0;
+
+    .mk-upload-video-viewer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .mk-upload-video-viewer__close {
+
+            position: absolute;
+            top: 40px;
+            right: 40px;
+
+            display: block;
+            width: 44px;
+            height: 44px;
+            font-size: 24px;
+            color: #fff;
+            border-radius: 50%;
+
+            opacity: .8;
+            background-color: var(--el-text-color-regular);
+            // border-color: #fff;
+            z-index: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+        }
+
+        .mk-upload-video-viewer__mask {
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            opacity: 0.5;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        .mk-upload-video-viewer__video {
+            width: 60%;
+            z-index: 1;
+        }
+    }
+
+    .mk-upload-video-item {
+        display: inline-block;
+        width: 180px;
+        height: 180px;
+        border: 1px dashed var(--el-border-color);
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: var(--el-transition-duration-fast);
+
+
+        &:hover {
+            border-color: var(--el-color-primary);
+
+            .mk-upload-video-item__mask {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+
+        .mk-upload-video-item__mask {
+            display: none;
+            position: absolute;
+            gap: 15px;
+            font-size: 18px;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: white;
+        }
+
+        .mk-upload-file {
+            width: 100%;
+            height: 100%;
+        }
+
+        .mk-upload-video-item__wrapper {
+            width: 100%;
+            height: 100%;
+
+            .mk-upload-video-item__wrapper__desc {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+                font-size: 28px;
+                color: #8c939d;
+
+                .mk-upload-video-item__wrapper__desc__text {
+                    font-size: 16px;
+                    margin-top: 10px;
+                }
+            }
+        }
+
+        .mk-upload-video-item__file {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 60px;
+            flex-direction: column;
+
+            .mk-upload-video-item__file__name {
+                font-size: 12px;
+                margin-top: 10px;
+                width: 80%;
+                line-height: 12px;
+                //超出省略
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+}

package/dist/style/src/index.scss

@@ -26,3 +26,7 @@
 .el-table{
   --el-card-border-color:var(--mk-container-border-color);
 }
+
+.el-image-viewer__wrapper{
+  z-index: 10000 !important;
+}

package/dist/types/components/basic/doc-editor/core/element-block.d.ts

@@ -0,0 +1,44 @@
+import { LexicalCommand, BaseSelection } from 'lexical';
+/**
+ * toolsbar的函数
+ */
+export type SelectElementBlockToolsbarFunction = (selection: BaseSelection | null) => Array<any> | null;
+/**
+ * 元素抗选中类型
+ */
+export type SelectElementBlocktEventType = {
+    element: HTMLElement;
+    toolsbars: Array<any> | SelectElementBlockToolsbarFunction;
+};
+/**
+ * 选中元素快
+ */
+export declare const SELECTED_ELEMENTBLOCK_COMMAND: LexicalCommand<SelectElementBlocktEventType | null>;
+/**
+ * 移除元素快
+ */
+export declare const REMOVE_ELEMENTBLOCK_COMMAND: LexicalCommand<undefined | null>;
+/**
+ * 更新模块工具条位置信息
+ */
+export declare const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND: LexicalCommand<undefined | null>;
+/**
+ * 判断选中的方法
+ */
+export type SelectExistFunc = (el: HTMLElement) => HTMLElement | null;
+/**
+ * 判断选中的方法
+ */
+export type ElementSelectionHandle = (el: HTMLElement) => undefined;
+/**
+ * 使用元素模块激活
+ */
+export declare const useElementBlockActive: (func: SelectExistFunc, selectionHandle: ElementSelectionHandle, unSelectionHandle: ElementSelectionHandle) => void;
+/**
+ * 使用元素块选中
+ */
+export declare const useElementBlockSelection: (func: SelectExistFunc, toolsbars: Array<any> | SelectElementBlockToolsbarFunction) => {
+    isSelected: import("vue").Ref<boolean>;
+    curSelectKey: import("vue").Ref<any>;
+    curSelectPos: import("vue").Ref<any>;
+};

package/dist/types/components/basic/doc-editor/core/index.d.ts

@@ -1,5 +1,24 @@
-export * from "./decorator-module";
-export * from "./element-module";
+export * from "./element-block";
 export * from "./utils";
-export type DeviceVieeMode = 'pc' | 'mobile';
-export declare const DEVICE_VIEW_MODE: import("vue").Ref<DeviceVieeMode>;
+/**
+ * 设备显示模式
+ */
+export declare const DEVICE_VIEW_MODE: import("vue").Ref<"pc" | "mobile">;
+/**
+ * 工具条扩展
+ */
+export type ToolbarExtendPlugin = {
+    icon: string;
+    text: string;
+    action: Function;
+    sort: number;
+};
+/**
+ * 插入的插件列表
+ */
+export declare const ToolbarExtendPlugins: import("vue").Reactive<ToolbarExtendPlugin[]>;
+/**
+ * 注册工具条的扩展
+ * @param options
+ */
+export declare const registerDocEditorToolbarExtend: (options: ToolbarExtendPlugin) => void;

package/dist/types/components/basic/doc-editor/index.d.ts

@@ -1,4 +1,4 @@
-import { registerModule } from "./plugins/ModulePlugin/composables";
+import { registerDocModule } from "./plugins/ModulePlugin/composables";
 export declare const MKDocEditor: import("@maketribe/utils").SFCWithInstall<{
     new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         placeholder: {
@@ -114,5 +114,5 @@ export declare const MKDocEditor: import("@maketribe/utils").SFCWithInstall<{
         "after-extentions"?(_: {}): any;
     };
 })> & Record<string, any>;
-export { registerModule };
+export { registerDocModule };
 export default MKDocEditor;

package/dist/types/components/basic/doc-editor/plugins/GridPlugin/GridNode.d.ts

@@ -0,0 +1,88 @@
+import type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread, EditorConfig, DOMExportOutput } from 'lexical';
+import { ElementNode } from 'lexical';
+/**
+ * 容器属性
+ */
+export type GridNodeAttrType = {
+    class: string;
+    width: string;
+    height: string;
+    maxWidth: string;
+    maxHeight: string;
+    flex: string;
+};
+/**
+ * 节点序列化
+ */
+export type SerializedGridNode = Spread<{
+    attrs: GridNodeAttrType;
+}, SerializedElementNode>;
+/**
+ * 格子
+ */
+export declare class GridNode extends ElementNode {
+    __attrs: GridNodeAttrType;
+    static getType(): string;
+    static hasGridNodeByElement(el: HTMLElement): HTMLElement | null;
+    static getMarkClassName(): string;
+    static getExtraClassName(el: HTMLElement): string;
+    static clone(node: GridNode): GridNode;
+    static importJSON(serializedNode: SerializedGridNode): GridNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(attrs: GridNodeAttrType, key?: NodeKey);
+    /**
+     * 设置属性
+     * @param pos
+     */
+    setAttrs(data?: GridNodeAttrType): void;
+    /**
+     * 获取属性
+     * @param pos
+     */
+    getAttrs(): GridNodeAttrType;
+    /**
+     * 导出JSON
+     * @returns
+     */
+    exportJSON(): SerializedGridNode;
+    /**
+     * 更新元素属性
+     * @param el
+     */
+    updateElementAttr(el: HTMLElement): void;
+    /**
+     * 获取标识类
+     * @returns
+     */
+    getMarkClassName(): string;
+    /**
+     * 导出DOM
+     * @returns
+     */
+    exportDOM(): DOMExportOutput;
+    /**
+     * 创建渲染DOM
+     * @param config
+     * @returns
+     */
+    createDOM(config: EditorConfig): HTMLElement;
+    /**
+     * 更新DOM
+     * @param prevNode
+     * @param dom
+     * @param config
+     * @returns
+     */
+    updateDOM(prevNode: GridNode, el: HTMLElement, config: EditorConfig): boolean;
+    /**
+     * 非内联
+     * @returns
+     */
+    isInline(): boolean;
+}
+/**
+ * 是否是格子
+ * @param node
+ * @returns
+ */
+export declare function $isGridNode(node: GridNode | LexicalNode | null | undefined): node is GridNode;

package/dist/types/components/basic/doc-editor/plugins/GridPlugin/ImageTextGridNode.d.ts

@@ -0,0 +1,50 @@
+import type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread } from 'lexical';
+import { type GridNodeAttrType, GridNode, SerializedGridNode } from "./GridNode";
+/**
+ * 属性
+ */
+export type ImageTextGridNodeAttrType = GridNodeAttrType & {};
+/**
+ * 插入图文
+ */
+export declare const INSERT_IMAGETEXTGRID_COMMAND: LexicalCommand<undefined | null>;
+/**
+ * 图文节点序列化
+ */
+export type SerializedImageTextGridNode = Spread<{}, SerializedGridNode>;
+/**
+ * 图文格子
+ */
+export declare class ImageTextGridNode extends GridNode {
+    __attrs: ImageTextGridNodeAttrType;
+    static getType(): string;
+    static hasGridNodeByElement(el: HTMLElement): HTMLElement | null;
+    static getMarkClassName(): string;
+    static getExtraClassName(el: HTMLElement): string;
+    static clone(node: ImageTextGridNode): ImageTextGridNode;
+    static importJSON(serializedNode: SerializedImageTextGridNode): ImageTextGridNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(attrs: ImageTextGridNodeAttrType, key?: NodeKey);
+    /**
+     * 设置属性
+     * @param pos
+     */
+    setAttrs(data?: ImageTextGridNodeAttrType): void;
+    /**
+     * 获取属性
+     * @param pos
+     */
+    getAttrs(): ImageTextGridNodeAttrType;
+    /**
+     * 导出JSON
+     * @returns
+     */
+    exportJSON(): SerializedGridNode;
+    canBeEmpty(): boolean;
+}
+/**
+ * 判断是否是图文节点
+ * @param node
+ * @returns
+ */
+export declare function $isImageTextGridNode(node: ImageTextGridNode | LexicalNode | null | undefined): node is ImageTextGridNode;

package/dist/types/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.d.ts

@@ -0,0 +1,58 @@
+import { type DOMConversionMap, type NodeKey, type Spread, type LexicalCommand, LexicalNode } from 'lexical';
+import { type GridNodeAttrType, GridNode, SerializedGridNode } from "./GridNode";
+/**
+ * 属性
+ */
+export type LayoutGridNodeAttrType = GridNodeAttrType & {
+    display: 'flex' | 'inline-flex';
+    flexDirection: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+    flexWrap: 'nowrap' | 'warp';
+    alignContent: 'center' | 'flex-start';
+    justifyContent: 'center' | 'flex-start';
+    alignItems: 'center' | 'flex-start';
+};
+/**
+ * 插入布局格子
+ */
+export declare const INSERT_LAYOUTGRID_COMMAND: LexicalCommand<LayoutGridNodeAttrType>;
+/**
+ * 节点序列化
+ */
+export type SerializedLayoutGridNode = Spread<{
+    attrs: LayoutGridNodeAttrType;
+}, SerializedGridNode>;
+/**
+ * 布局格子
+ */
+export declare class LayoutGridNode extends GridNode {
+    __attrs: LayoutGridNodeAttrType;
+    static getType(): string;
+    static hasGridNodeByElement(el: HTMLElement): HTMLElement | null;
+    static getMarkClassName(): string;
+    static getExtraClassName(el: HTMLElement): string;
+    static clone(node: LayoutGridNode): LayoutGridNode;
+    static importJSON(serializedNode: SerializedLayoutGridNode): LayoutGridNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(attrs: LayoutGridNodeAttrType, key?: NodeKey);
+    /**
+     * 设置属性
+     * @param pos
+     */
+    setAttrs(data?: LayoutGridNodeAttrType): void;
+    /**
+     * 获取属性
+     * @param pos
+     */
+    getAttrs(): LayoutGridNodeAttrType;
+    /**
+     * 导出JSON
+     * @returns
+     */
+    exportJSON(): SerializedGridNode;
+}
+/**
+ * 是否是模块格子
+ * @param node
+ * @returns
+ */
+export declare function $isLayoutGridNode(node: LayoutGridNode | LexicalNode | null | undefined): node is LayoutGridNode;

package/dist/types/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.d.ts

@@ -0,0 +1,58 @@
+import { type DOMConversionMap, type NodeKey, type Spread, type LexicalCommand, LexicalNode } from 'lexical';
+import { type GridNodeAttrType, GridNode, SerializedGridNode } from "./GridNode";
+/**
+ * 属性
+ */
+export type ModuleGridNodeAttrType = GridNodeAttrType & {
+    overflowX: boolean;
+};
+/**
+ * 插入模块格子
+ */
+export declare const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType>;
+/**
+ * 节点序列化
+ */
+export type SerializedModuleGridNode = Spread<{
+    attrs: ModuleGridNodeAttrType;
+}, SerializedGridNode>;
+/**
+ * 模块格子
+ */
+export declare class ModuleGridNode extends GridNode {
+    __attrs: ModuleGridNodeAttrType;
+    static getType(): string;
+    static hasGridNodeByElement(el: HTMLElement): HTMLElement | null;
+    static getMarkClassName(): string;
+    static getExtraClassName(el: HTMLElement): string;
+    static clone(node: ModuleGridNode): ModuleGridNode;
+    static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode;
+    static importDOM(): DOMConversionMap | null;
+    constructor(attrs: ModuleGridNodeAttrType, key?: NodeKey);
+    /**
+     * 设置属性
+     * @param pos
+     */
+    setAttrs(data?: ModuleGridNodeAttrType): void;
+    /**
+     * 获取属性
+     * @param pos
+     */
+    getAttrs(): ModuleGridNodeAttrType;
+    /**
+     * 导出JSON
+     * @returns
+     */
+    exportJSON(): SerializedGridNode;
+    /**
+   * 更新元素属性
+   * @param el
+   */
+    updateElementAttr(el: HTMLElement): void;
+}
+/**
+ * 是否是模块格子
+ * @param node
+ * @returns
+ */
+export declare function $isModuleGridNode(node: ModuleGridNode | LexicalNode | null | undefined): node is ModuleGridNode;