feat(core): support create cloud workspace (#5771)

close TOV-475 has not logged： https://github.com/toeverything/AFFiNE/assets/102217452/b9aa2806-7dbd-4235-895d-5b27effb5831 has logged : https://github.com/toeverything/AFFiNE/assets/102217452/259a1c35-c6ab-4a52-9e03-4438ca64e620 client has not logged: https://github.com/toeverything/AFFiNE/assets/102217452/af6ef528-6fb8-4a27-842f-00c9669afcb2
2026-02-13 12:55:00 +00:00 · 2024-02-23 06:18:25 +00:00
parent c22216c71a
commit 4ea4a2d25f
13 changed files with 251 additions and 71 deletions
--- a/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts
+++ b/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts
@@ -1,36 +1,76 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
 export const header = style({
  position: 'relative',
  marginTop: '44px',
 });
-export const content = style({
-  padding: '0 40px',
-  fontSize: '18px',
-  lineHeight: '26px',
-});
-globalStyle(`${content} p`, {
-  marginTop: '12px',
-  marginBottom: '16px',
-});
-export const contentTitle = style({
-  fontSize: '20px',
-  lineHeight: '28px',
+
+export const subTitle = style({
+  fontSize: cssVar('fontSm'),
+  color: cssVar('textPrimaryColor'),
  fontWeight: 600,
-  paddingBottom: '16px',
 });
-export const buttonGroup = style({
+
+export const avatarWrapper = style({
  display: 'flex',
-  justifyContent: 'flex-end',
-  gap: '20px',
-  margin: '24px 0',
+  margin: '10px 0',
 });
-export const radioGroup = style({
+
+export const workspaceNameWrapper = style({
  display: 'flex',
  flexDirection: 'column',
  gap: '8px',
+  padding: '12px 0',
 });
-export const radio = style({
-  cursor: 'pointer',
-  appearance: 'auto',
-  marginRight: '12px',
+export const affineCloudWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '6px',
+  paddingTop: '10px',
+});
+
+export const card = style({
+  padding: '12px',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '8px',
+  backgroundColor: cssVar('backgroundSecondaryColor'),
+  minHeight: '114px',
+  position: 'relative',
+});
+
+export const cardText = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  width: '100%',
+  gap: '12px',
+});
+
+export const cardTitle = style({
+  fontSize: cssVar('fontBase'),
+  color: cssVar('textPrimaryColor'),
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+export const cardDescription = style({
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
+  maxWidth: '288px',
+});
+
+export const cloudTips = style({
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
+});
+
+export const cloudSvgContainer = style({
+  width: '146px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  position: 'absolute',
+  bottom: '0',
+  right: '0',
 });
--- a/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
@@ -1,9 +1,15 @@
-import { Input, toast } from '@affine/component';
+import { Avatar, Input, Switch, toast } from '@affine/component';
 import {
  ConfirmModal,
  type ConfirmModalProps,
  Modal,
 } from '@affine/component/ui/modal';
+import {
+  authAtom,
+  openDisableCloudAlertModalAtom,
+  setPageModeAtom,
+} from '@affine/core/atoms';
+import { useCurrentLoginStatus } from '@affine/core/hooks/affine/use-current-login-status';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { DebugLogger } from '@affine/debug';
 import { apis } from '@affine/electron-api';
@@ -17,12 +23,13 @@ import {
  initEmptyPage,
 } from '@toeverything/infra/blocksuite';
 import { useService } from '@toeverything/infra/di';
+import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';

-import { setPageModeAtom } from '../../../atoms';
-import * as style from './index.css';
+import { CloudSvg } from '../share-page-modal/cloud-svg';
+import * as styles from './index.css';

 type CreateWorkspaceStep =
  | 'set-db-location'
@@ -40,18 +47,55 @@ interface ModalProps {
 }

 interface NameWorkspaceContentProps extends ConfirmModalProps {
-  onConfirmName: (name: string) => void;
+  onConfirmName: (
+    name: string,
+    workspaceFlavour: WorkspaceFlavour,
+    avatar?: File
+  ) => void;
 }

+const shouldEnableCloud =
+  !runtimeConfig.allowLocalWorkspace && !environment.isDesktop;
+
 const NameWorkspaceContent = ({
  onConfirmName,
  ...props
 }: NameWorkspaceContentProps) => {
+  const t = useAFFiNEI18N();
  const [workspaceName, setWorkspaceName] = useState('');
+  const [enable, setEnable] = useState(shouldEnableCloud);
+  const loginStatus = useCurrentLoginStatus();
+  const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
+
+  const setOpenSignIn = useSetAtom(authAtom);
+
+  const openSignInModal = useCallback(() => {
+    if (!runtimeConfig.enableCloud) {
+      setDisableCloudOpen(true);
+    } else {
+      setOpenSignIn(state => ({
+        ...state,
+        openModal: true,
+      }));
+    }
+  }, [setDisableCloudOpen, setOpenSignIn]);
+
+  const onSwitchChange = useCallback(
+    (checked: boolean) => {
+      if (loginStatus !== 'authenticated') {
+        return openSignInModal();
+      }
+      return setEnable(checked);
+    },
+    [loginStatus, openSignInModal]
+  );

  const handleCreateWorkspace = useCallback(() => {
-    onConfirmName(workspaceName);
-  }, [onConfirmName, workspaceName]);
+    onConfirmName(
+      workspaceName,
+      enable ? WorkspaceFlavour.AFFINE_CLOUD : WorkspaceFlavour.LOCAL
+    );
+  }, [enable, onConfirmName, workspaceName]);

  const handleKeyDown = useCallback(
    (event: KeyboardEvent<HTMLInputElement>) => {
@@ -61,7 +105,9 @@ const NameWorkspaceContent = ({
    },
    [handleCreateWorkspace, workspaceName]
  );
-  const t = useAFFiNEI18N();
+  // TODO: Support uploading avatars.
+  // Currently, when we create a new workspace and upload an avatar at the same time,
+  // an error occurs after the creation is successful: get blob 404 not found
  return (
    <ConfirmModal
      defaultOpen={true}
@@ -80,16 +126,56 @@ const NameWorkspaceContent = ({
      onConfirm={handleCreateWorkspace}
      {...props}
    >
-      <Input
-        autoFocus
-        data-testid="create-workspace-input"
-        onKeyDown={handleKeyDown}
-        placeholder={t['com.affine.nameWorkspace.placeholder']()}
-        maxLength={64}
-        minLength={0}
-        onChange={setWorkspaceName}
-        size="large"
-      />
+      <div className={styles.avatarWrapper}>
+        <Avatar size={56} name={workspaceName} colorfulFallback />
+      </div>
+
+      <div className={styles.workspaceNameWrapper}>
+        <div className={styles.subTitle}>
+          {t['com.affine.nameWorkspace.subtitle.workspace-name']()}
+        </div>
+        <Input
+          autoFocus
+          data-testid="create-workspace-input"
+          onKeyDown={handleKeyDown}
+          placeholder={t['com.affine.nameWorkspace.placeholder']()}
+          maxLength={64}
+          minLength={0}
+          onChange={setWorkspaceName}
+          size="large"
+        />
+      </div>
+      <div className={styles.affineCloudWrapper}>
+        <div className={styles.subTitle}>{t['AFFiNE Cloud']()}</div>
+        <div className={styles.card}>
+          <div className={styles.cardText}>
+            <div className={styles.cardTitle}>
+              <span>{t['com.affine.nameWorkspace.affine-cloud.title']()}</span>
+              <Switch
+                checked={enable}
+                onChange={onSwitchChange}
+                disabled={shouldEnableCloud}
+              />
+            </div>
+            <div className={styles.cardDescription}>
+              {t['com.affine.nameWorkspace.affine-cloud.description']()}
+            </div>
+          </div>
+          <div className={styles.cloudSvgContainer}>
+            <CloudSvg />
+          </div>
+        </div>
+        {shouldEnableCloud ? (
+          <a
+            className={styles.cloudTips}
+            href={runtimeConfig.downloadUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t['com.affine.nameWorkspace.affine-cloud.web-tips']()}
+          </a>
+        ) : null}
+      </div>
    </ConfirmModal>
  );
 };
@@ -145,11 +231,11 @@ export const CreateWorkspaceModal = ({
  }, [mode, onClose, onCreate, t, workspaceManager]);

  const onConfirmName = useAsyncCallback(
-    async (name: string) => {
+    async (name: string, workspaceFlavour: WorkspaceFlavour) => {
      // this will be the last step for web for now
      // fix me later
      const { id } = await workspaceManager.createWorkspace(
-        WorkspaceFlavour.LOCAL,
+        workspaceFlavour,
        async workspace => {
          workspace.meta.setName(name);
          if (runtimeConfig.enablePreloading) {
@@ -201,7 +287,7 @@ export const CreateWorkspaceModal = ({
        style: { padding: '10px' },
      }}
    >
-      <div className={style.header}></div>
+      <div className={styles.header}></div>
    </Modal>
  );
 };
--- a/packages/frontend/core/src/components/affine/share-page-modal/cloud-svg.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/cloud-svg.tsx
@@ -0,0 +1,20 @@
+import { cssVar } from '@toeverything/theme';
+
+export const CloudSvg = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="146"
+    height="84"
+    viewBox="0 0 146 84"
+    fill="none"
+  >
+    <g opacity="0.1">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.9181 15.9788C52.6393 15.9788 41.064 27.5541 41.064 41.8329C41.064 43.7879 41.2801 45.687 41.6881 47.5094C42.2383 49.9676 40.6923 52.4066 38.2344 52.9579C29.4068 54.938 22.814 62.8293 22.814 72.2496C22.814 83.1687 31.6657 92.0204 42.5848 92.0204H97.3348C111.614 92.0204 123.189 80.4451 123.189 66.1663C123.189 51.8874 111.614 40.3121 97.3348 40.3121C97.1618 40.3121 96.9892 40.3138 96.8169 40.3172C94.6134 40.3603 92.6941 38.8222 92.2561 36.6623C89.8629 24.8606 79.4226 15.9788 66.9181 15.9788ZM31.939 41.8329C31.939 22.5145 47.5997 6.85376 66.9181 6.85376C82.573 6.85376 95.8181 17.1339 100.285 31.3098C118.223 32.808 132.314 47.8415 132.314 66.1663C132.314 85.4847 116.653 101.145 97.3348 101.145H42.5848C26.6261 101.145 13.689 88.2083 13.689 72.2496C13.689 59.9818 21.3304 49.5073 32.1102 45.3122C31.9969 44.1668 31.939 43.0061 31.939 41.8329Z"
+        fill={cssVar('iconColor')}
+      />
+    </g>
+  </svg>
+);
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts
@@ -21,7 +21,6 @@ export const menuItemStyle = style({
 });
 export const descriptionStyle = style({
  wordWrap: 'break-word',
-  // wordBreak: 'break-all',
  fontSize: cssVar('fontXs'),
  lineHeight: '20px',
  color: cssVar('textSecondaryColor'),
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
@@ -8,6 +8,10 @@ import {
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
+import type { PageMode } from '@affine/core/atoms';
+import { currentModeAtom } from '@affine/core/atoms/mode';
+import { useIsSharedPage } from '@affine/core/hooks/affine/use-is-shared-page';
+import { useServerBaseUrl } from '@affine/core/hooks/affine/use-server-config';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
@@ -15,33 +19,11 @@ import { useAtomValue } from 'jotai';
 import { useMemo, useState } from 'react';
 import { useCallback } from 'react';

-import type { PageMode } from '../../../../atoms';
-import { currentModeAtom } from '../../../../atoms/mode';
-import { useIsSharedPage } from '../../../../hooks/affine/use-is-shared-page';
-import { useServerBaseUrl } from '../../../../hooks/affine/use-server-config';
+import { CloudSvg } from '../cloud-svg';
 import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
 import { useSharingUrl } from './use-share-url';

-const CloudSvg = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="146"
-    height="84"
-    viewBox="0 0 146 84"
-    fill="none"
-  >
-    <g opacity="0.1">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M66.9181 15.9788C52.6393 15.9788 41.064 27.5541 41.064 41.8329C41.064 43.7879 41.2801 45.687 41.6881 47.5094C42.2383 49.9676 40.6923 52.4066 38.2344 52.9579C29.4068 54.938 22.814 62.8293 22.814 72.2496C22.814 83.1687 31.6657 92.0204 42.5848 92.0204H97.3348C111.614 92.0204 123.189 80.4451 123.189 66.1663C123.189 51.8874 111.614 40.3121 97.3348 40.3121C97.1618 40.3121 96.9892 40.3138 96.8169 40.3172C94.6134 40.3603 92.6941 38.8222 92.2561 36.6623C89.8629 24.8606 79.4226 15.9788 66.9181 15.9788ZM31.939 41.8329C31.939 22.5145 47.5997 6.85376 66.9181 6.85376C82.573 6.85376 95.8181 17.1339 100.285 31.3098C118.223 32.808 132.314 47.8415 132.314 66.1663C132.314 85.4847 116.653 101.145 97.3348 101.145H42.5848C26.6261 101.145 13.689 88.2083 13.689 72.2496C13.689 59.9818 21.3304 49.5073 32.1102 45.3122C31.9969 44.1668 31.939 43.0061 31.939 41.8329Z"
-        fill="var(--affine-icon-color)"
-      />
-    </g>
-  </svg>
-);
-
 export const LocalSharePage = (props: ShareMenuProps) => {
  const t = useAFFiNEI18N();

--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.tsx
@@ -36,7 +36,9 @@ export const AddWorkspace = ({
        className={styles.ItemContainer}
      >
        <div className={styles.ItemText}>
-          {t['com.affine.workspaceList.addWorkspace.create']()}
+          {runtimeConfig.enableSQLiteProvider && environment.isDesktop
+            ? t['com.affine.workspaceList.addWorkspace.create']()
+            : t['com.affine.workspaceList.addWorkspace.create-cloud']()}
        </div>
      </MenuItem>
    </div>
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx
@@ -73,11 +73,37 @@ export const UserWithWorkspaceList = ({
  const isAuthenticated = useMemo(() => status === 'authenticated', [status]);

  const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
+  const setDisableCloudOpen = useSetAtom(openDisableCloudAlertModalAtom);
+
+  const setOpenSignIn = useSetAtom(authAtom);
+
+  const openSignInModal = useCallback(() => {
+    if (!runtimeConfig.enableCloud) {
+      setDisableCloudOpen(true);
+    } else {
+      setOpenSignIn(state => ({
+        ...state,
+        openModal: true,
+      }));
+    }
+  }, [setDisableCloudOpen, setOpenSignIn]);

  const onNewWorkspace = useCallback(() => {
+    if (
+      !isAuthenticated &&
+      !environment.isDesktop &&
+      !runtimeConfig.allowLocalWorkspace
+    ) {
+      return openSignInModal();
+    }
    setOpenCreateWorkspaceModal('new');
    onEventEnd?.();
-  }, [onEventEnd, setOpenCreateWorkspaceModal]);
+  }, [
+    isAuthenticated,
+    onEventEnd,
+    openSignInModal,
+    setOpenCreateWorkspaceModal,
+  ]);

  const onAddWorkspace = useCallback(() => {
    setOpenCreateWorkspaceModal('add');