Merge pull request #3671 from illacloud/release/4.4.7

Release/4.4.7

apps/builder/package.json

@@ -47,6 +47,7 @@
     "@illa-design/react": "workspace:*",
     "@illa-public/avatar": "workspace:*",
     "@illa-public/code-editor": "workspace:*",
+    "@illa-public/create-app": "workspace:*",
     "@illa-public/cropper": "workspace:*",
     "@illa-public/dynamic-string": "workspace:^",
     "@illa-public/icon": "workspace:*",
@@ -56,6 +57,7 @@
     "@illa-public/invite-modal": "workspace:*",
     "@illa-public/layout-auto-change": "workspace:*",
     "@illa-public/market-agent": "workspace:*",
+    "@illa-public/market-app": "workspace:*",
     "@illa-public/missing-resource-module": "workspace:^",
     "@illa-public/mixpanel-utils": "workspace:*",
     "@illa-public/public-configs": "workspace:*",
@@ -69,8 +71,6 @@
     "@illa-public/user-data": "workspace:*",
     "@illa-public/user-role-utils": "workspace:*",
     "@illa-public/utils": "workspace:*",
-    "@illa-public/create-app": "workspace:*",
-    "@illa-public/market-app": "workspace:*",
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
     "@mui/x-data-grid-premium": "^6.18.2",
@@ -108,6 +108,7 @@
     "overlap-area": "^1.1.0",
     "papaparse": "^5.4.1",
     "pdfjs-dist": "2.16.105",
+    "qrcode.react": "^3.1.0",
     "qs": "^6.11.2",
     "rc-virtual-list": "^3.4.2",
     "re-resizable": "^6.9.9",

apps/builder/src/middleware/reduxAsync/index.ts

@@ -1,6 +1,6 @@
 import { Middleware, isAction } from "@reduxjs/toolkit"
 import { illaSnapshot } from "@/page/App/components/DotPanel/constant/snapshotNew"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { RootState } from "@/store"
 import { receiveMessage } from "./receiveMessages"
 import { sendMessage } from "./sendMessage"
