@a2simcode/dui 0.0.16 → 0.0.18

package/dist/components-dui/index.d.ts

@@ -5,7 +5,8 @@ import { default as DInputFlow } from './inputFlow';
 import { default as DLayout } from './layout';
 import { default as DDraggable } from './draggable';
 import { default as DFormDesign } from './formDesign';
-export { DDrag, dragTool, dragContainer, dragFormList, dragIndexList, DFlowDesign, DInputFlow, DLayout, DDraggable, DFormDesign };
+import { default as DIndexDesign } from './indexDesign';
+export { DDrag, dragTool, dragContainer, dragFormList, dragIndexList, DFlowDesign, DInputFlow, DLayout, DDraggable, DFormDesign, DIndexDesign };
 declare const _default: {
     install: (app: App) => void;
 };

package/dist/components-dui/indexDesign/index.d.ts

@@ -0,0 +1,137 @@
+import { default as indexDesignItem } from './src/indexDesignItem.vue';
+declare const DIndexDesign: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        components: {
+            type: import('vue').PropType<import('./src/interface').IndexDesignComponents[]>;
+            default: () => never[];
+        };
+        componentConfigs: {
+            type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+            default: () => {};
+        };
+        componentInit: FunctionConstructor;
+        containerAddComponent: FunctionConstructor;
+        componentConfigInit: FunctionConstructor;
+        componentConfigChange: FunctionConstructor;
+        flowComponents: {
+            type: import('vue').PropType<Record<string, any>[]>;
+            default: () => never[];
+        };
+        flowInit: FunctionConstructor;
+        flowComponentConfigInit: FunctionConstructor;
+        flowComponentConfigChange: FunctionConstructor;
+        flowComponentConfigs: {
+            type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+            default: () => {};
+        };
+    }>> & Readonly<{}>, {
+        reset: () => void;
+        validate: () => boolean;
+        getSchema: () => {
+            ver: string;
+            indexPage: Record<string, any>;
+            components: import('./src/interface').IndexDeisgnSaveComponent[];
+        };
+        setSchema: (schema: Record<string, any>) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        components: import('./src/interface').IndexDesignComponents[];
+        flowComponents: Record<string, any>[];
+        flowComponentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+        componentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        dragContainer: unknown;
+        configRef: unknown;
+        previewLayerRef: unknown;
+        previewRef: unknown;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        components: {
+            type: import('vue').PropType<import('./src/interface').IndexDesignComponents[]>;
+            default: () => never[];
+        };
+        componentConfigs: {
+            type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+            default: () => {};
+        };
+        componentInit: FunctionConstructor;
+        containerAddComponent: FunctionConstructor;
+        componentConfigInit: FunctionConstructor;
+        componentConfigChange: FunctionConstructor;
+        flowComponents: {
+            type: import('vue').PropType<Record<string, any>[]>;
+            default: () => never[];
+        };
+        flowInit: FunctionConstructor;
+        flowComponentConfigInit: FunctionConstructor;
+        flowComponentConfigChange: FunctionConstructor;
+        flowComponentConfigs: {
+            type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+            default: () => {};
+        };
+    }>> & Readonly<{}>, {
+        reset: () => void;
+        validate: () => boolean;
+        getSchema: () => {
+            ver: string;
+            indexPage: Record<string, any>;
+            components: import('./src/interface').IndexDeisgnSaveComponent[];
+        };
+        setSchema: (schema: Record<string, any>) => void;
+    }, {}, {}, {}, {
+        components: import('./src/interface').IndexDesignComponents[];
+        flowComponents: Record<string, any>[];
+        flowComponentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+        componentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    components: {
+        type: import('vue').PropType<import('./src/interface').IndexDesignComponents[]>;
+        default: () => never[];
+    };
+    componentConfigs: {
+        type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+        default: () => {};
+    };
+    componentInit: FunctionConstructor;
+    containerAddComponent: FunctionConstructor;
+    componentConfigInit: FunctionConstructor;
+    componentConfigChange: FunctionConstructor;
+    flowComponents: {
+        type: import('vue').PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    flowInit: FunctionConstructor;
+    flowComponentConfigInit: FunctionConstructor;
+    flowComponentConfigChange: FunctionConstructor;
+    flowComponentConfigs: {
+        type: import('vue').PropType<Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    reset: () => void;
+    validate: () => boolean;
+    getSchema: () => {
+        ver: string;
+        indexPage: Record<string, any>;
+        components: import('./src/interface').IndexDeisgnSaveComponent[];
+    };
+    setSchema: (schema: Record<string, any>) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    components: import('./src/interface').IndexDesignComponents[];
+    flowComponents: Record<string, any>[];
+    flowComponentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+    componentConfigs: Record<string, import('../../components/form/src/interface').FormSchemaConfig[]>;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install: (app: import('vue').App) => void;
+};
+export default DIndexDesign;
+export { indexDesignItem };

package/dist/components-dui/indexDesign/src/indexDesign.vue.d.ts

@@ -0,0 +1,138 @@
+import { FormSchemaConfig } from '../../../components/form/src/interface';
+import { IndexDesignComponents } from './interface';
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 组件列表
+     */
+    components: {
+        type: PropType<IndexDesignComponents[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 组件配置
+     */
+    componentConfigs: {
+        type: PropType<Record<string, FormSchemaConfig[]>>;
+        default: () => {};
+    };
+    /**
+     * @zh 组件初始化方法
+     */
+    componentInit: FunctionConstructor;
+    /**
+     * @zh 容器组件添加组件后调用
+     */
+    containerAddComponent: FunctionConstructor;
+    /**
+     * @zh 组件配置初始化方法
+     */
+    componentConfigInit: FunctionConstructor;
+    /**
+     * @zh 配置值变更方法
+     */
+    componentConfigChange: FunctionConstructor;
+    /**
+     * @zh 组件集合
+     */
+    flowComponents: {
+        type: PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 编排组件初始化方法
+     */
+    flowInit: FunctionConstructor;
+    /**
+     * @zh 组件配置初始化方法
+     */
+    flowComponentConfigInit: FunctionConstructor;
+    /**
+     * @zh 编排组件设置变更方法
+     */
+    flowComponentConfigChange: FunctionConstructor;
+    /**
+     * @zh 编排组件设置方法
+     */
+    flowComponentConfigs: {
+        type: PropType<Record<string, FormSchemaConfig[]>>;
+        default: () => {};
+    };
+}>, {
+    reset: () => void;
+    validate: () => boolean;
+    getSchema: () => {
+        ver: string;
+        indexPage: Record<string, any>;
+        components: import('./interface').IndexDeisgnSaveComponent[];
+    };
+    setSchema: (schema: Record<string, any>) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 组件列表
+     */
+    components: {
+        type: PropType<IndexDesignComponents[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 组件配置
+     */
+    componentConfigs: {
+        type: PropType<Record<string, FormSchemaConfig[]>>;
+        default: () => {};
+    };
+    /**
+     * @zh 组件初始化方法
+     */
+    componentInit: FunctionConstructor;
+    /**
+     * @zh 容器组件添加组件后调用
+     */
+    containerAddComponent: FunctionConstructor;
+    /**
+     * @zh 组件配置初始化方法
+     */
+    componentConfigInit: FunctionConstructor;
+    /**
+     * @zh 配置值变更方法
+     */
+    componentConfigChange: FunctionConstructor;
+    /**
+     * @zh 组件集合
+     */
+    flowComponents: {
+        type: PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 编排组件初始化方法
+     */
+    flowInit: FunctionConstructor;
+    /**
+     * @zh 组件配置初始化方法
+     */
+    flowComponentConfigInit: FunctionConstructor;
+    /**
+     * @zh 编排组件设置变更方法
+     */
+    flowComponentConfigChange: FunctionConstructor;
+    /**
+     * @zh 编排组件设置方法
+     */
+    flowComponentConfigs: {
+        type: PropType<Record<string, FormSchemaConfig[]>>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    components: IndexDesignComponents[];
+    flowComponents: Record<string, any>[];
+    flowComponentConfigs: Record<string, FormSchemaConfig[]>;
+    componentConfigs: Record<string, FormSchemaConfig[]>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    dragContainer: unknown;
+    configRef: unknown;
+    previewLayerRef: unknown;
+    previewRef: unknown;
+}, HTMLDivElement>;
+export default _default;

package/dist/components-dui/indexDesign/src/indexDesignItem.vue.d.ts

@@ -0,0 +1,37 @@
+import { DesignComponent } from '../../drag/src/interface';
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 配置项
+     */
+    componentData: {
+        type: PropType<DesignComponent>;
+        default: () => {};
+    };
+    /**
+     * @zh 全局配置
+     */
+    globalConfig: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 配置项
+     */
+    componentData: {
+        type: PropType<DesignComponent>;
+        default: () => {};
+    };
+    /**
+     * @zh 全局配置
+     */
+    globalConfig: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    componentData: DesignComponent;
+    globalConfig: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components-dui/indexDesign/src/interface.d.ts

@@ -0,0 +1,53 @@
+export interface IndexDesignComponents {
+    /**
+     * @zh 组件集合名称
+     */
+    name: string;
+    /**
+     * @zh 组件集
+     */
+    children: IndexDesignComponent[];
+}
+export interface IndexDesignComponent {
+    /**
+     * @zh 组件名
+     */
+    name: string;
+    /**
+     * @zh 组件类型
+     */
+    type: string;
+    /**
+     * @zh 组件类型
+     */
+    icon: string;
+    /**
+     * @zh 组件类型
+     */
+    dragType?: string;
+    /**
+     * @zh 组件类型(设计组件)
+     */
+    componentName?: string;
+    /**
+     * @zh 组件类型(表单实际运行组件)
+     */
+    runtimeType?: string;
+    /**
+     * @zh 是否有基础设置
+     */
+    hasBase?: boolean;
+}
+/**
+ * @zh 组件保存数据格式
+ */
+export interface IndexDeisgnSaveComponent {
+    id: string;
+    name: string;
+    type: string;
+    runtimeType: string;
+    groupId: string;
+    config: Record<string, any>;
+    containerId: string;
+    level: number;
+}

package/dist/components-dui/indexDesign/src/utils.d.ts

@@ -0,0 +1,21 @@
+import { DesignComponent } from '../../drag/src/interface';
+import { SchemaConfig } from '../../../components/comp/src/interface';
+import { IndexDeisgnSaveComponent, IndexDesignComponent } from './interface';
+export declare const toIndexSaveSchema: (indexPageConfig: Record<string, any>, componentList: DesignComponent[]) => {
+    ver: string;
+    indexPage: Record<string, any>;
+    components: IndexDeisgnSaveComponent[];
+};
+export declare const toIndexSchema: (data: {
+    ver: string;
+    indexPage: Record<string, any>;
+    components: IndexDeisgnSaveComponent[];
+}) => {
+    pageConfig: Record<string, any>;
+    componentList: SchemaConfig[];
+};
+export declare const toIndexDesignSchema: (data: Record<string, any>, componentsMap: Record<string, IndexDesignComponent>) => {
+    pageConfig: Record<string, any>;
+    componentList: DesignComponent[];
+    componentDic: Record<string, DesignComponent>;
+};

package/dist/dui.css

@@ -1 +1 @@
-.d-drag-move{position:fixed;height:24px;line-height:24px;width:64px;background-color:var(--j-color-primary);z-index:999999999999999;color:#fff;text-align:center;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:move;font-size:12px;opacity:.6}.d-drag-component,.d-drag-container,.d-drag-body{position:relative;-webkit-user-select:none;user-select:none}.d-drag-container:after{display:none}.d-drag-container:after,.d-drag-component:after{content:" ";pointer-events:none;height:100%;width:100%;position:absolute;top:0;left:0;border:1px dashed var(--j-color-border);box-sizing:border-box}.d-drag-container.isTopActive>.d-drag-line,.d-drag-component.isTopActive>.d-drag-line,.d-drag-container.isBottomActive>.d-drag-line,.d-drag-component.isBottomActive>.d-drag-line{display:block;content:" ";pointer-events:none;height:100%;width:100%;z-index:100;position:absolute;top:0;left:0;border-top:3px solid var(--j-color-primary)}.d-drag-container.isBottomActive>.d-drag-line,.d-drag-component.isBottomActive>.d-drag-line{border-top:0;border-bottom:3px solid var(--j-color-primary)}.d-drag-container.active:before,.d-drag-component.active:before{display:block;content:" ";pointer-events:none;height:100%;width:100%;z-index:99;background-color:var(--j-color-primary);opacity:.1;position:absolute;top:0;left:0}.d-drag-container:not(.active).hovered:after,.d-drag-component:not(.active).hovered:after{border:1px dashed var(--j-color-primary);display:block}.d-drag-container:not(.active).selected:after,.d-drag-component:not(.active).selected:after{display:block;border:2px solid var(--j-color-primary)}.d-drag-container:not(.active).selected>.d-drag-btns,.d-drag-component:not(.active).selected>.d-drag-btns{display:flex}.d-drag-container.isMoveingInTopLevel .d-drag-container:after,.d-drag-container.isMoveingInTopLevel .d-drag-component:after,.d-drag-container.isMoveingInTopLevel .d-drag-container .d-drag-btns,.d-drag-container.isMoveingInTopLevel .d-drag-component .d-drag-btns{display:none!important}.d-drag-container.isMoveingInTopLevel .d-drag-btns{display:none!important}.d-drag-container.isMoveingInTopLevel:after{display:none!important}.d-drag-btns{position:absolute;right:0;z-index:100;display:none}.d-drag-btns-pname{position:absolute;top:20px;left:0;display:none;padding-top:4px}.d-drag-btns-pname .d-drag-btn{margin-bottom:4px}.d-drag-btns-pname:hover,.d-drag-btns-names:hover .d-drag-btns-pname{display:block}.d-drag-container.isBottomToolBar>.d-drag-btns,.d-drag-component.isBottomToolBar>.d-drag-btns{bottom:-24px}.d-drag-container:not(.isBottomToolBar)>.d-drag-btns,.d-drag-component:not(.isBottomToolBar)>.d-drag-btns{top:-24px}.d-drag-container.isTopLevel>.d-drag-btns{top:4px;padding-right:4px}.d-drag-btn{padding:0 4px!important}.d-drag-mask{position:absolute;top:0;left:0;height:100%;width:100%;z-index:98}.d-drag-tool{position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.d-flow-node-menus{background-color:var(--j-color-bg-container);width:160px;border-radius:8px;box-shadow:0 2px 8px #00000026;padding:4px}.d-flow-node-menus-item{display:flex;align-items:center;border-radius:8px;height:40px;cursor:pointer;width:100%;padding:0 8px}.d-flow-node-menus-item:hover{background-color:var(--j-color-hover)}.d-flow-node-menus-item-name{flex:1;font-size:14px;color:var(--j-color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-node-menus-item-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:8px;box-shadow:0 2px 4px #0000001a}.d-flow-step{position:relative;width:172px;height:40px;background-color:var(--j-color-bg-container);border:1px solid transparent;border-radius:8px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center}.d-flow-step-name{flex:1;font-size:14px;color:var(--j-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-step-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin:0 8px;box-shadow:0 2px 4px #0000001a}.d-flow-step-handle-plus{display:none;pointer-events:all;cursor:pointer;color:var(--j-color-primary)}.d-flow-step-target-handle,.d-flow-step-source-handle{border:0!important;width:2px!important;min-width:2px!important;height:8px!important;border-radius:0!important;background-color:transparent!important}.d-flow-step-target-handle:after,.d-flow-step-source-handle:after{content:" ";display:block;position:absolute;top:50%;left:50%;margin-top:-4px;margin-left:-1px;width:2px;height:8px;background-color:var(--j-color-primary)}.d-flow-step-popper{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.d-flow-step-tooltip{background:var(--j-color-bg-container)!important;border:0!important;box-shadow:0 2px 8px #00000026!important}.d-flow-step-dropdown{background:var(--j-color-bg-container)!important;border:0!important;box-shadow:0 2px 8px #00000026!important;border-radius:8px!important}.d-flow-step-dropdown .el-dropdown-menu{background:var(--j-color-bg-container)!important;border-radius:8px!important}.d-flow-step-dropdown .el-dropdown-menu__item{color:var(--j-color-danger)}.d-flow-step-dropdown .el-dropdown-menu__item:not(.is-disabled):focus,.d-flow-step-dropdown .el-dropdown-menu__item:not(.is-disabled):hover{background-color:var(--j-color-hover);color:var(--j-color-danger-hover)}.vue-flow__node.selected .d-flow-step{border-color:var(--j-color-primary)}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd),.vue-flow__node.selected .d-flow-step-source-handle{height:16px!important;width:16px!important;background-color:#fff!important;border-radius:100%!important}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd):after,.vue-flow__node.selected .d-flow-step-source-handle:after{display:none!important}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd) .d-flow-step-handle-plus,.vue-flow__node.selected .d-flow-step-source-handle .d-flow-step-handle-plus{display:block!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd),.vue-flow__node:hover .d-flow-step-source-handle{height:16px!important;width:16px!important;background-color:#fff!important;border-radius:100%!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd):after,.vue-flow__node:hover .d-flow-step-source-handle:after{display:none!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd) .d-flow-step-handle-plus,.vue-flow__node:hover .d-flow-step-source-handle .d-flow-step-handle-plus{display:block!important}.vue-flow__node:hover .d-flow-step-target-handle{height:16px!important;width:16px!important}.d-flow-edge-button{height:16px;width:16px;background-color:#fff;border-radius:100%;cursor:pointer;color:var(--j-color-primary)}.d-flow-edge-button:hover{display:block!important}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.selection{cursor:pointer}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4;overflow:clip}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.animated path.vue-flow__edge-interaction{stroke-dasharray:none;animation:none}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.vue-flow__node.draggable{cursor:grab;pointer-events:all}.vue-flow__node.draggable.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}.vue-flow__handle-top{left:50%;top:0;transform:translate(-50%,-50%)}.vue-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.vue-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}:root{--vf-node-bg: #fff;--vf-node-text: #222;--vf-connection-path: #b1b1b7;--vf-handle: #555}.vue-flow__edge.updating .vue-flow__edge-path{stroke:#777}.vue-flow__edge-text{font-size:10px}.vue-flow__edge-textbg{fill:#fff}.vue-flow__connection-path{stroke:var(--vf-connection-path)}.vue-flow__node{cursor:grab}.vue-flow__node.selectable:focus,.vue-flow__node.selectable:focus-visible{outline:none}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{padding:10px;border-radius:3px;width:150px;font-size:12px;text-align:center;border-width:1px;border-style:solid;color:var(--vf-node-text);background-color:var(--vf-node-bg);border-color:var(--vf-node-color)}.vue-flow__node-default.selected,.vue-flow__node-default.selected:hover,.vue-flow__node-input.selected,.vue-flow__node-input.selected:hover,.vue-flow__node-output.selected,.vue-flow__node-output.selected:hover{box-shadow:0 0 0 .5px var(--vf-box-shadow)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible,.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible,.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid #555}.vue-flow__node-default .vue-flow__handle,.vue-flow__node-input .vue-flow__handle,.vue-flow__node-output .vue-flow__handle{background:var(--vf-handle)}.vue-flow__node-default.selectable:hover,.vue-flow__node-input.selectable:hover,.vue-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.vue-flow__node-input{--vf-node-color: var(--vf-node-color, #0041d0);--vf-handle: var(--vf-node-color, #0041d0);--vf-box-shadow: var(--vf-node-color, #0041d0);background:var(--vf-node-bg);border-color:var(--vf-node-color, #0041d0)}.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible{outline:none;border:1px solid var(--vf-node-color, #0041d0)}.vue-flow__node-default{--vf-handle: var(--vf-node-color, #1a192b);--vf-box-shadow: var(--vf-node-color, #1a192b);background:var(--vf-node-bg);border-color:var(--vf-node-color, #1a192b)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible{outline:none;border:1px solid var(--vf-node-color, #1a192b)}.vue-flow__node-output{--vf-handle: var(--vf-node-color, #ff0072);--vf-box-shadow: var(--vf-node-color, #ff0072);background:var(--vf-node-bg);border-color:var(--vf-node-color, #ff0072)}.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid var(--vf-node-color, #ff0072)}.vue-flow__nodesselection-rect,.vue-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible,.vue-flow__selection:focus,.vue-flow__selection:focus-visible{outline:none}.vue-flow__handle{width:6px;height:6px;background:var(--vf-handle);border:1px solid #fff;border-radius:100%}.vue-flow__controls{box-shadow:0 0 2px 1px #00000014}.vue-flow__controls-button{background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:5px}.vue-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.vue-flow__controls-button:hover{background:#f4f4f4}.vue-flow__controls-button:disabled{pointer-events:none}.vue-flow__controls-button:disabled svg{fill-opacity:.4}.d-flow-design{background-color:var(--j-color-bg);display:flex;height:100%;width:100%}.d-flow-design-canvas{flex:1;width:0;min-width:0}.d-flow-design-right{position:relative;height:100%;background-color:var(--j-color-bg-container);display:flex;flex-direction:column;transition:all .3s;width:320px;border-left:1px solid var(--j-color-border)}.d-flow-design-title{position:relative;height:40px;width:100%;display:flex;align-items:center;border-bottom:1px solid var(--j-color-border);overflow:hidden}.d-flow-design-title-name{flex:1;font-size:14px;color:var(--j-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-design-title-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin:0 8px;box-shadow:0 2px 4px #0000001a}.d-flow-design-panel{position:relative;height:0;width:100%;flex:1;overflow:auto;overflow-x:hidden}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:var(--j-color-primary)!important}.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;left:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.d-layout{width:100%;height:100%;background-color:var(--j-color-bg)}.d-layout .d-layout-item{background-color:var(--j-color-bg-container);border:1px solid var(--j-color-border);border-radius:4px;padding:8px;box-sizing:border-box}.d-layout .d-layout-item:hover{border-color:var(--j-color-primary)}.d-layout .d-layout-item.ui-draggable-dragging{opacity:.8;z-index:1000}.d-layout .d-layout-item.ui-resizable-resizing{opacity:.8}.d-draggable{position:absolute;padding:8px;cursor:move;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;box-sizing:initial;border:1px dashed transparent}.d-draggable__mask{position:absolute;width:100%;height:100%;border:0;inset:0;z-index:1}.d-draggable--active{cursor:move;border:1px dashed var(--j-color-primary);background-color:var(--j-color-primary-bg)}.d-draggable--pt{border:1px dashed var(--j-color-border);padding:0!important}.d-draggable--active.d-draggable--pt{border:1px dashed transparent;background-color:transparent}.d-draggable--move{opacity:.6;background-color:var(--j-color-primary-bg)}.d-draggable--click{cursor:pointer}.d-draggable__line--left{position:absolute;border-top:1px dashed var(--j-color-primary);width:10000px;height:0;top:-1px;transform:translate(-100%)}.d-draggable__line--top{position:absolute;border-left:1px dashed var(--j-color-primary);width:0;height:10000px;left:-1px;transform:translateY(-100%)}.d-draggable__line--label{top:-8px;left:-8px;position:absolute;padding:5px;transform:translate(-100%,-100%);color:var(--j-color-primary);font-size:16px;white-space:nowrap;cursor:move}.d-draggable__range{position:absolute;width:10px;height:10px;border-radius:100%;z-index:9999;background-color:var(--j-color-primary)}.d-draggable__range--left,.d-draggable__range--right{top:50%;transform:translateY(-50%)}.d-draggable__range--left:hover,.d-draggable__range--right:hover{cursor:ew-resize}.d-draggable__range--left{left:-5px}.d-draggable__range--right{right:-5px}.d-draggable__range--top,.d-draggable__range--bottom{left:50%;transform:translate(-50%)}.d-draggable__range--top:hover,.d-draggable__range--bottom:hover{cursor:ns-resize}.d-draggable__range--top{top:-5px}.d-draggable__range--bottom{bottom:-5px}.d-draggable__range--bottom-right:hover,.d-draggable__range--top-left:hover{cursor:nwse-resize}.d-draggable__range--bottom-left:hover,.d-draggable__range--top-right:hover{cursor:nesw-resize}.d-draggable__range--top-right{top:-5px;right:-5px}.d-draggable__range--top-left{top:-5px;left:-5px}.d-draggable__range--bottom-right{bottom:-5px;right:-5px}.d-draggable__range--bottom-left{bottom:-5px;left:-5px}.d-form-design{display:flex;background-color:var(--j-color-bg);font-size:14px}.d-form-design-left,.d-form-design-right{display:flex;position:relative;flex-direction:column;width:260px;height:100%;background-color:var(--j-color-bg-container)}.d-form-design-left .el-collapse,.d-form-design-right .el-collapse{border-top:0;border-right:0;border-left:0;border-radius:0}.d-form-design-left .el-collapse-item__header,.d-form-design-right .el-collapse-item__header{padding-left:8px}.d-form-design-left{width:260px;display:flex;border-right:1px solid var(--j-color-border)}.d-form-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.d-form-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content .d-drag-tool{position:relative;padding:0 5px}.d-form-design-left .el-collapse-item__title{font-weight:700;font-size:13px}.d-form-design-left .d-form-design-component-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}.d-form-design-left .j-component-tool{display:flex;position:relative;align-items:center;justify-content:left;height:32px;transition:color .1s ease-out;border:1px solid var(--j-color-border);border-radius:6px;-webkit-user-select:none;user-select:none;font-size:12px}.d-form-design-left .j-component-tool-icon{margin-right:6px;margin-left:8px;color:var(--color-text-tertiary)}.d-form-design-left .j-component-tool-name{color:var(--j-color-text)}.d-form-design-left .j-component-tool:hover{z-index:1;border:1px dashed var(--j-color-primary);box-shadow:0 0 10px #0000001a}.d-form-design-left .j-component-tool:hover .j-component-tool-icon,.d-form-design-left .j-component-tool:hover .j-component-tool-name{color:var(--j-color-primary)}.d-form-design-right{width:300px;border-left:1px solid var(--j-color-border)}.d-form-design-right .el-collapse .el-collapse-item__wrap>.el-collapse-item__content{padding:8px 16px 0}.d-form-design-right .el-collapse-item__title{font-weight:700;font-size:13px}.d-form-design-right .d-form-design-panel{flex:1;overflow-y:auto;padding-bottom:8px}.d-form-design-right .el-form-item--label-top .el-form-item__label{font-weight:700}.d-form-design .d-form-design-panel-title{padding:0 16px;font-weight:500;border-bottom:1px solid var(--j-color-border);background:var(--j-color-bg-container);height:45px;display:flex;align-items:center}.d-form-design-center{flex:1;display:flex;flex-direction:column;overflow:hidden}.d-form-design-center .d-form-design-toolbar{padding:8px 16px;border-bottom:1px solid var(--j-color-border);display:flex;gap:8px;background:var(--j-color-bg-container)}.d-form-design-center .d-form-design-toolbar .j-button{font-size:12px}.d-form-design-center .d-form-design-container{flex:1;overflow-y:auto;padding:8px;background:var(--j-color-bg)}.d-form-design-center .d-form-design-container .d-form-design-drag-container{min-height:100%;background:var(--j-color-bg-container);padding:8px;display:flex;flex-direction:column}.d-form-design-center .d-form-design-container .d-form-design-drag-container>.d-drag-body{width:100%;flex:1}.d-form-design-center .d-form-design-container .d-form-design-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--j-color-text-3);font-size:14px}
+.d-drag-move{position:fixed;height:24px;line-height:24px;width:64px;background-color:var(--j-color-primary);z-index:999999999999999;color:#fff;text-align:center;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:move;font-size:12px;opacity:.6}.d-drag-component,.d-drag-container,.d-drag-body{position:relative;-webkit-user-select:none;user-select:none}.d-drag-container:after{display:none}.d-drag-container:after,.d-drag-component:after{content:" ";pointer-events:none;height:100%;width:100%;position:absolute;top:0;left:0;border:1px dashed var(--j-color-border);box-sizing:border-box}.d-drag-container.isTopActive>.d-drag-line,.d-drag-component.isTopActive>.d-drag-line,.d-drag-container.isBottomActive>.d-drag-line,.d-drag-component.isBottomActive>.d-drag-line{display:block;content:" ";pointer-events:none;height:100%;width:100%;z-index:100;position:absolute;top:0;left:0;border-top:3px solid var(--j-color-primary)}.d-drag-container.isBottomActive>.d-drag-line,.d-drag-component.isBottomActive>.d-drag-line{border-top:0;border-bottom:3px solid var(--j-color-primary)}.d-drag-container.active:before,.d-drag-component.active:before{display:block;content:" ";pointer-events:none;height:100%;width:100%;z-index:99;background-color:var(--j-color-primary);opacity:.1;position:absolute;top:0;left:0}.d-drag-container:not(.active).hovered:after,.d-drag-component:not(.active).hovered:after{border:1px dashed var(--j-color-primary);display:block}.d-drag-container:not(.active).selected:after,.d-drag-component:not(.active).selected:after{display:block;border:2px solid var(--j-color-primary)}.d-drag-container:not(.active).selected>.d-drag-btns,.d-drag-component:not(.active).selected>.d-drag-btns{display:flex}.d-drag-container.isMoveingInTopLevel .d-drag-container:after,.d-drag-container.isMoveingInTopLevel .d-drag-component:after,.d-drag-container.isMoveingInTopLevel .d-drag-container .d-drag-btns,.d-drag-container.isMoveingInTopLevel .d-drag-component .d-drag-btns{display:none!important}.d-drag-container.isMoveingInTopLevel .d-drag-btns{display:none!important}.d-drag-container.isMoveingInTopLevel:after{display:none!important}.d-drag-btns{position:absolute;right:0;z-index:100;display:none}.d-drag-btns-pname{position:absolute;top:20px;left:0;display:none;padding-top:4px}.d-drag-btns-pname .d-drag-btn{margin-bottom:4px}.d-drag-btns-pname:hover,.d-drag-btns-names:hover .d-drag-btns-pname{display:block}.d-drag-container.isBottomToolBar>.d-drag-btns,.d-drag-component.isBottomToolBar>.d-drag-btns{bottom:-24px}.d-drag-container:not(.isBottomToolBar)>.d-drag-btns,.d-drag-component:not(.isBottomToolBar)>.d-drag-btns{top:-24px}.d-drag-container.isTopLevel>.d-drag-btns{top:4px;padding-right:4px}.d-drag-btn{padding:0 4px!important}.d-drag-mask{position:absolute;top:0;left:0;height:100%;width:100%;z-index:98}.d-drag-tool{position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.d-flow-node-menus{background-color:var(--j-color-bg-container);width:160px;border-radius:8px;box-shadow:0 2px 8px #00000026;padding:4px}.d-flow-node-menus-item{display:flex;align-items:center;border-radius:8px;height:40px;cursor:pointer;width:100%;padding:0 8px}.d-flow-node-menus-item:hover{background-color:var(--j-color-hover)}.d-flow-node-menus-item-name{flex:1;font-size:14px;color:var(--j-color-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-node-menus-item-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:8px;box-shadow:0 2px 4px #0000001a}.d-flow-step{position:relative;width:172px;height:40px;background-color:var(--j-color-bg-container);border:1px solid transparent;border-radius:8px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center}.d-flow-step-name{flex:1;font-size:14px;color:var(--j-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-step-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin:0 8px;box-shadow:0 2px 4px #0000001a}.d-flow-step-handle-plus{display:none;pointer-events:all;cursor:pointer;color:var(--j-color-primary)}.d-flow-step-target-handle,.d-flow-step-source-handle{border:0!important;width:2px!important;min-width:2px!important;height:8px!important;border-radius:0!important;background-color:transparent!important}.d-flow-step-target-handle:after,.d-flow-step-source-handle:after{content:" ";display:block;position:absolute;top:50%;left:50%;margin-top:-4px;margin-left:-1px;width:2px;height:8px;background-color:var(--j-color-primary)}.d-flow-step-popper{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.d-flow-step-tooltip{background:var(--j-color-bg-container)!important;border:0!important;box-shadow:0 2px 8px #00000026!important}.d-flow-step-dropdown{background:var(--j-color-bg-container)!important;border:0!important;box-shadow:0 2px 8px #00000026!important;border-radius:8px!important}.d-flow-step-dropdown .el-dropdown-menu{background:var(--j-color-bg-container)!important;border-radius:8px!important}.d-flow-step-dropdown .el-dropdown-menu__item{color:var(--j-color-danger)}.d-flow-step-dropdown .el-dropdown-menu__item:not(.is-disabled):focus,.d-flow-step-dropdown .el-dropdown-menu__item:not(.is-disabled):hover{background-color:var(--j-color-hover);color:var(--j-color-danger-hover)}.vue-flow__node.selected .d-flow-step{border-color:var(--j-color-primary)}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd),.vue-flow__node.selected .d-flow-step-source-handle{height:16px!important;width:16px!important;background-color:#fff!important;border-radius:100%!important}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd):after,.vue-flow__node.selected .d-flow-step-source-handle:after{display:none!important}.vue-flow__node.selected .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd) .d-flow-step-handle-plus,.vue-flow__node.selected .d-flow-step-source-handle .d-flow-step-handle-plus{display:block!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd),.vue-flow__node:hover .d-flow-step-source-handle{height:16px!important;width:16px!important;background-color:#fff!important;border-radius:100%!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd):after,.vue-flow__node:hover .d-flow-step-source-handle:after{display:none!important}.vue-flow__node:hover .d-flow-step-target-handle:not(.d-flow-step-target-handle-notadd) .d-flow-step-handle-plus,.vue-flow__node:hover .d-flow-step-source-handle .d-flow-step-handle-plus{display:block!important}.vue-flow__node:hover .d-flow-step-target-handle{height:16px!important;width:16px!important}.d-flow-edge-button{height:16px;width:16px;background-color:#fff;border-radius:100%;cursor:pointer;color:var(--j-color-primary)}.d-flow-edge-button:hover{display:block!important}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.selection{cursor:pointer}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4;overflow:clip}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.animated path.vue-flow__edge-interaction{stroke-dasharray:none;animation:none}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.vue-flow__node.draggable{cursor:grab;pointer-events:all}.vue-flow__node.draggable.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}.vue-flow__handle-top{left:50%;top:0;transform:translate(-50%,-50%)}.vue-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.vue-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}:root{--vf-node-bg: #fff;--vf-node-text: #222;--vf-connection-path: #b1b1b7;--vf-handle: #555}.vue-flow__edge.updating .vue-flow__edge-path{stroke:#777}.vue-flow__edge-text{font-size:10px}.vue-flow__edge-textbg{fill:#fff}.vue-flow__connection-path{stroke:var(--vf-connection-path)}.vue-flow__node{cursor:grab}.vue-flow__node.selectable:focus,.vue-flow__node.selectable:focus-visible{outline:none}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{padding:10px;border-radius:3px;width:150px;font-size:12px;text-align:center;border-width:1px;border-style:solid;color:var(--vf-node-text);background-color:var(--vf-node-bg);border-color:var(--vf-node-color)}.vue-flow__node-default.selected,.vue-flow__node-default.selected:hover,.vue-flow__node-input.selected,.vue-flow__node-input.selected:hover,.vue-flow__node-output.selected,.vue-flow__node-output.selected:hover{box-shadow:0 0 0 .5px var(--vf-box-shadow)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible,.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible,.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid #555}.vue-flow__node-default .vue-flow__handle,.vue-flow__node-input .vue-flow__handle,.vue-flow__node-output .vue-flow__handle{background:var(--vf-handle)}.vue-flow__node-default.selectable:hover,.vue-flow__node-input.selectable:hover,.vue-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.vue-flow__node-input{--vf-node-color: var(--vf-node-color, #0041d0);--vf-handle: var(--vf-node-color, #0041d0);--vf-box-shadow: var(--vf-node-color, #0041d0);background:var(--vf-node-bg);border-color:var(--vf-node-color, #0041d0)}.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible{outline:none;border:1px solid var(--vf-node-color, #0041d0)}.vue-flow__node-default{--vf-handle: var(--vf-node-color, #1a192b);--vf-box-shadow: var(--vf-node-color, #1a192b);background:var(--vf-node-bg);border-color:var(--vf-node-color, #1a192b)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible{outline:none;border:1px solid var(--vf-node-color, #1a192b)}.vue-flow__node-output{--vf-handle: var(--vf-node-color, #ff0072);--vf-box-shadow: var(--vf-node-color, #ff0072);background:var(--vf-node-bg);border-color:var(--vf-node-color, #ff0072)}.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid var(--vf-node-color, #ff0072)}.vue-flow__nodesselection-rect,.vue-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible,.vue-flow__selection:focus,.vue-flow__selection:focus-visible{outline:none}.vue-flow__handle{width:6px;height:6px;background:var(--vf-handle);border:1px solid #fff;border-radius:100%}.vue-flow__controls{box-shadow:0 0 2px 1px #00000014}.vue-flow__controls-button{background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:5px}.vue-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.vue-flow__controls-button:hover{background:#f4f4f4}.vue-flow__controls-button:disabled{pointer-events:none}.vue-flow__controls-button:disabled svg{fill-opacity:.4}.d-flow-design{background-color:var(--j-color-bg);display:flex;height:100%;width:100%}.d-flow-design-canvas{flex:1;width:0;min-width:0}.d-flow-design-right{position:relative;height:100%;background-color:var(--j-color-bg-container);display:flex;flex-direction:column;transition:all .3s;width:320px;border-left:1px solid var(--j-color-border)}.d-flow-design-title{position:relative;height:40px;width:100%;display:flex;align-items:center;border-bottom:1px solid var(--j-color-border);overflow:hidden}.d-flow-design-title-name{flex:1;font-size:14px;color:var(--j-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-flow-design-title-icon{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;margin:0 8px;box-shadow:0 2px 4px #0000001a}.d-flow-design-panel{position:relative;height:0;width:100%;flex:1;overflow:auto;overflow-x:hidden}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:var(--j-color-primary)!important}.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;left:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.d-layout{width:100%;height:100%;background-color:var(--j-color-bg)}.d-layout .d-layout-item{background-color:var(--j-color-bg-container);border:1px solid var(--j-color-border);border-radius:4px;padding:8px;box-sizing:border-box}.d-layout .d-layout-item:hover{border-color:var(--j-color-primary)}.d-layout .d-layout-item.ui-draggable-dragging{opacity:.8;z-index:1000}.d-layout .d-layout-item.ui-resizable-resizing{opacity:.8}.d-draggable{position:absolute;padding:8px;cursor:move;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;box-sizing:initial;border:1px dashed transparent}.d-draggable__mask{position:absolute;width:100%;height:100%;border:0;inset:0;z-index:1}.d-draggable--active{cursor:move;border:1px dashed var(--j-color-primary);background-color:var(--j-color-primary-bg)}.d-draggable--pt{border:1px dashed var(--j-color-border);padding:0!important}.d-draggable--active.d-draggable--pt{border:1px dashed transparent;background-color:transparent}.d-draggable--move{opacity:.6;background-color:var(--j-color-primary-bg)}.d-draggable--click{cursor:pointer}.d-draggable__line--left{position:absolute;border-top:1px dashed var(--j-color-primary);width:10000px;height:0;top:-1px;transform:translate(-100%)}.d-draggable__line--top{position:absolute;border-left:1px dashed var(--j-color-primary);width:0;height:10000px;left:-1px;transform:translateY(-100%)}.d-draggable__line--label{top:-8px;left:-8px;position:absolute;padding:5px;transform:translate(-100%,-100%);color:var(--j-color-primary);font-size:16px;white-space:nowrap;cursor:move}.d-draggable__range{position:absolute;width:10px;height:10px;border-radius:100%;z-index:9999;background-color:var(--j-color-primary)}.d-draggable__range--left,.d-draggable__range--right{top:50%;transform:translateY(-50%)}.d-draggable__range--left:hover,.d-draggable__range--right:hover{cursor:ew-resize}.d-draggable__range--left{left:-5px}.d-draggable__range--right{right:-5px}.d-draggable__range--top,.d-draggable__range--bottom{left:50%;transform:translate(-50%)}.d-draggable__range--top:hover,.d-draggable__range--bottom:hover{cursor:ns-resize}.d-draggable__range--top{top:-5px}.d-draggable__range--bottom{bottom:-5px}.d-draggable__range--bottom-right:hover,.d-draggable__range--top-left:hover{cursor:nwse-resize}.d-draggable__range--bottom-left:hover,.d-draggable__range--top-right:hover{cursor:nesw-resize}.d-draggable__range--top-right{top:-5px;right:-5px}.d-draggable__range--top-left{top:-5px;left:-5px}.d-draggable__range--bottom-right{bottom:-5px;right:-5px}.d-draggable__range--bottom-left{bottom:-5px;left:-5px}.d-form-design{display:flex;background-color:var(--j-color-bg);font-size:14px}.d-form-design-left,.d-form-design-right{display:flex;position:relative;flex-direction:column;width:260px;height:100%;background-color:var(--j-color-bg-container)}.d-form-design-left .el-collapse,.d-form-design-right .el-collapse{border-top:0;border-right:0;border-left:0;border-radius:0}.d-form-design-left .el-collapse-item__header,.d-form-design-right .el-collapse-item__header{padding-left:8px}.d-form-design-left{width:260px;display:flex;border-right:1px solid var(--j-color-border)}.d-form-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.d-form-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content .d-drag-tool{position:relative;padding:0 5px}.d-form-design-left .el-collapse-item__title{font-weight:700;font-size:13px}.d-form-design-left .d-form-design-component-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}.d-form-design-left .j-component-tool{display:flex;position:relative;align-items:center;justify-content:left;height:32px;transition:color .1s ease-out;border:1px solid var(--j-color-border);border-radius:6px;-webkit-user-select:none;user-select:none;font-size:12px}.d-form-design-left .j-component-tool-icon{margin-right:6px;margin-left:8px;color:var(--color-text-tertiary)}.d-form-design-left .j-component-tool-name{color:var(--j-color-text)}.d-form-design-left .j-component-tool:hover{z-index:1;border:1px dashed var(--j-color-primary);box-shadow:0 0 10px #0000001a}.d-form-design-left .j-component-tool:hover .j-component-tool-icon,.d-form-design-left .j-component-tool:hover .j-component-tool-name{color:var(--j-color-primary)}.d-form-design-right{width:300px;border-left:1px solid var(--j-color-border)}.d-form-design-right .el-collapse .el-collapse-item__wrap>.el-collapse-item__content{padding:8px 16px 0}.d-form-design-right .el-collapse-item__title{font-weight:700;font-size:13px}.d-form-design-right .d-form-design-panel{flex:1;overflow-y:auto;padding-bottom:8px}.d-form-design-right .el-form-item--label-top .el-form-item__label{font-weight:700}.d-form-design .d-form-design-panel-title{padding:0 16px;font-weight:500;border-bottom:1px solid var(--j-color-border);background:var(--j-color-bg-container);height:45px;display:flex;align-items:center}.d-form-design-center{flex:1;display:flex;flex-direction:column;overflow:hidden}.d-form-design-center .d-form-design-toolbar{padding:8px 16px;border-bottom:1px solid var(--j-color-border);display:flex;gap:8px;background:var(--j-color-bg-container)}.d-form-design-center .d-form-design-toolbar .j-button{font-size:12px}.d-form-design-center .d-form-design-container{flex:1;overflow-y:auto;padding:8px;background:var(--j-color-bg)}.d-form-design-center .d-form-design-container .d-form-design-drag-container{min-height:100%;background:var(--j-color-bg-container);padding:8px;display:flex;flex-direction:column}.d-form-design-center .d-form-design-container .d-form-design-drag-container>.d-drag-body{width:100%;flex:1}.d-form-design-center .d-form-design-container .d-form-design-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--j-color-text-3);font-size:14px}.d-index-design{display:flex;background-color:var(--j-color-bg);font-size:14px}.d-index-design-left,.d-index-design-right{display:flex;position:relative;flex-direction:column;width:260px;height:100%;background-color:var(--j-color-bg-container)}.d-index-design-left .el-collapse,.d-index-design-right .el-collapse{border-top:0;border-right:0;border-left:0;border-radius:0}.d-index-design-left .el-collapse-item__header,.d-index-design-right .el-collapse-item__header{padding-left:8px}.d-index-design-left{width:260px;display:flex;border-right:1px solid var(--j-color-border)}.d-index-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.d-index-design-left .el-collapse .el-collapse-item__wrap>.el-collapse-item__content .d-drag-tool{position:relative;padding:0 5px}.d-index-design-left .el-collapse-item__title{font-weight:700;font-size:13px}.d-index-design-left .j-component-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}.d-index-design-left .j-component-tool{display:flex;position:relative;align-items:center;justify-content:left;height:32px;transition:color .1s ease-out;border:1px solid var(--j-color-border);border-radius:6px;-webkit-user-select:none;user-select:none;font-size:12px}.d-index-design-left .j-component-tool-icon{margin-right:6px;margin-left:8px;color:var(--color-text-tertiary)}.d-index-design-left .j-component-tool-name{color:var(--j-color-text)}.d-index-design-left .j-component-tool:hover{z-index:1;border:1px dashed var(--j-color-primary);box-shadow:0 0 10px #0000001a}.d-index-design-left .j-component-tool:hover .j-component-tool-icon,.d-index-design-left .j-component-tool:hover .j-component-tool-name{color:var(--j-color-primary)}.d-index-design-right{width:320px;border-left:1px solid var(--j-color-border)}.d-index-design-center{flex:1;display:flex;flex-direction:column;overflow:hidden}.d-index-design-center .design-toolbar{padding:8px 16px;border-bottom:1px solid var(--j-color-border);gap:8px;background:var(--j-color-bg-container);display:flex;justify-content:space-between;align-items:center}.d-index-design-center .design-toolbar .j-button{font-size:12px}.d-index-design-center .design-container{flex:1;overflow-y:auto;padding:8px;background:var(--j-color-bg)}.d-index-design-center .design-container .design-drag-container{min-height:100%;background:var(--j-color-bg-container);padding:8px;display:flex;flex-direction:column}.d-index-design-center .design-container .design-drag-container>.d-drag-body{width:100%;flex:1}.d-index-design-center .design-container .design-empty{display:flex;align-items:center;justify-content:center;color:var(--j-color-text-3);position:absolute}.d-index-design-center .design-container .design-empty .el-empty__description p{font-size:12px}.d-index-design .j-component-tool{display:flex;position:relative;align-items:center;justify-content:left;height:32px;transition:color .1s ease-out;border:1px solid var(--j-color-border);border-radius:6px;-webkit-user-select:none;user-select:none}.d-index-design .j-component-tool-icon{margin-right:6px;margin-left:8px;color:var(--color-text-tertiary)}.d-index-design .j-component-tool-name{color:var(--j-color-text)}.d-index-design .j-component-tool:hover{z-index:1;border:1px dashed var(--j-color-primary);box-shadow:0 0 10px #0000001a}.d-index-design .j-component-tool:hover .j-component-tool-icon,.d-index-design .j-component-tool:hover .j-component-tool-name{color:var(--j-color-primary)}.d-index-design-panel-title{padding:0 16px;font-weight:500;border-bottom:1px solid var(--j-color-border);background:var(--j-color-bg-container);height:45px;display:flex;align-items:center}