style: usage chart style

src/components/card-wrapper/simple-card.tsx

@@ -8,8 +8,8 @@ const SimpleCardItemWrapper = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-  gap: 10px;
-  margin-bottom: 24px;
+  gap: 16px;
+  margin-bottom: 16px;
 `;
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -24,12 +24,16 @@ const useStyles = createStyles(({ css, token }) => ({
     justify-content: center;
     align-items: center;
     gap: ${token.padding}px;
+    &.bordered {
+      border: 1px solid ${token.colorBorder};
+    }
     .title {
       font-size: ${token.fontSize}px;
       font-weight: var(--font-weight-medium);
     }
     .content {
-      font-weight: var(--font-weight-500);
+      font-size: ${token.fontSize}px;
+      color: ${token.colorTextSecondary};
     }
   `
 }));
@@ -37,13 +41,14 @@ export const SimpleCardItem: React.FC<{
   title?: string;
   content?: React.ReactNode;
   style?: React.CSSProperties;
+  bordered?: boolean;
 }> = (props) => {
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
 
-  const { title, content, style } = props;
+  const { title, content, style, bordered } = props;
 
   return (
-    <div className={styles.wrapper} style={style}>
+    <div className={cx({ bordered: bordered }, styles.wrapper)} style={style}>
       <div className="title">{title}</div>
       <div className="content">{content}</div>
     </div>
@@ -53,8 +58,9 @@ export const SimpleCardItem: React.FC<{
 export const SimpleCard: React.FC<{
   dataList: { label: string; value: React.ReactNode }[];
   height?: string | number;
+  bordered?: boolean;
 }> = (props) => {
-  const { dataList } = props;
+  const { dataList, bordered } = props;
 
   return (
     <SimpleCardItemWrapper style={{ height: props.height || '100%' }}>
@@ -63,6 +69,7 @@ export const SimpleCard: React.FC<{
           key={index}
           title={item.label}
           content={item.value}
+          bordered={bordered}
         ></SimpleCardItem>
       ))}
     </SimpleCardItemWrapper>

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>
   );
 };