AI: 为会员列表添加搜索功能

src/components/MemberList.jsx

@@ -1,15 +1,19 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Table, Button, message, Modal, Space, Image } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Table, Button, message, Modal, Space, Image, Input } from 'antd';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { deviceApi } from '../api/deviceApi';
 import ExcelImportExport from './ExcelImportExport';
 import MemberForm from './MemberForm';
+import Highlighter from 'react-highlight-words';
 
 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);
@@ -30,6 +34,65 @@ const MemberList = () => {
     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);
@@ -78,7 +141,12 @@ const MemberList = () => {
 
   const columns = [
     { title: 'ID', dataIndex: 'personId', key: 'personId' },
-    { title: '姓名', dataIndex: 'name', key: 'name' },
+    { 
+      title: '姓名', 
+      dataIndex: 'name', 
+      key: 'name',
+      ...getColumnSearchProps('name'),
+    },
     { title: '性别', dataIndex: 'gender', key: 'gender' },
     { title: '年龄', dataIndex: 'age', key: 'age' },
     { title: '出生日期', dataIndex: 'birthDate', key: 'birthDate' },
@@ -90,7 +158,12 @@ const MemberList = () => {
       render: (isBaptized) => isBaptized ? '是' : '否'
     },
     { title: '受洗日期', dataIndex: 'baptismDate', key: 'baptismDate' },
-    { title: '联系方式', dataIndex: 'contact', key: 'contact' },
+    { 
+      title: '联系方式', 
+      dataIndex: 'contact', 
+      key: 'contact',
+      ...getColumnSearchProps('contact'),
+    },
     { 
       title: '照片', 
       dataIndex: 'photo',