开发: 登录等功能

src/pages/ChatLogs/index.tsx

@@ -0,0 +1,161 @@
+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;