Merge pull request #3595 from illacloud/Release/4.1.3

Release/4.1.3

apps/builder/package.json

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

apps/cloud/package.json

@@ -34,6 +34,7 @@
     "@illa-public/user-data": "workspace:*",
     "@illa-public/user-role-utils": "workspace:*",
     "@illa-public/utils": "workspace:*",
+    "@illa-public/illa-markdown": "workspace:*",
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",

apps/cloud/src/page/workspace/components/ChangeLogModal/constants.ts

@@ -0,0 +1 @@
+export const CHANGE_LOG_NUM = 5

apps/cloud/src/page/workspace/components/ChangeLogModal/index.tsx

@@ -0,0 +1,94 @@
+import { ILLAMarkdown } from "@illa-public/illa-markdown"
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  Button,
+  CloseIcon,
+  Link,
+  Modal,
+  Timeline,
+  TimelineItem,
+  getColor,
+} from "@illa-design/react"
+import ChangeLogIcon from "@/assets/page/workspace/change-log-bg.svg?react"
+import { CHANGE_LOG_NUM } from "./constants"
+import { ChangeLogModalProps } from "./interface"
+import {
+  changeBgStyle,
+  changeLogContainerStyle,
+  closeIconStyle,
+  contentStyle,
+  headerStyle,
+  itemContainerStyle,
+  itemTitleStyle,
+  lineContainerStyle,
+  linkStyle,
+  modalMaskStyle,
+  modalStyle,
+} from "./style"
+
+const ChangeLogModal: FC<ChangeLogModalProps> = ({ onClose }) => {
+  const { t } = useTranslation()
+
+  const CHANGE_LOGS = Array.from(new Array(CHANGE_LOG_NUM)).map((_, index) => ({
+    content: t(`page.left.menu.changeLogs.${index + 1}.content`),
+    title: t(`page.left.menu.changeLogs.${index + 1}.title`),
+    changeLogLink: t(`page.left.menu.changeLogs.${index + 1}.changeLogLink`),
+  }))
+
+  return (
+    <Modal
+      visible
+      maskClosable={false}
+      footer={false}
+      css={modalStyle}
+      maskStyle={modalMaskStyle}
+      withoutPadding
+    >
+      <div css={changeLogContainerStyle}>
+        <div css={headerStyle}>
+          <span css={closeIconStyle} onClick={onClose}>
+            <CloseIcon size="12px" />
+          </span>
+          <span css={changeBgStyle}>
+            <ChangeLogIcon width="100%" height="100%" />
+          </span>
+        </div>
+        <div css={contentStyle}>
+          <Timeline>
+            {Array.isArray(CHANGE_LOGS) &&
+              CHANGE_LOGS?.map(({ content, changeLogLink, title }, i) => (
+                <TimelineItem
+                  key={title}
+                  index={i}
+                  css={lineContainerStyle}
+                  dotColor={getColor("techPurple", "01")}
+                >
+                  <div css={itemContainerStyle}>
+                    <span css={itemTitleStyle}>{title}</span>
+                    <ILLAMarkdown
+                      textString={content}
+                      textColor={getColor("grayBlue", "02")}
+                      urlColor={getColor("grayBlue", "02")}
+                    />
+                    <Link
+                      href={changeLogLink ?? ""}
+                      css={linkStyle}
+                      colorScheme="white"
+                      target="_blank"
+                    >
+                      <Button colorScheme={getColor("grayBlue", "02")}>
+                        {t("page.left.menu.changeLogs.read_more")}
+                      </Button>
+                    </Link>
+                  </div>
+                </TimelineItem>
+              ))}
+          </Timeline>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ChangeLogModal

apps/cloud/src/page/workspace/components/ChangeLogModal/interface.ts

@@ -0,0 +1,9 @@
+export interface ChangeLog {
+  content: string
+  title: string
+  changeLogLink: string
+}
+
+export interface ChangeLogModalProps {
+  onClose: () => void
+}

apps/cloud/src/page/workspace/components/ChangeLogModal/style.ts

@@ -0,0 +1,83 @@
+import { css } from "@emotion/react"
+import { applyMobileStyle } from "@illa-public/utils"
+import { getColor } from "@illa-design/react"
+
+export const modalStyle = css`
+  min-width: auto;
+  width: auto;
+  ${applyMobileStyle(css`
+    width: 716rem;
+    min-width: 716rem;
+  `)}
+`
+export const modalMaskStyle = css`
+  background-color: ${getColor("white", "05")};
+  backdrop-filter: blur(5px);
+`
+
+export const changeLogContainerStyle = css`
+  overflow: hidden;
+`
+
+export const headerStyle = css`
+  position: relative;
+`
+
+export const closeIconStyle = css`
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  line-height: 10px;
+  text-align: center;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${getColor("grayBlue", "02")};
+`
+export const contentStyle = css`
+  overflow-y: auto;
+  padding: 32px;
+  max-height: 480px;
+  width: 488px;
+  ${applyMobileStyle(css`
+    width: 100%;
+  `)}
+`
+export const lineContainerStyle = css`
+  padding: 0;
+  margin-bottom: 32px;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`
+
+export const itemContainerStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  ul,
+  ol {
+    padding-left: 16px;
+  }
+`
+
+export const itemTitleStyle = css`
+  color: ${getColor("grayBlue", "02")};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+`
+
+export const linkStyle = css`
+  display: flex;
+  padding: 0;
+`
+
+export const changeBgStyle = css`
+  display: flex;
+  width: 100%;
+`

apps/cloud/src/page/workspace/index.tsx

@@ -1,14 +1,30 @@
 import { LayoutAutoChange } from "@illa-public/layout-auto-change"
-import { FC } from "react"
+import { FC, useState } from "react"
+import ChangeLogModal from "./components/ChangeLogModal"
 import { MobileDashBoardLayout } from "./layout/mobile"
 import { PCDashBoardLayout } from "./layout/pc/"
 
 const Workspace: FC = () => {
+  const [changeLogVisible, setChangeLogVisible] = useState<boolean>(false)
+
+  const onOpenChangeLogModal = () => {
+    setChangeLogVisible(true)
+  }
+
   return (
-    <LayoutAutoChange
-      desktopPage={<PCDashBoardLayout />}
-      mobilePage={<MobileDashBoardLayout />}
-    />
+    <>
+      <LayoutAutoChange
+        desktopPage={
+          <PCDashBoardLayout onOpenChangeLogModal={onOpenChangeLogModal} />
+        }
+        mobilePage={
+          <MobileDashBoardLayout onOpenChangeLogModal={onOpenChangeLogModal} />
+        }
+      />
+      {changeLogVisible && (
+        <ChangeLogModal onClose={() => setChangeLogVisible(false)} />
+      )}
+    </>
   )
 }
 

apps/cloud/src/page/workspace/layout/interface.ts

@@ -1,6 +1,3 @@
-import { ReactNode } from "react"
-
 export interface WorkspaceLayoutProps {
-  children: ReactNode
-  onAddTeam?: () => void
+  onOpenChangeLogModal: () => void
 }

apps/cloud/src/page/workspace/layout/mobile/index.tsx

@@ -7,21 +7,27 @@ import { FC, useState } from "react"
 import { useSelector } from "react-redux"
 import { Outlet } from "react-router-dom"
 import { DashBoardDynamicMenu } from "@/page/workspace/components/DynamicMenu"
+import { WorkspaceLayoutProps } from "../interface"
 
-export const MobileDashBoardLayout: FC = () => {
+export const MobileDashBoardLayout: FC<WorkspaceLayoutProps> = ({
+  onOpenChangeLogModal,
+}) => {
   const isLogin = useSelector(getCurrentUserID)
   const [drawerVisible, setDrawerVisible] = useState(false)
 
+  const handleClickMenuItem = (key: string) => {
+    setDrawerVisible(false)
+    if (key === "change-log") {
+      onOpenChangeLogModal()
+    }
+  }
+
   return (
     <MobileCloudDashboardLayout
       setDrawerVisible={setDrawerVisible}
       drawerVisible={drawerVisible}
       bottomComponent={
-        <BottomList
-          onClickMenuItemCallback={() => {
-            setDrawerVisible(false)
-          }}
-        />
+        <BottomList onClickMenuItemCallback={handleClickMenuItem} />
       }
       dynamicMenu={
         <div>

apps/cloud/src/page/workspace/layout/pc/index.tsx

@@ -22,8 +22,11 @@ import { useModal } from "@illa-design/react"
 import { FullSectionLoading } from "@/components/FullSectionLoading"
 import { DashBoardDynamicMenu } from "@/page/workspace/components/DynamicMenu"
 import { updateTutorialViewed } from "@/services/user"
+import { WorkspaceLayoutProps } from "../interface"
 
-export const PCDashBoardLayout: FC = () => {
+export const PCDashBoardLayout: FC<WorkspaceLayoutProps> = ({
+  onOpenChangeLogModal,
+}) => {
   const currentTeamInfo = useSelector(getCurrentTeamInfo)
   const isLogin = useSelector(getCurrentUserID)
   const currentUserRole = currentTeamInfo?.myRole ?? USER_ROLE.VIEWER
@@ -42,6 +45,12 @@ export const PCDashBoardLayout: FC = () => {
     ACTION_MANAGE.EDIT_APP,
   )
 
+  const handleClickMenuItem = (key: string) => {
+    if (key === "change-log") {
+      onOpenChangeLogModal()
+    }
+  }
+
   useEffect(() => {
     if (
       !isTutorialViewed &&
@@ -82,7 +91,9 @@ export const PCDashBoardLayout: FC = () => {
           <DashBoardDynamicMenu />
         </div>
       }
-      bottomComponent={<BottomList />}
+      bottomComponent={
+        <BottomList onClickMenuItemCallback={handleClickMenuItem} />
+      }
     >
       {isLogin && (
         <Suspense fallback={<FullSectionLoading />}>