feat: Make software interaction more natural

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

@@ -20,8 +20,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
           background: stringToColour(props.name || 'AFFiNE'),
           borderRadius: '50%',
           textAlign: 'center',
-          // Let the text inside the avatar be absolutely in the play
+          lineHeight: size + 'px',
-          lineHeight: size - 2 + '[x',
         }}
       >
         {(props.name || 'AFFiNE').substring(0, 1)}

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

@@ -60,7 +60,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                     }}
                     key={index}
                   >
-                    <span style={{ width: '100px', marginRight: '20px' }}>
+                    <span style={{ width: '100px' }}>
                       <div
                         style={{
                           float: 'left',

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

@@ -0,0 +1,19 @@
+import { Workspace } from '@/hooks/mock-data/mock';
+import { styled } from '@/styles';
+
+export const ExportPageTitleContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    marginTop: '60px',
+    fontWeight: '500',
+    flex: 1,
+  };
+});
+export const ExportPage = ({ workspace }: { workspace: Workspace }) => {
+  return (
+    <ExportPageTitleContainer>
+      Export Workspace{' '}
+      <code style={{ margin: '0 10px' }}>{workspace.name}</code> Is Comming
+    </ExportPageTitleContainer>
+  );
+};

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

@@ -18,6 +18,7 @@ import { useEffect, useState } from 'react';
 import { GeneralPage } from './general';
 import { MembersPage } from './MembersPage';
 import { PublishPage } from './PublishPage';
+import { ExportPage } from './ExportPage';
 import { SyncPage } from './SyncPage';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 
@@ -153,6 +154,9 @@ export const WorkspaceSetting = ({
           {activeTab === ActiveTab.publish && currentWorkspace && (
             <PublishPage workspace={currentWorkspace} />
           )}
+          {activeTab === ActiveTab.export && currentWorkspace && (
+            <ExportPage workspace={currentWorkspace} />
+          )}
         </StyledSettingContent>
       </StyledSettingContainer>
     </Modal>