style: dashboard

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

@@ -132,9 +132,9 @@ const projectData = [
 const ActiveTable = () => {
   return (
     <Row gutter={[20, 0]}>
-      <Col span={12}>
+      <Col xs={24} sm={24} md={24} lg={12} xl={12}>
         <PageTools
-          style={{ margin: '32px 40px' }}
+          style={{ margin: '32px 8px' }}
           left={
             <span
               style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
@@ -153,9 +153,9 @@ const ActiveTable = () => {
           />
         </div>
       </Col>
-      <Col span={12}>
+      <Col xs={24} sm={24} md={24} lg={12} xl={12}>
         <PageTools
-          style={{ margin: '32px 40px' }}
+          style={{ margin: '32px 8px' }}
           left={
             <span
               style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}

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

@@ -18,7 +18,7 @@ const SystemLoad = () => {
     <div>
       <div className="system-load">
         <PageTools
-          style={{ margin: '32px 40px' }}
+          style={{ margin: '32px 8px' }}
           left={
             <span style={{ fontSize: 'var(--font-size-large)' }}>
               System Load

src/pages/dashboard/components/usage.tsx

@@ -94,46 +94,65 @@ const Usage = () => {
   return (
     <>
       <PageTools
-        style={{ margin: '32px 40px' }}
+        style={{ margin: '32px 8px' }}
         left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
         right={
           <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
         }
       />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
-        <Col span={12} style={{ paddingRight: '20px' }}>
+        <Col span={14} style={{ paddingRight: '20px' }}>
           <CardWrapper>
-            <ColumnBar
-              title="API Request"
-              data={dataList}
-              xField="time"
-              yField="value"
-              height={360}
-            ></ColumnBar>
+            <Row>
+              <Col span={12}>
+                <ColumnBar
+                  title="API Request"
+                  data={dataList}
+                  xField="time"
+                  yField="value"
+                  height={360}
+                ></ColumnBar>
+              </Col>
+              <Col span={12}>
+                <ColumnBar
+                  title="Tokens"
+                  data={tokenUsage}
+                  xField="time"
+                  yField="value"
+                  height={360}
+                ></ColumnBar>
+              </Col>
+            </Row>
           </CardWrapper>
         </Col>
-        <Col span={12}>
+        <Col span={10}>
           <CardWrapper>
-            <ColumnBar
-              title="Tokens"
-              data={tokenUsage}
-              xField="time"
-              yField="value"
-              height={360}
-            ></ColumnBar>
+            <Row>
+              <Col span={12}>
+                <HBar
+                  title="Top Users"
+                  data={userDataList}
+                  xField="time"
+                  yField="value"
+                  height={360}
+                ></HBar>
+              </Col>
+              <Col span={12}>
+                <HBar
+                  title="Top Projects"
+                  data={projectDataList}
+                  xField="time"
+                  yField="value"
+                  height={360}
+                ></HBar>
+              </Col>
+            </Row>
           </CardWrapper>
         </Col>
       </Row>
-      <Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
+      {/* <Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
         <Col span={12} style={{ paddingRight: '20px' }}>
-          <CardWrapper>
-            <HBar
-              title="Top Users"
-              data={userDataList}
-              xField="time"
-              yField="value"
-            ></HBar>
-          </CardWrapper>
+          <CardWrapper></CardWrapper>
         </Col>
         <Col span={12}>
           <CardWrapper
@@ -141,16 +160,9 @@ const Usage = () => {
               background: bgColor,
               borderRadius: 'var(--border-radius-base)'
             }}
-          >
-            <HBar
-              title="Top Projects"
-              data={projectDataList}
-              xField="time"
-              yField="value"
-            ></HBar>
-          </CardWrapper>
+          ></CardWrapper>
         </Col>
-      </Row>
+      </Row> */}
     </>
   );
 };

src/pages/dashboard/index.tsx

@@ -7,11 +7,8 @@ const Dashboard: React.FC = () => {
   return (
     <>
       <Overview></Overview>
-      {/* <DividerLine></DividerLine> */}
       <SystemLoad></SystemLoad>
-      {/* <DividerLine></DividerLine> */}
       <Usage></Usage>
-      {/* <DividerLine></DividerLine> */}
       <ActiveTable></ActiveTable>
     </>
   );

src/pages/playground/index.tsx

@@ -1,4 +1,6 @@
+import CardWrapper from '@/components/card-wrapper';
 import { useSearchParams } from '@umijs/max';
+import { Divider } from 'antd';
 import { useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
@@ -25,19 +27,24 @@ const Playground: React.FC = () => {
   };
 
   return (
-    <div className="play-ground">
-      <div className="chat">
-        <GroundLeft parameters={params}></GroundLeft>
+    <CardWrapper>
+      <div className="play-ground">
+        <div className="chat">
+          <GroundLeft parameters={params}></GroundLeft>
+        </div>
+        <div className="divider-line">
+          <Divider type="vertical" />
+        </div>
+
+        <div className="params">
+          <ParamsSettings
+            onClose={handleClosePopover}
+            setParams={setParams}
+            selectedModel={selectModel}
+          />
+        </div>
       </div>
-      <div className="divider-line">{/* <Divider type="vertical" /> */}</div>
-      <div className="params">
-        <ParamsSettings
-          onClose={handleClosePopover}
-          setParams={setParams}
-          selectedModel={selectModel}
-        />
-      </div>
-    </div>
+    </CardWrapper>
   );
 };
 

src/pages/playground/style/ground-left.less

@@ -2,8 +2,6 @@
   position: relative;
   height: 100vh;
   padding-bottom: 120px;
-  background-color: var(--color-white-1);
-  border-radius: 24px;
 
   .message-list-wrap {
     max-height: calc(100vh - 152px);