style: page styles

src/components/card-wrapper/index.less

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

src/components/card-wrapper/index.tsx

@@ -0,0 +1,8 @@
+import styles from './index.less';
+
+const CardWrapper = (props: any) => {
+  const { children } = props;
+  return <div className={styles.cardWrapper}>{children}</div>;
+};
+
+export default CardWrapper;

src/components/charts/column-bar.tsx

@@ -17,6 +17,12 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     direction: 'vertical',
     height,
     group: true,
+    scale: {
+      x: {
+        type: 'band',
+        padding: 0.5
+      }
+    },
     legend: {
       color: {
         position: 'top',
@@ -27,7 +33,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
     axis: {
       x: {
-        xAxis: true
+        xAxis: true,
+        tick: false
+      },
+      y: {
+        tick: false
       }
     },
     title: {
@@ -48,9 +58,10 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     },
 
     style: {
-      fill: '#54cc98',
+      fill: 'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
-      radiusTopLeft: 8,
+      radiusTopLeft: 12,
-      radiusTopRight: 8,
+      radiusTopRight: 12,
+      align: 'center',
       width: 30
     }
   };

src/components/charts/gauge.tsx

@@ -16,6 +16,19 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
   const config = {
     width,
     height,
+    box: {
+      padding: [0, 0, 0, 0],
+      style: {
+        padding: [0, 0, 0, 0]
+      }
+    },
+    guide: {
+      arc: {
+        style: {
+          lineWidth: 30
+        }
+      }
+    },
     autoFit: true,
     data: {
       target,

src/components/charts/h-bar.tsx

@@ -8,7 +8,7 @@ interface BarChartProps {
   height?: number;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
-  const { data, xField, yField, title, height = 300 } = props;
+  const { data, xField, yField, title, height } = props;
   const config = {
     data,
     xField,
@@ -25,9 +25,19 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         }
       }
     },
+    scale: {
+      x: {
+        type: 'band',
+        padding: 0.5
+      }
+    },
     axis: {
       x: {
-        xAxis: true
+        xAxis: true,
+        tick: false
+      },
+      y: {
+        tick: false
       }
     },
     title: {
@@ -39,18 +49,16 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     split: {
       type: 'line',
       line: {
-        color: 'red',
         style: {
-          color: 'red',
           lineDash: [4, 5]
         }
       }
     },
-
+    markBackground: {},
     style: {
-      fill: '#54cc98',
+      fill: 'linear-gradient(180deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)',
-      radiusTopLeft: 8,
+      radiusTopLeft: 12,
-      radiusTopRight: 8,
+      radiusTopRight: 12,
       height: 30
     }
   };

src/components/charts/line-chart.tsx

@@ -16,7 +16,7 @@ const LineChart: React.FC<LineChartProps> = (props) => {
     height,
     xField: xField || 'time',
     yField: yField || 'value',
-    color: color || ['red', 'blue', 'green'],
+    color: color || ['red', 'blue', 'green', 'yellow'],
     colorField: 'type',
     autoFit: true,
     slider,
@@ -26,12 +26,15 @@ const LineChart: React.FC<LineChartProps> = (props) => {
         textStyle: {
           autoRoate: true
         }
+      },
+      y: {
+        tick: false
       }
     },
-    point: {
+    // point: {
-      shapeField: 'circle',
+    //   shapeField: 'circle',
-      sizeField: 2
+    //   sizeField: 2
-    },
+    // },
     style: {
       lineWidth: 1.5
     },

src/components/glass-bg/index.less

@@ -0,0 +1,39 @@
+.g-polygon {
+  position: absolute;
+  opacity: 0.5;
+}
+
+.g-polygon-1 {
+  // 定位代码，容器高宽随意
+  background: #fe5;
+  clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-polygon-2 {
+  // 定位代码，容器高宽随意
+  background: #e950d1;
+  clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-polygon-3 {
+  // 定位代码，容器高宽随意
+  background: rgba(87, 80, 233);
+  clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
+  width: 50%;
+  height: 50%;
+}
+
+.g-bg::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  backdrop-filter: blur(150px);
+  z-index: 1;
+}

src/components/glass-bg/index.tsx

@@ -0,0 +1,13 @@
+import './index.less';
+
+const GlassBg = () => {
+  return (
+    <div className="g-bg">
+      <div className="g-polygon g-polygon-1"></div>
+      <div className="g-polygon g-polygon-2"></div>
+      <div className="g-polygon g-polygon-3"></div>
+    </div>
+  );
+};
+
+export default GlassBg;

src/global.less

@@ -7,10 +7,11 @@ html {
   // --color-fill-1: #f3f6fa;
   --color-fill-2: #fff;
   --color-fill-3: #f3f6fa;
-  --menu-border-radius-base: 32px;
+  --menu-border-radius-base: 20px;
   --border-radius-base: 16px;
+  --border-radius-middle: 20px;
   --border-radius-small: 8px;
-  --color-white-1: #fff;
+  --color-white-1: rgba(255, 255, 255, 75%);
   --font-weight-normal: 500;
   --font-weight-bold: 700;
   --color-text-1: var(--ant-color-text);
@@ -19,7 +20,7 @@ html {
   --font-size-large: 16px;
   --font-size-middle: 14px;
   --ant-color-fill-secondary: rgba(0, 0, 0, 6%);
-  --table-td-radius: 24px;
+  --table-td-radius: 20px;
   --checkbox-border-radius: 4px;
   --ant-table-cell-padding-inline: 16px;
   --ant-table-cell-padding-block: 16px;
@@ -36,6 +37,7 @@ html {
   --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
   --ant-input-active-border-color: #2fbf85;
   --ant-input-hover-border-color: #54cc98;
+  --box-shadow-base: 0 4px 12px rgb(227, 232, 240);
 
   .css-var-rf {
     --ant-font-size: var(--font-size-base);
@@ -67,6 +69,7 @@ html {
     --ant-border-radius-lg: 16px;
     --ant-color-error: #ff4d4f;
     --ant-color-bg-mask: rgba(0, 0, 0, 35%);
+    --ant-color-border: rgb(217 217 217 / 50%);
 
     &.ant-popover {
       --ant-popover-inner-padding: 26px;
@@ -222,12 +225,43 @@ body {
       font-size: 16px;
     }
   }
+
+  // ============== new theme style start ===============
+  .ant-pro-layout {
+    background-color: var(--color-fill-1);
+    height: 100%;
+
+    .ant-pro-sider .ant-layout-sider-children {
+      background-color: var(--color-white-1);
+      box-shadow: var(--box-shadow-base);
+    }
+  }
+
+  .ant-table-wrapper .ant-table {
+    background-color: unset;
+  }
+
+  .ant-table-content table {
+    .ant-table-thead > tr > th {
+      background-color: unset;
+    }
+
+    .ant-table-tbody {
+      .ant-table-row {
+        border-radius: var(--table-td-radius);
+        background-color: var(--color-white-1);
+        box-shadow: var(--box-shadow-base);
+
+        > td {
+          background-color: unset;
+        }
+      }
+    }
+  }
+
+  // ============== new theme style end =================
 }
 
-// ======== basic layout style start============
-
-// ======== basic layout style end ============
-
 // ======== menu style start ============
 .ant-pro-sider-collapsed-button {
   display: none;
@@ -250,7 +284,7 @@ body {
   }
 
   .ant-pro-layout-container {
-    background-color: var(--color-fill-2);
+    // background-color: var(--color-fill-2);
   }
 
   .ant-pro-sider {
@@ -275,20 +309,35 @@ body {
 .monaco-editor {
   border-radius: 16px;
 }
-// .background {
+
-//   position: fixed;
+.background {
-//   top: 0;
+  position: fixed;
-//   left: 0;
+  top: 0;
-//   bottom: 0;
+  left: 0;
-//   right: 0;
+  bottom: 0;
-//   background: radial-gradient(
+  right: 0;
-//     circle,
+  // background: radial-gradient(
-//     rgba(47, 191, 133, 0.02),
+  //   circle,
-//     rgba(55, 125, 184, 0.2)
+  //   rgba(47, 191, 133, 0.02),
-//   );
+  //   rgba(55, 125, 184, 0.2)
-//   filter: blur(100px);
+  // );
-//   height: 100%;
+  background: url('./assets/images/bg.png') center center no-repeat;
-// }
+  background-size: cover;
+
+  &::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    backdrop-filter: blur(100px);
+    filter: blur(100px);
+    height: 100%;
+  }
+}
+
 .ant-pro-page-container {
   background: transparent;
 }

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

@@ -1,4 +1,4 @@
-import ContentWrapper from '@/components/content-wrapper';
+// import div from '@/components/content-wrapper';
 import PageTools from '@/components/page-tools';
 import { Col, Row, Table } from 'antd';
 
@@ -131,7 +131,7 @@ const projectData = [
 ];
 const ActiveTable = () => {
   return (
-    <Row>
+    <Row gutter={[20, 0]}>
       <Col span={12}>
         <PageTools
           style={{ margin: '32px 40px' }}
@@ -144,14 +144,14 @@ const ActiveTable = () => {
           }
           right={false}
         />
-        <ContentWrapper contentStyle={{ paddingRight: 0 }} title={false}>
+        <div>
           <Table
             columns={modelColumns}
             dataSource={modelData}
             pagination={false}
             rowKey="id"
           />
-        </ContentWrapper>
+        </div>
       </Col>
       <Col span={12}>
         <PageTools
@@ -165,14 +165,14 @@ const ActiveTable = () => {
           }
           right={false}
         />
-        <ContentWrapper title={false}>
+        <div>
           <Table
             columns={projectColumns}
             dataSource={projectData}
             pagination={false}
             rowKey="id"
           />
-        </ContentWrapper>
+        </div>
       </Col>
     </Row>
   );

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

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

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

@@ -1,4 +1,3 @@
-import ContentWrapper from '@/components/content-wrapper';
 import { Card, Col, Row, Space } from 'antd';
 import React from 'react';
 import { overviewConfigs } from '../config';
@@ -63,7 +62,7 @@ const Overview: React.FC = (props) => {
     );
   };
   return (
-    <ContentWrapper contentStyle={{ paddingBlockStart: '32px' }} title={false}>
+    <div>
       <Row gutter={[24, 20]} className={styles.row}>
         {overviewConfigs.map((config, index) => (
           <Col span={5} key={config.key}>
@@ -75,7 +74,7 @@ const Overview: React.FC = (props) => {
           </Col>
         ))}
       </Row>
-    </ContentWrapper>
+    </div>
   );
 };
 

src/pages/dashboard/components/resource-utilization.tsx

@@ -52,6 +52,7 @@ const UtilizationOvertime: React.FC = () => {
         data.push({
           time: timeList[i],
           type: typeList[j],
+          color: 'red',
           value: _.get(mockData, typeList[j])[i]
         });
       }

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

@@ -1,20 +1,24 @@
+import CardWrapper from '@/components/card-wrapper';
 import GaugeChart from '@/components/charts/gauge';
 import PageTools from '@/components/page-tools';
-import { PageContainer } from '@ant-design/pro-components';
 import { Col, DatePicker, Row } from 'antd';
 import ResourceUtilization from './resource-utilization';
 
 const SystemLoad = () => {
+  const colors = [
+    'rgba(84, 204, 152,.8)',
+    'rgba(255, 214, 102,.8)',
+    'rgba(255, 120, 117,.8)'
+  ];
   const handleSelectDate = (date: string) => {
     console.log('dateString============', date);
   };
 
   return (
-    <PageContainer ghost title={false}>
+    <div>
       <div className="system-load">
         <PageTools
-          marginBottom={10}
+          style={{ margin: '32px 40px' }}
-          marginTop={0}
           left={
             <span style={{ fontSize: 'var(--font-size-large)' }}>
               System Load
@@ -24,51 +28,61 @@ const SystemLoad = () => {
             <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
           }
         />
-        <ResourceUtilization />
+        <CardWrapper>
-        <Row style={{ width: '100%', marginTop: '32px' }}>
+          <ResourceUtilization />
-          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
+        </CardWrapper>
-            <GaugeChart
+        <Row style={{ width: '100%', marginTop: '40px' }} gutter={[20, 20]}>
-              title="GPU Compute Utilization"
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              total={100}
+            <CardWrapper>
-              target={20}
+              <GaugeChart
-              // height={320}
+                title="GPU Compute Utilization"
-              thresholds={[50, 70, 100]}
+                total={100}
-              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+                target={20}
-            ></GaugeChart>
+                // height={320}
+                thresholds={[50, 70, 100]}
+                rangColor={colors}
+              ></GaugeChart>
+            </CardWrapper>
           </Col>
-          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-            <GaugeChart
+            <CardWrapper>
-              title="GPU Memory Utilization"
+              <GaugeChart
-              total={100}
+                title="GPU Memory Utilization"
-              target={30}
+                total={100}
-              // height={320}
+                target={30}
-              thresholds={[50, 70, 100]}
+                // height={320}
-              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+                thresholds={[50, 70, 100]}
-            ></GaugeChart>
+                rangColor={colors}
+              ></GaugeChart>
+            </CardWrapper>
           </Col>
-          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-            <GaugeChart
+            <CardWrapper>
-              title="CPU Compute Utilization"
+              <GaugeChart
-              total={100}
+                title="CPU Compute Utilization"
-              target={40}
+                total={100}
-              // height={320}
+                target={40}
-              thresholds={[50, 70, 100]}
+                // height={320}
-              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+                thresholds={[50, 70, 100]}
-            ></GaugeChart>
+                rangColor={colors}
+              ></GaugeChart>
+            </CardWrapper>
           </Col>
-          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
+          <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-            <GaugeChart
+            <CardWrapper>
-              title="CPU Memory Utilization"
+              <GaugeChart
-              total={100}
+                title="CPU Memory Utilization"
-              target={70}
+                total={100}
-              // height={320}
+                target={70}
-              thresholds={[50, 70, 100]}
+                // height={320}
-              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+                thresholds={[50, 70, 100]}
-            ></GaugeChart>
+                rangColor={colors}
+              ></GaugeChart>
+            </CardWrapper>
           </Col>
         </Row>
       </div>
-    </PageContainer>
+    </div>
   );
 };
 

src/pages/dashboard/components/usage.tsx

@@ -1,6 +1,6 @@
+import CardWrapper from '@/components/card-wrapper';
 import ColumnBar from '@/components/charts/column-bar';
 import HBar from '@/components/charts/h-bar';
-import ContentWrapper from '@/components/content-wrapper';
 import PageTools from '@/components/page-tools';
 import { generateRandomArray } from '@/utils';
 import { Col, DatePicker, Row } from 'antd';
@@ -86,9 +86,11 @@ const tokenUsage = TokensData.map((val, i) => {
 });
 
 const Usage = () => {
+  const bgColor = '#fff';
   const handleSelectDate = (dateString: string) => {
     console.log('dateString============', dateString);
   };
+
   return (
     <>
       <PageTools
@@ -98,9 +100,9 @@ const Usage = () => {
           <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
         }
       />
-      <Row style={{ width: '100%' }} gutter={[20, 0]}>
+      <Row style={{ width: '100%' }} gutter={[0, 20]}>
-        <Col span={12}>
+        <Col span={12} style={{ paddingRight: '20px' }}>
-          <ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
+          <CardWrapper>
             <ColumnBar
               title="API Request"
               data={dataList}
@@ -108,10 +110,10 @@ const Usage = () => {
               yField="value"
               height={360}
             ></ColumnBar>
-          </ContentWrapper>
+          </CardWrapper>
         </Col>
         <Col span={12}>
-          <ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
+          <CardWrapper>
             <ColumnBar
               title="Tokens"
               data={tokenUsage}
@@ -119,31 +121,34 @@ const Usage = () => {
               yField="value"
               height={360}
             ></ColumnBar>
-          </ContentWrapper>
+          </CardWrapper>
         </Col>
       </Row>
-      <Row style={{ width: '100%' }} gutter={[20, 0]}>
+      <Row style={{ width: '100%', marginTop: '20px' }} gutter={[0, 20]}>
-        <Col span={12}>
+        <Col span={12} style={{ paddingRight: '20px' }}>
-          <ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
+          <CardWrapper>
             <HBar
               title="Top Users"
               data={userDataList}
               xField="time"
               yField="value"
-              height={400}
             ></HBar>
-          </ContentWrapper>
+          </CardWrapper>
         </Col>
         <Col span={12}>
-          <ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
+          <CardWrapper
+            style={{
+              background: bgColor,
+              borderRadius: 'var(--border-radius-base)'
+            }}
+          >
             <HBar
               title="Top Projects"
               data={projectDataList}
               xField="time"
               yField="value"
-              height={400}
             ></HBar>
-          </ContentWrapper>
+          </CardWrapper>
         </Col>
       </Row>
     </>

src/pages/dashboard/config/index.ts

@@ -2,31 +2,31 @@ export const overviewConfigs = [
   {
     key: 'workers',
     label: 'Workers',
-    backgroundColor:
+    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
-      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
+    backgroundColor: 'var(--color-white-1)'
   },
   {
     key: 'gpus',
     label: 'Total GPUs',
-    backgroundColor:
+    backgroundColor: 'var(--color-white-1)'
-      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
+    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'allocatedGpus',
     label: 'Allocated GPUs',
-    backgroundColor:
+    backgroundColor: 'var(--color-white-1)'
-      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
+    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'models',
     label: 'Models',
-    backgroundColor:
+    backgroundColor: 'var(--color-white-1)'
-      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
+    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'instances',
     label: 'Instances',
-    backgroundColor:
+    backgroundColor: 'var(--color-white-1)'
-      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
+    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   }
 ];

src/pages/dashboard/index.tsx

@@ -1,4 +1,3 @@
-import DividerLine from '@/components/divider-line';
 import ActiveTable from './components/active-table';
 import Overview from './components/over-view';
 import SystemLoad from './components/system-load';
@@ -8,11 +7,11 @@ const Dashboard: React.FC = () => {
   return (
     <>
       <Overview></Overview>
-      <DividerLine></DividerLine>
+      {/* <DividerLine></DividerLine> */}
       <SystemLoad></SystemLoad>
-      <DividerLine></DividerLine>
+      {/* <DividerLine></DividerLine> */}
       <Usage></Usage>
-      <DividerLine></DividerLine>
+      {/* <DividerLine></DividerLine> */}
       <ActiveTable></ActiveTable>
     </>
   );

src/pages/playground/index.tsx

@@ -1,5 +1,4 @@
 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';
@@ -30,9 +29,7 @@ const Playground: React.FC = () => {
       <div className="chat">
         <GroundLeft parameters={params}></GroundLeft>
       </div>
-      <div className="divider-line">
+      <div className="divider-line">{/* <Divider type="vertical" /> */}</div>
-        <Divider type="vertical" />
-      </div>
       <div className="params">
         <ParamsSettings
           onClose={handleClosePopover}

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

@@ -2,10 +2,14 @@
   position: relative;
   height: 100vh;
   padding-bottom: 120px;
+  background-color: var(--color-white-1);
+  border-radius: 24px;
+
   .message-list-wrap {
     max-height: calc(100vh - 152px);
     overflow-y: auto;
   }
+
   .ground-left-footer {
     position: absolute;
     bottom: 20px;