Merge pull request #468 from illa-family/feat/page

Feat/page

apps/builder/package.json

@@ -22,6 +22,8 @@
     "@fontsource/fira-code": "^4.5.10",
     "@illa-design/react": "*",
     "@reduxjs/toolkit": "^1.8.1",
+    "@sentry/react": "^7.17.3",
+    "@sentry/tracing": "^7.17.3",
     "@uiw/react-color": "^1.1.0",
     "@uiw/react-color-sketch": "^1.1.0",
     "@uiw/react-color-swatch": "^1.1.0",
@@ -53,17 +55,15 @@
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.1",
     "react-rnd": "^10.3.7",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.3",
     "react-use": "^17.4.0",
     "react-use-measure": "^2.1.1",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "remark-gfm": "^3.0.1",
     "tern": "^0.24.3",
     "toposort": "^2.0.2",
-    "uuid": "^8.3.2",
-    "@sentry/react": "^7.17.3",
-    "@sentry/tracing": "^7.17.3"
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",

apps/builder/src/App.tsx

@@ -1,5 +1,5 @@
 import { css, Global } from "@emotion/react"
-import { BrowserRouter } from "react-router-dom"
+import { BrowserRouter, RouterProvider } from "react-router-dom"
 import { globalStyle } from "./style"
 import { ConfigProvider } from "@illa-design/config-provider"
 import "@/api/base"
@@ -27,16 +27,14 @@ function App() {
   }, [currentUserLanguage, i18n])
 
   return (
-    <BrowserRouter>
-      <DndProvider backend={HTML5Backend}>
-        <GlobalDataProvider>
-          <ConfigProvider locale={configLanguage}>
-            <Global styles={css(globalStyle)} />
-            <ILLARoute />
-          </ConfigProvider>
-        </GlobalDataProvider>
-      </DndProvider>
-    </BrowserRouter>
+    <DndProvider backend={HTML5Backend}>
+      <GlobalDataProvider>
+        <ConfigProvider locale={configLanguage}>
+          <Global styles={css(globalStyle)} />
+          <RouterProvider router={ILLARoute} />
+        </ConfigProvider>
+      </GlobalDataProvider>
+    </DndProvider>
   )
 }
 

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

@@ -1,5 +1,6 @@
-import { FC, memo, useCallback, useState } from "react"
+import { FC, memo, useCallback, useState, MouseEvent } from "react"
 import {
+  addIconHotpotStyle,
   applyPanelBarOpenedIconStyle,
   panelBarHeaderStyle,
   panelBarItemAnimation,
@@ -8,7 +9,7 @@ import {
 } from "./style"
 import { PanelBarProps } from "./interface"
 import { AnimatePresence, motion } from "framer-motion"
-import { UpIcon } from "@illa-design/icon"
+import { PlusIcon, UpIcon } from "@illa-design/icon"
 
 export const PanelBar: FC<PanelBarProps> = memo((props: PanelBarProps) => {
   const {
@@ -17,6 +18,8 @@ export const PanelBar: FC<PanelBarProps> = memo((props: PanelBarProps) => {
     isOpened = true,
     saveToggleState,
     onIllaFocus,
+    isAddIcon = false,
+    addAction,
   } = props
   const [isOpenedState, setIsOpenedState] = useState(isOpened)
 
@@ -25,12 +28,23 @@ export const PanelBar: FC<PanelBarProps> = memo((props: PanelBarProps) => {
     setIsOpenedState(!isOpenedState)
   }, [isOpenedState, saveToggleState])
 
+  const handleClickAddIcon = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    addAction?.()
+  }
+
   return (
     <>
       <div css={panelBarHeaderStyle} onClick={handleToggle}>
         <span css={panelBarTitleStyle}>{title}</span>
         <span>
-          <UpIcon css={applyPanelBarOpenedIconStyle(isOpenedState)} />
+          {isAddIcon ? (
+            <div css={addIconHotpotStyle} onClick={handleClickAddIcon}>
+              <PlusIcon />
+            </div>
+          ) : (
+            <UpIcon css={applyPanelBarOpenedIconStyle(isOpenedState)} />
+          )}
         </span>
       </div>
       <AnimatePresence initial={false}>

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

@@ -4,6 +4,8 @@ export interface PanelBarProps {
   title: string
   children?: ReactNode
   isOpened?: boolean
+  isAddIcon?: boolean
+  addAction?: () => void
   saveToggleState?: (value: boolean) => void
   onIllaFocus?: () => void
 }

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

@@ -48,3 +48,19 @@ export const panelBarItemAnimation: Variants = {
   enter: { height: "auto", opacity: 1 },
   exit: { height: 0, opacity: 0 },
 }
+
+export const addIconHotpotStyle = css`
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
+  :hover {
+    color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  }
+  :active {
+    color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+  }
+`