feat: mock sync

packages/app/src/components/workspace-modal/index.tsx

@@ -37,6 +37,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
 
   const setList = () => {
     const data = getWorkspaces();
+    console.log('data: ', data);
     setWorkspaceList(data);
   };
   const setUserInfo = () => {
@@ -62,14 +63,14 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
           </Header>
           <Content>
             <WorkspaceList>
-              {workspaceList.map(item => {
+              {workspaceList.map((item, index) => {
                 return (
                   <WorkspaceItem
                     onClick={() => {
                       setActiveWorkspace(item);
                       onClose();
                     }}
-                    key={item.id}
+                    key={index}
                   >
                     <span style={{ width: '100px', marginRight: '20px' }}>
                       <svg

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -31,6 +31,7 @@ import {
   MoreVerticalIcon,
   EmailIcon,
   TrashIcon,
+  DownloadIcon,
 } from '@blocksuite/icons';
 import { useCallback, useEffect, useState } from 'react';
 import { Button, IconButton } from '@/ui/button';
@@ -50,6 +51,7 @@ import {
   getUserInfo,
   Login,
   setWorkspacePublish,
+  updateWorkspaceMeta,
   User,
   Workspace,
 } from '@/hooks/mock-data/mock';
@@ -58,6 +60,7 @@ enum ActiveTab {
   'general' = 'general',
   'members' = 'members',
   'publish' = 'publish',
+  'sync' = 'sync',
 }
 
 type SettingTabProps = {
@@ -84,6 +87,19 @@ const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => {
         </StyledSettingTagIconContainer>
         General
       </WorkspaceSettingTagItem>
+
+      <WorkspaceSettingTagItem
+        isActive={activeTab === ActiveTab.sync}
+        onClick={() => {
+          onTabChange && onTabChange(ActiveTab.sync);
+        }}
+      >
+        <StyledSettingTagIconContainer>
+          <EditIcon />
+        </StyledSettingTagIconContainer>
+        Sync
+      </WorkspaceSettingTagItem>
+
       <WorkspaceSettingTagItem
         isActive={activeTab === ActiveTab.members}
         onClick={() => {
@@ -150,6 +166,7 @@ export const WorkspaceSetting = ({
           {activeTab === ActiveTab.general && (
             <GeneralPage workspace={workspace} />
           )}
+          {activeTab === ActiveTab.sync && <SyncPage workspace={workspace} />}
           {activeTab === ActiveTab.members && workspace && (
             <MembersPage workspace={workspace} />
           )}
@@ -215,9 +232,9 @@ const MembersPage = ({ workspace }: { workspace: Workspace }) => {
               ></Empty>
             )}
             {members.length ? (
-              members.map(member => {
+              members.map((member, index) => {
                 return (
-                  <StyledMemberListItem key={member.id}>
+                  <StyledMemberListItem key={index}>
                     <StyledMemberNameContainer>
                       <StyledMemberAvatar alt="member avatar">
                         <EmailIcon></EmailIcon>
@@ -395,3 +412,79 @@ const PublishPage = ({ workspace }: { workspace: Workspace }) => {
     </div>
   );
 };
+const SyncPage = ({ workspace }: { workspace: Workspace }) => {
+  const [workspaceType, setWorkspaceType] = useState('local');
+  useEffect(() => {
+    setType();
+  });
+  const setType = () => {
+    const ACTIVEworkspace = getActiveWorkspace();
+    console.log('ACTIVEworkspace: ', ACTIVEworkspace);
+    ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
+  };
+  return (
+    <div>
+      <StyledPublishContent>
+        {workspaceType === 'local' ? (
+          <>
+            <StyledPublishExplanation>
+              {workspace.name} is Local Workspace. All data is stored on the
+              current device. You can enable AFFiNE Cloud for this workspace to
+              keep data in sync with the cloud.
+            </StyledPublishExplanation>
+
+            <StyledPublishCopyContainer>
+              <StyledCopyButtonContainer>
+                <Button
+                  onClick={() => {
+                    updateWorkspaceMeta(workspace.id, {
+                      workspaceType: 'cloud',
+                    });
+                    setType();
+                  }}
+                  type="primary"
+                  shape="circle"
+                >
+                  Enable AFFiNE Cloud
+                </Button>
+              </StyledCopyButtonContainer>
+            </StyledPublishCopyContainer>
+          </>
+        ) : (
+          <StyledPublishExplanation>
+            {workspace.name} is Cloud Workspace. All data will be synchronized
+            and saved to the AFFiNE account
+            <div>
+              <Menu
+                content={
+                  <>
+                    <MenuItem
+                      onClick={() => {
+                        deleteMember(workspace.id, 0);
+                      }}
+                      icon={<DownloadIcon />}
+                    >
+                      Download core data to device
+                    </MenuItem>
+                    <MenuItem
+                      onClick={() => {
+                        deleteMember(workspace.id, 0);
+                      }}
+                      icon={<DownloadIcon />}
+                    >
+                      Download all data to device
+                    </MenuItem>
+                  </>
+                }
+                placement="bottom-end"
+                disablePortal={true}
+              >
+                <Button>Download all data to device</Button>
+              </Menu>
+            </div>
+          </StyledPublishExplanation>
+        )}
+      </StyledPublishContent>
+    </div>
+  );
+};

packages/app/src/hooks/mock-data/mock.ts

@@ -1,3 +1,5 @@
+import { type } from 'os';
+
 export interface Workspace {
   name: string; // 名称
   id: string; //唯一标识
@@ -17,13 +19,19 @@ export interface User {
 
 export function updateWorkspaceMeta(
   workspaceId: string,
-  workspaceData: { name?: string; avatar?: string }
+  workspaceData: {
+    name?: string;
+    avatar?: string;
+    workspaceType?: 'local' | 'cloud' | 'join';
+  }
 ) {
   const workspacesMeta = getWorkspaces();
   const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
     if (workspace.id === workspaceId) {
       workspaceData.name && (workspace.name = workspaceData.name);
       workspaceData.avatar && (workspace.avatar = workspaceData.avatar);
+      workspaceData.workspaceType &&
+        (workspace.type = workspaceData.workspaceType);
       return workspaceData;
     }
     return workspace;
@@ -32,6 +40,8 @@ export function updateWorkspaceMeta(
   const activeWorkspace = getActiveWorkspace();
   workspaceData.name && (activeWorkspace.name = workspaceData.name);
   workspaceData.avatar && (activeWorkspace.avatar = workspaceData.avatar);
+  workspaceData.workspaceType &&
+    (activeWorkspace.type = workspaceData.workspaceType);
   setActiveWorkspace(activeWorkspace);
 }
 export function createWorkspace(workspaceName: string) {
@@ -122,6 +132,7 @@ export function getActiveWorkspace(): Workspace {
 }
 
 export function setActiveWorkspace(workspaceData: Workspace) {
+  console.log('workspaceData: ', workspaceData);
   localStorage.setItem(
     'affine-active-workspace',
     JSON.stringify(workspaceData)