client: add navigator button

This commit is contained in:
fantasticit 2022-06-03 18:48:13 +08:00
parent 1b2843f185
commit 9d13ffccd4
1 changed files with 62 additions and 37 deletions

View File

@ -1,13 +1,5 @@
import { import { Breadcrumb, Button, Form, Layout, Nav, Skeleton, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
Breadcrumb, import { IconExport, IconImport } from '@douyinfe/semi-icons';
Button,
Form,
Layout,
Nav,
Skeleton,
Space,
Typography,
} from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form'; import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Divider } from 'components/divider'; import { Divider } from 'components/divider';
@ -28,6 +20,9 @@ import { CollaborationEditor } from 'tiptap/editor';
import { Author } from '../author'; import { Author } from '../author';
import styles from './index.module.scss'; import styles from './index.module.scss';
import Router from 'next/router';
import { useRouterQuery } from 'hooks/use-router-query';
import { IDocument, IWiki } from '@think/domains';
const { Header } = Layout; const { Header } = Layout;
const { Text } = Typography; const { Text } = Typography;
@ -39,7 +34,8 @@ interface IProps {
export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo = false }) => { export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo = false }) => {
const $form = useRef<FormApi>(); const $form = useRef<FormApi>();
const mounted = useMount() const mounted = useMount();
const { wikiId: currentWikiId } = useRouterQuery<{ wikiId: IWiki['id']; documentId: IDocument['id'] }>();
const { data, loading, error, query } = usePublicDocumentDetail(documentId); const { data, loading, error, query } = usePublicDocumentDetail(documentId);
const { width, fontSize } = useDocumentStyle(); const { width, fontSize } = useDocumentStyle();
const { isMobile } = IsOnMobile.useHook(); const { isMobile } = IsOnMobile.useHook();
@ -68,7 +64,12 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
}); });
}, [query]); }, [query]);
if (!documentId) return null; const toPublicWikiOrDocumentURL = useCallback(() => {
Router.push({
pathname: currentWikiId ? '/share/document/[documentId]' : '/share/wiki/[wikiId]/document/[documentId]',
query: currentWikiId ? { documentId } : { wikiId: data.wikiId, documentId },
});
}, [data, currentWikiId]);
const content = useMemo(() => { const content = useMemo(() => {
if (error) { if (error) {
@ -94,7 +95,8 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
); );
} }
// @ts-ignore // @ts-ignore
return (<div return (
<div
style={{ style={{
margin: '10%', margin: '10%',
display: 'flex', display: 'flex',
@ -107,23 +109,26 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
<Text style={{ marginTop: 12 }} type="danger"> <Text style={{ marginTop: 12 }} type="danger">
{(error && (error as Error).message) || '未知错误'} {(error && (error as Error).message) || '未知错误'}
</Text> </Text>
</div>); </div>
);
} }
return ( return (
<> <>
{data && <Seo title={data.title} />} {data && <Seo title={data.title} />}
{mounted && <CollaborationEditor {mounted && (
<CollaborationEditor
menubar={false} menubar={false}
editable={false} editable={false}
user={null} user={null}
id={documentId} id={documentId}
type="document" type="document"
renderInEditorPortal={renderAuthor} renderInEditorPortal={renderAuthor}
/>} />
)}
</> </>
) );
}, [error, data, mounted, editorWrapClassNames, fontSize]) }, [error, data, mounted, editorWrapClassNames, fontSize]);
return ( return (
<Layout className={styles.wrap}> <Layout className={styles.wrap}>
@ -143,6 +148,26 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
} }
footer={ footer={
<Space> <Space>
{currentWikiId ? (
<Tooltip content="独立模式">
<Button
theme="borderless"
type="tertiary"
icon={<IconExport />}
onClick={toPublicWikiOrDocumentURL}
/>
</Tooltip>
) : (
<Tooltip content="嵌入模式">
<Button
theme="borderless"
type="tertiary"
icon={<IconImport />}
onClick={toPublicWikiOrDocumentURL}
/>
</Tooltip>
)}
<DocumentStyle /> <DocumentStyle />
<Theme /> <Theme />
<User /> <User />
@ -154,7 +179,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
error={error} error={error}
loadingContent={<Skeleton active placeholder={<Skeleton.Title style={{ width: 80 }} />} loading={true} />} loadingContent={<Skeleton active placeholder={<Skeleton.Title style={{ width: 80 }} />} loading={true} />}
normalContent={() => ( normalContent={() => (
<Breadcrumb > <Breadcrumb>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link href="/share/wiki/[wikiId]" as={`/share/wiki/${data.wikiId}`}> <Link href="/share/wiki/[wikiId]" as={`/share/wiki/${data.wikiId}`}>
<a>{data?.wiki?.name}</a> <a>{data?.wiki?.name}</a>