feat: usage export data

src/pages/dashboard/components/usage-inner/index.tsx

@@ -1,21 +1,45 @@
 import PageTools from '@/components/page-tools';
+import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Col, Row } from 'antd';
-import { FC, memo, useContext } from 'react';
+import { Button, Col, DatePicker, Row, Select } from 'antd';
+import { FC, memo, useContext, useState } from 'react';
+import styled from 'styled-components';
 import { DashboardContext } from '../../config/dashboard-context';
+import ExportData from './export-data';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
 import useUsageData from './use-usage-data';
 
+const FilterWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  .selection {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+`;
+
 const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
   const { model_usage } = useContext(DashboardContext);
+  const [open, setOpen] = useState(false);
 
   const { requestTokenData, topUserData } = useUsageData(model_usage || {});
 
+  const handleOnCancel = () => {
+    setOpen(false);
+  };
+
+  const handleExport = () => {
+    setOpen(true);
+  };
+
   return (
-    <>
+    <div>
       <PageTools
         style={{ margin: '26px 0px' }}
         left={
@@ -33,6 +57,20 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           xl={16}
           style={{ paddingRight: paddingRight }}
         >
+          <FilterWrapper>
+            <div className="selection">
+              <DatePicker.RangePicker></DatePicker.RangePicker>
+              <Select placeholder="Select user"></Select>
+              <Select placeholder="Select model"></Select>
+            </div>
+            <Button
+              type="text"
+              icon={<ExportOutlined />}
+              onClick={handleExport}
+            >
+              {intl.formatMessage({ id: 'common.button.export' })}
+            </Button>
+          </FilterWrapper>
           <RequestTokenInner
             requestData={requestTokenData.requestData}
             xAxisData={requestTokenData.xAxisData}
@@ -46,7 +84,8 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           ></TopUser>
         </Col>
       </Row>
-    </>
+      <ExportData open={open} onCancel={handleOnCancel}></ExportData>
+    </div>
   );
 };