EAIFrontend/src/pages/CorrectPage/components/RightPanel.tsx

import {useState} from "react";
import {IDomEditor, IEditorConfig, IToolbarConfig} from "@wangeditor/editor";
import {Editor, Toolbar} from "@wangeditor/editor-for-react";
import {Button} from "@/components/Button/Button";

const RightPanel = () => {
    const [editor, setEditor] = useState<IDomEditor | null>(null);
    const [html, setHtml] = useState('');
    const [select, setSelect] = useState(0);

    const toolbarConfig: Partial<IToolbarConfig> = {};

    const editorConfig: Partial<IEditorConfig> = {
        placeholder: '请输入内容...',
    };

    return (
        <div className="word-right">
            <div className="word-right-container">
                <div className="scoring">
                    Ai评分：
                    <div className="circle">78</div>
                </div>
                <div className="record">
                    <div>写作过程记录</div>
                    <div className="record-select">
                        <div className="sidebar">
                            <div className="sidebar-item" onClick={() => setSelect(0)}>AI对话</div>
                            <div className="sidebar-item" onClick={() => setSelect(1)}>字典搜索</div>
                            <div className="sidebar-item" onClick={() => setSelect(2)}>AI评价</div>
                        </div>
                        <div className="select-content">
                            {

                                select === 0 && <div>Ai对话</div>
                            }
                            {
                                select === 1 && <div>字典搜索</div>
                            }
                            {
                                select === 2 && <div>AI评价</div>
                            }
                        </div>
                    </div>
                </div>
                <div className="scoring">
                    最终得分: <span>999999</span>
                </div>
            </div>
            <div className="word-right-bottom">
                <div className="edit-box">
                    <div>修改意见与评价</div>
                    <div className="edit-root">
                        <Toolbar
                            editor={editor}
                            defaultConfig={toolbarConfig}
                            mode="default"
                            style={{ borderBottom: '1px solid #ccc' }}
                        />
                        <div className="edit-toolbar-box">
                            <Editor
                                value={html}
                                defaultConfig={editorConfig}
                                onCreated={setEditor}
                                onChange={(editor) => setHtml(editor.getHtml())}
                                mode="default"
                                style={{ height: '300px', overflowY: 'hidden' }}
                            />
                        </div>
                    </div>
                    <div className="button-right">
                        <Button>智能批改</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default RightPanel