AI: 修复 MemberList 组件的语法错误

src/components/MemberList.jsx

@@ -7,7 +7,124 @@ import ExcelImportExport from './ExcelImportExport';
 import MemberForm from './MemberForm';
 
 const MemberList = () => {
-  // ... 保留其他状态和函数 ...
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingMember, setEditingMember] = useState(null);
+  const [searchText, setSearchText] = useState('');
+  const [searchedColumn, setSearchedColumn] = useState('');
+  const searchInput = useRef(null);
+
+  const fetchMembers = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await deviceApi.getAllPersons();
+      console.log('获取到的会友列表数据:', data);
+      const formattedData = data.map(member => ({
+        personId: member.personId,
+        name: member.name,
+        gender: member.gender === 1 ? '男' : '女',
+        idCard: member.idCard,
+      }));
+      setMembers(formattedData);
+      message.success('会友列表获取成功');
+    } catch (error) {
+      console.error('获取会友列表失败', error);
+      message.error(`获取会友列表失败: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  const handleSearch = (selectedKeys, confirm, dataIndex) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
+  };
+
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    setSearchText('');
+  };
+
+  const getColumnSearchProps = (dataIndex) => ({
+    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+      <div style={{ padding: 8 }}>
+        <Input
+          ref={searchInput}
+          placeholder={`搜索 ${dataIndex}`}
+          value={selectedKeys[0]}
+          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
+          style={{ width: 188, marginBottom: 8, display: 'block' }}
+        />
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+            icon={<SearchOutlined />}
+            size="small"
+            style={{ width: 90 }}
+          >
+            搜索
+          </Button>
+          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
+            重置
+          </Button>
+        </Space>
+      </div>
+    ),
+    filterIcon: (filtered) => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
+    onFilter: (value, record) =>
+      record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
+    onFilterDropdownVisibleChange: (visible) => {
+      if (visible) {
+        setTimeout(() => searchInput.current?.select(), 100);
+      }
+    },
+    render: (text) =>
+      searchedColumn === dataIndex ? (
+        <Highlighter
+          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
+          searchWords={[searchText]}
+          autoEscape
+          textToHighlight={text ? text.toString() : ''}
+        />
+      ) : (
+        text
+      ),
+  });
+
+  const handleAdd = () => {
+    setEditingMember(null);
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    setEditingMember(record);
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = (id) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '您确定要删除这个会友吗？此操作不可逆。',
+      onOk: async () => {
+        try {
+          await deviceApi.deletePerson(id);
+          message.success('会友删除成功');
+          fetchMembers();
+        } catch (error) {
+          console.error('删除会友失败', error);
+          message.error(`删除会友失败: ${error.message}`);
+        }
+      },
+    });
+  };
 
   const handleSubmit = async (values) => {
     try {
@@ -29,10 +146,59 @@ const MemberList = () => {
     }
   };
 
-  // ... 保留其他渲染逻辑 ...
+  const columns = [
+    { title: 'ID', dataIndex: 'personId', key: 'personId' },
+    { 
+      title: '姓名', 
+      dataIndex: 'name', 
+      key: 'name',
+      ...getColumnSearchProps('name'),
+    },
+    { title: '性别', dataIndex: 'gender', key: 'gender' },
+    { title: '身份证号', dataIndex: 'idCard', key: 'idCard' },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEdit(record)}>编辑</Button>
+          <Button onClick={() => handleDelete(record.personId)} danger>删除</Button>
+        </Space>
+      ),
+    },
+  ];
 
   return (
-    // ... 保持组件结构不变 ...
+    <div>
+      <h2>会友列表</h2>
+      <div style={{ marginBottom: 16 }}>
+        <Button onClick={fetchMembers} type="primary" style={{ marginRight: 8 }}>
+          刷新列表
+        </Button>
+        <Button onClick={handleAdd} type="primary" icon={<PlusOutlined />}>
+          添加会友
+        </Button>
+      </div>
+      <ExcelImportExport members={members} onImport={fetchMembers} />
+      <Table
+        columns={columns}
+        dataSource={members}
+        rowKey="personId"
+        loading={loading}
+      />
+      <Modal
+        title={editingMember ? "编辑会友" : "添加会友"}
+        visible={isModalVisible}
+        onCancel={() => setIsModalVisible(false)}
+        footer={null}
+        width={600}
+      >
+        <MemberForm 
+          initialValues={editingMember} 
+          onSubmit={handleSubmit}
+        />
+      </Modal>
+    </div>
   );
 };