feat(core): open new page on meta-clicking a page link (#6220)

packages/frontend/core/src/modules/workbench/entities/workbench.ts

@@ -23,6 +23,8 @@ export class Workbench {
     this.views.value[this.activeViewIndex.value]
   );
 
+  basename = new LiveData('/');
+
   location = LiveData.from(
     this.activeView.pipe(switchMap(view => view.location)),
     this.views.value[this.activeViewIndex.value].history.location

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -1,5 +1,6 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useService } from '@toeverything/infra/di';
+import { useLiveData } from '@toeverything/infra/livedata';
 import type { To } from 'history';
 import { useCallback } from 'react';
 
@@ -15,24 +16,28 @@ export const WorkbenchLink = ({
 >) => {
   const workbench = useService(Workbench);
   const { appSettings } = useAppSettingHelper();
+  const basename = useLiveData(workbench.basename);
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       event.stopPropagation();
-      // TODO: open this when multi view control is implemented
-      if (
-        appSettings.enableMultiView &&
-        environment.isDesktop &&
-        (event.ctrlKey || event.metaKey)
-      ) {
-        workbench.open(to, { at: 'beside' });
+
+      if (event.ctrlKey || event.metaKey) {
+        if (appSettings.enableMultiView && environment.isDesktop) {
+          workbench.open(to, { at: 'beside' });
+        } else if (!environment.isDesktop) {
+          const href =
+            typeof to === 'string'
+              ? to
+              : `${to.pathname}${to.search}${to.hash}`;
+          window.open(basename + href, '_blank');
+        }
       } else {
         workbench.open(to);
       }
-
       onClick?.(event);
     },
-    [appSettings.enableMultiView, onClick, to, workbench]
+    [appSettings.enableMultiView, basename, onClick, to, workbench]
   );
   return (
     <a {...other} href="#" onClick={handleClick}>

packages/frontend/core/src/modules/workbench/view/workbench-root.tsx

@@ -39,6 +39,10 @@ export const WorkbenchRoot = () => {
     [workbench]
   );
 
+  useEffect(() => {
+    workbench.basename.next(basename);
+  }, [basename, workbench.basename]);
+
   return (
     <SplitView
       className={styles.workbenchRootContainer}