From 753c59b5347f894ca626ded21474ea073beeaae8 Mon Sep 17 00:00:00 2001 From: DiamondThree <857159145@qq.com> Date: Wed, 11 Jan 2023 23:54:25 +0800 Subject: [PATCH] feat: add publish workspace page list and workspace page --- packages/app/next.config.js | 4 +- packages/app/src/components/editor/index.tsx | 1 - .../app/src/components/page-list/index.tsx | 42 ++++++++----- .../workspace-setting/PublishPage.tsx | 3 +- .../workspace-setting/member/style.ts | 1 - .../src/components/workspace-setting/style.ts | 2 - .../[workspaceId]/[pageId].tsx | 59 ++++++++++++++----- .../public-workspace/[workspaceId]/index.tsx | 34 ++++++----- .../data-center/src/provider/affine/affine.ts | 4 +- 9 files changed, 94 insertions(+), 56 deletions(-) diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 478bbfa12e..7d81e5c273 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -11,10 +11,12 @@ const EDITOR_VERSION = enableDebugLocal const profileTarget = { ac: '100.85.73.88:12001', - dev: '100.77.180.48:11001', + dev: '192.168.65.20:3000', local: '127.0.0.1:3000', }; +// 100.77.180.48:11001 + const getRedirectConfig = profile => { const target = profileTarget[profile || 'dev'] || profileTarget['dev']; diff --git a/packages/app/src/components/editor/index.tsx b/packages/app/src/components/editor/index.tsx index b0edaa684f..3d62a9323a 100644 --- a/packages/app/src/components/editor/index.tsx +++ b/packages/app/src/components/editor/index.tsx @@ -31,7 +31,6 @@ export const Editor = ({ page, workspace, setEditor }: Props) => { const editor = new EditorContainer(); editor.page = page; - editorContainer.current?.appendChild(editor); if (page.isEmpty) { const isFirstPage = workspace?.meta.pageMetas.length === 1; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 6ae13b071d..c275e8295b 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -67,10 +67,12 @@ export const PageList = ({ pageList, showFavoriteTag = false, isTrash = false, + isPublic = false, }: { pageList: PageMeta[]; showFavoriteTag?: boolean; isTrash?: boolean; + isPublic?: boolean; }) => { const router = useRouter(); const { currentWorkspace } = useAppState(); @@ -98,9 +100,15 @@ export const PageList = ({ { - router.push( - `/workspace/${currentWorkspace?.id}/${pageMeta.id}` - ); + if (isPublic) { + router.push( + `/public-workspace/${router.query.workspaceId}/${pageMeta.id}` + ); + } else { + router.push( + `/workspace/${currentWorkspace?.id}/${pageMeta.id}` + ); + } }} > @@ -124,19 +132,21 @@ export const PageList = ({ dateKey={isTrash ? 'trashDate' : 'updatedDate'} backupKey={isTrash ? 'trashDate' : 'createDate'} /> - { - e.stopPropagation(); - }} - > - {isTrash ? ( - - ) : ( - - )} - + {!isPublic ? ( + { + e.stopPropagation(); + }} + > + {isTrash ? ( + + ) : ( + + )} + + ) : null} ); })} diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index c5c39cc2de..6cc17f68f2 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -14,8 +14,7 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { - const shareUrl = - window.location.host + '/workspace/' + workspace.id + '?share=true'; + const shareUrl = window.location.host + '/public-workspace/' + workspace.id; const { publishWorkspace, enableWorkspace } = useWorkspaceHelper(); const togglePublic = async (flag: boolean) => { diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index a5bf612f9a..eeea67d6d8 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -1,6 +1,5 @@ import { styled } from '@/styles'; import MuiAvatar from '@mui/material/Avatar'; -import { Button } from '@/ui/button'; export const StyledMemberTitleContainer = styled('div')(() => { return { diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 1809ed4280..f3177fe4d1 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -1,6 +1,4 @@ import { styled } from '@/styles'; -import { Button } from '@/ui/button'; -import MuiAvatar from '@mui/material/Avatar'; export const StyledSettingContainer = styled('div')(() => { return { diff --git a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx index d576ab5f23..734e627f3e 100644 --- a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -1,37 +1,55 @@ -import { ReactElement, useState } from 'react'; +import { ReactElement, useEffect, useState } from 'react'; import { useAppState } from '@/providers/app-state-provider'; import type { NextPageWithLayout } from '../..//_app'; - +import { styled } from '@/styles'; import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; +import { Page as PageStore, Workspace } from '@blocksuite/store'; const DynamicBlocksuite = dynamic(() => import('@/components/editor'), { ssr: false, }); const Page: NextPageWithLayout = () => { - const [workspace, setWorkspace] = useState(null); - const [page, setPage] = useState(null); + const [workspace, setWorkspace] = useState(); + const [page, setPage] = useState(); const { dataCenter } = useAppState(); - console.log('dataCenter: ', dataCenter); const router = useRouter(); - - console.log(router.query.workspaceId); - dataCenter - .loadPublicWorkspace(router.query.workspaceId as string) - .then(data => { - console.log(data); - }); + useEffect(() => { + dataCenter + .loadPublicWorkspace(router.query.workspaceId as string) + .then(data => { + if (data && data.blocksuiteWorkspace) { + setWorkspace(data.blocksuiteWorkspace); + if ( + router.query.pageId && + data.blocksuiteWorkspace.meta.pageMetas.find( + p => p.id === router.query.pageId + ) + ) { + const page = data.blocksuiteWorkspace?.getPage( + router.query.pageId as string + ); + page && setPage(page); + } else { + router.push('/404'); + } + } + }) + .catch(() => { + router.push('/404'); + }); + }, [router, dataCenter]); return ( - <> + {workspace && page && ( { - console.log('test'); + setEditor={editor => { + editor.readonly = true; }} /> )} - + ); }; @@ -40,3 +58,12 @@ Page.getLayout = function getLayout(page: ReactElement) { }; export default Page; + +export const PageContainer = styled.div(({ theme }) => { + return { + height: 'calc(100vh)', + padding: '78px 72px', + overflowY: 'auto', + backgroundColor: theme.colors.pageBackground, + }; +}); diff --git a/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx b/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx index 3be9bb3112..113c61c2a6 100644 --- a/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx +++ b/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx @@ -1,29 +1,31 @@ import { PageList } from '@/components/page-list'; -import { AllPagesIcon } from '@blocksuite/icons'; -import { PageListHeader } from '@/components/header'; -import { ReactElement } from 'react'; -import { useTranslation } from '@affine/i18n'; -import { useAppState } from '@/providers/app-state-provider'; +import { ReactElement, useEffect, useState } from 'react'; +import { PageMeta, useAppState } from '@/providers/app-state-provider'; import { useRouter } from 'next/router'; +import { PageContainer } from './[pageId]'; const All = () => { - const { pageList } = useAppState(); - const { t } = useTranslation(); const { dataCenter } = useAppState(); const router = useRouter(); + const [pageList, setPageList] = useState([]); + useEffect(() => { + dataCenter + .loadPublicWorkspace(router.query.workspaceId as string) + .then(data => { + setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]); + }) + .catch(() => { + router.push('/404'); + }); + }, [router, dataCenter]); - console.log(router.query.workspaceId); - dataCenter - .loadPublicWorkspace(router.query.workspaceId as string) - .then(data => { - console.log(data); - }); return ( - <> + !p.trash)} - showFavoriteTag={true} + showFavoriteTag={false} + isPublic={true} /> - + ); }; diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts index a3a6cb626e..5bb3c11fd9 100644 --- a/packages/data-center/src/provider/affine/affine.ts +++ b/packages/data-center/src/provider/affine/affine.ts @@ -152,7 +152,9 @@ export class AffineProvider extends BaseProvider { const updates = await this._apis.downloadWorkspace(workspaceId, published); if (updates && updates.byteLength) { await new Promise(resolve => { - doc.once('update', resolve); + doc.once('update', () => { + setTimeout(resolve, 100); + }); BlocksuiteWorkspace.Y.applyUpdate(doc, new Uint8Array(updates)); }); }