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 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 body = await res.json();
                const list: {
                    id: string;
                    type: "system" | "user" | "assistant";
                    create_time: string;
                    content: string;
                }[] = body.data;
                // 标题行
                const headerRow = [
                    { id: 'ID', role: '角色', createTime: '创建时间', content: '内容' },
                ];
                // 导出数据
                const sheetData = [...headerRow, ...list.map(item => ({
                    id: item.id,
                    role: item.type,
                    createTime: item.create_time,
                    content: item.content,
                }))];
                // 导出数据到Excel
                const option = {
                    fileName: '聊天记录',
                    datas: [{
                        sheetData: sheetData,
                        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;