SearchResults.tsx 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import React, { _useState } from "react";
  2. import { List, _Pagination, Typography, _Card, _Space } from "antd";
  3. import type { ElasticsearchResponse, WikipaliDocument } from "../../types/search"
  4. const { Paragraph } = Typography;
  5. interface SearchResultsProps {
  6. data: ElasticsearchResponse<WikipaliDocument>;
  7. onPageChange?: (page: number, pageSize: number) => void;
  8. pageSize?: number;
  9. }
  10. const SearchResults: React.FC<SearchResultsProps> = ({
  11. data,
  12. onPageChange,
  13. pageSize = 20,
  14. }) => {
  15. return (
  16. <div className="search-results">
  17. {/* 搜索结果列表 */}
  18. <List
  19. size="small"
  20. dataSource={data.hits.hits}
  21. pagination={{
  22. onChange: onPageChange,
  23. onShowSizeChange: onPageChange,
  24. pageSize: pageSize,
  25. total: data.hits.total.value,
  26. showQuickJumper: true,
  27. showTotal: (total, range) =>
  28. `第 ${range[0]}-${range[1]} 条,共 ${total} 条`,
  29. }}
  30. renderItem={(item, _index) => {
  31. const previewText = item._source.content.text;
  32. return (
  33. <List.Item key={item._id}>
  34. <List.Item.Meta
  35. title={item._source.title.text}
  36. description={
  37. <>
  38. <Paragraph
  39. type="secondary"
  40. ellipsis={{ rows: 2, expandable: true }}
  41. >
  42. {previewText}
  43. </Paragraph>
  44. <div>{item._source.path}</div>
  45. </>
  46. }
  47. />
  48. </List.Item>
  49. );
  50. }}
  51. />
  52. </div>
  53. );
  54. };
  55. export default SearchResults;