This commit is contained in:
lilingfengdev 2024-10-11 20:31:12 +08:00
parent 2989e20d11
commit 064dff131a

View File

@ -11,40 +11,35 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocItemContent from '@theme/DocItem/Content'; import DocItemContent from '@theme/DocItem/Content';
import DocBreadcrumbs from '@theme/DocBreadcrumbs'; import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import ContentVisibility from '@theme/ContentVisibility'; import ContentVisibility from '@theme/ContentVisibility';
import type {Props} from '@theme/DocItem/Layout'; import styles from './styles.module.css';
import { FloatButton, Modal } from 'antd'; import { FloatButton, Modal } from 'antd';
import { FilePdfOutlined, PrinterOutlined } from '@ant-design/icons'; import { FilePdfOutlined, PrinterOutlined } from '@ant-design/icons';
import styles from './styles.module.css';
/** /**
* Decide if the toc should be rendered, on mobile or desktop viewports * Decide if the toc should be rendered, on mobile or desktop viewports
*/ */
function useDocTOC() { function useDocTOC() {
const {frontMatter, toc} = useDoc(); const {frontMatter, toc} = useDoc();
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const hidden = frontMatter.hide_table_of_contents; const hidden = frontMatter.hide_table_of_contents;
const canRender = !hidden && toc.length > 0; const canRender = !hidden && toc.length > 0;
const mobile = canRender ? <DocItemTOCMobile /> : undefined; const mobile = canRender ? <DocItemTOCMobile /> : undefined;
const desktop = const desktop =
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
<DocItemTOCDesktop /> <DocItemTOCDesktop />
) : undefined; ) : undefined;
return { return {
hidden, hidden,
mobile, mobile,
desktop, desktop,
}; };
} }
export default function DocItemLayout({children}) {
export default function DocItemLayout({children}: Props): JSX.Element {
const docTOC = useDocTOC(); const docTOC = useDocTOC();
const {metadata} = useDoc(); const {metadata} = useDoc();
const printArticle = () => {
window.print();
};
const downloadPDF = () => { const downloadPDF = () => {
Modal.info({ Modal.info({
title: '下载PDF', title: '下载PDF',
@ -60,9 +55,6 @@ export default function DocItemLayout({children}: Props): JSX.Element {
}, },
}) })
}; };
const printArticle = () => {
window.print();
};
return ( return (
<div className="row"> <div className="row">
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}> <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
@ -81,9 +73,9 @@ export default function DocItemLayout({children}: Props): JSX.Element {
</div> </div>
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>} {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
<FloatButton.Group shape="circle" style={{right: 24}} className="article-float-buttons"> <FloatButton.Group shape="circle" style={{right: 24}} className="article-float-buttons">
<FloatButton.BackTop visibilityHeight={0}/>
<FloatButton icon={<PrinterOutlined/>} title="打印文档" onClick={printArticle}/> <FloatButton icon={<PrinterOutlined/>} title="打印文档" onClick={printArticle}/>
<FloatButton icon={<FilePdfOutlined/>} title="下载PDF" onClick={downloadPDF}/> <FloatButton icon={<FilePdfOutlined/>} title="下载PDF" onClick={downloadPDF}/>
<FloatButton.BackTop visibilityHeight={0}/>
</FloatButton.Group> </FloatButton.Group>
</div> </div>
); );