@@ -18,7 +18,7 @@ export const reduxAsync: Middleware = (store) => (next) => (action) => {
     const resp = next(action) as RootState
     if (typeList[0] === "components") {
       const nextRootState = store.getState()
-      const snapShot = getExecutionWidgetLayoutInfo(nextRootState)
+      const snapShot = getClientWidgetLayoutInfo(nextRootState)
       illaSnapshot.setSnapshot(snapShot)
     }
     return resp

apps/builder/src/middleware/undoRedo/method/components.tsx

@@ -8,7 +8,7 @@ import {
   searchDSLByDisplayName,
   searchDSLFromTree,
 } from "@/redux/currentApp/components/componentsSelector"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { RootState } from "@/store"
 import { buildTreeByMapNode } from "@/utils/componentNode/flatTree"
 import IllaUndoRedoManager from "@/utils/undoRedo/undo"
@@ -119,7 +119,7 @@ export const componentsSnapShot = (
       break
     }
     case "updateComponentPositionReducer": {
-      const layoutInfos = getExecutionWidgetLayoutInfo(prevRootState)
+      const layoutInfos = getClientWidgetLayoutInfo(prevRootState)
       const originNodeLayoutInfos = (
         action.payload as UpdateComponentPositionPayload
       ).updateSlices.map((item) => {

apps/builder/src/page/App/components/ComponentPanel/ComponentItem.tsx

@@ -3,7 +3,7 @@ import { useDrag } from "react-dnd"
 import { useSelector } from "react-redux"
 import { ComponentItemProps } from "@/page/App/components/ComponentPanel/interface"
 import { getIsILLAEditMode } from "@/redux/config/configSelector"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { getGuideStatus } from "@/redux/guide/guideSelector"
 import store from "@/store"
 import { endDragMultiNodes, startDragMultiNodes } from "@/utils/drag/drag"
@@ -56,7 +56,7 @@ export const ComponentItem: FC<ComponentItemProps> = memo(
             }
           }
           const rootState = store.getState()
-          let allWidgetLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+          let allWidgetLayoutInfo = getClientWidgetLayoutInfo(rootState)
           illaSnapshot.setSnapshot(allWidgetLayoutInfo)
           startDragMultiNodes([widgetLayoutInfo])
           return {

apps/builder/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx

@@ -53,10 +53,10 @@ import {
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
 import {
   getCurrentPageDisplayName,
-  getExecutionWidgetLayoutInfo,
   getIsDragging,
   getIsResizing,
 } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { FocusManager } from "@/utils/focusManager"
 import { newGenerateComponentNode } from "@/utils/generators/generateComponentNode"
 import { getPaddingShape } from "@/utils/styleUtils/padding"
@@ -125,7 +125,7 @@ const RenderComponentCanvasContainer: FC<
   const unitWidth = fixedBounds.width / columnNumber
 
   const [canvasHeight, setCanvasHeight] = useState<number>(fixedBounds.height)
-  const widgetLayoutInfo = useSelector(getExecutionWidgetLayoutInfo)
+  const widgetLayoutInfo = useSelector(getClientWidgetLayoutInfo)
   const childWidgetLayoutInfo = Object.values(widgetLayoutInfo).filter(
     (item) => item.parentNode === displayName,
   )
@@ -136,9 +136,8 @@ const RenderComponentCanvasContainer: FC<
   const isLikeProductMode = useSelector(getIsLikeProductMode)
 
   const isEditMode = useSelector(getIsILLAEditMode)
-  const layoutInfos = useSelector(getExecutionWidgetLayoutInfo)
 
-  const currentLayoutInfo = layoutInfos[displayName]
+  const currentLayoutInfo = widgetLayoutInfo[displayName]
 
   const [collectedProps, dropRef] = useDrop<
     DragInfo,

apps/builder/src/page/App/components/DotPanel/components/Canvas/renderModalCanvasContainer.tsx

@@ -3,11 +3,9 @@ import { useDispatch, useSelector } from "react-redux"
 import useMeasure from "react-use-measure"
 import ComponentParser from "@/page/App/components/DotPanel/components/ComponentParser"
 import { DEFAULT_BODY_COLUMNS_NUMBER } from "@/page/App/components/DotPanel/constant/canvas"
-import {
-  getExecutionResult,
-  getExecutionWidgetLayoutInfo,
-} from "@/redux/currentApp/executionTree/executionSelector"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
 import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { RenderComponentCanvasContainerProps } from "./interface"
 import { maskStyle, outerModalCanvasContainerStyle } from "./style"
 
@@ -28,7 +26,7 @@ export const RenderModalCanvasContainer: FC<
 
   const unitWidth = bounds.width / columnNumber
 
-  const layoutInfos = useSelector(getExecutionWidgetLayoutInfo)
+  const layoutInfos = useSelector(getClientWidgetLayoutInfo)
 
   const currentLayoutInfo = layoutInfos[displayName]
 

apps/builder/src/page/App/components/DotPanel/components/ComponentParser/index.tsx

@@ -2,13 +2,13 @@ import { FC, memo } from "react"
 import { useSelector } from "react-redux"
 import ScaleSquare from "@/page/App/components/ScaleSquare"
 import { ModalScaleSquare } from "@/page/App/components/ScaleSquare/modalScaleSquare"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import { ComponentParserProps } from "./interface"
 
 const ComponentParser: FC<ComponentParserProps> = (props) => {
   const { displayName, unitW, parentNodeDisplayName, columnNumber } = props
 
-  const widgetLayoutInfo = useSelector(getExecutionWidgetLayoutInfo)
+  const widgetLayoutInfo = useSelector(getClientWidgetLayoutInfo)
   const currentWidgetLayoutInfo = widgetLayoutInfo[displayName]
   const containerType = currentWidgetLayoutInfo.containerType
   const widgetType = currentWidgetLayoutInfo.widgetType

apps/builder/src/page/App/components/DotPanel/components/MultiSelectedContainer/index.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux"
 import { UNIT_HEIGHT } from "@/page/App/components/DotPanel/constant/canvas"
 import { getLargeItemShapeWithNodeScale } from "@/page/App/components/DotPanel/utils"
 import { getSelectedComponentDisplayNames } from "@/redux/config/configSelector"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import {
   MultiSelectedScaleSquareProps,
   SelectedComponentWithShape,
@@ -13,7 +13,7 @@ import { applyMultiSelectedScaleSquareStyle } from "./style"
 const MultiSelectedScaleSquare: FC<MultiSelectedScaleSquareProps> = (props) => {
   const { unitW, containerDisplayName } = props
   const selectedComponents = useSelector(getSelectedComponentDisplayNames)
-  const widgetExecutionResult = useSelector(getExecutionWidgetLayoutInfo)
+  const widgetExecutionResult = useSelector(getClientWidgetLayoutInfo)
   const selectedComponentsWithShape: SelectedComponentWithShape[] =
     useMemo(() => {
       let result: SelectedComponentWithShape[] = []

apps/builder/src/page/App/components/DotPanel/constant/snapshotNew.ts

@@ -1,4 +1,4 @@
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 
 class SnapShot {
   snapshot: Record<string, WidgetLayoutInfo> = {}

apps/builder/src/page/App/components/DotPanel/utils/crossingHelper.ts

@@ -1,4 +1,4 @@
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 import { illaSnapshot } from "../constant/snapshotNew"
 
 export interface NodeShape {

apps/builder/src/page/App/components/DotPanel/utils/getDragShadow.ts

@@ -2,7 +2,7 @@ import { clamp } from "lodash-es"
 import { XYCoord } from "react-dnd"
 import { DRAG_EFFECT } from "@/page/App/components/ScaleSquare/components/DragContainer/interface"
 import { DEFAULT_MIN_COLUMN } from "@/page/App/components/ScaleSquare/constant/widget"
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 import { DragCollectedProps } from "../components/DragPreview/interface"
 import { DEFAULT_BODY_COLUMNS_NUMBER, UNIT_HEIGHT } from "../constant/canvas"
 import { getScrollBarContainerByDisplayName } from "../context/scrollBarContext"

apps/builder/src/page/App/components/DotPanel/utils/getDropResult.ts

@@ -1,4 +1,4 @@
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 import { combineWidgetInfos } from "./getDragShadow"
 
 export interface DropResult {

apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx

@@ -11,11 +11,8 @@ import {
 import { applyBarHandlerStyle } from "@/page/App/components/ScaleSquare/style"
 import { configActions } from "@/redux/config/configSlice"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import {
-  getExecutionResult,
-  getExecutionWidgetLayoutInfo,
-} from "@/redux/currentApp/executionTree/executionSelector"
-import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 
 export const DEFAULT_MAX_HEIGHT = 80
 export const DEFAULT_MIN_GAP = 8
@@ -35,7 +32,7 @@ export const AutoHeightWithLimitedContainer: FC<
   const [resizeMaxHeight, setResizeMaxHeight] = useState(false)
   const [resizeMinHeight, setResizeMinHeight] = useState(false)
   const executionResult = useSelector(getExecutionResult)
-  const layoutInfoResult = useSelector(getExecutionWidgetLayoutInfo)
+  const layoutInfoResult = useSelector(getClientWidgetLayoutInfo)
 
   const dynamicMinHeight = get(
     executionResult,
@@ -75,7 +72,7 @@ export const AutoHeightWithLimitedContainer: FC<
     setResizeMinHeight(true)
     dispatch(configActions.updateShowDot(true))
     dispatch(
-      executionActions.setResizingNodeIDsReducer([
+      configActions.setResizingNodeIDsReducer([
         `${displayName}-resize-minHeight`,
       ]),
     )
@@ -85,7 +82,7 @@ export const AutoHeightWithLimitedContainer: FC<
     setResizeMaxHeight(true)
     dispatch(configActions.updateShowDot(true))
     dispatch(
-      executionActions.setResizingNodeIDsReducer([
+      configActions.setResizingNodeIDsReducer([
         `${displayName}-resize-maxHeight`,
       ]),
     )
@@ -111,7 +108,7 @@ export const AutoHeightWithLimitedContainer: FC<
       )
       dispatch(configActions.updateShowDot(false))
       window.setTimeout(() => {
-        dispatch(executionActions.setResizingNodeIDsReducer([]))
+        dispatch(configActions.setResizingNodeIDsReducer([]))
       }, 16)
     },
     [containerHeight, dispatch, displayName, dynamicMaxHeight],
@@ -141,7 +138,7 @@ export const AutoHeightWithLimitedContainer: FC<
       }, 30)
       dispatch(configActions.updateShowDot(false))
       window.setTimeout(() => {
-        dispatch(executionActions.setResizingNodeIDsReducer([]))
+        dispatch(configActions.setResizingNodeIDsReducer([]))
       }, 16)
     },
     [

apps/builder/src/page/App/components/ScaleSquare/components/DragContainer/index.tsx

@@ -12,11 +12,9 @@ import {
   getIsILLAEditMode,
   getSelectedComponentDisplayNames,
 } from "@/redux/config/configSelector"
-import {
-  getExecutionWidgetLayoutInfo,
-  getIsResizing,
-} from "@/redux/currentApp/executionTree/executionSelector"
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { getIsResizing } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 import store from "@/store"
 import { endDragMultiNodes, startDragMultiNodes } from "@/utils/drag/drag"
 import { trackInEditor } from "@/utils/mixpanelHelper"
@@ -57,7 +55,7 @@ export const DragContainer: FC<DragContainerProps> = (props) => {
       },
       item: () => {
         const rootState = store.getState()
-        let allWidgetLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+        let allWidgetLayoutInfo = getClientWidgetLayoutInfo(rootState)
         illaSnapshot.setSnapshot(allWidgetLayoutInfo)
         let draggedSelectedComponents: WidgetLayoutInfo[] = []
         let currentSelectedComponents = selectedComponents

apps/builder/src/page/App/components/ScaleSquare/components/DragContainer/interface.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionState"
+import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
 
 export interface DragContainerProps {
   children: ReactNode

apps/builder/src/page/App/components/ScaleSquare/components/ResizingAndDragContainer/ResizeHandler/hooks.ts

@@ -13,12 +13,12 @@ import { sendShadowMessageHandler } from "@/page/App/components/DotPanel/utils/s
 import { getIsILLAEditMode } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
-import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
+import { layoutInfoActions } from "@/redux/currentApp/layoutInfo/layoutInfoSlice"
 import {
   BatchUpdateWidgetLayoutInfoPayload,
   WidgetLayoutInfo,
-} from "@/redux/currentApp/executionTree/executionState"
+} from "@/redux/currentApp/layoutInfo/layoutInfoState"
 import store from "@/store"
 import { trackInEditor } from "@/utils/mixpanelHelper"
 import { BarPosition } from "./interface"
@@ -43,10 +43,10 @@ export const useResizeStart = (
       },
       item: () => {
         const rootState = store.getState()
-        let allWidgetLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+        let allWidgetLayoutInfo = getClientWidgetLayoutInfo(rootState)
         illaSnapshot.setSnapshot(allWidgetLayoutInfo)
         dispatch(configActions.updateShowDot(true))
-        dispatch(executionActions.setResizingNodeIDsReducer([displayName]))
+        dispatch(configActions.setResizingNodeIDsReducer([displayName]))
 
         return {
           barPosition,
@@ -105,7 +105,7 @@ export const useResize = () => {
             parentNode: currentWidgetSnapShot.parentNode,
           }),
         )
-        dispatch(executionActions.setResizingNodeIDsReducer([]))
+        dispatch(configActions.setResizingNodeIDsReducer([]))
 
         sendShadowMessageHandler(-1, "", [], 0, 0, 0, 0, 0, 0, 0, 0)
         trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.DRAG, {
@@ -220,7 +220,9 @@ export const useResizingUpdateRealTime = (isActive: boolean) => {
           )
         })
       }
-      dispatch(executionActions.batchUpdateWidgetLayoutInfoReducer(updateSlice))
+      dispatch(
+        layoutInfoActions.batchUpdateWidgetLayoutInfoReducer(updateSlice),
+      )
     }, 16)
   }, [dispatch])
 

apps/builder/src/page/App/components/ScaleSquare/components/ResizingAndDragContainer/index.tsx

@@ -25,10 +25,10 @@ import { getFirstDragShadowInfo } from "@/redux/currentApp/dragShadow/dragShadow
 import {
   getExecutionError,
   getExecutionResult,
-  getExecutionWidgetLayoutInfo,
   getIsDragging,
   getResizingComponentIDs,
 } from "@/redux/currentApp/executionTree/executionSelector"
+import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector"
 import store from "@/store"
 import { CopyManager } from "@/utils/copyManager"
 import { FocusManager } from "@/utils/focusManager"
@@ -72,7 +72,7 @@ export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
   const isEditMode = useSelector(getIsILLAEditMode)
   const selectedComponents = useSelector(getSelectedComponentDisplayNames)
   const executionResult = useSelector(getExecutionResult)
-  const layoutInfoResult = useSelector(getExecutionWidgetLayoutInfo)
+  const layoutInfoResult = useSelector(getClientWidgetLayoutInfo)
   const currentWidgetLayoutInfo = layoutInfoResult[displayName]
   const currentWidgetProps = get(executionResult, displayName, {})
 
@@ -126,7 +126,7 @@ export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
     const rootState = store.getState()
     const isEditMode = getIsILLAEditMode(rootState)
     const displayNameMapDepth = getComponentDisplayNameMapDepth(rootState)
-    const widgetExecutionLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+    const widgetExecutionLayoutInfo = getClientWidgetLayoutInfo(rootState)
 
     e.stopPropagation()