fix(core): should open a new tab with parameters (#8118)

Closes [AF-1343](https://linear.app/affine-design/issue/AF-1343/点击-center-peek-右侧的按钮时,应该携带参数)
This commit is contained in:
fundon
2024-09-05 10:30:39 +00:00
parent 7621758c76
commit de1a51bf7c
4 changed files with 35 additions and 17 deletions
@@ -59,8 +59,9 @@ export const ControlButton = ({
type DocPeekViewControlsProps = HTMLAttributes<HTMLDivElement> & { type DocPeekViewControlsProps = HTMLAttributes<HTMLDivElement> & {
docId: string; docId: string;
blockId?: string;
mode?: DocMode; mode?: DocMode;
blockIds?: string[];
elementIds?: string[];
}; };
export const DefaultPeekViewControls = ({ export const DefaultPeekViewControls = ({
@@ -90,8 +91,9 @@ export const DefaultPeekViewControls = ({
export const DocPeekViewControls = ({ export const DocPeekViewControls = ({
docId, docId,
blockId,
mode, mode,
blockIds,
elementIds,
className, className,
...rest ...rest
}: DocPeekViewControlsProps) => { }: DocPeekViewControlsProps) => {
@@ -111,8 +113,7 @@ export const DocPeekViewControls = ({
name: t['com.affine.peek-view-controls.open-doc'](), name: t['com.affine.peek-view-controls.open-doc'](),
nameKey: 'open', nameKey: 'open',
onClick: () => { onClick: () => {
// TODO(@Peng): for frame blocks, we should mimic "view in edgeless" button behavior workbench.openDoc({ docId, mode, blockIds, elementIds });
workbench.openDoc({ docId, mode, blockId });
peekView.close('none'); peekView.close('none');
}, },
}, },
@@ -121,7 +122,10 @@ export const DocPeekViewControls = ({
nameKey: 'new-tab', nameKey: 'new-tab',
name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](), name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](),
onClick: () => { onClick: () => {
workbench.openDoc({ docId, mode }, { at: 'new-tab' }); workbench.openDoc(
{ docId, mode, blockIds, elementIds },
{ at: 'new-tab' }
);
peekView.close('none'); peekView.close('none');
}, },
}, },
@@ -135,7 +139,7 @@ export const DocPeekViewControls = ({
}, },
}, },
].filter((opt): opt is ControlButtonProps => Boolean(opt)); ].filter((opt): opt is ControlButtonProps => Boolean(opt));
}, [blockId, docId, mode, peekView, t, workbench]); }, [docId, mode, blockIds, elementIds, peekView, t, workbench]);
return ( return (
<div {...rest} className={clsx(styles.root, className)}> <div {...rest} className={clsx(styles.root, className)}>
{controls.map(option => ( {controls.map(option => (
@@ -53,7 +53,8 @@ const renderControls = ({ info }: ActivePeekView) => {
<DocPeekViewControls <DocPeekViewControls
mode={info.mode} mode={info.mode}
docId={info.docId} docId={info.docId}
blockId={info.docId} blockIds={info.blockIds}
elementIds={info.elementIds}
/> />
); );
} }
@@ -54,10 +54,14 @@ export class CMDKQuickSearchService extends Service {
result.source === 'docs' && result.source === 'docs' &&
track.$.cmdk.results.searchResultsDocs(); track.$.cmdk.results.searchResultsDocs();
this.workbenchService.workbench.openDoc({ const options: { docId: string; blockIds?: string[] } = {
docId: doc.docId, docId: doc.docId,
blockId: doc.blockId, };
}); if (doc.blockId) {
options.blockIds = [doc.blockId];
}
this.workbenchService.workbench.openDoc(options);
} else if (result.source === 'collections') { } else if (result.source === 'collections') {
this.workbenchService.workbench.openCollection( this.workbenchService.workbench.openCollection(
result.payload.collectionId result.payload.collectionId
@@ -122,18 +122,27 @@ export class Workbench extends Entity {
} }
openDoc( openDoc(
id: string | { docId: string; blockId?: string; mode?: DocMode }, id:
| string
| {
docId: string;
mode?: DocMode;
blockIds?: string[];
elementIds?: string[];
},
options?: WorkbenchOpenOptions options?: WorkbenchOpenOptions
) { ) {
const docId = typeof id === 'string' ? id : id.docId; const isString = typeof id === 'string';
const blockId = typeof id === 'string' ? undefined : id.blockId; const docId = isString ? id : id.docId;
const mode = typeof id === 'string' ? undefined : id.mode;
let query = ''; let query = '';
if (mode || blockId) { if (!isString) {
const { mode, blockIds, elementIds } = id;
const search = new URLSearchParams(); const search = new URLSearchParams();
if (mode) search.set('mode', mode); if (mode) search.set('mode', mode);
if (blockId) search.set('blockIds', blockId); if (blockIds?.length) search.set('blockIds', blockIds.join(','));
query = `?${search.toString()}`; if (elementIds?.length) search.set('elementIds', elementIds.join(','));
if (search.size > 0) query = `?${search.toString()}`;
} }
this.open(`/${docId}${query}`, options); this.open(`/${docId}${query}`, options);