AI: 调试会友列表显示问题

src/components/member/MemberList.tsx

@@ -10,8 +10,55 @@ interface MemberListProps {
 }
 
 const MemberList: React.FC<MemberListProps> = ({ members, onEdit, onDelete, onDeploy }) => {
+  console.log('MemberList rendering with members:', members);
+
   const columns = [
-    // ... 其他列保持不变
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      fixed: 'left' as const,
+      width: 100,
+    },
+    { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
+    { title: '年龄', dataIndex: 'age', key: 'age', width: 80 },
+    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 120 },
+    { title: '身份证号', dataIndex: 'idNumber', key: 'idNumber', width: 180 },
+    { title: '出生日期', dataIndex: 'birthDate', key: 'birthDate', width: 120 },
+    { 
+      title: '婚姻状态', 
+      dataIndex: 'maritalStatus', 
+      key: 'maritalStatus',
+      width: 100,
+    },
+    { title: '联系地址', dataIndex: 'address', key: 'address', width: 200 },
+    { title: '工作单位', dataIndex: 'workplace', key: 'workplace', width: 150 },
+    { title: '小组组长', dataIndex: 'groupLeader', key: 'groupLeader', width: 100 },
+    { 
+      title: '是否受洗', 
+      dataIndex: 'isBaptized', 
+      key: 'isBaptized',
+      width: 100,
+      render: (isBaptized: boolean) => (
+        <Tag color={isBaptized ? 'green' : 'red'}>
+          {isBaptized ? '已受洗' : '未受洗'}
+        </Tag>
+      )
+    },
+    { title: '受洗日期', dataIndex: 'baptismDate', key: 'baptismDate', width: 120 },
+    { 
+      title: '服侍岗位', 
+      dataIndex: 'servicePositions', 
+      key: 'servicePositions', 
+      width: 200,
+      render: (servicePositions: string[]) => (
+        <>
+          {servicePositions && servicePositions.map(position => (
+            <Tag key={position} color="blue">{position}</Tag>
+          ))}
+        </>
+      )
+    },
     { 
       title: '人脸照片', 
       dataIndex: 'facePhoto', 

src/hooks/useMemberManagement.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Member } from '../types/member';
 import { fetchMembers as fetchMembersApi, addMember as addMemberApi, updateMember as updateMemberApi, deleteMember as deleteMemberApi } from '../services/memberService';
 
@@ -11,6 +11,7 @@ export const useMemberManagement = () => {
     try {
       const fetchedMembers = await fetchMembersApi();
       setMembers(fetchedMembers);
+      console.log('Fetched members:', fetchedMembers);
     } catch (error) {
       console.error('Failed to load members:', error);
     } finally {
@@ -18,10 +19,14 @@ export const useMemberManagement = () => {
     }
   }, []);
 
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
   const addMember = async (member: Omit<Member, 'id'>) => {
     try {
       await addMemberApi(member);
-      await fetchMembers(); // 重新获取会友列表
+      await fetchMembers();
     } catch (error) {
       console.error('Failed to add member:', error);
       throw error;
@@ -31,7 +36,7 @@ export const useMemberManagement = () => {
   const editMember = async (updatedMember: Member) => {
     try {
       await updateMemberApi(updatedMember);
-      await fetchMembers(); // 重新获取会友列表
+      await fetchMembers();
     } catch (error) {
       console.error('Failed to update member:', error);
       throw error;
@@ -41,7 +46,7 @@ export const useMemberManagement = () => {
   const deleteMember = async (memberId: string) => {
     try {
       await deleteMemberApi(memberId);
-      await fetchMembers(); // 重新获取会友列表
+      await fetchMembers();
     } catch (error) {
       console.error('Failed to delete member:', error);
       throw error;

src/pages/MemberManagement.tsx

@@ -6,10 +6,73 @@ import { useMemberManagement } from '../hooks/useMemberManagement';
 import { Member } from '../types/member';
 import { deployMemberToDevice } from '../services/deviceService';
 
-// ... 其他导入保持不变
+const { Search } = Input;
 
 const MemberManagement: React.FC = () => {
-  // ... 其他状态和函数保持不变
+  const { 
+    members, 
+    loading,
+    addMember, 
+    editMember, 
+    deleteMember,
+    fetchMembers
+  } = useMemberManagement();
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingMember, setEditingMember] = useState<Member | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  useEffect(() => {
+    console.log('Members:', members);
+  }, [members]);
+
+  const showModal = () => {
+    setEditingMember(null);
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (member: Member) => {
+    setEditingMember(member);
+    setIsModalVisible(true);
+  };
+
+  const handleOk = async (member: Member) => {
+    try {
+      if (editingMember) {
+        await editMember({ ...editingMember, ...member });
+      } else {
+        await addMember(member);
+      }
+      setIsModalVisible(false);
+      message.success(editingMember ? '会友信息更新成功' : '会友添加成功');
+      fetchMembers();
+    } catch (error) {
+      message.error('操作失败，请重试');
+    }
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setEditingMember(null);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+  };
+
+  const handleDelete = async (memberId: string) => {
+    try {
+      await deleteMember(memberId);
+      message.success('会友删除成功');
+      fetchMembers();
+    } catch (error) {
+      message.error('删除失败，请重试');
+    }
+  };
 
   const handleDeploy = async (member: Member) => {
     try {
@@ -20,10 +83,27 @@ const MemberManagement: React.FC = () => {
     }
   };
 
+  const filteredMembers = members.filter(member => 
+    member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    member.phone.includes(searchTerm) ||
+    member.idNumber.includes(searchTerm)
+  );
+
+  console.log('Filtered Members:', filteredMembers);
+
   return (
     <div>
       <h1>会友管理</h1>
-      {/* ... 其他 JSX 保持不变 */}
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
+        <Button type="primary" onClick={showModal}>
+          添加会友
+        </Button>
+        <Search
+          placeholder="搜索姓名、手机号或身份证号"
+          onSearch={handleSearch}
+          style={{ width: 300 }}
+        />
+      </div>
       {loading ? (
         <Spin size="large" />
       ) : (

src/services/memberService.ts

@@ -19,7 +19,8 @@ let mockMembers: Member[] = [
     groupLeader: '李四',
     isBaptized: true,
     baptismDate: '2015-05-20',
-    servicePositions: ['敬拜团成员', '小组长']
+    servicePositions: ['敬拜团成员', '小组长'],
+    facePhoto: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=='
   },
   {
     id: '2',
@@ -34,7 +35,8 @@ let mockMembers: Member[] = [
     workplace: 'YY教育机构',
     groupLeader: '王五',
     isBaptized: false,
-    servicePositions: ['主日学老师']
+    servicePositions: ['主日学老师'],
+    facePhoto: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=='
   },
 ];