feat: mock workspace process

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

@@ -0,0 +1,83 @@
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { useState } from 'react';
+import { createWorkspace } from '@/hooks/mock-data/mock';
+import Input from '@/ui/input';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
+  const [workspaceName, setWorkspaceName] = useState('');
+  const handleCreateWorkspace = () => {
+    createWorkspace(workspaceName);
+    onClose();
+  };
+  return (
+    <div>
+      <Modal open={open} onClose={onClose}>
+        <ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
+          <Header>
+            <ContentTitle>New Workspace</ContentTitle>
+            <ModalCloseButton
+              top={6}
+              right={6}
+              onClick={() => {
+                onClose();
+              }}
+            />
+          </Header>
+          <Content>
+            <p>
+              Workspace is your virtual space to capture, create and plan as
+              just one person or together as a team.
+            </p>
+            <Input
+              onChange={value => {
+                setWorkspaceName(value);
+              }}
+            ></Input>
+            <Button
+              onClick={() => {
+                handleCreateWorkspace();
+              }}
+            >
+              Create
+            </Button>
+          </Content>
+        </ModalWrapper>
+      </Modal>
+    </div>
+  );
+};
+
+const Header = styled('div')({
+  position: 'relative',
+  height: '44px',
+});
+
+const Content = styled('div')({
+  display: 'flex',
+  padding: '0 48px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+});
+
+const ContentTitle = styled('span')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'left',
+  paddingBottom: '16px',
+});
+
+const Footer = styled('div')({
+  height: '70px',
+  paddingLeft: '24px',
+  marginTop: '32px',
+  textAlign: 'center',
+});

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

@@ -0,0 +1,117 @@
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { useEffect, useState } from 'react';
+import { getWorkspaceList, Workspace } from '@/hooks/mock-data/mock';
+import { CreateWorkspaceModal } from '../create-workspace';
+
+interface LoginModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
+  const [workspaceList, setWorkspaceList] = useState<Workspace[]>([]);
+  const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  const getList = () => {
+    const data = getWorkspaceList();
+    setWorkspaceList(data);
+  };
+  return (
+    <div>
+      <Modal open={open} onClose={onClose}>
+        <ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
+          <Header>
+            <ContentTitle>My workspace</ContentTitle>
+            <ModalCloseButton
+              top={6}
+              right={6}
+              onClick={() => {
+                onClose();
+              }}
+            />
+          </Header>
+          <Content>
+            <WorkspaceList>
+              {workspaceList.map(item => {
+                return (
+                  <WorkspaceItem key={item.id}>
+                    <span></span>
+                    <span>{item.name}</span>
+                    {item.type === 'local' && <span>local</span>}
+                    {item.type === 'share' && <span>share</span>}
+                    {item.isPublish ? 'public' : 'private'}
+                    {item.isLocal ? 'local' : 'local'}
+                  </WorkspaceItem>
+                );
+              })}
+              <li>
+                <Button
+                  onClick={() => {
+                    setCreateWorkspaceOpen(true);
+                  }}
+                >
+                  Create Workspace
+                </Button>
+              </li>
+            </WorkspaceList>
+          </Content>
+          <Footer>
+            <Button>Sign in AFFiNE Cloud</Button>
+          </Footer>
+          <CreateWorkspaceModal
+            open={createWorkspaceOpen}
+            onClose={() => {
+              setCreateWorkspaceOpen(false);
+              getList();
+            }}
+          ></CreateWorkspaceModal>
+        </ModalWrapper>
+      </Modal>
+    </div>
+  );
+};
+
+const Header = styled('div')({
+  position: 'relative',
+  height: '44px',
+});
+
+const Content = styled('div')({
+  padding: '0 20px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+});
+
+const ContentTitle = styled('span')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'left',
+  paddingBottom: '16px',
+});
+
+const Footer = styled('div')({
+  height: '70px',
+  paddingLeft: '24px',
+  marginTop: '32px',
+  textAlign: 'center',
+});
+
+const WorkspaceList = styled('div')({
+  display: 'grid',
+  gridRowGap: '10px',
+  gridColumnGap: '10px',
+  fontSize: '16px',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+});
+
+const WorkspaceItem = styled('div')({
+  border: '1px solid #e5e5e5',
+});

packages/app/src/components/workspace-modal/styles.ts

