Merge pull request #3613 from illacloud/Release/4.1.7

Release/4.1.7

Author: Wangtaofeng

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

apps/builder/src/page/App/Module/CanvasPanel/index.tsx

@@ -1,7 +1,10 @@
 import { forwardRef, useSyncExternalStore } from "react"
 import { useSelector } from "react-redux"
 import { DotPanel } from "@/page/App/components/DotPanel"
-import { getIsILLAEditMode } from "@/redux/config/configSelector"
+import {
+  getIsILLAEditMode,
+  getIsILLAPreviewMode,
+} from "@/redux/config/configSelector"
 import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
 import { UploadDetailButton } from "../UploadDetail"
 import { updateFileDetailStore } from "../UploadDetail/store"
@@ -13,6 +16,7 @@ export const CanvasPanel = forwardRef<HTMLDivElement, CanvasPanelProps>(
     const { ...otherProps } = props
 
     const isEditMode = useSelector(getIsILLAEditMode)
+    const isEditPreviewMode = useSelector(getIsILLAPreviewMode)
     const executionResult = useSelector(getExecutionResult)
     const uploadFiles = useSyncExternalStore(
       updateFileDetailStore.subscribe,
@@ -24,7 +28,11 @@ export const CanvasPanel = forwardRef<HTMLDivElement, CanvasPanelProps>(
     }
 
     return (
-      <div {...otherProps} ref={ref} css={applyScaleContainerStyle(isEditMode)}>
+      <div
+        {...otherProps}
+        ref={ref}
+        css={applyScaleContainerStyle(isEditPreviewMode, isEditMode)}
+      >
         <DotPanel />
         {uploadFiles.length > 0 && <UploadDetailButton />}
       </div>

apps/builder/src/page/App/Module/CanvasPanel/style.ts

@@ -1,12 +1,15 @@
 import { css } from "@emotion/react"
 
-export const applyScaleContainerStyle = (isEditorMode: boolean) => {
+export const applyScaleContainerStyle = (
+  isEditorPreview: boolean,
+  isEditorMode: boolean,
+) => {
   return css`
     box-sizing: border-box;
     min-width: 148px;
     height: 100%;
     min-height: 280px;
-    background: ${isEditorMode ? "#f7f8fa" : "#fff"};
+    background: ${isEditorPreview ? "#f7f8fa" : "#fff"};
     overflow: auto;
     flex: 1;
     position: relative;

apps/builder/src/page/App/Module/PageNavBar/AppSizeButtonGroup/style.ts

@@ -3,9 +3,10 @@ import { getColor } from "@illa-design/react"
 
 export const previewButtonGroupWrapperStyle = css`
   display: flex;
+  pointer-events: auto;
+  position: relative;
   align-items: center;
   height: 32px;
-  position: relative;
 `
 
 export const appSizeContainerStyle = css`

apps/builder/src/page/App/Module/PageNavBar/WindowIcons/index.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
 import { trackInEditor } from "@/utils/mixpanelHelper"
-import { lineStyle, windowIconBodyStyle, windowIconStyle } from "./style"
+import { windowIconBodyStyle, windowIconStyle } from "./style"
 
 export const WindowIcons = () => {
   const dispatch = useDispatch()
@@ -48,7 +48,11 @@ export const WindowIcons = () => {
   }, [bottomPanelVisible, dispatch])
 
   return (
-    <>
+    <div
+      style={{
+        pointerEvents: "auto",
+      }}
+    >
       <span css={windowIconBodyStyle} onClick={handleClickLeftWindowIcon}>
         <WindowLeftIcon _css={windowIconStyle(leftPanelVisible)} />
       </span>
@@ -58,7 +62,6 @@ export const WindowIcons = () => {
       <span css={windowIconBodyStyle} onClick={handleClickRightWindowIcon}>
         <WindowRightIcon _css={windowIconStyle(rightPanelVisible)} />
       </span>
-      <span css={lineStyle} />
-    </>
+    </div>
   )
 }

apps/builder/src/page/App/Module/PageNavBar/index.tsx

@@ -6,11 +6,11 @@ import {
   showShareAppModal,
 } from "@illa-public/user-role-utils"
 import {
+  fromNow,
   getILLABuilderURL,
   getILLACloudURL,
   isCloudVersion,
 } from "@illa-public/utils"
-import { fromNow } from "@illa-public/utils"
 import { FC, MouseEvent, useCallback, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useDispatch, useSelector } from "react-redux"
@@ -45,6 +45,7 @@ import { duplicateApp } from "@/page/App/Module/PageNavBar/utils"
 import {
   getIsILLAEditMode,
   getIsILLAGuideMode,
+  getIsILLAPreviewMode,
   getIsOnline,
   isOpenDebugger,
 } from "@/redux/config/configSelector"
@@ -54,7 +55,6 @@ import {
   getCurrentAppWaterMarkConfig,
 } from "@/redux/currentApp/appInfo/appInfoSelector"
 import { appInfoActions } from "@/redux/currentApp/appInfo/appInfoSlice"
-import { getViewportSizeSelector } from "@/redux/currentApp/components/componentsSelector"
 import { getExecutionDebuggerData } from "@/redux/currentApp/executionTree/executionSelector"
 import {
   fetchDeployApp,
@@ -98,10 +98,9 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
   const debuggerData = useSelector(getExecutionDebuggerData)
   const debugMessageNumber = debuggerData ? Object.keys(debuggerData).length : 0
   const isEditMode = useSelector(getIsILLAEditMode)
+  const isPreviewMode = useSelector(getIsILLAPreviewMode)
   const isGuideMode = useSelector(getIsILLAGuideMode)
   const teamInfo = useSelector(getCurrentTeamInfo)!!
-  const { viewportSizeType } = useSelector(getViewportSizeSelector)
-  const showCustomInputs = viewportSizeType === "custom"
   const upgradeModal = useUpgradeModal()
 
   const [deployLoading, setDeployLoading] = useState<boolean>(false)
@@ -365,9 +364,9 @@ export const PageNavBar: FC<PageNavBarProps> = (props) => {
           )}
         </div>
       </div>
-      <div css={viewControlStyle(showCustomInputs)}>
+      <div css={viewControlStyle()}>
         {isEditMode && <WindowIcons />}
-        <AppSizeButtonGroup />
+        {isPreviewMode && <AppSizeButtonGroup />}
       </div>
       <div css={rightContentStyle}>
         {isCloudVersion && !isGuideMode && (

apps/builder/src/page/App/Module/PageNavBar/style.tsx

@@ -20,11 +20,18 @@ export const rowCenter = css`
   align-items: center;
 `
 
-export const viewControlStyle = (showInput: boolean) => css`
+export const viewControlStyle = () => css`
+  pointer-events: none;
   color: ${getColor("grayBlue", "04")};
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  ${rowCenter};
 
-  ${rowCenter}
-  margin-right: ${showInput ? 296 : 0}px;
   & > svg {
     &:hover {
       color: ${getColor("grayBlue", "02")};

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

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom"
 import { applyViewportContainerWrapperStyle } from "@/page/App/components/DotPanel/style"
 import {
   getIllaMode,
+  getIsILLAPreviewMode,
   getIsILLAProductMode,
 } from "@/redux/config/configSelector"
 import { getViewportSizeSelector } from "@/redux/currentApp/components/componentsSelector"
@@ -34,6 +35,8 @@ export const DotPanel: FC = () => {
   const isProductionMode = useSelector(getIsILLAProductMode)
   const viewportSize = useSelector(getViewportSizeSelector)
 
+  const isPreviewMode = useSelector(getIsILLAPreviewMode)
+
   const { currentPageIndex, pageSortedKey, homepageDisplayName } =
     rootExecutionProps
   let { pageName } = useParams()
@@ -99,8 +102,8 @@ export const DotPanel: FC = () => {
         <div
           css={applyViewportContainerWrapperStyle(
             mode,
-            viewportSize.viewportWidth,
-            viewportSize.viewportHeight,
+            isPreviewMode ? viewportSize.viewportWidth : undefined,
+            isPreviewMode ? viewportSize.viewportHeight : undefined,
           )}
         >
           <RenderPage

apps/builder/src/page/App/components/DotPanel/style.ts

@@ -126,7 +126,7 @@ export const applyViewportContainerWrapperStyle = (
   height?: number,
 ) => {
   const borderStyle =
-    mode === "edit" && width != undefined
+    mode === "preview" && width != undefined
       ? css`
           border: 1px solid ${getColor("grayBlue", "09")};
         `

apps/builder/src/page/App/components/InspectPanel/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx

@@ -82,7 +82,7 @@ export const EventAndMethodLabel: FC<EventAndMethodLabelProps> = (props) => {
       trigger="click"
       showArrow={false}
       position={leftPanelVisible ? "left-start" : "top-start"}
-      clickOutsideToClose
+      clickOutsideToClose={false}
       onVisibleChange={(visible) => {
         if (visible) {
           trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SHOW, {