style: dashboard

config/config.ts

@@ -65,6 +65,7 @@ export default defineConfig({
       }
     : {}),
   // esbuildMinifyIIFE: true,
+  favicons: ['/static/favicon.ico'],
   jsMinifier: 'terser',
   cssMinifier: 'cssnano',
   presets: ['umi-presets-pro'],

src/components/card-wrapper/index.less

@@ -1,5 +1,5 @@
 .cardWrapper {
-  border-radius: 20px;
+  border-radius: var(--border-radius-middle);
   background-color: var(--color-white-1);
   box-shadow: var(--box-shadow-base);
 }

src/components/charts/column-bar.tsx

@@ -43,7 +43,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     title: {
       title,
       style: {
-        align: 'center'
+        align: 'center',
+        titleFontSize: 14,
+        titleFill: 'rgba(0,0,0,0.88)',
+        titleFontWeight: 500
       }
     },
     split: {
@@ -62,7 +65,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
       radiusTopLeft: 12,
       radiusTopRight: 12,
       align: 'center',
-      width: 30
+      width: 20
     }
   };
 

src/components/charts/gauge.tsx

@@ -47,9 +47,11 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
     title: {
       title,
       size: 0,
-      titleFontSize: 14,
       style: {
-        align: 'center'
+        align: 'center',
+        titleFontSize: 14,
+        titleFill: 'rgba(0,0,0,0.88)',
+        titleFontWeight: 500
       }
     },
     style: {

src/components/charts/h-bar.tsx

@@ -43,7 +43,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     title: {
       title,
       style: {
-        align: 'center'
+        align: 'center',
+        titleFontSize: 14,
+        titleFill: 'rgba(0,0,0,0.88)',
+        titleFontWeight: 500
       }
     },
     split: {
@@ -59,7 +62,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
       fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
       radiusTopLeft: 12,
       radiusTopRight: 12,
-      height: 30
+      height: 20
     }
   };
 

src/components/charts/line-chart.tsx

@@ -39,11 +39,12 @@ const LineChart: React.FC<LineChartProps> = (props) => {
       lineWidth: 1.5
     },
     legend: {
-      itemMarker: {
-        symbol: 'circle'
-      },
       color: {
         layout: { justifyContent: 'center' }
+      },
+      size: {
+        itemLabelFontSize: 14,
+        itemLabelFontWeight: 500
       }
     },
     tooltip: {

src/global.less

@@ -11,7 +11,7 @@ html {
   --border-radius-base: 16px;
   --border-radius-middle: 20px;
   --border-radius-small: 8px;
-  --color-white-1: rgba(255, 255, 255, 75%);
+  --color-white-1: rgba(255, 255, 255, 100%);
   --font-weight-normal: 500;
   --font-weight-bold: 700;
   --color-text-1: var(--ant-color-text);
@@ -51,7 +51,7 @@ html {
     &.ant-menu-css-var {
       --ant-menu-item-height: 46px;
       --ant-menu-item-selected-bg: var(--color-white-1);
-      --ant-menu-item-border-radius: 24px;
+      --ant-menu-item-border-radius: 20px;
       --ant-menu-item-selected-color: var(--ant-color-primary);
       --ant-menu-item-hover-bg: var(--color-white-1);
       --ant-menu-item-color: var(--color-text-1);
@@ -98,7 +98,7 @@ html {
   .css-var-rh.ant-menu-css-var {
     --ant-menu-item-height: 46px;
     --ant-menu-item-selected-bg: var(--color-white-1);
-    --ant-menu-item-border-radius: 24px;
+    --ant-menu-item-border-radius: 20px;
     --ant-menu-item-selected-color: var(--ant-color-primary);
     --ant-menu-item-hover-bg: var(--color-white-1);
     --ant-menu-item-color: var(--color-text-1);

src/layouts/index.tsx

@@ -144,7 +144,7 @@ export default (props: any) => {
         location={location}
         title={userConfig.title}
         navTheme="light"
-        siderWidth={270}
+        siderWidth={220}
         onMenuHeaderClick={(e) => {
           e.stopPropagation();
           e.preventDefault();

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
+            <Row>
-              title="API Request"
+              <Col span={12}>
-              data={dataList}
+                <ColumnBar
-              xField="time"
+                  title="API Request"
-              yField="value"
+                  data={dataList}
-              height={360}
+                  xField="time"
-            ></ColumnBar>
+                  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
+            <Row>
-              title="Tokens"
+              <Col span={12}>
-              data={tokenUsage}
+                <HBar
-              xField="time"
+                  title="Top Users"
-              yField="value"
+                  data={userDataList}
-              height={360}
+                  xField="time"
-            ></ColumnBar>
+                  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>
+          <CardWrapper></CardWrapper>
-            <HBar
-              title="Top Users"
-              data={userDataList}
-              xField="time"
-              yField="value"
-            ></HBar>
-          </CardWrapper>
         </Col>
         <Col span={12}>
           <CardWrapper
@@ -141,16 +160,9 @@ const Usage = () => {
               background: bgColor,
               borderRadius: 'var(--border-radius-base)'
             }}
-          >
+          ></CardWrapper>
-            <HBar
-              title="Top Projects"
-              data={projectDataList}
-              xField="time"
-              yField="value"
-            ></HBar>
-          </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">
+    <CardWrapper>
-      <div className="chat">
+      <div className="play-ground">
-        <GroundLeft parameters={params}></GroundLeft>
+        <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>
+    </CardWrapper>
-      <div className="params">
-        <ParamsSettings
-          onClose={handleClosePopover}
-          setParams={setParams}
-          selectedModel={selectModel}
-        />
-      </div>
-    </div>
   );
 };
 

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