@@ -0,0 +1,38 @@
+import { displayFlex, styled } from '@/styles';
+
+export const StyledTitle = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    fontSize: '20px',
+    fontWeight: 500,
+    marginTop: '60px',
+    lineHeight: 1,
+  };
+});
+
+export const StyledContent = styled.div(() => {
+  return {
+    padding: '0 40px',
+    marginTop: '32px',
+    fontSize: '18px',
+    lineHeight: '25px',
+    'p:not(last-of-type)': {
+      marginBottom: '10px',
+    },
+  };
+});
+
+export const StyledButton = styled.div(({ theme }) => {
+  return {
+    width: '146px',
+    height: '42px',
+    background: theme.colors.primaryColor,
+    color: '#FFFFFF',
+    fontSize: '18px',
+    fontWeight: 500,
+    borderRadius: '21px',
+    margin: '52px auto 0',
+    cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+  };
+});

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

@@ -0,0 +1,75 @@
+export interface Workspace {
+  name: string; // 名称
+  id: string; //唯一标识
+  isPublish?: boolean; // 是否公开
+  isLocal?: boolean; // 是否全部数据都在本地
+  avatar?: string; // 封面
+  type: 'local' | 'cloud' | 'share'; // cloud: 云端（本次暂不支持），local: 本地，share: 分享
+  workspaceOwner?: User; // 本地工作空间的拥有者
+}
+
+interface User {
+  name: string;
+  id: string;
+  email: string;
+  avatar: string;
+}
+
+export function getWorkspaceList(): Workspace[] {
+  const workspacesMeta = JSON.parse(
+    localStorage.getItem('affine-workspace') ?? '[]'
+  );
+  return workspacesMeta;
+}
+
+export function getPagesByWorkspaceId(workspaceId: string) {
+  if (!workspaceId) return [];
+  const workspacesMeta = [];
+  for (let i = 0; i < 10; i++) {
+    workspacesMeta.push({
+      id: 'page-' + i,
+      name: 'page ' + i,
+    });
+  }
+}
+
+export function addWorkSpace(workspaceData: Workspace) {
+  const workspacesMeta = getWorkspaceList();
+  workspacesMeta.push(workspaceData);
+  localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
+}
+
+export function deleteWorkspaceById(workspaceId: string) {
+  const workspacesMeta = getWorkspaceList();
+  const newWorkspacesMeta = workspacesMeta.filter(() => {
+    return workspaceId !== workspaceId;
+  });
+  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
+}
+
+export function updateWorkspaceById(
+  workspaceId: string,
+  workspaceData: Workspace
+) {
+  const workspacesMeta = getWorkspaceList();
+  const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
+    if (workspace.id === workspaceId) {
+      return workspaceData;
+    }
+    return workspace;
+  });
+  localStorage.setItem('affine-workspace', JSON.stringify(newWorkspacesMeta));
+}
+export function createWorkspace(workspaceName: string) {
+  const workspaceData = {
+    name: workspaceName,
+    id: 'workspace-' + Date.now(),
+    isPublish: false,
+    isLocal: true,
+    avatar: '',
+    type: 'local',
+  } as Workspace;
+  const workspacesMeta = getWorkspaceList();
+  workspacesMeta.push(workspaceData);
+  localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
+}

packages/app/src/pages/new-workspace/index.tsx

@@ -0,0 +1,47 @@
+import { WorkspaceModal } from '@/components/workspace-modal';
+import { getWorkspaceList } from '@/hooks/mock-data/mock';
+import { useEffect, useState } from 'react';
+import { styled } from '@/styles';
+import Button from '@/ui/button/Button';
+
+const Page = () => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const data = getWorkspaceList();
+    if (!data.length) {
+      setOpen(true);
+    }
+  }, []);
+  return (
+    <Workspace>
+      <div>workspace</div>
+      <div>
+        <Button
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          workspaceList
+        </Button>
+      </div>
+      <WorkspaceModal
+        open={open}
+        onClose={() => {
+          setOpen(false);
+        }}
+      ></WorkspaceModal>
+    </Workspace>
+  );
+};
+export default Page;
+
+const Workspace = styled.div(({ theme }) => {
+  return {
+    height: '100vh',
+    background: theme.colors.pageBackground,
+    color: '#FFFFFF',
+    fontSize: '18px',
+    fontWeight: 500,
+  };
+});