feat: more fluent

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

@@ -4,16 +4,19 @@ import { Button } from '@/ui/button';
 import { useState } from 'react';
 import { createWorkspace } from '@/hooks/mock-data/mock';
 import Input from '@/ui/input';
+interface ICloseParams {
+  workspaceId?: string;
+}
 interface ModalProps {
   open: boolean;
-  onClose: () => void;
+  onClose: (opts?: ICloseParams) => void;
 }
 
 export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
   const handleCreateWorkspace = () => {
-    createWorkspace(workspaceName);
+    const { workspaceId } = createWorkspace(workspaceName);
-    onClose();
+    onClose({ workspaceId });
   };
   return (
     <div>

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

@@ -10,6 +10,7 @@ import {
   User,
   getUserInfo,
   SignOut,
+  updateWorkspaceMeta,
 } from '@/hooks/mock-data/mock';
 import { CreateWorkspaceModal } from '../create-workspace';
 import {
@@ -102,13 +103,23 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                           fill="#6880FF"
                         />
                       </svg>
-                      {item.name}
+
+                      <span style={{ width: '100px', display: 'inline-block' }}>
+                        {item.name || ' undefined'}
+                      </span>
                     </span>
-                    <span style={{ position: 'relative', top: '6px' }}>
+                    <span
-                      {item.type === 'local' && (
+                      style={{
+                        position: 'relative',
+                        top: '6px',
+                        marginLeft: '100px',
+                      }}
+                    >
+                      {(item.workspaceType === 'local' ||
+                        !item.workspaceType) && (
                         <CloudUnsyncedIcon fontSize={24} />
                       )}
-                      {item.type === 'cloud' && (
+                      {item.workspaceType === 'cloud' && (
                         <CloudInsyncIcon fontSize={24} />
                       )}
                       {item.isPublish && <UsersIcon fontSize={24} />}
@@ -165,7 +176,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
           </Footer>
           <CreateWorkspaceModal
             open={createWorkspaceOpen}
-            onClose={() => {
+            onClose={({ workspaceId }) => {
               setCreateWorkspaceOpen(false);
               setList();
               onClose();
@@ -177,6 +188,12 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
               }).then(confirm => {
                 if (user) {
                   console.log('enable cloud');
+                  workspaceId &&
+                    setTimeout(() => {
+                      updateWorkspaceMeta(workspaceId as string, {
+                        workspaceType: 'cloud',
+                      });
+                    }, 1000);
                 } else {
                   confirm && Login();
                 }

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

@@ -6,6 +6,7 @@ export interface Workspace {
   isPublish?: boolean; // 是否公开
   isLocal?: boolean; // 是否全部数据都在本地
   avatar?: string; // 封面
+  workspaceType: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的
   type: 'local' | 'cloud' | 'join'; // cloud: 云端（本次暂不支持），local: 本地，join : 加入别人的
   workspaceOwner?: User; // 本地工作空间的拥有者
 }
@@ -40,14 +41,16 @@ 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) {
+  const workspaceId = 'workspace-' + Date.now();
   const workspaceData = {
     name: workspaceName,
-    id: 'workspace-' + Date.now(),
+    id: workspaceId,
     isPublish: false,
     isLocal: true,
     avatar: '',
@@ -57,6 +60,7 @@ export function createWorkspace(workspaceName: string) {
   workspacesMeta.push(workspaceData);
   localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
   setActiveWorkspace(workspaceData);
+  return { workspaceId };
 }
 
 export function getWorkspaces(): Workspace[] {