EAIFrontend/src/pages/Test/Test.tsx

import WordEditor from "@/components/WordEditor/WordEditor";
import styles from "./Test.module.scss"
import useApis from "@/apis";
import {useNavigate} from "react-router";
import {useState} from "react";
import {Modal} from "antd";

const Test = () => {

    const apis = useApis()

    const nav = useNavigate()

    const [isModified, setIsModified] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleClick = () => {
        if (isModified) showModal()
        else nav("/")
    }

    const handleValueChange = (state: boolean)=> {
        setIsModified(state)
    }

    return (
        <div className={styles.container}>
            <div className={styles["editor-box"]}>
                <WordEditor onValueChange={handleValueChange}></WordEditor>
            </div>
            <button onClick={handleClick}>提交</button>
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        </div>
    )
}

export default Test;