Merge branch 'feat/app' into develop

illacloud · Jul 6, 2023 · 9028f2b · 9028f2b
2 parents b2422ec + 79d83ea
commit 9028f2b
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 15 deletions.
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx b/apps/builder/src/page/Dashboard/DashboardApps/AppCard/index.tsx
@@ -124,6 +124,7 @@ export const AppCard: FC<AppCardProps> = (props) => {
  {canEditApp ? (
  <Button
  size="small"
+ variant="text"
  colorScheme="grayBlue"
  leftIcon={<PenIcon />}
  onClick={() => {

diff --git a/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts b/apps/builder/src/page/Dashboard/DashboardApps/AppCardActionItem/utils.ts
@@ -1,4 +1,5 @@
-import { fetchCopyApp } from "@/services/apps"
+import { BASIC_APP_CONFIG } from "@/config/newAppConfig"
+import { fetchCopyApp, fetchCreateApp } from "@/services/apps"
 
 const APP_NAME_MAX_LENGTH = 128
 const COPY_SUFFIX = " Copy"
@@ -7,3 +8,10 @@ export const duplicateApp = (appId: string, appName?: string) => {
  const newAppName = `${(appName || "").slice(0, trimmedLength)}${COPY_SUFFIX}`
  return fetchCopyApp(appId, newAppName)
 }
+
+export const createApp = (appName = "Untitled app") => {
+ return fetchCreateApp({
+ appName,
+ initScheme: BASIC_APP_CONFIG,
+ })
+}
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx b/apps/builder/src/page/Dashboard/DashboardApps/contentBody.tsx
@@ -2,7 +2,15 @@ import { FC, useEffect, useMemo } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { useAsyncValue, useNavigate, useParams } from "react-router-dom"
 import useMeasure from "react-use-measure"
-import { Empty, List } from "@illa-design/react"
+import {
+ Button,
+ Empty,
+ EmptyIcon,
+ List,
+ PlusIcon,
+ globalColor,
+ illaPrefix,
+} from "@illa-design/react"
 import {
  ILLA_MIXPANEL_BUILDER_PAGE_NAME,
  ILLA_MIXPANEL_EVENT_TYPE,
@@ -15,16 +23,19 @@ import { track } from "@/utils/mixpanelHelper"
 import {
  CARD_GAP_SIZE,
  CARD_WIDTH,
+ emptyStyle,
  fullWidthStyle,
  listContainerStyle,
 } from "./style"
 
 interface AppsContentBodyProps {
  canEditApp: boolean
+ loading: boolean
+ onCreatedApp: () => void
 }
 
 export const AppsContentBody: FC<AppsContentBodyProps> = (props) => {
- const { canEditApp } = props
+ const { canEditApp, loading, onCreatedApp } = props
  const { data: appsList } = useAsyncValue() as {
  data: DashboardApp[]
  }
@@ -120,7 +131,34 @@ export const AppsContentBody: FC<AppsContentBodyProps> = (props) => {
  }}
  />
  )}
- {finalAppsList.length == 0 && <Empty paddingVertical="120px" />}
+ {finalAppsList.length === 0 && (
+ <Empty
+ paddingVertical="120px"
+ icon={
+ <EmptyIcon
+ size="48px"
+ color={globalColor(`--${illaPrefix}-grayBlue-02`)}
+ />
+ }
+ description={
+ <div css={emptyStyle}>
+ <div>Empty</div>
+ <div>
+ <Button
+ colorScheme="grayBlue"
+ loading={loading}
+ leftIcon={<PlusIcon />}
+ onClick={() => {
+ onCreatedApp()
+ }}
+ >
+ Create your first app
+ </Button>
+ </div>
+ </div>
+ }
+ />
+ )}
  </div>
  )
 }
diff --git a/apps/builder/src/page/Dashboard/DashboardApps/index.tsx b/apps/builder/src/page/Dashboard/DashboardApps/index.tsx
@@ -10,7 +10,7 @@ import {
  useNavigate,
  useParams,
 } from "react-router-dom"
-import { Button, useMessage } from "@illa-design/react"
+import { Button, PlusIcon, useMessage } from "@illa-design/react"
 import { BASIC_APP_CONFIG } from "@/config/newAppConfig"
 import { Avatar } from "@/illa-public-component/Avatar"
 import {
@@ -73,7 +73,10 @@ export const DashboardApps: FC = () => {
  ACTION_MANAGE.CREATE_APP,
  )
 
- const createApp = useCallback(() => {
+ const handleCreateApp = useCallback(() => {
+ track(ILLA_MIXPANEL_EVENT_TYPE.CLICK, ILLA_MIXPANEL_BUILDER_PAGE_NAME.APP, {
+ element: "create_new_app",
+ })
  if (loading) return
  setLoading(true)
  fetchCreateApp({
@@ -156,15 +159,9 @@ export const DashboardApps: FC = () => {
  <Button
  ml="4px"
  colorScheme="techPurple"
+ leftIcon={<PlusIcon />}
  loading={loading}
- onClick={() => {
- track(
- ILLA_MIXPANEL_EVENT_TYPE.CLICK,
- ILLA_MIXPANEL_BUILDER_PAGE_NAME.APP,
- { element: "create_new_app" },
- )
- createApp()
- }}
+ onClick={handleCreateApp}
  >
  {t("create_new_app")}
  </Button>
@@ -173,7 +170,11 @@ export const DashboardApps: FC = () => {
  </div>
  <Suspense fallback={<DashBoardLoading />}>
  <Await resolve={appList} errorElement={<DashboardErrorElement />}>
- <AppsContentBody canEditApp={canEditApp} />
+ <AppsContentBody
+ canEditApp={canEditApp}
+ onCreatedApp={handleCreateApp}
+ loading={loading}
+ />
  </Await>
  </Suspense>
  </div>

diff --git a/apps/builder/src/page/Dashboard/DashboardApps/style.tsx b/apps/builder/src/page/Dashboard/DashboardApps/style.tsx
@@ -63,3 +63,14 @@ export const hoverStyle = css`
  }
  }
 `
+
+export const emptyStyle: SerializedStyles = css`
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ justify-content: center;
+ color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
+ font-weight: 600;
+ line-height: 22px;
+`