feat: add publish workspace page list and workspace page

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'];
 

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;

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 = ({
               <StyledTableRow
                 key={`${pageMeta.id}-${index}`}
                 onClick={() => {
-                  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}`
+                    );
+                  }
                 }}
               >
                 <TableCell>
@@ -124,19 +132,21 @@ export const PageList = ({
                   dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                   backupKey={isTrash ? 'trashDate' : 'createDate'}
                 />
-                <TableCell
-                  style={{ padding: 0 }}
-                  data-testid={`more-actions-${pageMeta.id}`}
-                  onClick={e => {
-                    e.stopPropagation();
-                  }}
-                >
-                  {isTrash ? (
-                    <TrashOperationCell pageMeta={pageMeta} />
-                  ) : (
-                    <OperationCell pageMeta={pageMeta} />
-                  )}
-                </TableCell>
+                {!isPublic ? (
+                  <TableCell
+                    style={{ padding: 0 }}
+                    data-testid={`more-actions-${pageMeta.id}`}
+                    onClick={e => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    {isTrash ? (
+                      <TrashOperationCell pageMeta={pageMeta} />
+                    ) : (
+                      <OperationCell pageMeta={pageMeta} />
+                    )}
+                  </TableCell>
+                ) : null}
               </StyledTableRow>
             );
           })}

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) => {

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 {

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 {

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<Workspace>();
+  const [page, setPage] = useState<PageStore>();
   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 (
-    <>
+    <PageContainer>
       {workspace && page && (
         <DynamicBlocksuite
           page={page}
           workspace={workspace}
-          setEditor={() => {
-            console.log('test');
+          setEditor={editor => {
+            editor.readonly = true;
           }}
         />
       )}
-    </>
+    </PageContainer>
   );
 };
 
@@ -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,
+  };
+});

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<PageMeta[]>([]);
+  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 (
-    <>
+    <PageContainer>
       <PageList
         pageList={pageList.filter(p => !p.trash)}
-        showFavoriteTag={true}
+        showFavoriteTag={false}
+        isPublic={true}
       />
-    </>
+    </PageContainer>
   );
 };