AI: 修复会友列表显示

src/components/MemberList.jsx

@@ -7,7 +7,127 @@ 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.getPersonList();
+      setMembers(data);
+    } catch (error) {
+      console.error('获取会友列表失败', error);
+      message.error('获取会友列表失败，请重试');
+    } 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 = async (personId) => {
+    try {
+      await deviceApi.deletePerson(personId);
+      message.success('会友删除成功');
+      fetchMembers();
+    } catch (error) {
+      console.error('删除会友失败', error);
+      message.error('删除会友失败，请重试');
+    }
+  };
+
+  const handleSubmit = async (values) => {
+    try {
+      if (editingMember) {
+        await deviceApi.updatePerson(editingMember.personId, values);
+        message.success('会友信息更新成功');
+      } else {
+        await deviceApi.createPerson(values);
+        message.success('会友添加成功');
+      }
+      setIsModalVisible(false);
+      fetchMembers();
+    } catch (error) {
+      console.error('保存会友信息失败', error);
+      message.error('保存会友信息失败，请重试');
+    }
+  };
 
   const handleDownloadToDevice = async (personId) => {
     try {
@@ -20,15 +140,30 @@ const MemberList = () => {
   };
 
   const columns = [
-    { title: 'ID', dataIndex: 'personId', key: 'personId' },
+    { 
+      title: 'ID', 
+      dataIndex: 'personId', 
+      key: 'personId',
+      ...getColumnSearchProps('personId'),
+    },
     { 
       title: '姓名', 
       dataIndex: 'name', 
       key: 'name',
       ...getColumnSearchProps('name'),
     },
-    { title: '性别', dataIndex: 'gender', key: 'gender' },
-    { title: '身份证号', dataIndex: 'idCard', key: 'idCard' },
+    { 
+      title: '性别', 
+      dataIndex: 'gender', 
+      key: 'gender',
+      render: (gender) => (gender === 1 ? '男' : '女'),
+    },
+    { 
+      title: '身份证号', 
+      dataIndex: 'idCard', 
+      key: 'idCard',
+      ...getColumnSearchProps('idCard'),
+    },
     {
       title: '操作',
       key: 'action',
@@ -47,8 +182,6 @@ const MemberList = () => {
     },
   ];
 
-  // ... 保留其他渲染逻辑 ...
-
   return (
     <div>
       <h2>会友列表</h2>