style: ui style

src/pages/dashboard/components/active-table.tsx

@@ -105,7 +105,7 @@ const ActiveTable = () => {
     <Row gutter={[20, 0]}>
       <Col xs={24} sm={24} md={24} lg={24} xl={24}>
         <PageTools
-          style={{ margin: '32px 8px' }}
+          style={{ margin: '26px 0px' }}
           left={
             <span
               style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}

src/pages/dashboard/components/over-view.less

@@ -3,8 +3,9 @@
     height: 110px;
     display: flex;
     justify-content: space-around;
-    box-shadow: var(--box-shadow-base);
+    // box-shadow: var(--box-shadow-base);
     border-radius: var(--ant-border-radius-lg);
+    // border: 1px solid var(--ant-color-border);
   }
 }
 

src/pages/dashboard/components/over-view.tsx

@@ -15,7 +15,7 @@ const renderCardItem = (data: {
   const { label, value, bgColor } = data;
   return (
     <Card
-      bordered={false}
+      bordered={true}
       style={{ background: bgColor }}
       className={styles['card-body']}
     >

src/pages/dashboard/components/system-load.tsx

@@ -11,11 +11,6 @@ import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
 const SystemLoad = () => {
-  const colors = [
-    'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%,  rgba(84, 204, 152,.8) 100%)',
-    'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%,  rgba(255, 214, 102,.8) 100%)',
-    'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%,  rgba(255, 120, 117,.8) 100%)'
-  ];
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
   const { size } = useWindowResize();
@@ -39,7 +34,7 @@ const SystemLoad = () => {
     <div>
       <div className="system-load">
         <PageTools
-          style={{ margin: '32px 8px' }}
+          style={{ margin: '26px 0px' }}
           left={
             <span style={{ fontSize: 'var(--font-size-large)' }}>
               {intl.formatMessage({ id: 'dashboard.systemload' })}

src/pages/dashboard/components/usage.tsx

@@ -225,6 +225,10 @@ const Usage = () => {
     setUserData(userList);
   };
 
+  const labelFormatter = (v: any) => {
+    return dayjs(v).format('MM-DD');
+  };
+
   useEffect(() => {
     if (size.width < breakpoints.xl) {
       setPaddingRight('0');
@@ -240,7 +244,7 @@ const Usage = () => {
   return (
     <>
       <PageTools
-        style={{ margin: '32px 8px' }}
+        style={{ margin: '26px 0px' }}
         left={
           <span style={{ fontSize: 'var(--font-size-large)' }}>
             {intl.formatMessage({ id: 'dashboard.usage' })}
@@ -272,6 +276,7 @@ const Usage = () => {
                   xField="time"
                   yField="value"
                   height={360}
+                  labelFormatter={labelFormatter}
                 ></AreaChart>
               </Col>
               <Col span={12}>
@@ -285,6 +290,7 @@ const Usage = () => {
                   legend={false}
                   yField="value"
                   height={360}
+                  labelFormatter={labelFormatter}
                 ></ColumnBar>
               </Col>
             </Row>