@chamn/engine 0.2.3 → 0.3.0

package/dist/material/evetList.d.ts

@@ -0,0 +1,2 @@
+import { CMaterialEventType } from '@chamn/model';
+export declare const eventList: CMaterialEventType[];

package/dist/material/innerMaterial.d.ts

@@ -22,13 +22,11 @@ export declare const InnerComponentMeta: (CMaterialType | {
         class?: string[];
         id?: string[];
     } | boolean;
-    actions?: {
+    methods?: {
         title: string;
         name: string;
-        params?: {
-            name: string;
-            description: string;
-        }[];
+        params?: import('@chamn/model').TFunctionOrEventParameter[];
+        tsType?: string;
         template?: string;
     }[];
     events?: import('@chamn/model').CMaterialEventType[];

package/dist/plugins/EventPanel/index.d.ts

@@ -0,0 +1,2 @@
+import { CRightPanelItem } from '../RightPanel/view';
+export declare const EventPanelConfig: CRightPanelItem;

package/dist/plugins/EventPanel/panel.d.ts

@@ -0,0 +1,7 @@
+import { CNode, CRootNode } from '@chamn/model';
+import { CPluginCtx } from '../../core/pluginManager';
+export type EventPanelProps = {
+    node: CNode | CRootNode | null;
+    pluginCtx: CPluginCtx;
+};
+export declare const EventPanel: (props: EventPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/plugins/Hotkeys/hotKeyManager.d.ts

@@ -3,12 +3,15 @@ export declare class HotKeysManager {
     private downKeyCodeList;
     private elements;
     private disposeEventCbList;
+    /** 是否禁用热键 */
+    private disable;
     /** 快捷操作按键记录 */
     private hotActionMap;
     constructor(options: {
         elements: HTMLElement[];
         customGetKeyCodeByEvent?: (event: KeyboardEvent) => number;
     });
+    setDisable(status: boolean): void;
     init(): void;
     addElement(el: HTMLElement): void;
     registerKeyEvent(el: HTMLElement): () => void;

package/dist/plugins/Hotkeys/index.d.ts

@@ -1,2 +1,2 @@
-import { CPlugin } from '../../core/pluginManager';
-export declare const HotkeysPlugin: CPlugin;
+import { HotKeysPluginType } from './type';
+export declare const HotkeysPlugin: HotKeysPluginType;

package/dist/plugins/Hotkeys/type.d.ts

@@ -0,0 +1,8 @@
+import { CPlugin, PluginInstance } from '../../core/pluginManager';
+export type HotKeysExport = {
+    disable: (status: boolean) => void;
+    addHotAction: (actionKey: (string | number)[], cb: () => void) => void;
+};
+export type HotKeysPluginConfig = object;
+export type HotKeysPluginType = CPlugin<HotKeysPluginConfig, HotKeysExport>;
+export type HotKeysPluginInstance = PluginInstance<HotKeysPluginType, HotKeysExport>;

package/dist/plugins/OutlineTree/util.d.ts

@@ -3,7 +3,7 @@ import { TreeNodeData } from './components/TreeView/dataStruct';
 export declare const getTargetMNodeKeyVal: (dom: HTMLElement | null, key: string) => null | string;
 export declare const transformNodeSchemaToTreeData: (nodeSchema: CNodeDataType | CNodeDataType[], parent: TreeNodeData, pageModel: CPage) => TreeNodeData | TreeNodeData[];
 export declare const transformPageSchemaToTreeData: (pageSchema: CPageDataType, pageModel: CPage) => TreeNodeData[];
-export declare const traverseTree: (tree: TreeNodeData | TreeNodeData[], handler: (node: TreeNodeData) => boolean) => void;
+export declare const traverseTree: (tree: TreeNodeData | TreeNodeData[], handler: (node: TreeNodeData) => boolean | undefined) => void;
 export declare function calculateDropPosInfo(params: {
     point: {
         x: number;

package/dist/plugins/PropertyPanel/index.d.ts

@@ -1,8 +1,2 @@
-import { CNode, CRootNode } from '@chamn/model';
-import { CPluginCtx } from '../../core/pluginManager';
 import { CRightPanelItem } from '../RightPanel/view';
-export declare const PropertyPanel: (props: {
-    node: CNode | CRootNode | null;
-    pluginCtx: CPluginCtx;
-}) => import("react/jsx-runtime").JSX.Element;
 export declare const PropertyPanelConfig: CRightPanelItem;

package/dist/plugins/PropertyPanel/view.d.ts

@@ -0,0 +1,6 @@
+import { CNode, CRootNode } from '@chamn/model';
+import { CPluginCtx } from '../../core/pluginManager';
+export declare const PropertyPanel: (props: {
+    node: CNode | CRootNode | null;
+    pluginCtx: CPluginCtx;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/plugins/RightPanel/index.d.ts

@@ -1,2 +1,3 @@
 import { CPlugin } from '../../core/pluginManager';
-export declare const RightPanelPlugin: CPlugin;
+import { RightPanelConfig } from './type';
+export declare const RightPanelPlugin: CPlugin<RightPanelConfig>;

package/dist/plugins/RightPanel/type.d.ts

@@ -0,0 +1,13 @@
+import { CSetter } from '../../component';
+import { CForm } from '../../component/CustomSchemaForm/components/Form';
+import { Ref } from 'react';
+export type RightPanelConfig = {
+    customPropertySetterMap?: Record<string, CSetter>;
+    requestAPINode?: {
+        customAPIInput?: (props: {
+            value: any;
+            onChange: (value: any) => void;
+            form: Ref<CForm>;
+        }) => React.ReactNode;
+    };
+};

package/dist/plugins/index.d.ts

@@ -1,13 +1,24 @@
 import { CPlugin } from '../core/pluginManager';
 import { ComponentLibPlugin } from './ComponentLibrary';
 import { DesignerPlugin } from './Designer';
+import { OutlineTreePlugin } from './OutlineTree';
 import { RightPanelPlugin } from './RightPanel';
 import { GlobalStatePanelPlugin } from './GlobalStatePanel';
 import { DisplaySourceSchema } from './DisplaySourceSchema';
 import { HistoryPlugin } from './History';
 import { HotkeysPlugin } from './Hotkeys';
 export declare const DEFAULT_PLUGIN_LIST: CPlugin[];
-export { DesignerPlugin, ComponentLibPlugin, RightPanelPlugin, GlobalStatePanelPlugin, HistoryPlugin, DisplaySourceSchema, HotkeysPlugin, };
+export { DesignerPlugin, ComponentLibPlugin, RightPanelPlugin, OutlineTreePlugin, GlobalStatePanelPlugin, HistoryPlugin, DisplaySourceSchema, HotkeysPlugin, };
+/** 组件唯一名 */
+export declare const DEFAULT_PLUGIN_NAME_MAP: {
+    HotkeysPlugin: string;
+    ComponentLibPlugin: string;
+    RightPanelPlugin: string;
+    GlobalStatePanelPlugin: string;
+    HistoryPlugin: string;
+    DesignerPlugin: string;
+    OutlineTreePlugin: string;
+};
 export * from './AdvancePanel/index';
 export * from './ComponentLibrary/index';
 export * from './ComponentStatePanel/index';
@@ -18,5 +29,6 @@ export * from './History';
 export * from './OutlineTree';
 export * from './PropertyPanel';
 export * from './RightPanel';
+export * from './RightPanel/type';
 export * from './VisualPanelPlus';
 export * from './Hotkeys';

package/dist/stories/components/CustomSchemaForm/components/Setters/actionFlow.stories.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    title: string;
+    component: {
+        (props: import('../../../../../component/CustomSchemaForm/components/Setters/ActionFlowSetter').TActionFlowSetterCore): import("react/jsx-runtime").JSX.Element;
+        setterName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+};
+export default _default;
+export declare const Demo: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/stories/components/CustomSchemaForm/components/Setters/mock.d.ts

@@ -0,0 +1,63 @@
+import { NODE_TYPE } from '../../../../../component/CustomSchemaForm/components/Setters/ActionFlowSetter/node';
+import { LogicType, TLogicItemHandlerFlow } from '@chamn/model';
+export declare const mockNodeList: ({
+    data: {
+        value?: undefined;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    type: NODE_TYPE;
+    dragHandle: string;
+    selectable: boolean;
+} | {
+    type: NODE_TYPE;
+    data: {
+        value: string;
+    };
+    dragHandle: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    selectable?: undefined;
+} | {
+    type: LogicType;
+    data: {
+        value: string;
+    };
+    dragHandle: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    selectable?: undefined;
+} | {
+    type: LogicType;
+    data: {
+        __DEV_CONFIG__: {
+            defaultSetterMap: {
+                'args.1': {
+                    name: string;
+                    setter: string;
+                };
+            };
+        };
+        type: string;
+        nodeId: string;
+        methodName: string;
+        args: (string | {
+            type: string;
+            value: string;
+        })[];
+        value?: undefined;
+    };
+    dragHandle: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    selectable?: undefined;
+})[];
+export declare const logicListSchema: TLogicItemHandlerFlow;

package/dist/stories/components/inputPlus.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const TargetComponent: (props: import('../../component/CSSSizeInput').CSSSizeInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: Meta<typeof TargetComponent>;
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/plugins/CSSEditor.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { VisualPanelPlus } from '../../plugins/VisualPanelPlus';
+declare const _default: Meta<typeof VisualPanelPlus>;
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/plugins/VisualPanelPlus.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (props: import('../../plugins/RightPanel/view').RightPanelOptions) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/setters/colorSetter.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const TargetComponent: import('../..').CSetter;
+declare const _default: Meta<typeof TargetComponent>;
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";._workbenchContainer_1wdwx_2{width:100%;height:100%;display:flex;flex-direction:column}._workbenchContainer_1wdwx_2 ._topToolBarBox_1wdwx_8{height:64px;width:100%;border-bottom:1px solid rgb(233,233,233);display:flex}._workbenchContainer_1wdwx_2 ._topToolBarBox_1wdwx_8 ._topToolBarView_1wdwx_14{flex:1}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17{display:flex;width:100%;flex:1;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23{position:relative;display:flex;background-color:#fff;z-index:100}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29{width:50px;height:100%;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34{position:relative;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .1s}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34._active_1wdwx_44 :before,._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34:hover :before{transition:all .1s;display:block;content:"";width:2px;height:100%;position:absolute;left:0;top:0}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34._active_1wdwx_44 :before{border-left:4px solid #1677ff!important}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34:hover :before{border-left:4px solid rgba(22,119,255,.3)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60{display:flex;flex-direction:column;background-color:#fff;z-index:100;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67{display:flex;color:#686868;height:30px;margin:10px;overflow:hidden;align-items:center}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._pluginNameText_1wdwx_75{font-size:16px;font-weight:700;margin-right:auto;flex-wrap:nowrap;word-break:keep-all}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._closeBtn_1wdwx_82,._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83{color:#686868}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83>*{transition:all .1s}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83>._active_1wdwx_44{transform:rotate(-45deg)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBox_1wdwx_60{width:100%;flex:1;background-color:#f8f8ff;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98{position:relative}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._arrowCursor_1wdwx_101{cursor:pointer;position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;background-color:#fff;padding:10px 3px;border-radius:4px 0 0 4px;font-size:12px}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._arrowCursor_1wdwx_101>._active_1wdwx_44{transform:rotate(-180deg)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._rightBox_1wdwx_116{position:relative;width:100%;height:100%;border-left:1px rgb(233,233,233) solid}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122{display:flex;flex-direction:column;flex:1;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._subTopToolbarBox_1wdwx_128{width:100%;height:50px;background-color:#fff}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._canvasBox_1wdwx_133{width:100%;flex:1;overflow:hidden;padding:20px 30px;background-color:#edeff3}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._canvasBox_1wdwx_133 ._scrollBox_1wdwx_140{width:100%;height:100%}._customViewBox_1wdwx_145{position:fixed;width:100%;height:100%;top:0;left:0;pointer-events:none}._engineContainer_f3ly9_2{color:#686868;font-size:14px;width:100%;height:100%;overflow:hidden}._engineContainer_f3ly9_2 *{box-sizing:border-box}._container_191p3_2{width:100%;height:100%;overflow:hidden;background-color:#fff;display:flex}._container_191p3_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:12px}._container_191p3_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._container_191p3_2 .ant-tabs-tab{padding:6px 0}._container_191p3_2 .ant-tabs-nav{margin-bottom:0}._tabTitle_191p3_23{padding:0 10px;font-size:12px;font-weight:400;text-rendering:optimizeLegibility}._square_1b87f_2{-webkit-user-select:none;user-select:none;position:relative;flex:33.3% 0}._square_1b87f_2:before{content:"";padding-top:100%;float:left}._square_1b87f_2:after{content:"";display:block;clear:both}._componentItem_1b87f_18{-webkit-user-select:none;user-select:none;overflow:hidden;position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgb(233,233,233);border-bottom:1px solid rgb(233,233,233);transition:all .2s}._componentItem_1b87f_18:hover{box-shadow:0 6px 16px #00000026;border-color:transparent;cursor:grab}._componentItem_1b87f_18:active{cursor:grabbing}._iconImg_1b87f_41{width:100%}._iconBox_1b87f_45{width:60%;height:60%;overflow:hidden;display:flex;align-items:center;justify-content:center}._iconText_1b87f_54{font-size:18px;font-weight:bolder;color:#686868}._ListBox_1q7zr_2{display:flex;flex-wrap:wrap}._ListBox_1q7zr_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding:0}._ListBox_1q7zr_2 .ant-collapse{border:none;background-color:#fff}._ListBox_1q7zr_2 .ant-collapse-header{padding:10px 16px!important}._ListBox_1q7zr_2 .ant-collapse-expand-icon{padding-inline-end:0!important}._ListBox_1q7zr_2 .ant-collapse-item{border-color:#e9e9e9}._collapsePanel_1q7zr_23{display:flex;flex-wrap:wrap}._toolBarBox_h5ljb_2{display:flex;margin-bottom:3px;margin-right:-2px;pointer-events:all;float:right}._item_h5ljb_10{background-color:#1677ff;color:#fff;padding:2px 3px;font-size:12px;overflow:hidden;margin-left:1px;cursor:pointer}._layoutSelectBox_h5ljb_20{position:relative;margin-right:1px;height:21px}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25{transition:all .3s;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(-100%);pointer-events:none}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25:hover,._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25._hoverBoxActive_h5ljb_35{opacity:1;pointer-events:all}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25 ._hoverItem_h5ljb_39{background-color:#1677ff;padding:2px 3px;color:#fff;font-size:12px;margin-bottom:1px;cursor:pointer}._layoutSelectBox_h5ljb_20 ._placeholder_h5ljb_47{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#1677ff;color:#fff;padding:2px 5px;font-size:12px;max-width:100px}._hoverTips_k3vn7_2{display:inline-block;color:#1677ff;opacity:.9;font-size:12px;margin-bottom:2px;background-color:#fff;padding:1px 3px;border-radius:2px}._highlightBox_whbf4_1{position:absolute;will-change:transform,width,height,left,right;outline:2px solid rgb(44,115,253)}._borderDrawBox_whbf4_7{position:absolute;left:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_whbf4_16{position:absolute;width:100%;left:0;top:0;box-sizing:border-box;transform:translateY(-100%)}._highlightBox_1dlxo_1{position:absolute;will-change:transform,width,height,left,right}._borderDrawBox_1dlxo_6{position:absolute;left:0;top:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_1dlxo_16{position:absolute;right:0;top:-20px;border:1px solid black;box-sizing:border-box}._horizontal_1dlxo_24._before_1dlxo_24{border-left:2px solid #1890ff}._horizontal_1dlxo_24._after_1dlxo_27{border-right:2px solid #1890ff}._vertical_1dlxo_31._before_1dlxo_24{border-top:2px solid #1890ff}._vertical_1dlxo_31._after_1dlxo_27{border-bottom:2px solid #1890ff}._current_1dlxo_38{border:none!important;background-color:#0084ff6b}._layoutContainer_1umjt_1{position:relative;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;justify-content:center;box-shadow:0 1px 4px #1f325821}._elementHighlightBox_1umjt_13{position:absolute;right:0;top:0;padding:10px}._iframeBox_1umjt_20{position:relative}._contentBox_1tkrj_2{background-color:#fff;height:100%;border-top:1px solid rgb(233,233,233);overflow:auto;position:relative}._contentBox_1tkrj_2 *{transition:all .1s}._nodeBox_1tkrj_13{-webkit-user-select:none;user-select:none;cursor:pointer}._nodeBox_1tkrj_13 ._toolbarBox_1tkrj_17{display:none;padding-right:10px}._nodeBox_1tkrj_13 ._iconItem_1tkrj_21{margin-right:8px}._nodeContent_1tkrj_25:hover ._toolbarBox_1tkrj_17{display:flex}._nodeContent_1tkrj_25{font-size:14px;cursor:pointer;display:flex;align-items:center}._nodeContent_1tkrj_25._selected_1tkrj_35{background-color:#dddddd3b}._nodeContent_1tkrj_25 ._nodeArrow_1tkrj_38{font-size:12px}._nodeContent_1tkrj_25 ._nodeArrow_1tkrj_38._expanded_1tkrj_41{transform-origin:center;transform:rotate(90deg)}._nodeContent_1tkrj_25 ._nodeRenderView_1tkrj_45{display:flex;align-items:center;height:26px;flex:1;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._nodeChildren_1tkrj_56{position:relative}._nodeChildren_1tkrj_56:before{display:block;position:absolute;left:13px;top:0;content:"";height:100%;width:1px;background-color:#e9e9e9}._nodeChildren_1tkrj_56._selected_1tkrj_35:before{background-color:#0000ff5c}._dropAnchorLine_1tkrj_73{width:100px;height:2px;background-color:#1890ff;position:fixed;z-index:99;pointer-events:none}._arrowSpan_1tkrj_82{position:relative;display:flex;align-items:center;justify-content:center}._arrowSpan_1tkrj_82:after{content:"";position:absolute;top:0;right:0;bottom:0;left:-8px}._CFromRenderBox_1vsdm_2{padding:0 20px}._CFromRenderBox_1vsdm_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_1vsdm_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding-right:5px}._dragItem_xzliq_2{cursor:grab;border:1px solid rgb(233,233,233);background-color:#fff;padding:10px;text-align:center;margin-bottom:10px;font-size:12px;border-radius:2px}._sortModalBox_xzliq_13{padding:20px 10px 10px;overflow:auto;max-height:500px}._addOneBtn_xzliq_19{width:100%;font-size:12px!important;color:#686868}._inputAuto_gk0d2_2{border-bottom:1px solid rgba(128,128,128,.23)}._active_gk0d2_6{border-bottom:1px solid rgb(128,177,255)}._cssSizeInput_1ig9c_2{display:inline-block}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-focused .ant-select-selector{color:#000000ac}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-selector{color:#585858!important;padding:0 0 0 3px!important;font-size:12px}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-selection-item{padding-inline-end:10px!important}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-arrow{inset-inline-end:3px!important}._inputNumberPlus_1hb66_2{display:flex}._inputNumberPlus_1hb66_2:hover ._delIcon_1hb66_5{display:block}._inputNumberPlus_1hb66_2 ._delIcon_1hb66_5{cursor:pointer;display:none}._fieldBox_nltxm_3{display:flex;flex-wrap:nowrap;flex-shrink:0;flex-grow:1;min-width:250px;align-items:center}._fieldBox_nltxm_3 ._label_nltxm_11{font-size:12px;color:#686868;padding-right:10px;-webkit-user-select:none;user-select:none;width:60px;max-height:40px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}._fieldBox_nltxm_3 ._tipsLabel_nltxm_25{text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:2px;cursor:help;word-break:break-all}._fieldBox_nltxm_3 ._content_nltxm_32{flex:1}._switchBtn_k17cr_2{color:#686868;font-size:12px;padding:0 5px 0 10px}._shapeFieldBox_k17cr_8,._collapseHeader_k17cr_9{color:#686868;display:flex;font-size:12px}._collapseHeader_k17cr_9{align-items:center}._CFromRenderBox_13lda_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding:5px 5px 5px 10px;align-items:center}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._advanceBox_9o3af_2{padding:0 20px}._advanceBox_9o3af_2 .ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:0}._rightPanelContainer_1p332_2{height:100%;width:100%}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:0}._rightPanelContainer_1p332_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tabpane{height:100%}._visualPanelBox_6q12v_2{padding:0 15px 300px}._visualPanelBox_6q12v_2 ._header_6q12v_5{color:#686868;display:flex}.ant-collapse .ant-collapse-item .ant-collapse-header{padding:5px 5px 5px 10px;align-items:center;color:#686868;font-size:12px}.ant-collapse .ant-collapse-item .ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._cssFieldBox_tzq0n_2{display:flex;color:#686868!important}._cssFieldBox_tzq0n_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_tzq0n_2 ._row_tzq0n_9{display:flex;padding-bottom:6px;align-items:center}._cssFieldBox_tzq0n_2 ._fieldLabel_tzq0n_14{display:inline-block;width:70px;flex-shrink:0;font-size:12px}._cssFieldBox_tzq0n_2 ._leftBox_tzq0n_20{flex:1}._cssFieldBox_tzq0n_2 ._rightBox_tzq0n_23{padding-left:10px}._cssFieldBox_tzq0n_2 ._inputBox_tzq0n_26{flex:1}._cssBox_tzq0n_30{overflow-x:hidden}._cssBox_tzq0n_30 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_tzq0n_30 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_tzq0n_30 .ant-collapse-content-box{padding-bottom:30px!important}._switchBtn_tzq0n_43{margin-top:10px;color:#686868;font-size:12px;padding:0 5px 0 10px}._cssFieldBox_1t7y7_2{display:flex;align-items:center;color:#686868!important}._cssFieldBox_1t7y7_2 .ant-select-selector{padding:0!important}._cssFieldBox_1t7y7_2 .ant-select-single .ant-select-selector .ant-select-selection-search{inset-inline-start:0px;inset-inline-end:0px}._cssFieldBox_1t7y7_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_1t7y7_2 ._inputAuto_1t7y7_17{border-bottom:1px solid rgba(128,128,128,.23);transition:all .1s;height:30px}._cssFieldBox_1t7y7_2 ._inputAuto_1t7y7_17._error_1t7y7_22{border-bottom:1px solid red!important}._cssFieldBox_1t7y7_2 ._keyField_1t7y7_25{position:relative;font-size:14px;height:30px}._cssFieldBox_1t7y7_2 ._keyField_1t7y7_25._notEdit_1t7y7_30{border-bottom:1px solid transparent!important}._cssFieldBox_1t7y7_2 ._active_1t7y7_33{border-bottom:1px solid rgb(128,177,255)}._cssBox_1t7y7_37{overflow:hidden}._cssBox_1t7y7_37 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_1t7y7_37 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_1t7y7_37 .ant-collapse-content-box{padding-bottom:30px!important}._stateTag_5a8hc_2{position:relative}._stateTag_5a8hc_2 ._stateTagClose_5a8hc_5{position:absolute;right:-10px;top:-10px;background-color:#fff;color:#4d4d4d;opacity:0;font-size:20px;transform:scale(.6);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;border-radius:10px}._stateTag_5a8hc_2:hover ._stateTagClose_5a8hc_5{opacity:1}._label_1850u_2{width:60px;display:inline-block;color:#686868;font-size:14px;flex-shrink:0}._label_1850u_2._font_1850u_9{width:50px}._label_1850u_2._m-p_1850u_12{width:30px}._fontOption_1850u_16{display:inline-block;width:50px}._row_1850u_21{padding-bottom:10px}._CSSUIPanel_1850u_25 .ant-radio-button-wrapper{font-size:12px!important}._box_tl0hm_2{height:100%;width:100%;padding-right:10px;border-top:1px solid rgb(233,233,233);padding-top:10px;background-color:#fff}
+@charset "UTF-8";._workbenchContainer_1wdwx_2{width:100%;height:100%;display:flex;flex-direction:column}._workbenchContainer_1wdwx_2 ._topToolBarBox_1wdwx_8{height:64px;width:100%;border-bottom:1px solid rgb(233,233,233);display:flex}._workbenchContainer_1wdwx_2 ._topToolBarBox_1wdwx_8 ._topToolBarView_1wdwx_14{flex:1}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17{display:flex;width:100%;flex:1;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23{position:relative;display:flex;background-color:#fff;z-index:100}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29{width:50px;height:100%;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34{position:relative;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .1s}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34._active_1wdwx_44 :before,._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34:hover :before{transition:all .1s;display:block;content:"";width:2px;height:100%;position:absolute;left:0;top:0}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34._active_1wdwx_44 :before{border-left:4px solid #1677ff!important}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginIconBar_1wdwx_29 ._pluginIconItem_1wdwx_34:hover :before{border-left:4px solid rgba(22,119,255,.3)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60{display:flex;flex-direction:column;background-color:#fff;z-index:100;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67{display:flex;color:#686868;height:30px;margin:10px;overflow:hidden;align-items:center}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._pluginNameText_1wdwx_75{font-size:16px;font-weight:700;margin-right:auto;flex-wrap:nowrap;word-break:keep-all}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._closeBtn_1wdwx_82,._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83{color:#686868}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83>*{transition:all .1s}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBoxResizeBox_1wdwx_60 ._pluginHeader_1wdwx_67 ._fixedBtn_1wdwx_83>._active_1wdwx_44{transform:rotate(-45deg)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._leftBox_1wdwx_23 ._pluginPanelBox_1wdwx_60{width:100%;flex:1;background-color:#f8f8ff;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98{position:relative}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._arrowCursor_1wdwx_101{cursor:pointer;position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;background-color:#fff;padding:10px 3px;border-radius:4px 0 0 4px;font-size:12px}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._arrowCursor_1wdwx_101>._active_1wdwx_44{transform:rotate(-180deg)}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._rightResizeBox_1wdwx_98 ._rightBox_1wdwx_116{position:relative;width:100%;height:100%;border-left:1px rgb(233,233,233) solid}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122{display:flex;flex-direction:column;flex:1;overflow:hidden}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._subTopToolbarBox_1wdwx_128{width:100%;height:50px;background-color:#fff}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._canvasBox_1wdwx_133{width:100%;flex:1;overflow:hidden;padding:20px 30px;background-color:#edeff3}._workbenchContainer_1wdwx_2 ._bodyContent_1wdwx_17 ._centerBox_1wdwx_122 ._canvasBox_1wdwx_133 ._scrollBox_1wdwx_140{width:100%;height:100%}._customViewBox_1wdwx_145{position:fixed;width:100%;height:100%;top:0;left:0;pointer-events:none}._engineContainer_f3ly9_2{color:#686868;font-size:14px;width:100%;height:100%;overflow:hidden}._engineContainer_f3ly9_2 *{box-sizing:border-box}._container_191p3_2{width:100%;height:100%;overflow:hidden;background-color:#fff;display:flex}._container_191p3_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:12px}._container_191p3_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._container_191p3_2 .ant-tabs-tab{padding:6px 0}._container_191p3_2 .ant-tabs-nav{margin-bottom:0}._tabTitle_191p3_23{padding:0 10px;font-size:12px;font-weight:400;text-rendering:optimizeLegibility}._square_1b87f_2{-webkit-user-select:none;user-select:none;position:relative;flex:33.3% 0}._square_1b87f_2:before{content:"";padding-top:100%;float:left}._square_1b87f_2:after{content:"";display:block;clear:both}._componentItem_1b87f_18{-webkit-user-select:none;user-select:none;overflow:hidden;position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgb(233,233,233);border-bottom:1px solid rgb(233,233,233);transition:all .2s}._componentItem_1b87f_18:hover{box-shadow:0 6px 16px #00000026;border-color:transparent;cursor:grab}._componentItem_1b87f_18:active{cursor:grabbing}._iconImg_1b87f_41{width:100%}._iconBox_1b87f_45{width:60%;height:60%;overflow:hidden;display:flex;align-items:center;justify-content:center}._iconText_1b87f_54{font-size:18px;font-weight:bolder;color:#686868}._ListBox_1q7zr_2{display:flex;flex-wrap:wrap}._ListBox_1q7zr_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding:0}._ListBox_1q7zr_2 .ant-collapse{border:none;background-color:#fff}._ListBox_1q7zr_2 .ant-collapse-header{padding:10px 16px!important}._ListBox_1q7zr_2 .ant-collapse-expand-icon{padding-inline-end:0!important}._ListBox_1q7zr_2 .ant-collapse-item{border-color:#e9e9e9}._collapsePanel_1q7zr_23{display:flex;flex-wrap:wrap}._toolBarBox_h5ljb_2{display:flex;margin-bottom:3px;margin-right:-2px;pointer-events:all;float:right}._item_h5ljb_10{background-color:#1677ff;color:#fff;padding:2px 3px;font-size:12px;overflow:hidden;margin-left:1px;cursor:pointer}._layoutSelectBox_h5ljb_20{position:relative;margin-right:1px;height:21px}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25{transition:all .3s;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(-100%);pointer-events:none}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25:hover,._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25._hoverBoxActive_h5ljb_35{opacity:1;pointer-events:all}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25 ._hoverItem_h5ljb_39{background-color:#1677ff;padding:2px 3px;color:#fff;font-size:12px;margin-bottom:1px;cursor:pointer}._layoutSelectBox_h5ljb_20 ._placeholder_h5ljb_47{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#1677ff;color:#fff;padding:2px 5px;font-size:12px;max-width:100px}._hoverTips_k3vn7_2{display:inline-block;color:#1677ff;opacity:.9;font-size:12px;margin-bottom:2px;background-color:#fff;padding:1px 3px;border-radius:2px}._highlightBox_whbf4_1{position:absolute;will-change:transform,width,height,left,right;outline:2px solid rgb(44,115,253)}._borderDrawBox_whbf4_7{position:absolute;left:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_whbf4_16{position:absolute;width:100%;left:0;top:0;box-sizing:border-box;transform:translateY(-100%)}._highlightBox_1dlxo_1{position:absolute;will-change:transform,width,height,left,right}._borderDrawBox_1dlxo_6{position:absolute;left:0;top:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_1dlxo_16{position:absolute;right:0;top:-20px;border:1px solid black;box-sizing:border-box}._horizontal_1dlxo_24._before_1dlxo_24{border-left:2px solid #1890ff}._horizontal_1dlxo_24._after_1dlxo_27{border-right:2px solid #1890ff}._vertical_1dlxo_31._before_1dlxo_24{border-top:2px solid #1890ff}._vertical_1dlxo_31._after_1dlxo_27{border-bottom:2px solid #1890ff}._current_1dlxo_38{border:none!important;background-color:#0084ff6b}._layoutContainer_1umjt_1{position:relative;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;justify-content:center;box-shadow:0 1px 4px #1f325821}._elementHighlightBox_1umjt_13{position:absolute;right:0;top:0;padding:10px}._iframeBox_1umjt_20{position:relative}._contentBox_1tkrj_2{background-color:#fff;height:100%;border-top:1px solid rgb(233,233,233);overflow:auto;position:relative}._contentBox_1tkrj_2 *{transition:all .1s}._nodeBox_1tkrj_13{-webkit-user-select:none;user-select:none;cursor:pointer}._nodeBox_1tkrj_13 ._toolbarBox_1tkrj_17{display:none;padding-right:10px}._nodeBox_1tkrj_13 ._iconItem_1tkrj_21{margin-right:8px}._nodeContent_1tkrj_25:hover ._toolbarBox_1tkrj_17{display:flex}._nodeContent_1tkrj_25{font-size:14px;cursor:pointer;display:flex;align-items:center}._nodeContent_1tkrj_25._selected_1tkrj_35{background-color:#dddddd3b}._nodeContent_1tkrj_25 ._nodeArrow_1tkrj_38{font-size:12px}._nodeContent_1tkrj_25 ._nodeArrow_1tkrj_38._expanded_1tkrj_41{transform-origin:center;transform:rotate(90deg)}._nodeContent_1tkrj_25 ._nodeRenderView_1tkrj_45{display:flex;align-items:center;height:26px;flex:1;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._nodeChildren_1tkrj_56{position:relative}._nodeChildren_1tkrj_56:before{display:block;position:absolute;left:13px;top:0;content:"";height:100%;width:1px;background-color:#e9e9e9}._nodeChildren_1tkrj_56._selected_1tkrj_35:before{background-color:#0000ff5c}._dropAnchorLine_1tkrj_73{width:100px;height:2px;background-color:#1890ff;position:fixed;z-index:99;pointer-events:none}._arrowSpan_1tkrj_82{position:relative;display:flex;align-items:center;justify-content:center}._arrowSpan_1tkrj_82:after{content:"";position:absolute;top:0;right:0;bottom:0;left:-8px}.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-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}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}._dragItem_xzliq_2{cursor:grab;border:1px solid rgb(233,233,233);background-color:#fff;padding:10px;text-align:center;margin-bottom:10px;font-size:12px;border-radius:2px}._sortModalBox_xzliq_13{padding:20px 10px 10px;overflow:auto;max-height:500px}._addOneBtn_xzliq_19{width:100%;font-size:12px!important;color:#686868}._inputAuto_gk0d2_2{border-bottom:1px solid rgba(128,128,128,.23)}._active_gk0d2_6{border-bottom:1px solid rgb(128,177,255)}._cssSizeInput_1ig9c_2{display:inline-block}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-focused .ant-select-selector{color:#000000ac}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-selector{color:#585858!important;padding:0 0 0 3px!important;font-size:12px}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-selection-item{padding-inline-end:10px!important}._cssSizeInput_1ig9c_2 ._unitSelect_1ig9c_5 .ant-select-arrow{inset-inline-end:3px!important}._inputNumberPlus_1hb66_2{display:flex}._inputNumberPlus_1hb66_2:hover ._delIcon_1hb66_5{display:block}._inputNumberPlus_1hb66_2 ._delIcon_1hb66_5{cursor:pointer;display:none}._fieldBox_1nwst_3{display:flex;flex-wrap:nowrap;flex-shrink:0;flex-grow:1;min-width:250px;align-items:center}._fieldBox_1nwst_3 ._label_1nwst_11{font-size:12px;color:#686868;padding-right:10px;-webkit-user-select:none;user-select:none;max-height:40px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}._fieldBox_1nwst_3 ._tipsLabel_1nwst_24{text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:2px;cursor:help;word-break:break-all}._fieldBox_1nwst_3 ._content_1nwst_31{flex:1;position:relative}._error_1nwst_36{outline:1px solid rgba(255,0,45,.768627451);outline-offset:3px;border-radius:4px}._errorTipIcon_1nwst_42{color:#ff002dc4;margin:0 5px}._switchBtn_k17cr_2{color:#686868;font-size:12px;padding:0 5px 0 10px}._shapeFieldBox_k17cr_8,._collapseHeader_k17cr_9{color:#686868;display:flex;font-size:12px}._collapseHeader_k17cr_9{align-items:center}._CFromRenderBox_13lda_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding:5px 5px 5px 10px;align-items:center}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._l_1lpc6_2{position:absolute;left:0;top:0;height:100%;width:20px;cursor:grab}._r_1lpc6_11{position:absolute;right:0;top:0;height:100%;width:20px;cursor:grab}._b_1lpc6_20{position:absolute;right:0;bottom:0;width:100%;height:20px;cursor:grab}._dragBox_1lpc6_29{background-color:#cbcbcb29;padding:0 4px;border-radius:4px;color:#7e7e7e8a}._selectStatus_1lpc6_36{outline:1px solid #f57dbd;border-radius:4px;box-shadow:0 3.54px 4.55px #00000005,0 3.54px 4.55px #0000000d,0 .51px 1.01px #0000001a}._fieldBox_1cjcm_2{display:flex;align-items:center;justify-content:center}._switchBtn_1cjcm_8{color:#686868;font-size:12px;padding:0 5px 0 10px}._line_mvkqx_2{padding-bottom:10px}._CFromRenderBox_1vsdm_2{padding:0 20px}._CFromRenderBox_1vsdm_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_1vsdm_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding-right:5px}._advanceBox_9o3af_2{padding:0 20px}._advanceBox_9o3af_2 .ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:0}._rightPanelContainer_1p332_2{height:100%;width:100%}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:0}._rightPanelContainer_1p332_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tabpane{height:100%}._visualPanelBox_6q12v_2{padding:0 15px 300px}._visualPanelBox_6q12v_2 ._header_6q12v_5{color:#686868;display:flex}.ant-collapse .ant-collapse-item .ant-collapse-header{padding:5px 5px 5px 10px;align-items:center;color:#686868;font-size:12px}.ant-collapse .ant-collapse-item .ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._cssFieldBox_tzq0n_2{display:flex;color:#686868!important}._cssFieldBox_tzq0n_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_tzq0n_2 ._row_tzq0n_9{display:flex;padding-bottom:6px;align-items:center}._cssFieldBox_tzq0n_2 ._fieldLabel_tzq0n_14{display:inline-block;width:70px;flex-shrink:0;font-size:12px}._cssFieldBox_tzq0n_2 ._leftBox_tzq0n_20{flex:1}._cssFieldBox_tzq0n_2 ._rightBox_tzq0n_23{padding-left:10px}._cssFieldBox_tzq0n_2 ._inputBox_tzq0n_26{flex:1}._cssBox_tzq0n_30{overflow-x:hidden}._cssBox_tzq0n_30 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_tzq0n_30 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_tzq0n_30 .ant-collapse-content-box{padding-bottom:30px!important}._switchBtn_tzq0n_43{margin-top:10px;color:#686868;font-size:12px;padding:0 5px 0 10px}._cssFieldBox_1t7y7_2{display:flex;align-items:center;color:#686868!important}._cssFieldBox_1t7y7_2 .ant-select-selector{padding:0!important}._cssFieldBox_1t7y7_2 .ant-select-single .ant-select-selector .ant-select-selection-search{inset-inline-start:0px;inset-inline-end:0px}._cssFieldBox_1t7y7_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_1t7y7_2 ._inputAuto_1t7y7_17{border-bottom:1px solid rgba(128,128,128,.23);transition:all .1s;height:30px}._cssFieldBox_1t7y7_2 ._inputAuto_1t7y7_17._error_1t7y7_22{border-bottom:1px solid red!important}._cssFieldBox_1t7y7_2 ._keyField_1t7y7_25{position:relative;font-size:14px;height:30px}._cssFieldBox_1t7y7_2 ._keyField_1t7y7_25._notEdit_1t7y7_30{border-bottom:1px solid transparent!important}._cssFieldBox_1t7y7_2 ._active_1t7y7_33{border-bottom:1px solid rgb(128,177,255)}._cssBox_1t7y7_37{overflow:hidden}._cssBox_1t7y7_37 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_1t7y7_37 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_1t7y7_37 .ant-collapse-content-box{padding-bottom:30px!important}._stateTag_5a8hc_2{position:relative}._stateTag_5a8hc_2 ._stateTagClose_5a8hc_5{position:absolute;right:-10px;top:-10px;background-color:#fff;color:#4d4d4d;opacity:0;font-size:20px;transform:scale(.6);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;border-radius:10px}._stateTag_5a8hc_2:hover ._stateTagClose_5a8hc_5{opacity:1}._label_1850u_2{width:60px;display:inline-block;color:#686868;font-size:14px;flex-shrink:0}._label_1850u_2._font_1850u_9{width:50px}._label_1850u_2._m-p_1850u_12{width:30px}._fontOption_1850u_16{display:inline-block;width:50px}._row_1850u_21{padding-bottom:10px}._CSSUIPanel_1850u_25 .ant-radio-button-wrapper{font-size:12px!important}._eventBox_175c6_2{padding:0 20px;overflow-x:hidden;overflow-y:auto}._eventBox_175c6_2 .ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:0}._box_tl0hm_2{height:100%;width:100%;padding-right:10px;border-top:1px solid rgb(233,233,233);padding-top:10px;background-color:#fff}

package/dist/utils/index.d.ts

@@ -7,6 +7,8 @@ export declare const waitReactUpdate: ({ time, cb, }?: {
     time?: number;
     cb?: (...args: any[]) => void;
 }) => Promise<unknown>;
+/** 确保 key 一定存在 */
+export declare const ensureKeyExist: (obj: any, key: string, defaultValue: any) => void;
 export * from './css';
 export * from './defaultEngineConfig';
 export * from './logger';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chamn/engine",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "dist"
@@ -27,7 +27,9 @@
     "build:analyze": "cross-env BUILD_TYPE=PKG  build-script --build --analyze",
     "lint": "eslint --ext .tsx,.ts src/",
     "prettier": "prettier --write ./src",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -35,19 +37,21 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
-    "@chamn/layout": "0.2.3",
-    "@chamn/model": "0.2.3",
-    "@chamn/render": "0.2.3",
+    "@chamn/layout": "0.3.0",
+    "@chamn/model": "0.3.0",
+    "@chamn/render": "0.3.0",
+    "@dagrejs/dagre": "^1.1.4",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@monaco-editor/react": "^4.5.1",
+    "@xyflow/react": "^12.3.6",
     "ahooks": "^3.7.4",
-    "antd": "^5.8.5",
+    "antd": "^5.23.2",
     "color": "^4.2.3",
     "consola": "^3.2.3",
-    "css": "^3.0.0",
+    "css-tree": "^3.1.0",
     "i18next": "^22.1.5",
     "loadjs": "^4.3.0",
     "lodash-es": "^4.17.21",
@@ -58,10 +62,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@chamn/build-script": "0.2.3",
-    "@chamn/demo-page": "0.2.3",
+    "@chamn/build-script": "0.3.0",
+    "@chamn/demo-page": "0.3.0",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/color": "^3.0.4",
     "@types/css": "^0.0.34",
+    "@types/css-tree": "^2.3.10",
     "@types/loadjs": "^4.0.4",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.2.0",
@@ -70,6 +83,7 @@
     "babel-loader": "^8.3.0",
     "cross-env": "^7.0.3",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "prop-types": "^15.8.1",
     "rc-select": "^14.4.0",
     "re-resizable": "^6.9.9",
@@ -78,8 +92,9 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^12.1.1",
     "react-router-dom": "^6.7.0",
-    "sass": "^1.54.0"
+    "sass": "^1.54.0",
+    "storybook": "^8.4.7"
   },
   "config": {},
-  "gitHead": "2b3a61ca1ed0d9639d04bebbd862f766467d2c98"
+  "gitHead": "b8e6e48950cd7f8c67c1617cb277228748af5bd8"
 }