Merge branch 'improve/improve_left_bar' into develop

apps/builder/src/components/CodeEditor/CodeMirror/extensions/completionSources/ILLAContextDesc/utils.tsx

@@ -40,4 +40,12 @@ export const ILLA_UTILS_DESC: Record<string, IILLAUtilsDesc> = {
  desc: "",
  usage: `utils.setGlobalDataValue({key:string,value:any})`,
  },
+ setLocalStorage: {
+ desc: "",
+ usage: `utils.setLocalStorage({key:string,value:any})`,
+ },
+ clearLocalStorage: {
+ desc: "",
+ usage: `utils.clearLocalStorage()`,
+ },
 }

apps/builder/src/components/IconHotSpot/style.ts

@@ -16,6 +16,7 @@ export const iconHotSpotContainerStyle = (
  display: flex;
  align-items: center;
  justify-content: center;
+ flex: none;
  :hover {
  color: ${activeColor};
  background-color: ${getColor("grayBlue", "09")};

apps/builder/src/components/Modal/Body/style.ts

@@ -5,4 +5,5 @@ export const applyModalBodyWrapperStyle = (footerHeight: number) => css`
  height: calc(100% - 48px - ${`${footerHeight}px`});
  cursor: auto;
  padding: 0 16px;
+ overflow-y: auto;
 `

apps/builder/src/components/Modal/Header/index.tsx

@@ -1,22 +1,33 @@
 import { FC } from "react"
-import { CloseIcon, DragPointIcon } from "@illa-design/react"
+import { Link } from "react-router-dom"
+import { CloseIcon, DocsIcon, DragPointIcon } from "@illa-design/react"
+import IconHotSpot from "@/components/IconHotSpot"
 import { HeaderProps } from "@/components/Modal/Header/interface"
 import {
- applyTitleStyle,
- closeButtonHotSpotStyle,
  dragIconStyle,
+ headerContainerStyle,
  headerWrapperStyle,
+ titleStyle,
 } from "@/components/Modal/Header/style"
 
 export const ModalHeader: FC<HeaderProps> = (props) => {
- const { title, canMove, onClose } = props
+ const { title, canMove, docLink, onClose } = props
  return (
  <div css={headerWrapperStyle}>
- {canMove && <DragPointIcon css={dragIconStyle} />}
- <span css={applyTitleStyle(canMove)}>{title}</span>
- <div css={closeButtonHotSpotStyle} onClick={onClose}>
- <CloseIcon />
+ <div css={headerContainerStyle}>
+ {canMove && <DragPointIcon css={dragIconStyle} />}
+ <span css={titleStyle}>{title}</span>
+ {docLink && (
+ <Link to={docLink} target="_blank">
+ <IconHotSpot>
+ <DocsIcon />
+ </IconHotSpot>
+ </Link>
+ )}
  </div>
+ <IconHotSpot onClick={onClose}>
+ <CloseIcon />
+ </IconHotSpot>
  </div>
  )
 }

apps/builder/src/components/Modal/Header/interface.ts

@@ -1,5 +1,6 @@
 export interface HeaderProps {
  title: string
+ docLink?: string
  canMove?: boolean
  onClose: () => void
 }

apps/builder/src/components/Modal/Header/style.ts

@@ -6,39 +6,34 @@ export const headerWrapperStyle = css`
  height: 48px;
  display: flex;
  align-items: center;
- justify-content: space-between;
+ justify-content: space-around;
  flex: none;
  padding: 16px;
+ padding-left: 4px;
+ padding-bottom: 8px;
  position: relative;
 `
 
-export const applyTitleStyle = (canMove?: boolean) => css`
+export const titleStyle = css`
  font-size: 16px;
  font-weight: 600;
  color: ${getColor("grayBlue", "02")};
- padding-left: ${canMove ? "8px" : "0px"};
  display: inline-block;
- width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
-`
-
-export const closeButtonHotSpotStyle = css`
- width: 24px;
- height: 24px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- position: absolute;
- right: 16px;
- color: ${getColor("grayBlue", "02")};
+ width: calc(100% - 64px);
+ flex: none;
 `
 
 export const dragIconStyle = css`
- position: absolute;
- left: 4px;
  color: ${getColor("grayBlue", "04")};
  font-size: 16px;
+ flex: none;
+`
+
+export const headerContainerStyle = css`
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ width: calc(100% - 32px);
 `

apps/builder/src/components/Modal/index.tsx

@@ -7,7 +7,8 @@ import { ModalProps } from "@/components/Modal/interface"
 import { applyModalWrapperStyle } from "@/components/Modal/style"
 
 export const BuilderModal: FC<ModalProps> = (props) => {
- const { bodyContent, title, footerContent, canMove, w, h, onClose } = props
+ const { bodyContent, title, footerContent, canMove, w, h, onClose, docLink } =
+ props
 
  const hasFooterChildren =
  (Array.isArray(footerContent) && footerContent.length > 0) ||
@@ -17,7 +18,12 @@ export const BuilderModal: FC<ModalProps> = (props) => {
 
  return (
  <div css={applyModalWrapperStyle(w, h)}>
- <ModalHeader title={title} onClose={onClose} canMove={canMove} />
+ <ModalHeader
+ title={title}
+ onClose={onClose}
+ canMove={canMove}
+ docLink={docLink}
+ />
  <ModalBody footerHeight={rect.height}>{bodyContent}</ModalBody>
  <ModalFooter
  hasFooterChildren={hasFooterChildren}

apps/builder/src/components/Modal/interface.ts

@@ -1,18 +1,25 @@
 import { ReactNode } from "react"
 
-export interface ModalProps {
+export interface BaseModalProps {
  title: string
  bodyContent: ReactNode
  footerContent?: ReactNode
+ docLink?: string
+ onClose: () => void
+}
+
+export interface ModalProps extends BaseModalProps {
+ docLink?: string
  canMove?: boolean
  w?: number
  h?: number
- onClose: () => void
 }
 
-export interface MovableModalProps {
- title: string
- bodyContent: ReactNode
- footerContent?: ReactNode
- onClose: () => void
+export interface MovableModalProps extends BaseModalProps {
+ defaultPosition?: {
+ x: number
+ y: number
+ width: number
+ height: number
+ }
 }

apps/builder/src/components/Modal/movableModal.tsx

@@ -8,18 +8,20 @@ import { MovableModalProps } from "@/components/Modal/interface"
 import { getIsDragging } from "@/redux/currentApp/executionTree/executionSelector"
 
 export const MovableModal: FC<MovableModalProps> = (props) => {
- const { bodyContent, title, footerContent, onClose } = props
+ const { bodyContent, title, footerContent, onClose, defaultPosition } = props
  const { width, height } = useWindowSize()
  const isDraggingInGlobal = useSelector(getIsDragging)
 
  return createPortal(
  <Rnd
- default={{
- x: width / 2 - 200,
- y: height - 300 - 263,
- width: 400,
- height: 263,
- }}
+ default={
+ defaultPosition ?? {
+ x: width / 2 - 200,
+ y: height - 300 - 263,
+ width: 400,
+ height: 263,
+ }
+ }
  style={{
  zIndex: 10,
  pointerEvents: isDraggingInGlobal ? "none" : "auto",

apps/builder/src/components/PanelBar/style.ts

@@ -1,6 +1,6 @@
 import { SerializedStyles, css } from "@emotion/react"
 import { Variants } from "framer-motion"
-import { globalColor, illaPrefix } from "@illa-design/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/react"
 
 const getPanelBarHeaderHeight = (size: "default" | "small") => {
  switch (size) {
@@ -75,7 +75,7 @@ export const applyPanelBarTitleStyle = (
 ): SerializedStyles => {
  const fontStyle = getPanelTitleFontStyle(size)
  return css`
- color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+ color: ${getColor("grayBlue", "02")};
  ${fontStyle};
  `
 }
@@ -120,6 +120,7 @@ export const panelBarItemContentStyle = css`
  color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
  position: relative;
  height: auto;
+ padding-bottom: 4px;
 `
 
 export const panelBarItemContainerAnimationVariants: Variants = {

apps/builder/src/page/App/components/Actions/index.tsx → apps/builder/src/page/App/Module/ActionEditor/index.tsx

@@ -9,9 +9,9 @@ import { DragBar } from "@/page/App/components/Actions/DragBar"
 import { getActionMixedList } from "@/redux/currentApp/action/actionSelector"
 import { FocusManager } from "@/utils/focusManager"
 import { resourceContextHelper } from "@/utils/mixpanelHelper"
-import { ActionGuidePanel } from "./ActionGuidePanel"
-import { ActionList } from "./ActionList"
-import { ActionPanel } from "./ActionPanel"
+import { ActionGuidePanel } from "../../components/Actions/ActionGuidePanel"
+import { ActionList } from "../../components/Actions/ActionList"
+import { ActionPanel } from "../../components/Actions/ActionPanel"
 import { applyActionEditorStyle, contentContainerStyle } from "./styles"
 
 const ActionEditorDefaultHeight = 320

apps/builder/src/page/App/components/DataWorkspace/components/ActionSpaceTree/index.tsx → apps/builder/src/page/App/Module/DataWorkspace/components/ActionSpaceTree/index.tsx

@@ -1,29 +1,25 @@
 import { FC, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { useDispatch, useSelector } from "react-redux"
-import { omit } from "@illa-design/react"
 import { PanelBar } from "@/components/PanelBar"
-import { WorkSpaceTreeItem } from "@/page/App/components/DataWorkspace/components/WorkSpaceTreeItem"
-import { hiddenFields } from "@/page/App/components/DataWorkspace/constant"
 import { getSelectedAction } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
 import { getActionList } from "@/redux/currentApp/action/actionSelector"
-import { getActionExecutionResultArray } from "@/redux/currentApp/executionTree/executionSelector"
+import { getActionExecutionResultWithOutIgnoreKey } from "@/redux/currentApp/executionTree/executionSelector"
 import { FocusManager } from "@/utils/focusManager"
+import { BaseDataItem } from "../BaseDataItem"
 
 export const ActionSpaceTree: FC = () => {
  const { t } = useTranslation()
  const dispatch = useDispatch()
 
- const actionExecutionArray = useSelector(getActionExecutionResultArray)
+ const actionExecution = useSelector(getActionExecutionResultWithOutIgnoreKey)
  const actionList = useSelector(getActionList)
  const selectedAction = useSelector(getSelectedAction)
 
  const handleActionSelect = useCallback(
- (selectedKeys: string[]) => {
- const action = actionList.find(
- (item) => item.displayName === selectedKeys[0],
- )
+ (selectedKey: string) => {
+ const action = actionList.find((item) => item.displayName === selectedKey)
  action && dispatch(configActions.changeSelectedAction(action))
  },
  [actionList, dispatch],
@@ -32,22 +28,23 @@ export const ActionSpaceTree: FC = () => {
  return (
  <PanelBar
  title={`${t("editor.data_work_space.actions_title")}(${
- actionExecutionArray.length
+ Object.keys(actionExecution).length
  })`}
  onIllaFocus={() => {
  FocusManager.switchFocus("data_action")
  }}
  destroyChildrenWhenClose
  >
- {actionExecutionArray.map((data) => (
- <WorkSpaceTreeItem
- key={data.displayName}
- title={data.displayName}
- data={omit(data, hiddenFields)}
- handleSelect={handleActionSelect}
+ {Object.keys(actionExecution).map((actionDisplayName) => (
+ <BaseDataItem
+ key={actionDisplayName}
+ title={actionDisplayName}
  level={0}
- isSelected={selectedAction?.displayName === data.displayName}
- parentKey={data.displayName}
+ value={actionExecution[actionDisplayName] as Record<string, unknown>}
+ haveMoreAction
+ isSelected={selectedAction?.displayName === actionDisplayName}
+ onClick={handleActionSelect}
+ dataType="action"
  />
  ))}
  </PanelBar>