diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx index 86ed724..6dd3fe9 100644 --- a/src/components/ResourceList.tsx +++ b/src/components/ResourceList.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Layout, Typography, Table, Grid, InputNumber, Button, Space, Tag, message, Modal, Dropdown } from 'antd'; +import { Layout, Typography, Table, Grid, InputNumber, Button, Space, Tag, message, Modal, Dropdown, Input } from 'antd'; import type { ColumnsType, ColumnType } from 'antd/es/table'; import type { FilterDropdownProps } from 'antd/es/table/interface'; import type { TableProps } from 'antd'; -import { SearchOutlined, EllipsisOutlined, DeleteOutlined } from '@ant-design/icons'; +import { SearchOutlined, EllipsisOutlined, DeleteOutlined, ManOutlined, WomanOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; import './MainContent.css'; import InputDrawer from './InputDrawer.tsx'; import { getPeoples } from '../apis'; @@ -513,7 +513,7 @@ const ResourceList: React.FC = ({ inputOpen = false, onCloseInput, contai const [loading, setLoading] = React.useState(false); const [data, setData] = React.useState([]); const [pagination, setPagination] = React.useState<{ current: number; pageSize: number }>({ current: 1, pageSize: 10 }); - const [inputResult, setInputResult] = React.useState(null); + // const [inputResult, setInputResult] = React.useState(null); const [swipedRowId, setSwipedRowId] = React.useState(null); const touchStartRef = React.useRef<{ x: number; y: number } | null>(null); @@ -570,32 +570,59 @@ const ResourceList: React.FC = ({ inputOpen = false, onCloseInput, contai title: '姓名', dataIndex: 'name', key: 'name', - filters: !isMobile ? data - .filter(item => item.name) // 过滤掉 name 为空的项 - .map((item) => ({ text: item.name!, value: item.name! })) : undefined, - filterSearch: !isMobile, - onFilter: (filterValue: React.Key | boolean, record: Resource) => !isMobile && String(record.name).includes(String(filterValue)), - render: (text: string) => {text}, - }, - { - title: '性别', - dataIndex: 'gender', - key: 'gender', - filters: [ - { text: '男', value: '男' }, - { text: '女', value: '女' }, - { text: '其他/保密', value: '其他/保密' }, - ], - onFilter: (value: React.Key | boolean, record: Resource) => String(record.gender) === String(value), - render: (g: string) => { - const color = g === '男' ? 'blue' : g === '女' ? 'magenta' : 'default'; - return {g}; + filterIcon: , + filterDropdown: ({ selectedKeys, setSelectedKeys, confirm }) => { + return ( +
+ { + setSelectedKeys(e.target.value ? [e.target.value] : []); + }} + onSearch={() => { + confirm(); + }} + /> +
+ ); + }, + onFilter: (filterValue: React.Key | boolean, record: Resource) => String(record.name).includes(String(filterValue)), + render: (text: string, record: Resource) => { + if (!isMobile) return {text}; + const g = record.gender; + const icon = g === '男' + ? + : g === '女' + ? + : ; + return ( + + {text} + {icon} + + ); }, }, - buildNumberRangeFilter('age', '年龄'), // 非移动端显示更多列 ...(!isMobile ? [ + { + title: '性别', + dataIndex: 'gender', + key: 'gender', + filters: [ + { text: '男', value: '男' }, + { text: '女', value: '女' }, + { text: '其他/保密', value: '其他/保密' }, + ], + onFilter: (value: React.Key | boolean, record: Resource) => String(record.gender) === String(value), + render: (g: string) => { + const color = g === '男' ? 'blue' : g === '女' ? 'magenta' : 'default'; + return {g}; + }, + }, + buildNumberRangeFilter('age', '年龄'), buildNumberRangeFilter('height', '身高'), { title: '婚姻状况', @@ -608,6 +635,24 @@ const ResourceList: React.FC = ({ inputOpen = false, onCloseInput, contai title: '联系人', dataIndex: 'contact', key: 'contact', + filterIcon: , + filterDropdown: ({ selectedKeys, setSelectedKeys, confirm }) => { + return ( +
+ { + setSelectedKeys(e.target.value ? [e.target.value] : []); + }} + onSearch={() => { + confirm(); + }} + /> +
+ ); + }, + onFilter: (filterValue: React.Key | boolean, record: Resource) => String(record.contact).includes(String(filterValue)), render: (v: string, record: Resource) => { if (!isMobile) return v ? v : '-'; return ( @@ -722,8 +767,9 @@ const ResourceList: React.FC = ({ inputOpen = false, onCloseInput, contai
{isMobile && (
- {record.height !== undefined &&
身高: {record.height}
} - {record.marital_status &&
婚姻状况: {record.marital_status}
} + {record.age !== undefined &&
年龄: {record.age}
} + {record.height !== undefined &&
身高: {record.height}
} + {record.marital_status &&
婚姻状况: {record.marital_status}
}
)} {intro.length > 0 ? ( @@ -764,7 +810,7 @@ const ResourceList: React.FC = ({ inputOpen = false, onCloseInput, contai open={inputOpen} onClose={onCloseInput || (() => {})} onResult={(list: any) => { - setInputResult(list); + // setInputResult(list); const mapped = transformPeoples(Array.isArray(list) ? list : []); setData(mapped); // 回到第一页,保证用户看到最新结果