jk-rag-platform/src/pages/deepseek/evaluationTool/datasetManagement/components/exampleModel.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { Table, Pagination, Modal, Space, Button, TablePaginationConfig, Input, Radio, message } from 'antd';

const ExampleModel: React.FC<{ visible: boolean; onClose: () => void }> = ({ visible, onClose }) => {
  // 示例数据（与之前 <pre> 中的 JSON 内容一致）
  const sample = useMemo(() => ({
    questions: [
      {
        question: '什么是人工智能？',
        expected_answer: '人工智能是指使计算机能够执行通常需要人类智能的任务的技术。'
      },
      {
        question: '深度学习的基本原理是什么？',
        expected_answer: '深度学习是一种机器学习方法，利用多层神经网络来模拟人脑处理数据和创建模式的方式。'
      },
      {
        question: '谁发明了电话？',
        expected_answer: '电话的主要发明者是亚历山大·格拉汉姆·贝尔，他于1876年获得了电话的发明专利。'
      },
      {
        question: '地球上最大的哺乳动物是什么？',
        expected_answer: '地球上最大的哺乳动物是蓝鲸，成年蓝鲸体长可达30米，重量可达180吨。'
      },
    ]
  }), []);

  const dataSource = sample.questions.map((q, idx) => ({ ...q, key: idx }));

  const columns = [
    {
      title: '问题',
      dataIndex: 'question',
      key: 'question',
      render: (text: string) => <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>
    },
    {
      title: '期望答案',
      dataIndex: 'expected_answer',
      key: 'expected_answer',
      render: (text: string) => <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>
    }
  ];

  return (
    <Modal
      title="示例数据文件"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={800}
    >
      <div>
        <p className='pb-2'>以下是一个示例数据文件的结构说明：</p>
        {/* <p className="text-sm text-gray-600 mb-4">请确保您的数据文件遵循下列表格结构，以便系统能够正确解析和使用您的评测数据。</p> */}

        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={false}
          size="middle"
        />
      </div>
    </Modal>
  );
};

export default ExampleModel;