style: usage chart style

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

@@ -1,3 +1,4 @@
+import { SimpleCard } from '@/components/card-wrapper/simple-card';
 import PageTools from '@/components/page-tools';
 import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -18,10 +19,21 @@ const FilterWrapper = styled.div`
   .selection {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
   }
 `;
 
+const TitleWrapper = styled.div`
+  margin: 26px 0px;
+  font-weight: 700;
+`;
+
+const dataList = [
+  { label: '100M', value: 'Completion Tokens' },
+  { label: '50M', value: 'Prompt Tokens' },
+  { label: '120K', value: 'API Requests' }
+];
+
 const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
@@ -40,14 +52,7 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
 
   return (
     <div>
-      <PageTools
-        style={{ margin: '26px 0px' }}
-        left={
-          <span className="font-700">
-            {intl.formatMessage({ id: 'dashboard.usage' })}
-          </span>
-        }
-      />
+      <PageTools style={{ margin: '0px 0px' }} left={false} />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
         <Col
           xs={24}
@@ -57,6 +62,9 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           xl={16}
           style={{ paddingRight: paddingRight }}
         >
+          <TitleWrapper>
+            {intl.formatMessage({ id: 'dashboard.usage' })}
+          </TitleWrapper>
           <FilterWrapper>
             <div className="selection">
               <DatePicker.RangePicker></DatePicker.RangePicker>
@@ -71,6 +79,11 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
               {intl.formatMessage({ id: 'common.button.export' })}
             </Button>
           </FilterWrapper>
+          <SimpleCard
+            dataList={dataList}
+            height={80}
+            bordered={true}
+          ></SimpleCard>
           <RequestTokenInner
             requestData={requestTokenData.requestData}
             xAxisData={requestTokenData.xAxisData}
@@ -78,6 +91,9 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           ></RequestTokenInner>
         </Col>
         <Col xs={24} sm={24} md={24} lg={24} xl={8}>
+          <TitleWrapper>
+            {intl.formatMessage({ id: 'dashboard.topusers' })}
+          </TitleWrapper>
           <TopUser
             userData={topUserData.userData}
             topUserList={topUserData.topUserList}

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

@@ -1,5 +1,4 @@
 import CardWrapper from '@/components/card-wrapper';
-import { SimpleCard } from '@/components/card-wrapper/simple-card';
 import MixLineBar from '@/components/echarts/mix-line-bar';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
@@ -60,7 +59,7 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
           ></BarChart>
         </Col>
       </Row> */}
-      <SimpleCard dataList={dataList} height={80}></SimpleCard>
+      {/* <SimpleCard dataList={dataList} height={80}></SimpleCard> */}
       <MixLineBar
         chartData={{
           line: requestData,

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -13,12 +13,7 @@ const TopUser: React.FC<TopUserProps> = (props) => {
 
   return (
     <CardWrapper>
-      <HBar
-        title={intl.formatMessage({ id: 'dashboard.topusers' })}
-        seriesData={userData}
-        xAxisData={topUserList}
-        height={520}
-      ></HBar>
+      <HBar seriesData={userData} xAxisData={topUserList} height={512}></HBar>
     </CardWrapper>
   );
 };