distribution-management/src/pages/MiniApp/BookManage/components/readBook/index.tsx

import { Button, Col, Row, Image, Spin, Space, Drawer, Empty } from "antd";
import { useEffect,  useRef, useState } from "react";
import { MyIcon } from "@/global";
import { useToken } from "@ant-design/pro-components";
function ReadBook(props: { next: (listData: { id: number }) => Promise<any>, listData: any }) {
    let { next, listData } = props;
    const divRef = useRef<HTMLDivElement>(null);
    let { token } = useToken()
    const [content, setContent] = useState<any>(null)
    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if (divRef.current) {
                if (event.key === "ArrowDown") {
                    divRef.current.scrollBy(0, 50);
                } else if (event.key === "ArrowUp") {
                    divRef.current.scrollBy(0, -50);
                }
            }
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => {
            window.removeEventListener("keydown", handleKeyDown);
        };
    }, []);


    async function getBookContent(params: any) {
        let content = await next(params)
        setContent(content)
    }
    useEffect(() => {
        if (divRef.current) {
            divRef.current.scrollTop = 0
        }
    }, [content, divRef])
    return (
        listData && <div
            style={{ height: '85vh', overflow: 'hidden', display: 'flex', justifyContent: 'space-around' }}
        >
            <div style={{ width: '20%', flexFlow: 'column', alignItems: 'center', display: 'flex', borderRight: '1px solid #efefef' }}>
                <div style={{ marginBottom: 20, marginTop: 20 }}>
                    {listData?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 70, position: 'absolute', zIndex: 1 }} />}
                    <Image src={listData?.picUrl} style={{ width: 150 }} onError={(e: any) => {
                        e.target.src = localStorage.getItem("nocover")
                    }} />
                </div>
                <Row style={{ width: '80%' }} gutter={[10, 5]}>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>作者</span>：</span>{listData?.authorInfo?.authorName}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>类别</span>：</span>{listData?.categoryInfo?.name}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>来源</span>：</span>{({ "UPLOAD": "管理员", "CREATOR": "创作者" } as any)[listData.source]}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>频道</span>：</span>{listData?.corpUserName == 0 ? "男频" : "女频"}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>标签：</span> {
                        listData?.labelInfoList?.map((tags: { id: string, name: string }, index: number) => {
                            return tags?.name
                        }).join(',')
                    }</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }} ><span style={{ color: token.colorText }}><span>状态</span>：</span>{["连载中", "已完结"][listData.bookStatus]}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>评分：</span>{listData?.score || 0}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>点击量：</span>{listData?.visitCount || 0}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>总字数：</span>{listData?.wordCount || 0}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>上架状态：</span>{["上架中", "已下架"][listData.shelveStatus]}</Col>
                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>描述：</span>{listData?.bookDesc}</Col>

                </Row>
            </div>

            <div
                style={{ overflowY: 'auto', display: 'flex', flexFlow: "column", width: '75%', paddingTop: 20, paddingBottom: 20 }}
                ref={divRef}
            >
                <div >
                    {listData.list?.map((ele: any, index: number) => (
                        <a
                            key={index}
                            style={{ display: 'inline-block', marginRight: ele.index % 4 === 0 ? 0 : 20, marginBottom: 10, width: 190, overflow: 'hidden' }}
                            onClick={() => { getBookContent({ bookId: ele?.chapterInfo?.bookId, chapterNo: ele?.chapterInfo?.chapterNo }) }}
                        >
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                {ele.needPay && <MyIcon type="icon-jiesuo" style={{ marginRight: 5 }} />}
                                <span >{ele?.chapterInfo?.chapterName}</span>
                            </div>
                        </a>
                    ))}
                    {listData.list?.length === 0 && <div style={{ width: "100%", height: "100%", marginTop: "10%" }}><Empty description={<Space direction='vertical'><div>暂无章节</div></Space>} /></div>}
                </div>
                {/* 阅读小说 */}
                <Drawer
                    open={!!content}
                    placement="right"
                    onClose={() => { setContent(null) }}
                    footer={null}
                    width={'60%'}
                    destroyOnClose={true}
                    styles={{ body: { padding: 0 } }}
                    closeIcon={false}
                    title={<div style={{ fontSize: 20 }}>{content?.chapterName}</div>}
                >
                    {
                        content && <>
                            <div
                                ref={divRef}
                                style={{ borderTop: '1px solid #efefef', fontSize: 17, lineHeight: 2, padding: '0 40px', height: '87vh', overflowY: 'auto', paddingBottom: 50, paddingTop: 15, boxSizing: 'border-box' }} dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }}></div>
                            <div style={{ borderTop: '1px solid #efefef', display: 'flex', justifyContent: 'center' }}>
                                <Space style={{ marginTop: 15 }}>
                                    {content?.chapterNo > 1 && <Button onClick={() => {
                                        getBookContent({ bookId: content?.bookId, chapterNo: content?.chapterNo - 1 })
                                    }}>上一章</Button>}
                                    {content?.chapterNo < listData?.list?.length && <Button onClick={() => {
                                        getBookContent({ bookId: content?.bookId, chapterNo: content?.chapterNo + 1 })
                                    }}>下一章</Button>}
                                </Space>
                            </div>
                        </>
                    }
                </Drawer>

            </div>

        </div>
    );
}

export default ReadBook;