d8d-vite-tsx-tailwind-postcss-Ce5rhWBM/src/pages/MemberManagement.tsx

import React, { useState } from 'react';
import { Table, Button, Modal, Form, Input } from 'antd';

const MemberManagement: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '身份证号',
      dataIndex: 'idNumber',
      key: 'idNumber',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Button type="link">编辑</Button>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: '张三',
      idNumber: '310000199001011234',
      phone: '13800138000',
    },
    // 更多数据...
  ];

  const handleAddMember = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    // 处理添加会友逻辑
  };

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

  return (
    <div>
      <h1>会友管理</h1>
      <Button type="primary" onClick={handleAddMember} style={{ marginBottom: 16 }}>
        添加会友
      </Button>
      <Table columns={columns} dataSource={data} />
      <Modal title="添加会友" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form>
          <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="idNumber" label="身份证号" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="手机号" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default MemberManagement;