diff --git a/apps/builder/src/components/PanelBar/style.ts b/apps/builder/src/components/PanelBar/style.ts index b06dc17ba7..d9817b59b3 100644 --- a/apps/builder/src/components/PanelBar/style.ts +++ b/apps/builder/src/components/PanelBar/style.ts @@ -51,8 +51,8 @@ export const panelBarItemAnimation: Variants = { export const addIconHotpotStyle = css` font-size: 12px; - width: 24px; - height: 24px; + width: 16px; + height: 16px; display: flex; align-items: center; justify-content: center; diff --git a/apps/builder/src/middleware/redux/reduxAsync.ts b/apps/builder/src/middleware/redux/reduxAsync.ts index 1fee4a10fa..b44f02b5a1 100644 --- a/apps/builder/src/middleware/redux/reduxAsync.ts +++ b/apps/builder/src/middleware/redux/reduxAsync.ts @@ -356,12 +356,12 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { addedSectionName, } = action.payload as AddTargetPageSectionPayload const pageNode = searchDsl(getCanvas(store.getState()), pageName) - const addSectionNode = searchDsl( - getCanvas(store.getState()), - addedSectionName, + if (!pageNode) break + const addSectionNode = pageNode.childrenNode.find( + (node) => node.showName === addedSectionName, ) + if (!addSectionNode) break - if (!pageNode || !addSectionNode) break const WSPagePayload = transformComponentReduxPayloadToWsPayload( pageNode, ) diff --git a/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/index.tsx b/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/index.tsx index 284756d11c..8642ddbb67 100644 --- a/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/index.tsx +++ b/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/index.tsx @@ -1,7 +1,12 @@ import { FC, useCallback } from "react" import { PanelBar } from "@/components/PanelBar" import { useTranslation } from "react-i18next" -import { homePageIconStyle, pageItemWrapperStyle, pageNameStyle } from "./style" +import { + homePageIconHotSpot, + homePageIconStyle, + pageItemWrapperStyle, + pageNameStyle, +} from "./style" import { PageItemProps } from "./interface" import { ReactComponent as HomepageIcon } from "@/assets/dataWorkspace/homepage.svg" import { useDispatch, useSelector } from "react-redux" @@ -35,7 +40,9 @@ export const PageItem: FC = (props) => { }} > {pageName} - {isHomePage && } +
+ {isHomePage && } +
) diff --git a/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/style.ts b/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/style.ts index d359622f0a..fcd15ea22b 100644 --- a/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/style.ts +++ b/apps/builder/src/page/App/components/DataWorkspace/components/PageSpaceTree/style.ts @@ -7,6 +7,14 @@ export const pageNameStyle = css` font-weight: 500; ` +export const homePageIconHotSpot = css` + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; +` + export const homePageIconStyle = css` font-size: 12px; width: 12px; @@ -23,6 +31,7 @@ export const pageItemWrapperStyle = (isSelected: boolean) => { width: 100%; height: 24px; cursor: pointer; + font-family: "Fira Code", monospace; background-color: ${isSelected ? globalColor(`--${illaPrefix}-techPurple-07`) : globalColor(`--${illaPrefix}-white-01`)}; diff --git a/apps/builder/src/page/App/components/DotPanel/renderSection.tsx b/apps/builder/src/page/App/components/DotPanel/renderSection.tsx index f85b6e61fe..ef4be23f94 100644 --- a/apps/builder/src/page/App/components/DotPanel/renderSection.tsx +++ b/apps/builder/src/page/App/components/DotPanel/renderSection.tsx @@ -35,6 +35,10 @@ import { disabledHorizontalBarWrapperStyle, applyLeftAnimationWrapperStyle, applyRightAnimationWrapperStyle, + leftWidthTipsStyle, + rightWidthTipsStyle, + headerHeightTipsStyle, + footerHeightTipsStyle, } from "./style" import { RenderComponentCanvas } from "./renderComponentCanvas" import useMeasure from "react-use-measure" @@ -47,7 +51,7 @@ import { import { SECTION_POSITION } from "@/redux/currentApp/editor/components/componentsState" import { PreIcon, NextIcon } from "@illa-design/react" import { motion, AnimatePresence } from "framer-motion" -import { getExecutionResult } from "../../../../redux/currentApp/executionTree/executionSelector" +import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector" import { useParams } from "react-router-dom" export const HEADER_MIN_HEIGHT = 96 @@ -55,7 +59,7 @@ export const FOOTER_MIN_HEIGHT = 96 export const LEFT_MIN_WIDTH = 240 export const RIGHT_MIN_WIDTH = 240 export const BODY_MIN_WIDTH = 384 -export const BODY_MIN_HEIGHT = 512 +export const BODY_MIN_HEIGHT = 320 export const RenderSection = forwardRef( (props, ref) => { @@ -142,7 +146,8 @@ export const RenderHeaderSection = forwardRef< leftPosition, rightPosition, } = props - const isActive = useRef(false) + const [isResizeActive, setIsResizeActive] = useState(false) + const [heightPX, setHeightPX] = useState(topHeight) const [containerBoundRef, containerBound] = useMeasure() const containerRef = useRef( null, @@ -180,9 +185,15 @@ export const RenderHeaderSection = forwardRef< viewPath, viewSortedKey, ]) + + const handleClickMoveBar = () => { + setHeightPX(topHeight) + setIsResizeActive(true) + } + useEffect(() => { const mouseMoveListener = (e: globalThis.MouseEvent) => { - if (isActive.current) { + if (isResizeActive) { const { clientY } = e let currentPointPositionY = clientY - offsetTop let otherPanelHeightPX = footerHeight @@ -206,6 +217,7 @@ export const RenderHeaderSection = forwardRef< currentPointPositionY = containerHeight - BODY_MIN_HEIGHT - otherPanelHeightPX } + setHeightPX(currentPointPositionY) dispatch( componentsActions.updateTargetPagePropsReducer({ pageName: currentPageDisplayName, @@ -219,7 +231,7 @@ export const RenderHeaderSection = forwardRef< } const mouseUpListener = () => { - isActive.current = false + setIsResizeActive(false) } document.addEventListener("mousemove", mouseMoveListener) document.addEventListener("mouseup", mouseUpListener) @@ -232,6 +244,7 @@ export const RenderHeaderSection = forwardRef< currentPageDisplayName, dispatch, footerHeight, + isResizeActive, offsetTop, ]) const [isInSection, setIsInSection] = useState(false) @@ -312,10 +325,6 @@ export const RenderHeaderSection = forwardRef< (node) => node.displayName === currentViewDisplayName, ) - const handleClickMoveBar = () => { - isActive.current = true - } - return (
{isInSection && mode === "edit" && + !isResizeActive && (leftPosition === SECTION_POSITION.TOP || leftPosition === SECTION_POSITION.FULL) && (
)} + {isResizeActive && ( +
{heightPX.toFixed(0)}px
+ )} ) }) @@ -391,6 +405,8 @@ export const RenderFooterSection = forwardRef< rightPosition, } = props const executionResult = useSelector(getExecutionResult) + const [isResizeActive, setIsResizeActive] = useState(false) + const [heightPX, setHeightPX] = useState(bottomHeight) const sectionNodeProps = executionResult[sectionNode.displayName] || {} const { viewSortedKey, @@ -431,17 +447,16 @@ export const RenderFooterSection = forwardRef< null, ) as MutableRefObject - const isActive = useRef(false) - const dispatch = useDispatch() const handleClickMoveBar = () => { - isActive.current = true + setHeightPX(bottomHeight) + setIsResizeActive(true) } useEffect(() => { const mouseMoveListener = (e: globalThis.MouseEvent) => { - if (isActive.current) { + if (isResizeActive) { const { clientY } = e let currentPointPositionY = containerHeight - (clientY - offsetTop) let otherPanelHeightPX = headerHeight @@ -466,6 +481,7 @@ export const RenderFooterSection = forwardRef< currentPointPositionY = containerHeight - BODY_MIN_HEIGHT - otherPanelHeightPX } + setHeightPX(currentPointPositionY) dispatch( componentsActions.updateTargetPagePropsReducer({ pageName: currentPageDisplayName, @@ -479,7 +495,7 @@ export const RenderFooterSection = forwardRef< } const mouseUpListener = () => { - isActive.current = false + setIsResizeActive(false) } document.addEventListener("mousemove", mouseMoveListener) document.addEventListener("mouseup", mouseUpListener) @@ -492,6 +508,7 @@ export const RenderFooterSection = forwardRef< currentPageDisplayName, dispatch, headerHeight, + isResizeActive, offsetTop, ]) @@ -581,6 +598,7 @@ export const RenderFooterSection = forwardRef< > {isInSection && mode === "edit" && + !isResizeActive && (leftPosition === SECTION_POSITION.BOTTOM || leftPosition === SECTION_POSITION.FULL) && ( )} + {isResizeActive && ( +
{heightPX.toFixed(0)}px
+ )} ) }) @@ -682,7 +704,8 @@ export const RenderLeftSection = forwardRef< ]) const [isInSection, setIsInSection] = useState(false) const [animationComplete, setAnimationComplete] = useState(true) - const isActive = useRef(false) + const [isResizeActive, setIsResizeActive] = useState(false) + const [presetWidth, setPresetWidth] = useState(0) const componentNode = sectionNode.childrenNode.find( (node) => node.displayName === currentViewDisplayName, @@ -696,12 +719,14 @@ export const RenderLeftSection = forwardRef< const dispatch = useDispatch() const handleClickMoveBar = () => { - isActive.current = true + const presetWidth = (leftWidth / containerWidth) * 100 + setPresetWidth(presetWidth) + setIsResizeActive(true) } useEffect(() => { const mouseMoveListener = (e: globalThis.MouseEvent) => { - if (isActive.current) { + if (isResizeActive) { const { clientX } = e let currentPointPositionX = clientX - offsetLeft let otherPanelWidthPX = rightWidth @@ -725,6 +750,7 @@ export const RenderLeftSection = forwardRef< } const presetWidth = (currentPointPositionX / containerWidth) * 100 const otherPanelWidth = (otherPanelWidthPX / containerWidth) * 100 + setPresetWidth(presetWidth) dispatch( componentsActions.updateTargetPagePropsReducer({ pageName: currentPageDisplayName, @@ -738,7 +764,7 @@ export const RenderLeftSection = forwardRef< } const mouseUpListener = () => { - isActive.current = false + setIsResizeActive(false) } document.addEventListener("mousemove", mouseMoveListener) document.addEventListener("mouseup", mouseUpListener) @@ -746,7 +772,14 @@ export const RenderLeftSection = forwardRef< document.removeEventListener("mousemove", mouseMoveListener) document.removeEventListener("mouseup", mouseUpListener) } - }, [containerWidth, currentPageDisplayName, dispatch, offsetLeft, rightWidth]) + }, [ + containerWidth, + currentPageDisplayName, + dispatch, + isResizeActive, + offsetLeft, + rightWidth, + ]) const onMouseEnter = useCallback(() => { setIsInSection(true) @@ -812,6 +845,7 @@ export const RenderLeftSection = forwardRef<
{isInSection && mode === "edit" && + !isResizeActive && (leftPosition === SECTION_POSITION.BOTTOM || leftPosition === SECTION_POSITION.CENTER) && (
)} + {isResizeActive && ( +
{presetWidth.toFixed(0)}%
+ )} @@ -970,19 +1008,22 @@ export const RenderRightSection = forwardRef< null, ) as MutableRefObject - const isActive = useRef(false) + const [isResizeActive, setIsResizeActive] = useState(false) + const [presetWidth, setPresetWidth] = useState(0) const [isInSection, setIsInSection] = useState(false) const [animationComplete, setAnimationComplete] = useState(true) const dispatch = useDispatch() const handleClickMoveBar = () => { - isActive.current = true + const presetWidth = (rightWidth / containerWidth) * 100 + setPresetWidth(presetWidth) + setIsResizeActive(true) } useEffect(() => { const mouseMoveListener = (e: globalThis.MouseEvent) => { - if (isActive.current) { + if (isResizeActive) { const { clientX } = e let otherPanelWidthPX = leftWidth let currentPointPositionX = containerWidth - (clientX - offsetLeft) @@ -1006,6 +1047,7 @@ export const RenderRightSection = forwardRef< } const presetWidth = (currentPointPositionX / containerWidth) * 100 const otherPanelWidth = (otherPanelWidthPX / containerWidth) * 100 + setPresetWidth(presetWidth) dispatch( componentsActions.updateTargetPagePropsReducer({ @@ -1020,7 +1062,7 @@ export const RenderRightSection = forwardRef< } const mouseUpListener = () => { - isActive.current = false + setIsResizeActive(false) } document.addEventListener("mousemove", mouseMoveListener) document.addEventListener("mouseup", mouseUpListener) @@ -1028,7 +1070,14 @@ export const RenderRightSection = forwardRef< document.removeEventListener("mousemove", mouseMoveListener) document.removeEventListener("mouseup", mouseUpListener) } - }, [containerWidth, currentPageDisplayName, dispatch, leftWidth, offsetLeft]) + }, [ + containerWidth, + currentPageDisplayName, + dispatch, + isResizeActive, + leftWidth, + offsetLeft, + ]) const onMouseEnter = useCallback(() => { setIsInSection(true) @@ -1094,6 +1143,7 @@ export const RenderRightSection = forwardRef<
{isInSection && mode === "edit" && + !isResizeActive && (rightPosition === SECTION_POSITION.BOTTOM || rightPosition === SECTION_POSITION.CENTER) && (
)} + {isResizeActive && ( +
{presetWidth.toFixed(0)}%
+ )} diff --git a/apps/builder/src/page/App/components/DotPanel/style.ts b/apps/builder/src/page/App/components/DotPanel/style.ts index 8422fa4665..1735b3a27f 100644 --- a/apps/builder/src/page/App/components/DotPanel/style.ts +++ b/apps/builder/src/page/App/components/DotPanel/style.ts @@ -390,6 +390,7 @@ export const applyLeftAnimationWrapperStyle = (isFold: boolean) => { visibility: ${!isFold ? "visible" : "hidden"}; display: flex; flex-direction: row; + position: relative; ` } @@ -402,3 +403,39 @@ export const applyRightAnimationWrapperStyle = (isFold: boolean) => { flex-direction: row-reverse; ` } + +export const basicTipsStyle = css` + position: absolute; + padding: 2px 4px; + background-color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; + border: 1px solid ${globalColor(`--${illaPrefix}-white-01`)}; + border-radius: 4px; + color: white; + user-select: none; + pointer-events: none; + font-size: 12px; + overflow: hidden; +` + +export const leftWidthTipsStyle = css` + ${basicTipsStyle}; + right: -35px; + top: calc(50% - 10px); +` +export const rightWidthTipsStyle = css` + ${basicTipsStyle}; + left: -35px; + top: calc(50% - 10px); +` + +export const headerHeightTipsStyle = css` + ${basicTipsStyle}; + bottom: -20px; + left: calc(50% - 18px); +` + +export const footerHeightTipsStyle = css` + ${basicTipsStyle}; + top: -20px; + left: calc(50% - 18px); +` diff --git a/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts index 33df6b5746..70e64e8517 100644 --- a/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts +++ b/apps/builder/src/page/App/components/PagePanel/Components/LayoutSelect/style.ts @@ -12,7 +12,7 @@ export const layoutSelectWrapperStyle = css` export const layoutOptionsPanelWrapperStyle = css` padding: 16px; background-color: ${globalColor(`--${illaPrefix}-white-01`)}; - box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16); + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); border-radius: 8px; display: grid; gap: 16px; @@ -40,6 +40,7 @@ export const applyLayoutOptionItemIconStyle = (isSelected: boolean) => { ? globalColor(`--${illaPrefix}-techPurple-01`) : "transparent"}; cursor: pointer; + transition: all 0.2s ease-in-out 0s; :hover { border: 1px solid ${globalColor(`--${illaPrefix}-techPurple-01`)}; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);