feat(core): workbench system (#5837)

2026-02-20 15:57:06 +08:00 · 2024-02-27 11:14:07 +07:00
parent 5cd488fe1d
commit 606397e319
31 changed files with 651 additions and 268 deletions
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx
@@ -1,5 +1,5 @@
-import { Page, WorkspaceListService } from '@toeverything/infra';
-import { useService, useServiceOptional } from '@toeverything/infra/di';
+import { WorkspaceListService } from '@toeverything/infra';
+import { useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -16,7 +16,6 @@ export const DumpInfo = (_props: DumpInfoProps) => {
  const currentWorkspace = useLiveData(
    useService(CurrentWorkspaceService).currentWorkspace
  );
-  const currentPage = useServiceOptional(Page);
  const path = location.pathname;
  const query = useParams();
  useEffect(() => {
@@ -24,9 +23,8 @@ export const DumpInfo = (_props: DumpInfoProps) => {
      path,
      query,
      currentWorkspaceId: currentWorkspace?.id,
-      currentPageId: currentPage?.id,
      workspaceList,
    });
-  }, [path, query, currentWorkspace, workspaceList, currentPage?.id]);
+  }, [path, query, currentWorkspace, workspaceList]);
  return null;
 };
--- a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -2,8 +2,8 @@ import { Checkbox } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
 import { type PropsWithChildren, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';

+import { WorkbenchLink } from '../../../modules/workbench/workbench-link';
 import type { DraggableTitleCellData, PageListItemProps } from '../types';
 import { ColWrapper, formatDate, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
@@ -235,14 +235,14 @@ function PageListItemWrapper({
      'data-dragging': isDragging,
      onClick: handleClick,
    }),
-    [pageId, draggable, isDragging, onClick, to, handleClick]
+    [pageId, draggable, onClick, to, isDragging, handleClick]
  );

  if (to) {
    return (
-      <Link {...commonProps} to={to}>
+      <WorkbenchLink {...commonProps} to={to}>
        {children}
-      </Link>
+      </WorkbenchLink>
    );
  } else {
    return <div {...commonProps}>{children}</div>;
--- a/packages/frontend/core/src/components/page-list/page-group.tsx
+++ b/packages/frontend/core/src/components/page-list/page-group.tsx
@@ -321,10 +321,7 @@ function pageMetaToListItemProp(
    ),
    createDate: new Date(item.createDate),
    updatedDate: item.updatedDate ? new Date(item.updatedDate) : undefined,
-    to:
-      props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/${item.id}`
-        : undefined,
+    to: props.rowAsLink && !props.selectable ? `/${item.id}` : undefined,
    onClick: props.selectable ? toggleSelection : undefined,
    icon: (
      <UnifiedPageIcon
@@ -372,7 +369,7 @@ function collectionMetaToListItemProp(
    title: item.title,
    to:
      props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/collection/${item.id}`
+        ? `/collection/${item.id}`
        : undefined,
    onClick: props.selectable ? toggleSelection : undefined,
    icon: <ViewLayersIcon />,
@@ -407,10 +404,7 @@ function tagMetaToListItemProp(
  const itemProps: TagListItemProps = {
    tagId: item.id,
    title: item.title,
-    to:
-      props.rowAsLink && !props.selectable
-        ? `/workspace/${props.blockSuiteWorkspace.id}/tag/${item.id}`
-        : undefined,
+    to: props.rowAsLink && !props.selectable ? `/tag/${item.id}` : undefined,
    onClick: props.selectable ? toggleSelection : undefined,
    color: item.color,
    pageCount: item.pageCount,
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@@ -17,11 +17,12 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { useService } from '@toeverything/infra';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';

 import { useAllPageListConfig } from '../../../../hooks/affine/use-all-page-list-config';
 import { getDropItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import { useBlockSuitePageMeta } from '../../../../hooks/use-block-suite-page-meta';
+import { Workbench } from '../../../../modules/workbench';
+import { WorkbenchLink } from '../../../../modules/workbench/workbench-link';
 import type { CollectionsListProps } from '../index';
 import { Page } from './page';
 import * as styles from './styles.css';
@@ -88,9 +89,9 @@ const CollectionRenderer = ({
    };
    return filterPage(collection, pageData);
  });
-  const location = useLocation();
-  const currentPath = location.pathname.split('?')[0];
-  const path = `/workspace/${workspace.id}/collection/${collection.id}`;
+  const location = useLiveData(useService(Workbench).location);
+  const currentPath = location.pathname;
+  const path = `/collection/${collection.id}`;

  const onRename = useCallback(
    (name: string) => {
@@ -115,6 +116,7 @@ const CollectionRenderer = ({
        active={isOver || currentPath === path}
        icon={<AnimatedCollectionsIcon closed={isOver} />}
        to={path}
+        linkComponent={WorkbenchLink}
        postfix={
          <div
            onClick={stopPropagation}
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -19,7 +19,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import { type Page } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
-import { useService, type Workspace } from '@toeverything/infra';
+import { useLiveData, useService, type Workspace } from '@toeverything/infra';
 import { useAtom, useAtomValue } from 'jotai';
 import { nanoid } from 'nanoid';
 import type { HTMLAttributes, ReactElement } from 'react';
@@ -34,6 +34,7 @@ import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
 import { useRegisterBrowserHistoryCommands } from '../../hooks/use-browser-history-commands';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
+import { Workbench } from '../../modules/workbench';
 import { WorkspaceSubPath } from '../../shared';
 import {
  createEmptyCollection,
@@ -57,7 +58,6 @@ export type RootAppSidebarProps = {
  currentWorkspace: Workspace;
  openPage: (pageId: string) => void;
  createPage: () => Page;
-  currentPath: string;
  paths: {
    all: (workspaceId: string) => string;
    trash: (workspaceId: string) => string;
@@ -98,7 +98,6 @@ export const RootAppSidebar = ({
  currentWorkspace,
  openPage,
  createPage,
-  currentPath,
  paths,
  onOpenQuickSearchModal,
  onOpenSettingModal,
@@ -111,6 +110,7 @@ export const RootAppSidebar = ({
    openWorkspaceListModalAtom
  );
  const generalShortcutsInfo = useGeneralShortcuts();
+  const currentPath = useLiveData(useService(Workbench).location).pathname;

  const onClickNewPage = useAsyncCallback(async () => {
    const page = createPage();
@@ -193,21 +193,9 @@ export const RootAppSidebar = ({
      });
  }, [blockSuiteWorkspace.id, collection, navigateHelper, open]);

-  const allPageActive = useMemo(() => {
-    if (
-      currentPath.startsWith(`/workspace/${currentWorkspaceId}/collection/`) ||
-      currentPath.startsWith(`/workspace/${currentWorkspaceId}/tag/`)
-    ) {
-      return true;
-    }
-    return currentPath === paths.all(currentWorkspaceId);
-  }, [currentPath, currentWorkspaceId, paths]);
+  const allPageActive = currentPath === '/all';

-  const trashActive = useMemo(() => {
-    return (
-      currentPath === paths.trash(currentWorkspaceId) || trashDroppable.isOver
-    );
-  }, [currentPath, currentWorkspaceId, paths, trashDroppable.isOver]);
+  const trashActive = currentPath === '/trash';

  return (
    <AppSidebar
--- a/packages/frontend/core/src/hooks/use-navigate-helper.ts
+++ b/packages/frontend/core/src/hooks/use-navigate-helper.ts
@@ -1,21 +1,23 @@
 import type { WorkspaceSubPath } from '@affine/core/shared';
 import { useCallback, useMemo } from 'react';
-import {
-  type NavigateOptions,
-  useLocation,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useNavigate,
-} from 'react-router-dom';
+import { type NavigateOptions, type To, useLocation } from 'react-router-dom';
+
+import { router } from '../router';

 export enum RouteLogic {
  REPLACE = 'replace',
  PUSH = 'push',
 }

+function navigate(to: To, option?: { replace?: boolean }) {
+  router.navigate(to, option).catch(err => {
+    console.error('Failed to navigate', err);
+  });
+}
+
 // todo: add a name -> path helper in the results
 export function useNavigateHelper() {
  const location = useLocation();
-  const navigate = useNavigate();

  const jumpToPage = useCallback(
    (
@@ -27,7 +29,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToPageBlock = useCallback(
    (
@@ -40,7 +42,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToCollections = useCallback(
    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
@@ -48,7 +50,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToTags = useCallback(
    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
@@ -56,7 +58,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToTag = useCallback(
    (
@@ -68,7 +70,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToCollection = useCallback(
    (
@@ -80,7 +82,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToPublicWorkspacePage = useCallback(
    (
@@ -92,7 +94,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );
  const jumpToSubPath = useCallback(
    (
@@ -104,7 +106,7 @@ export function useNavigateHelper() {
        replace: logic === RouteLogic.REPLACE,
      });
    },
-    [navigate]
+    []
  );

  const isPublicWorkspace = useMemo(() => {
@@ -122,31 +124,22 @@ export function useNavigateHelper() {
    [jumpToPage, jumpToPublicWorkspacePage, isPublicWorkspace]
  );

-  const jumpToIndex = useCallback(
-    (logic: RouteLogic = RouteLogic.PUSH) => {
-      return navigate('/', {
-        replace: logic === RouteLogic.REPLACE,
-      });
-    },
-    [navigate]
-  );
+  const jumpToIndex = useCallback((logic: RouteLogic = RouteLogic.PUSH) => {
+    return navigate('/', {
+      replace: logic === RouteLogic.REPLACE,
+    });
+  }, []);

-  const jumpTo404 = useCallback(
-    (logic: RouteLogic = RouteLogic.PUSH) => {
-      return navigate('/404', {
-        replace: logic === RouteLogic.REPLACE,
-      });
-    },
-    [navigate]
-  );
-  const jumpToExpired = useCallback(
-    (logic: RouteLogic = RouteLogic.PUSH) => {
-      return navigate('/expired', {
-        replace: logic === RouteLogic.REPLACE,
-      });
-    },
-    [navigate]
-  );
+  const jumpTo404 = useCallback((logic: RouteLogic = RouteLogic.PUSH) => {
+    return navigate('/404', {
+      replace: logic === RouteLogic.REPLACE,
+    });
+  }, []);
+  const jumpToExpired = useCallback((logic: RouteLogic = RouteLogic.PUSH) => {
+    return navigate('/expired', {
+      replace: logic === RouteLogic.REPLACE,
+    });
+  }, []);
  const jumpToSignIn = useCallback(
    (
      logic: RouteLogic = RouteLogic.PUSH,
@@ -157,7 +150,7 @@ export function useNavigateHelper() {
        ...otherOptions,
      });
    },
-    [navigate]
+    []
  );

  return useMemo(
--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/packages/frontend/core/src/layouts/workspace-layout.tsx
@@ -20,7 +20,7 @@ import { useService } from '@toeverything/infra/di';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { Map as YMap } from 'yjs';

 import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
@@ -151,7 +151,6 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
  const handleDragEnd = useSidebarDrag();

  const { appSettings } = useAppSettingHelper();
-  const location = useLocation();
  const { pageId } = useParams();

  // todo: refactor this that the root layout do not need to check route state
@@ -182,7 +181,6 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
                [currentWorkspace, openPage]
              )}
              createPage={handleCreatePage}
-              currentPath={location.pathname.split('?')[0]}
              paths={pathGenerator}
            />
          </Suspense>
--- a/packages/frontend/core/src/modules/infra-web/global-scope/index.tsx
+++ b/packages/frontend/core/src/modules/infra-web/global-scope/index.tsx
@@ -1,16 +1,11 @@
-import type { Page } from '@toeverything/infra';
 import {
-  LiveData,
-  ServiceCollection,
  type ServiceProvider,
  ServiceProviderContext,
  useLiveData,
  useService,
-  useServiceOptional,
 } from '@toeverything/infra';
 import type React from 'react';

-import { CurrentPageService } from '../../page';
 import { CurrentWorkspaceService } from '../../workspace';

 export const GlobalScopeProvider: React.FC<
@@ -24,18 +19,8 @@ export const GlobalScopeProvider: React.FC<
    currentWorkspaceService.currentWorkspace
  )?.services;

-  const currentPageService = useServiceOptional(CurrentPageService, {
-    provider: workspaceProvider ?? ServiceCollection.EMPTY.provider(),
-  });
-
-  const pageProvider = useLiveData(
-    currentPageService?.currentPage ?? new LiveData<Page | null>(null)
-  )?.services;
-
  return (
-    <ServiceProviderContext.Provider
-      value={pageProvider ?? workspaceProvider ?? rootProvider}
-    >
+    <ServiceProviderContext.Provider value={workspaceProvider ?? rootProvider}>
      {children}
    </ServiceProviderContext.Provider>
  );
--- a/packages/frontend/core/src/modules/page/current-page.tsx
+++ b/packages/frontend/core/src/modules/page/current-page.tsx
@@ -1,24 +0,0 @@
-import type { Page } from '@toeverything/infra';
-import { LiveData } from '@toeverything/infra/livedata';
-
-/**
- * service to manage current page
- */
-export class CurrentPageService {
-  currentPage = new LiveData<Page | null>(null);
-
-  /**
-   * open page, current page will be set to the page
-   * @param page
-   */
-  openPage(page: Page) {
-    this.currentPage.next(page);
-  }
-
-  /**
-   * close current page, current page will be null
-   */
-  closePage() {
-    this.currentPage.next(null);
-  }
-}
--- a/packages/frontend/core/src/modules/page/index.ts
+++ b/packages/frontend/core/src/modules/page/index.ts
@@ -1 +0,0 @@
-export * from './current-page';
--- a/packages/frontend/core/src/modules/services.ts
+++ b/packages/frontend/core/src/modules/services.ts
@@ -11,7 +11,7 @@ import {
  LocalStorageGlobalCache,
  LocalStorageGlobalState,
 } from './infra-web/storage';
-import { CurrentPageService } from './page';
+import { Workbench } from './workbench';
 import {
  CurrentWorkspaceService,
  WorkspaceLegacyProperties,
@@ -22,7 +22,7 @@ export function configureBusinessServices(services: ServiceCollection) {
  services.add(CurrentWorkspaceService);
  services
    .scope(WorkspaceScope)
-    .add(CurrentPageService)
+    .add(Workbench)
    .add(WorkspacePropertiesAdapter, [Workspace])
    .add(CollectionService, [Workspace])
    .add(WorkspaceLegacyProperties, [Workspace]);
--- a/packages/frontend/core/src/modules/workbench/browser-adapter.ts
+++ b/packages/frontend/core/src/modules/workbench/browser-adapter.ts
@@ -0,0 +1,105 @@
+import { useLiveData } from '@toeverything/infra/livedata';
+import { type Location } from 'history';
+import { useEffect } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import type { Workbench } from './workbench';
+
+/**
+ * This hook binds the workbench to the browser router.
+ * It listens to the active view and updates the browser location accordingly.
+ * It also listens to the browser location and updates the active view accordingly.
+ *
+ * The history of the active view and the browser are two different stacks.
+ *
+ * In the browser, we use browser history as the criterion, and view history is not very important.
+ * So our synchronization strategy is as follows:
+ *
+ * 1. When the active view history changed, we update the browser history, based on the update action.
+ *    - If the update action is PUSH, we navigate to the new location.
+ *    - If the update action is REPLACE, we replace the current location.
+ * 2. When the browser location changed, we update the active view history just in PUSH action.
+ * 3. To avoid infinite loop, we add a state to the location to indicate the source of the change.
+ */
+export function useBindWorkbenchToBrowserRouter(
+  workbench: Workbench,
+  basename: string
+) {
+  const navigate = useNavigate();
+  const browserLocation = useLocation();
+
+  const view = useLiveData(workbench.activeView);
+
+  useEffect(() => {
+    return view.history.listen(update => {
+      if (update.action === 'POP') {
+        // This is because the history of view and browser are two different stacks,
+        // the POP action cannot be synchronized.
+        throw new Error('POP view history is not allowed on browser');
+      }
+
+      if (update.location.state === 'fromBrowser') {
+        return;
+      }
+
+      const newBrowserLocation = viewLocationToBrowserLocation(
+        update.location,
+        basename
+      );
+
+      if (locationIsEqual(browserLocation, newBrowserLocation)) {
+        return;
+      }
+
+      navigate(newBrowserLocation, {
+        state: 'fromView',
+        replace: update.action === 'REPLACE',
+      });
+    });
+  }, [basename, browserLocation, navigate, view]);
+
+  useEffect(() => {
+    const newLocation = browserLocationToViewLocation(
+      browserLocation,
+      basename
+    );
+    if (newLocation === null) {
+      return;
+    }
+
+    view.history.push(newLocation, 'fromBrowser');
+  }, [basename, browserLocation, view]);
+}
+
+function browserLocationToViewLocation(
+  location: Location,
+  basename: string
+): Location | null {
+  if (!location.pathname.startsWith(basename)) {
+    return null;
+  }
+  return {
+    ...location,
+    pathname: location.pathname.slice(basename.length),
+  };
+}
+
+function viewLocationToBrowserLocation(
+  location: Location,
+  basename: string
+): Location {
+  return {
+    ...location,
+    pathname: `${basename}${location.pathname}`,
+  };
+}
+
+function locationIsEqual(a: Location, b: Location) {
+  return (
+    a.hash === b.hash &&
+    a.pathname === b.pathname &&
+    a.search === b.search &&
+    a.state === b.state
+  );
+}
--- a/packages/frontend/core/src/modules/workbench/desktop-adapter.ts
+++ b/packages/frontend/core/src/modules/workbench/desktop-adapter.ts
@@ -0,0 +1,49 @@
+import { type Location } from 'history';
+import { useEffect } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useLocation } from 'react-router-dom';
+
+import type { Workbench } from './workbench';
+
+/**
+ * This hook binds the workbench to the browser router.
+ *
+ * It listens to the browser location and updates the active view accordingly.
+ *
+ * In desktop, we not really care about the browser history, we only listen it,
+ * and never modify it.
+ *
+ * REPLACE and POP action in browser history is not supported.
+ * To do these actions, you should use the workbench API.
+ */
+export function useBindWorkbenchToDesktopRouter(
+  workbench: Workbench,
+  basename: string
+) {
+  const browserLocation = useLocation();
+
+  useEffect(() => {
+    const newLocation = browserLocationToViewLocation(
+      browserLocation,
+      basename
+    );
+    if (newLocation === null) {
+      return;
+    }
+
+    workbench.open(newLocation);
+  }, [basename, browserLocation, workbench]);
+}
+
+function browserLocationToViewLocation(
+  location: Location,
+  basename: string
+): Location | null {
+  if (!location.pathname.startsWith(basename)) {
+    return null;
+  }
+  return {
+    ...location,
+    pathname: location.pathname.slice(basename.length),
+  };
+}
--- a/packages/frontend/core/src/modules/workbench/index.ts
+++ b/packages/frontend/core/src/modules/workbench/index.ts
@@ -0,0 +1,2 @@
+export * from './view';
+export * from './workbench';
--- a/packages/frontend/core/src/modules/workbench/view/index.ts
+++ b/packages/frontend/core/src/modules/workbench/view/index.ts
@@ -0,0 +1 @@
+export * from './view';
--- a/packages/frontend/core/src/modules/workbench/view/view-root.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/view-root.tsx
@@ -0,0 +1,38 @@
+import { useLiveData } from '@toeverything/infra/livedata';
+import { useEffect, useMemo } from 'react';
+import {
+  createMemoryRouter,
+  RouterProvider,
+  UNSAFE_LocationContext,
+  UNSAFE_RouteContext,
+} from 'react-router-dom';
+
+import { viewRoutes } from '../../../router';
+import type { View } from './view';
+
+export const ViewRoot = ({ view }: { view: View }) => {
+  const viewRouter = useMemo(() => createMemoryRouter(viewRoutes), []);
+
+  const location = useLiveData(view.location);
+
+  useEffect(() => {
+    viewRouter.navigate(location).catch(err => {
+      console.error('navigate error', err);
+    });
+  }, [location, view, viewRouter]);
+
+  // https://github.com/remix-run/react-router/issues/7375#issuecomment-975431736
+  return (
+    <UNSAFE_LocationContext.Provider value={null as any}>
+      <UNSAFE_RouteContext.Provider
+        value={{
+          outlet: null,
+          matches: [],
+          isDataRoute: false,
+        }}
+      >
+        <RouterProvider router={viewRouter} />
+      </UNSAFE_RouteContext.Provider>
+    </UNSAFE_LocationContext.Provider>
+  );
+};
--- a/packages/frontend/core/src/modules/workbench/view/view.ts
+++ b/packages/frontend/core/src/modules/workbench/view/view.ts
@@ -0,0 +1,33 @@
+import { LiveData } from '@toeverything/infra';
+import type { Location, To } from 'history';
+import { createMemoryHistory } from 'history';
+import { nanoid } from 'nanoid';
+import { Observable } from 'rxjs';
+
+export class View {
+  id = nanoid();
+
+  history = createMemoryHistory();
+
+  location = LiveData.from<Location>(
+    new Observable(subscriber => {
+      subscriber.next(this.history.location);
+      return this.history.listen(update => {
+        subscriber.next(update.location);
+      });
+    }),
+    this.history.location
+  );
+
+  push(path: To) {
+    this.history.push(path);
+  }
+
+  go(n: number) {
+    this.history.go(n);
+  }
+
+  replace(path: To) {
+    this.history.replace(path);
+  }
+}
--- a/packages/frontend/core/src/modules/workbench/workbench-link.tsx
+++ b/packages/frontend/core/src/modules/workbench/workbench-link.tsx
@@ -0,0 +1,35 @@
+import { useService } from '@toeverything/infra/di';
+import type { To } from 'history';
+import { useCallback } from 'react';
+
+import { Workbench } from './workbench';
+
+export const WorkbenchLink = ({
+  to,
+  children,
+  onClick,
+  ...other
+}: React.PropsWithChildren<
+  { to: To } & React.HTMLProps<HTMLAnchorElement>
+>) => {
+  const workbench = useService(Workbench);
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      // TODO: open this when multi view control is implemented
+      // if (environment.isDesktop && (event.ctrlKey || event.metaKey)) {
+      //   workbench.open(to, { at: 'beside' });
+      // } else {
+      workbench.open(to);
+      // }
+
+      onClick?.(event);
+    },
+    [onClick, to, workbench]
+  );
+  return (
+    <a {...other} href="#" onClick={handleClick}>
+      {children}
+    </a>
+  );
+};
--- a/packages/frontend/core/src/modules/workbench/workbench-root.css.ts
+++ b/packages/frontend/core/src/modules/workbench/workbench-root.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const workbenchRootContainer = style({
+  display: 'flex',
+  height: '100%',
+});
+
+export const workbenchViewContainer = style({
+  flex: 1,
+});
--- a/packages/frontend/core/src/modules/workbench/workbench-root.tsx
+++ b/packages/frontend/core/src/modules/workbench/workbench-root.tsx
@@ -0,0 +1,54 @@
+import { useService } from '@toeverything/infra/di';
+import { useLiveData } from '@toeverything/infra/livedata';
+import { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useBindWorkbenchToBrowserRouter } from './browser-adapter';
+import { useBindWorkbenchToDesktopRouter } from './desktop-adapter';
+import type { View } from './view';
+import { ViewRoot } from './view/view-root';
+import { Workbench } from './workbench';
+import {
+  workbenchRootContainer,
+  workbenchViewContainer,
+} from './workbench-root.css';
+
+const useAdapter = environment.isDesktop
+  ? useBindWorkbenchToDesktopRouter
+  : useBindWorkbenchToBrowserRouter;
+
+export const WorkbenchRoot = () => {
+  const workbench = useService(Workbench);
+
+  // for debugging
+  (window as any).workbench = workbench;
+
+  const views = useLiveData(workbench.views);
+
+  const location = useLocation();
+  const basename = location.pathname.match(/\/workspace\/[^/]+/g)?.[0] ?? '/';
+
+  useAdapter(workbench, basename);
+
+  return (
+    <div className={workbenchRootContainer}>
+      {views.map((view, index) => (
+        <WorkbenchView key={view.id} view={view} index={index} />
+      ))}
+    </div>
+  );
+};
+
+const WorkbenchView = ({ view, index }: { view: View; index: number }) => {
+  const workbench = useService(Workbench);
+
+  const handleOnFocus = useCallback(() => {
+    workbench.active(index);
+  }, [workbench, index]);
+
+  return (
+    <div className={workbenchViewContainer} onMouseDownCapture={handleOnFocus}>
+      <ViewRoot key={view.id} view={view} />
+    </div>
+  );
+};
--- a/packages/frontend/core/src/modules/workbench/workbench.ts
+++ b/packages/frontend/core/src/modules/workbench/workbench.ts
@@ -0,0 +1,101 @@
+import { Unreachable } from '@affine/env/constant';
+import { LiveData } from '@toeverything/infra';
+import type { To } from 'history';
+import { combineLatest, map, switchMap } from 'rxjs';
+
+import { View } from './view';
+
+export type WorkbenchPosition = 'beside' | 'active' | number;
+
+export class Workbench {
+  readonly views = new LiveData([new View()]);
+
+  activeViewIndex = new LiveData(0);
+  activeView = LiveData.from(
+    combineLatest([this.views, this.activeViewIndex]).pipe(
+      map(([views, index]) => views[index])
+    ),
+    this.views.value[this.activeViewIndex.value]
+  );
+
+  location = LiveData.from(
+    this.activeView.pipe(switchMap(view => view.location)),
+    this.views.value[this.activeViewIndex.value].history.location
+  );
+
+  active(index: number) {
+    this.activeViewIndex.next(index);
+  }
+
+  createView(at: WorkbenchPosition = 'beside') {
+    const view = new View();
+    const newViews = [...this.views.value];
+    newViews.splice(this.indexAt(at), 0, view);
+    this.views.next(newViews);
+    return newViews.indexOf(view);
+  }
+
+  open(
+    to: To,
+    {
+      at = 'active',
+      replaceHistory = false,
+    }: { at?: WorkbenchPosition; replaceHistory?: boolean } = {}
+  ) {
+    let view = this.viewAt(at);
+    if (!view) {
+      const newIndex = this.createView(at);
+      view = this.viewAt(newIndex);
+      if (!view) {
+        throw new Unreachable();
+      }
+    }
+    if (replaceHistory) {
+      view.history.replace(to);
+    } else {
+      view.history.push(to);
+    }
+  }
+
+  openPage(pageId: string) {
+    this.open(`/${pageId}`);
+  }
+
+  openCollections() {
+    this.open('/collection');
+  }
+
+  openCollection(collectionId: string) {
+    this.open(`/collection/${collectionId}`);
+  }
+
+  openAll() {
+    this.open('/all');
+  }
+
+  openTrash() {
+    this.open('/trash');
+  }
+
+  openTags() {
+    this.open('/tag');
+  }
+
+  openTag(tagId: string) {
+    this.open(`/tag/${tagId}`);
+  }
+
+  viewAt(positionIndex: WorkbenchPosition): View | undefined {
+    return this.views.value[this.indexAt(positionIndex)];
+  }
+
+  private indexAt(positionIndex: WorkbenchPosition): number {
+    if (positionIndex === 'active') {
+      return this.activeViewIndex.value;
+    }
+    if (positionIndex === 'beside') {
+      return this.activeViewIndex.value + 1;
+    }
+    return positionIndex;
+  }
+}
--- a/packages/frontend/core/src/pages/share/share-detail-page.tsx
+++ b/packages/frontend/core/src/pages/share/share-detail-page.tsx
@@ -10,24 +10,24 @@ import {
  StaticBlobStorage,
 } from '@affine/workspace-impl';
 import { Logo1Icon } from '@blocksuite/icons';
+import type { Page } from '@toeverything/infra';
 import {
  EmptyBlobStorage,
  LocalBlobStorage,
  LocalSyncStorage,
-  Page,
  PageManager,
  type PageMode,
  ReadonlyMappingSyncStorage,
  RemoteBlobStorage,
+  ServiceProviderContext,
  useLiveData,
  useService,
-  useServiceOptional,
  WorkspaceIdContext,
  WorkspaceManager,
  WorkspaceScope,
 } from '@toeverything/infra';
 import { noop } from 'foxact/noop';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 import {
  isRouteErrorResponse,
@@ -39,7 +39,6 @@ import {
 import { AppContainer } from '../../components/affine/app-container';
 import { PageDetailEditor } from '../../components/page-detail-editor';
 import { SharePageNotFoundError } from '../../components/share-page-not-found-error';
-import { CurrentPageService } from '../../modules/page';
 import { CurrentWorkspaceService } from '../../modules/workspace';
 import * as styles from './share-detail-page.css';
 import { ShareFooter } from './share-footer';
@@ -131,6 +130,7 @@ export const Component = () => {

  const currentWorkspace = useService(CurrentWorkspaceService);
  const t = useAFFiNEI18N();
+  const [page, setPage] = useState<Page | null>(null);

  useEffect(() => {
    // create a workspace for share page
@@ -167,10 +167,8 @@ export const Component = () => {
          true
        );

-        const currentPage = workspace.services.get(CurrentPageService);
-
        currentWorkspace.openWorkspace(workspace);
-        currentPage.openPage(page);
+        setPage(page);
      })
      .catch(err => {
        console.error(err);
@@ -184,7 +182,6 @@ export const Component = () => {
    workspaceManager,
  ]);

-  const page = useServiceOptional(Page);
  const pageTitle = useLiveData(page?.title);

  usePageDocumentTitle(pageTitle);
@@ -195,45 +192,47 @@ export const Component = () => {
  }

  return (
-    <AppContainer>
-      <MainContainer>
-        <div className={styles.root}>
-          <div className={styles.mainContainer}>
-            <ShareHeader
-              pageId={page.id}
-              publishMode={publishMode}
-              blockSuiteWorkspace={page.blockSuitePage.workspace}
-            />
-            <Scrollable.Root>
-              <Scrollable.Viewport className={styles.editorContainer}>
-                <PageDetailEditor
-                  isPublic
-                  publishMode={publishMode}
-                  workspace={page.blockSuitePage.workspace}
-                  pageId={page.id}
-                  onLoad={() => noop}
-                />
-                {publishMode === 'page' ? <ShareFooter /> : null}
-              </Scrollable.Viewport>
-              <Scrollable.Scrollbar />
-            </Scrollable.Root>
-            {loginStatus !== 'authenticated' ? (
-              <a
-                href="https://affine.pro"
-                target="_blank"
-                className={styles.link}
-                rel="noreferrer"
-              >
-                <span className={styles.linkText}>
-                  {t['com.affine.share-page.footer.built-with']()}
-                </span>
-                <Logo1Icon fontSize={20} />
-              </a>
-            ) : null}
+    <ServiceProviderContext.Provider value={page.services}>
+      <AppContainer>
+        <MainContainer>
+          <div className={styles.root}>
+            <div className={styles.mainContainer}>
+              <ShareHeader
+                pageId={page.id}
+                publishMode={publishMode}
+                blockSuiteWorkspace={page.blockSuitePage.workspace}
+              />
+              <Scrollable.Root>
+                <Scrollable.Viewport className={styles.editorContainer}>
+                  <PageDetailEditor
+                    isPublic
+                    publishMode={publishMode}
+                    workspace={page.blockSuitePage.workspace}
+                    pageId={page.id}
+                    onLoad={() => noop}
+                  />
+                  {publishMode === 'page' ? <ShareFooter /> : null}
+                </Scrollable.Viewport>
+                <Scrollable.Scrollbar />
+              </Scrollable.Root>
+              {loginStatus !== 'authenticated' ? (
+                <a
+                  href="https://affine.pro"
+                  target="_blank"
+                  className={styles.link}
+                  rel="noreferrer"
+                >
+                  <span className={styles.linkText}>
+                    {t['com.affine.share-page.footer.built-with']()}
+                  </span>
+                  <Logo1Icon fontSize={20} />
+                </a>
+              ) : null}
+            </div>
          </div>
-        </div>
-      </MainContainer>
-    </AppContainer>
+        </MainContainer>
+      </AppContainer>
+    </ServiceProviderContext.Provider>
  );
 };

--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -18,8 +18,8 @@ import {
  Page,
  PageManager,
  PageRecordList,
+  ServiceProviderContext,
  useLiveData,
-  useServiceOptional,
 } from '@toeverything/infra';
 import { appSettingAtom, Workspace } from '@toeverything/infra';
 import { useService } from '@toeverything/infra';
@@ -31,6 +31,7 @@ import {
  useCallback,
  useEffect,
  useMemo,
+  useState,
 } from 'react';
 import { useParams } from 'react-router-dom';
 import type { Map as YMap } from 'yjs';
@@ -46,7 +47,6 @@ import { TopTip } from '../../../components/top-tip';
 import { useRegisterBlocksuiteEditorCommands } from '../../../hooks/affine/use-register-blocksuite-editor-commands';
 import { usePageDocumentTitle } from '../../../hooks/use-global-state';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
-import { CurrentPageService } from '../../../modules/page';
 import { performanceRenderLogger } from '../../../shared';
 import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
@@ -270,28 +270,19 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
  );

  const pageManager = useService(PageManager);
-  const currentPageService = useService(CurrentPageService);
+
+  const [page, setPage] = useState<Page | null>(null);

  useEffect(() => {
    if (!pageRecord) {
      return;
    }
    const { page, release } = pageManager.open(pageRecord.id);
-    currentPageService.openPage(page);
+    setPage(page);
    return () => {
-      currentPageService.closePage();
      release();
    };
-  }, [currentPageService, pageManager, pageRecord]);
-
-  const page = useServiceOptional(Page);
-
-  const currentWorkspace = useService(Workspace);
-
-  // set sync engine priority target
-  useEffect(() => {
-    currentWorkspace.setPriorityRule(id => id.endsWith(pageId));
-  }, [pageId, currentWorkspace]);
+  }, [pageManager, pageRecord]);

  const jumpOnce = useLiveData(pageRecord?.meta.map(meta => meta.jumpOnce));

@@ -310,7 +301,11 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
    return <PageDetailSkeleton key="current-page-is-null" />;
  }

-  return <DetailPageImpl />;
+  return (
+    <ServiceProviderContext.Provider value={page.services}>
+      <DetailPageImpl />
+    </ServiceProviderContext.Provider>
+  );
 };

 export const Component = () => {
--- a/packages/frontend/core/src/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/index.tsx
@@ -5,7 +5,11 @@ import {
  WorkspaceListService,
  WorkspaceManager,
 } from '@toeverything/infra';
-import { useService, useServiceOptional } from '@toeverything/infra/di';
+import {
+  ServiceProviderContext,
+  useService,
+  useServiceOptional,
+} from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import {
  type ReactElement,
@@ -14,10 +18,11 @@ import {
  useMemo,
  useState,
 } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';

 import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
 import { WorkspaceLayout } from '../../layouts/workspace-layout';
+import { WorkbenchRoot } from '../../modules/workbench/workbench-root';
 import { CurrentWorkspaceService } from '../../modules/workspace/current-workspace';
 import { performanceRenderLogger } from '../../shared';
 import { PageNotFound } from '../404';
@@ -105,12 +110,14 @@ export const Component = (): ReactElement => {
  }

  return (
-    <Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
-      <AffineErrorBoundary height="100vh">
-        <WorkspaceLayout>
-          <Outlet />
-        </WorkspaceLayout>
-      </AffineErrorBoundary>
-    </Suspense>
+    <ServiceProviderContext.Provider value={currentWorkspace.services}>
+      <Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
+        <AffineErrorBoundary height="100vh">
+          <WorkspaceLayout>
+            <WorkbenchRoot />
+          </WorkspaceLayout>
+        </AffineErrorBoundary>
+      </Suspense>
+    </ServiceProviderContext.Provider>
  );
 };
--- a/packages/frontend/core/src/router.tsx
+++ b/packages/frontend/core/src/router.tsx
@@ -2,44 +2,14 @@ import * as Sentry from '@sentry/react';
 import type { RouteObject } from 'react-router-dom';
 import { createBrowserRouter as reactRouterCreateBrowserRouter } from 'react-router-dom';

-export const routes = [
+export const workbenchRoutes = [
  {
    path: '/',
    lazy: () => import('./pages/index'),
  },
  {
-    path: '/workspace/:workspaceId',
+    path: '/workspace/:workspaceId/*',
    lazy: () => import('./pages/workspace/index'),
-    children: [
-      {
-        path: 'all',
-        lazy: () => import('./pages/workspace/all-page/all-page'),
-      },
-      {
-        path: 'collection',
-        lazy: () => import('./pages/workspace/all-collection'),
-      },
-      {
-        path: 'collection/:collectionId',
-        lazy: () => import('./pages/workspace/collection/index'),
-      },
-      {
-        path: 'tag',
-        lazy: () => import('./pages/workspace/all-tag'),
-      },
-      {
-        path: 'tag/:tagId',
-        lazy: () => import('./pages/workspace/tag'),
-      },
-      {
-        path: 'trash',
-        lazy: () => import('./pages/workspace/trash-page'),
-      },
-      {
-        path: ':pageId',
-        lazy: () => import('./pages/workspace/detail-page/detail-page'),
-      },
-    ],
  },
  {
    path: '/share/:workspaceId/:pageId',
@@ -87,10 +57,45 @@ export const routes = [
  },
 ] satisfies [RouteObject, ...RouteObject[]];

+export const viewRoutes = [
+  {
+    path: '/all',
+    lazy: () => import('./pages/workspace/all-page/all-page'),
+  },
+  {
+    path: '/collection',
+    lazy: () => import('./pages/workspace/all-collection'),
+  },
+  {
+    path: '/collection/:collectionId',
+    lazy: () => import('./pages/workspace/collection/index'),
+  },
+  {
+    path: '/tag',
+    lazy: () => import('./pages/workspace/all-tag'),
+  },
+  {
+    path: '/tag/:tagId',
+    lazy: () => import('./pages/workspace/tag'),
+  },
+  {
+    path: '/trash',
+    lazy: () => import('./pages/workspace/trash-page'),
+  },
+  {
+    path: '/:pageId',
+    lazy: () => import('./pages/workspace/detail-page/detail-page'),
+  },
+  {
+    path: '*',
+    lazy: () => import('./pages/404'),
+  },
+] satisfies [RouteObject, ...RouteObject[]];
+
 const createBrowserRouter = Sentry.wrapCreateBrowserRouter(
  reactRouterCreateBrowserRouter
 );
-export const router = createBrowserRouter(routes, {
+export const router = createBrowserRouter(workbenchRoutes, {
  future: {
    v7_normalizeFormMethod: true,
  },
--- a/packages/frontend/core/src/testing.ts
+++ b/packages/frontend/core/src/testing.ts
@@ -7,7 +7,6 @@ import {
  WorkspaceManager,
 } from '@toeverything/infra';

-import { CurrentPageService } from './modules/page';
 import { CurrentWorkspaceService } from './modules/workspace';
 import { configureWebServices } from './web';

@@ -40,7 +39,6 @@ export async function configureTestingEnvironment() {
  const { page } = workspace.services.get(PageManager).open('page0');

  rootServices.get(CurrentWorkspaceService).openWorkspace(workspace);
-  workspace.services.get(CurrentPageService).openPage(page);

  return { services: rootServices, workspace, page };
 }