scrm.antd/src/pages/ChatLogs/index.tsx

import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Form, Input, Pagination, Row, Select, Table } from 'antd';
import React, { useState } from 'react';
import { ChatBar, ChatTime } from './ChatBar';

interface DataType {
  key: React.Key;
  firstName: string;
  lastName: string;
  age: number;
  address: string;
  tags: string[];
}

const ChatLogs: React.FC = () => {
  const [param, setParam] = useState({
    curr_page: 1,
    page_count: 20,
  });

  const data: DataType[] = [
    {
      key: '1',
      firstName: 'John',
      lastName: 'Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      firstName: 'Jim',
      lastName: 'Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      firstName: 'Joe',
      lastName: 'Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  // const { notification } = App.useApp();

  return (
    <PageContainer>
      <SearchBarPlugin>
        <Form>
          <Row gutter={{ xs: 0, sm: 16 }}>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Select
                  defaultValue="lucy"
                  style={{ width: '100%' }}
                  onChange={() => {}}
                  options={[
                    { value: 'jack', label: 'Jack' },
                    { value: 'lucy', label: 'Lucy' },
                    { value: 'Yiminghe', label: 'yiminghe' },
                  ]}
                />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Input autoComplete="off"></Input>
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Input autoComplete="off"></Input>
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Select
                  defaultValue="lucy"
                  style={{ width: '100%' }}
                  onChange={() => {}}
                  options={[
                    { value: 'jack', label: 'Jack' },
                    { value: 'lucy', label: 'Lucy' },
                    { value: 'Yiminghe', label: 'yiminghe' },
                    { value: 'disabled', label: 'Disabled', disabled: true },
                  ]}
                />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Input autoComplete="off"></Input>
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Input autoComplete="off"></Input>
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Form.Item label="用户名">
                <Input autoComplete="off"></Input>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </SearchBarPlugin>
      <SearchBottonsCardPlugin>
        <Row justify={'center'}>
          <Button type="primary">搜索</Button>
        </Row>
      </SearchBottonsCardPlugin>
      <ChatTime msgtime={1680761136755}></ChatTime>
      <ChatBar></ChatBar>
      <Table
        size="middle"
        dataSource={data}
        style={{ padding: 16, borderRadius: 6, background: '#fff', marginTop: 16 }}
        pagination={false}
        bordered={true}
      >
        <Table.Column title="ID" dataIndex={'key'}></Table.Column>
        <Table.Column title="firstName" dataIndex={'firstName'}></Table.Column>
      </Table>

      <Pagination
        style={{
          background: '#fff',
          borderRadius: 6,
          marginTop: 16,
          padding: 16,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        current={param.curr_page}
        pageSize={param.page_count}
        total={1000}
        pageSizeOptions={[10, 20, 50, 100]}
        onShowSizeChange={(current, size) => {
          param.page_count = size;
          setParam({ ...param });
        }}
        showTotal={(total, range) => {
          return <span style={{ lineHeight: 1 }}>共{total}条</span>;
        }}
        onChange={(page, pageSize) => {
          param.curr_page = page;
          setParam({ ...param });
        }}
      />
    </PageContainer>
  );
};

export default ChatLogs;