fix: setting style and replace refer

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

@@ -3,6 +3,7 @@ import { stringToColour } from '@/utils';
 interface IWorkspaceAvatar {
   size: number;
   name: string;
+  avatar: string;
 }
 
 export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {

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

@@ -43,24 +43,12 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   const handleUpdateWorkspaceName = () => {
     console.log('currentWorkspace: ', currentWorkspace);
     updateWorkspace({ name: workspaceName }, currentWorkspace);
-    // workspace && currentWorkspace(workspace.id, { name: workspaceName });
   };
 
   const fileChange = async (file: File) => {
-    console.log('file: ', file);
+    // console.log('file: ', file);
     setUploading(true);
-    // const blob = new Blob([file], { type: file.type });
-    // const blobId = await getDataCenter()
-    //   .then(dc => dc.apis.uploadBlob({ blob }))
-    //   .finally(() => {
-    //     setUploading(false);
-    //   });
-    // if (blobId) {
-    //   currentWorkspace?.meta.setAvatar(blobId);
-    //   // workspaces[workspace.id]?.meta.setAvatar(blobId);
-    //   setUploading(false);
-    //   debouncedRefreshWorkspacesMeta();
-    // }
+    const blob = new Blob([file], { type: file.type });
   };
 
   return workspace ? (
@@ -73,7 +61,11 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
             marginRight: '20px',
           }}
         >
-          <WorkspaceAvatar size={60} name={workspace.name} />
+          <WorkspaceAvatar
+            size={60}
+            name={workspace.name}
+            avatar={workspace.avatar ?? ''}
+          />
         </div>
         <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"

packages/app/src/components/workspace-setting/index.ts

@@ -2,3 +2,4 @@ export * from './general';
 export * from './ExportPage';
 export * from './MembersPage';
 export * from './SyncPage';
+export * from './PublishPage';

packages/app/src/components/workspace-setting/style.ts

@@ -22,7 +22,6 @@ export const StyledSettingSidebar = styled('div')(({ theme }) => {
 export const StyledSettingContent = styled('div')(() => {
   return {
     paddingLeft: '48px',
-    height: '620px',
   };
 });
 
@@ -30,7 +29,6 @@ export const StyledSetting = styled('div')(({ theme }) => {
   {
     return {
       width: '236px',
-      height: '620px',
       background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
     };
   }
@@ -136,7 +134,6 @@ export const StyledMemberRoleContainer = styled('div')(() => {
 export const StyledMemberListContainer = styled('ul')(() => {
   return {
     marginTop: '15px',
-    height: '432px',
     overflowY: 'scroll',
   };
 });
@@ -220,7 +217,6 @@ export const StyledCopyButtonContainer = styled('div')(() => {
 
 export const StyledPublishContent = styled('div')(() => {
   return {
-    height: '494px',
     display: 'flex',
     flexDirection: 'column',
   };

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -6,14 +6,12 @@ import { useAppState } from '@/providers/app-state-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
   const { currentMetaWorkSpace, workspaceList } = useAppState();
-  console.log('currentMetaWorkSpace: ', currentMetaWorkSpace);
 
   useEffect(() => {
     if (workspaceList.length === 0) {
       setWorkspaceListShow(true);
     }
   }, [workspaceList]);
-
   return (
     <>
       <SelectorWrapper
@@ -35,6 +33,7 @@ export const WorkspaceSelector = () => {
             <WorkspaceAvatar
               size={28}
               name={currentMetaWorkSpace?.name ?? 'AFFiNE'}
+              avatar={currentMetaWorkSpace?.avatar ?? ''}
             />
           </div>
         </Avatar>

packages/app/src/hooks/use-workspace-helper.ts

@@ -1,13 +1,10 @@
 import { useAppState } from '@/providers/app-state-provider';
-import { stringToColour } from '@/utils';
-import { WorkspaceInfo } from '@affine/datacenter';
 import { Workspace } from '@blocksuite/store';
 export const useWorkspaceHelper = () => {
   const { dataCenter } = useAppState();
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
       name: name,
-      avatar: 'cccc',
     });
     if (workspaceInfo && workspaceInfo.room) {
       const workspace = await dataCenter.loadWorkspace(workspaceInfo.room);
@@ -23,15 +20,16 @@ export const useWorkspaceHelper = () => {
   };
 
   const updateWorkspace = async (
-    { name, avatar }: { name?: string; avatar?: string },
+    { name, avatarBlob }: { name?: string; avatarBlob?: Blob },
     workspace: Workspace
   ) => {
     if (name) {
       dataCenter.updateWorkspaceMeta({ name }, workspace);
     }
-    // if (avatar) {
-    //   dataCenter.resetWorkspaceMeta({ avatar }, workspace);
-    // }
+    if (avatarBlob) {
+      const blobId = await dataCenter.setBlob(workspace, avatarBlob);
+      dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
+    }
   };
   return {
     createWorkspace,

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -1,4 +1,3 @@
-import Modal, { ModalCloseButton } from '@/ui/modal';
 import {
   StyledSettingContainer,
   StyledSettingContent,
@@ -7,7 +6,7 @@ import {
   StyledSettingTabContainer,
   StyledSettingTagIconContainer,
   WorkspaceSettingTagItem,
-} from '../../../components/workspace-setting/style';
+} from '@/components/workspace-setting/style';
 import {
   EditIcon,
   UsersIcon,
@@ -15,11 +14,13 @@ import {
   CloudInsyncIcon,
 } from '@blocksuite/icons';
 import { ReactElement, useEffect, useState } from 'react';
-import { GeneralPage } from '../../../components/workspace-setting/general';
-import { MembersPage } from '../../../components/workspace-setting/MembersPage';
-import { PublishPage } from '../../../components/workspace-setting/PublishPage';
-import { ExportPage } from '../../../components/workspace-setting/ExportPage';
-import { SyncPage } from '../../../components/workspace-setting/SyncPage';
+import {
+  GeneralPage,
+  MembersPage,
+  PublishPage,
+  ExportPage,
+  SyncPage,
+} from '@/components/workspace-setting';
 import { useAppState } from '@/providers/app-state-provider';
 import WorkspaceLayout from '@/components/workspace-layout';