chat-client-web/app/components/Record.tsx

import * as React from 'react';
import { Link } from 'react-router-dom';
import { IconButton } from './button';
import ReturnIcon from "../icons/return.svg";
import Excel from 'js-export-excel';

const RecordApp: React.FC = () => {
    const [account, setAccount] = React.useState('');
    const [password, setPassword] = React.useState('');

    // 模拟获取聊天记录数据
    const getChatRecords = () => {
        const records = [
            { id: 1, timestamp: '2024-08-15 10:00:00', message: '你好，欢迎来到建科招聘！' },
            { id: 2, timestamp: '2024-08-15 10:01:00', message: '请问有什么可以帮助您的？' },
            { id: 3, timestamp: '2024-08-15 10:02:00', message: '我想了解关于软件工程师的职位详情。' },
        ];
        return records;
    };

    // 点击导出
    const onClickExport = async (data: { account: string, password: string }) => {
        if (data.account && data.password) {
            if (data.account === 'root' && password === 'root@2024') {
                // const res = await fetch('/api/bigModel');
                // 模拟获取数据
                const res = getChatRecords();
                // 导出数据到Excel
                const option = {
                    fileName: '聊天记录',
                    datas: [{
                        sheetData: res,
                        sheetName: '聊天记录',
                    }],
                };
                // 使用Excel构造函数导出数据
                const excel = new Excel(option);
                excel.saveExcel();
            } else {
                alert('账号密码不正确');
            }
        } else {
            alert('请输入账号密码');
        }
    }

    return (
        <div>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid rgba(0, 0, 0, 0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <div style={{ fontSize: 20, fontWeight: 'bolder' }}>
                        建科招聘聊天记录
                    </div>
                    <div style={{ fontSize: 14 }}>
                        输入账号密码导出聊天记录
                    </div>
                </div>
                <div>
                    <Link to='/'>
                        <IconButton
                            icon={<ReturnIcon />}
                            bordered
                            title='返回'
                            aria='返回'
                        />
                    </Link>
                </div>
            </div>
            <div style={{ width: '100%', padding: '20px 0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <input
                    style={{ width: '50%' }}
                    type="text"
                    placeholder="请输入账号"
                    value={account}
                    onChange={(e) => {
                        const value = e.target.value;
                        setAccount(value);
                    }}
                />
                <input
                    style={{ width: '50%', margin: '20px 0' }}
                    type="password"
                    placeholder="请输入密码"
                    value={password}
                    onChange={(e) => {
                        const value = e.target.value;
                        setPassword(value);
                    }}
                />
                <button
                    style={{
                        width: '50%',
                        border: '1px solid rgba(0, 0, 0, 0.1)',
                        backgroundColor: '#FFFFFF',
                        borderRadius: '10px',
                        height: 36,
                        cursor: 'pointer'
                    }}
                    onClick={async () => {
                        await onClickExport({
                            account: account,
                            password: password,
                        })
                    }}
                >
                    导出
                </button>
            </div>
        </div>
    );
};

export default RecordApp;