chore: date ranger picker presets

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -3,9 +3,11 @@ import ScrollerModal from '@/components/scroller-modal';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import { DatePicker, Select, Space, Table } from 'antd';
+import dayjs from 'dayjs';
 import React from 'react';
 import { queryDashboardUsageData } from '../../apis';
 import { exportTableColumns } from '../../config';
+import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
 
 const ExportData: React.FC<{
   open: boolean;
@@ -28,6 +30,9 @@ const ExportData: React.FC<{
   });
   const { open, onCancel } = props || {};
   const intl = useIntl();
+  const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
+    range: 60
+  });
 
   const handleSubmit = () => {};
 
@@ -66,7 +71,16 @@ const ExportData: React.FC<{
       }
     >
       <Space>
-        <DatePicker.RangePicker style={{ width: 240 }}></DatePicker.RangePicker>
+        <DatePicker.RangePicker
+          style={{ width: 240 }}
+          defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
+          disabledDate={disabledRangeDaysDate}
+          presets={rangePresets}
+          allowClear={false}
+          onChange={(dates) => {
+            handleSearch();
+          }}
+        ></DatePicker.RangePicker>
         <Select
           mode="multiple"
           maxTagCount={1}

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

@@ -1,8 +1,10 @@
 import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row, Select } from 'antd';
+import dayjs from 'dayjs';
 import { FC, memo, useContext, useState } from 'react';
 import styled from 'styled-components';
 import { DashboardContext } from '../../config/dashboard-context';
+import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
 import ExportData from './export-data';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
@@ -22,6 +24,7 @@ const FilterWrapper = styled.div`
 
 const TitleWrapper = styled.div`
   margin: 26px 0px;
+  margin-bottom: 38px;
   font-weight: 700;
 `;
 
@@ -34,6 +37,16 @@ const dataList = [
 const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
+  const [query, setQuery] = useState({
+    startDate: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    user: [],
+    model: []
+  });
+
+  const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
+    range: 60
+  });
   const { model_usage } = useContext(DashboardContext);
   const [open, setOpen] = useState(false);
 
@@ -72,6 +85,10 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
             <FilterWrapper>
               <div className="selection">
                 <DatePicker.RangePicker
+                  defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
+                  disabledDate={disabledRangeDaysDate}
+                  presets={rangePresets}
+                  allowClear={false}
                   style={{ width: 240 }}
                 ></DatePicker.RangePicker>
                 <Select

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -68,7 +68,7 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   return (
     <CardWrapper style={{ width: '100%', position: 'relative' }}>
       <DownloadButton
-        type="text"
+        type="link"
         icon={<ExportOutlined />}
         size="small"
         onClick={onExport}