AI: 会友管理功能拆分

src/components/member/AddMemberModal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Modal, Form, Input } from 'antd';
+import { Member } from '../../types/member';
+
+interface AddMemberModalProps {
+  visible: boolean;
+  onOk: () => void;
+  onCancel: () => void;
+  onAddMember: (member: Member) => void;
+}
+
+const AddMemberModal: React.FC<AddMemberModalProps> = ({ visible, onOk, onCancel, onAddMember }) => {
+  const [form] = Form.useForm();
+
+  const handleOk = () => {
+    form.validateFields().then(values => {
+      form.resetFields();
+      onAddMember(values as Member);
+      onOk();
+    });
+  };
+
+  return (
+    <Modal title="添加会友" visible={visible} onOk={handleOk} onCancel={onCancel}>
+      <Form form={form} layout="vertical">
+        <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="idNumber" label="身份证号" rules={[{ required: true, message: '请输入身份证号' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default AddMemberModal;

src/components/member/MemberList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Table, Button, Popconfirm } from 'antd';
+import { Member } from '../../types/member';
+
+interface MemberListProps {
+  members: Member[];
+  onEdit: (member: Member) => void;
+  onDelete: (memberId: string) => void;
+}
+
+const MemberList: React.FC<MemberListProps> = ({ members, onEdit, onDelete }) => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '身份证号',
+      dataIndex: 'idNumber',
+      key: 'idNumber',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (text: string, record: Member) => (
+        <span>
+          <Button type="link" onClick={() => onEdit(record)}>编辑</Button>
+          <Popconfirm
+            title="确定要删除这个会友吗？"
+            onConfirm={() => onDelete(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link">删除</Button>
+          </Popconfirm>
+        </span>
+      ),
+    },
+  ];
+
+  return <Table columns={columns} dataSource={members} rowKey="id" />;
+}
+
+export default MemberList;

src/hooks/useMemberManagement.ts

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Member } from '../types/member';
+import { message } from 'antd';
+import { addMember, updateMember, deleteMember } from '../services/memberService';
+
+export const useMemberManagement = () => {
+  const [members, setMembers] = useState<Member[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const handleAddMember = async (member: Member) => {
+    try {
+      const newMember = await addMember(member);
+      setMembers([...members, newMember]);
+      message.success('会友添加成功');
+    } catch (error) {
+      message.error('添加会友失败');
+    }
+  };
+
+  const handleEditMember = async (updatedMember: Member) => {
+    try {
+      await updateMember(updatedMember);
+      setMembers(members.map(member => 
+        member.id === updatedMember.id ? updatedMember : member
+      ));
+      message.success('会友信息更新成功');
+    } catch (error) {
+      message.error('更新会友信息失败');
+    }
+  };
+
+  const handleDeleteMember = async (memberId: string) => {
+    try {
+      await deleteMember(memberId);
+      setMembers(members.filter(member => member.id !== memberId));
+      message.success('会友删除成功');
+    } catch (error) {
+      message.error('删除会友失败');
+    }
+  };
+
+  return {
+    members,
+    isModalVisible,
+    showModal,
+    handleOk,
+    handleCancel,
+    addMember: handleAddMember,
+    editMember: handleEditMember,
+    deleteMember: handleDeleteMember,
+  };
+};

src/pages/MemberManagement.tsx

@@ -1,77 +1,38 @@
-import React, { useState } from 'react';
-import { Table, Button, Modal, Form, Input } from 'antd';
+import React from 'react';
+import { Button } from 'antd';
+import MemberList from '../components/member/MemberList';
+import AddMemberModal from '../components/member/AddMemberModal';
+import { useMemberManagement } from '../hooks/useMemberManagement';
 
 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);
-  };
+  const { 
+    members, 
+    isModalVisible, 
+    showModal, 
+    handleOk, 
+    handleCancel, 
+    addMember, 
+    editMember, 
+    deleteMember 
+  } = useMemberManagement();
 
   return (
     <div>
       <h1>会友管理</h1>
-      <Button type="primary" onClick={handleAddMember} style={{ marginBottom: 16 }}>
+      <Button type="primary" onClick={showModal} 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>
+      <MemberList 
+        members={members} 
+        onEdit={editMember} 
+        onDelete={deleteMember} 
+      />
+      <AddMemberModal 
+        visible={isModalVisible} 
+        onOk={handleOk} 
+        onCancel={handleCancel} 
+        onAddMember={addMember} 
+      />
     </div>
   );
 }

src/services/memberService.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { Member } from '../types/member';
+
+const API_URL = '/api/members'; // 假设这是您的API端点
+
+export const fetchMembers = async (): Promise<Member[]> => {
+  const response = await axios.get(API_URL);
+  return response.data;
+};
+
+export const addMember = async (member: Member): Promise<Member> => {
+  const response = await axios.post(API_URL, member);
+  return response.data;
+};
+
+export const updateMember = async (member: Member): Promise<Member> => {
+  const response = await axios.put(`${API_URL}/${member.id}`, member);
+  return response.data;
+};
+
+export const deleteMember = async (memberId: string): Promise<void> => {
+  await axios.delete(`${API_URL}/${memberId}`);
+};

src/types/member.ts

@@ -0,0 +1,6 @@
+export interface Member {
+  id: string;
+  name: string;
+  idNumber: string;
+  phone: string;
+}