build: css files dir

config/config.ts

@@ -7,7 +7,7 @@ const DeleteCssPlugin = require('./plugins/delete-css-plugin');
 import proxy from './proxy';
 import routes from './routes';
 const env = process.env.NODE_ENV;
-const isProduction = env === 'production1';
+const isProduction = env === 'production';
 
 export default defineConfig({
   proxy: {
@@ -39,20 +39,25 @@ export default defineConfig({
           }
         },
         chainWebpack(config: any) {
-          config.module.rules.delete('image');
+          // config.plugin('extract-css').use(MiniCssExtractPlugin, [
-          config.module.rules.delete('images');
+          //   {
-          config.plugin('extract-css').use(MiniCssExtractPlugin, [
+          //     filename: 'css/[name].[contenthash:8].css',
-            {
+          //     chunkFilename: 'css/[name].[contenthash:8].chunk.css',
-              filename: 'css/[name].[contenthash:8].css',
+          //     ignoreOrder: true
-              chunkFilename: 'css/[name].[contenthash:8].chunk.css',
+          //   }
-              ignoreOrder: true
+          // ]);
-            }
-          ]);
           // config.plugin('delete-css').use(DeleteCssPlugin, [
           //   {
           //     outputPath: path.resolve(__dirname, '../', 'dist')
           //   }
           // ]);
+          config.plugin('mini-css-extract-plugin').tap((args: any) => [
+            {
+              ...args[0],
+              filename: `css/[name].[contenthash:8].css`,
+              chunkFilename: `css/[name].[contenthash:8].chunk.css`
+            }
+          ]);
           config.output
             .filename('js/[name].[contenthash:8].js')
             .chunkFilename('js/[name].[contenthash:8].chunk.js');

src/components/charts/gauge.tsx

@@ -30,6 +30,7 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
       }
     },
     title: {
+      // title,
       titleFontSize: 14,
       style: {
         align: 'center'

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

@@ -42,12 +42,14 @@ const projectColumns = [
   {
     title: 'Token Quota',
     dataIndex: 'quota',
-    key: 'quota'
+    key: 'quota',
+    render: (text: any, record: any) => <span>{record.quota}k</span>
   },
   {
     title: 'Token Utilization',
     dataIndex: 'utilization',
-    key: 'utilization'
+    key: 'utilization',
+    render: (text: any, record: any) => <span>{record.utilization}%</span>
   },
   {
     title: 'Members',

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

@@ -1,3 +1,4 @@
+import { PageContainer } from '@ant-design/pro-components';
 import { Card, Col, Row, Space } from 'antd';
 import React from 'react';
 import { overviewConfigs } from '../config';
@@ -62,6 +63,7 @@ const Overview: React.FC = (props) => {
     );
   };
   return (
+    <PageContainer ghost title={false}>
       <Row gutter={[20, 20]} className={styles.row}>
         {overviewConfigs.map((config, index) => (
           <Col span={5} key={config.key}>
@@ -73,6 +75,7 @@ const Overview: React.FC = (props) => {
           </Col>
         ))}
       </Row>
+    </PageContainer>
   );
 };
 

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

@@ -1,12 +1,28 @@
 import LineChart from '@/components/charts/line-chart';
-import { generateRandomArray } from '@/utils';
+import { generateFluctuatingData } from '@/utils';
 import _ from 'lodash';
 
 const mockData = {
-  GPU: generateRandomArray(),
+  GPU: generateFluctuatingData({
-  CPU: generateRandomArray(),
+    total: 17,
-  Memory: generateRandomArray(),
+    max: 80,
-  VRAM: generateRandomArray()
+    min: 20
+  }),
+  CPU: generateFluctuatingData({
+    total: 17,
+    max: 70,
+    min: 10
+  }),
+  Memory: generateFluctuatingData({
+    total: 17,
+    max: 60,
+    min: 20
+  }),
+  VRAM: generateFluctuatingData({
+    total: 17,
+    max: 90,
+    min: 15
+  })
 };
 const UtilizationOvertime: React.FC = () => {
   const timeList = [
@@ -15,8 +31,8 @@ const UtilizationOvertime: React.FC = () => {
     // '03:00:00',
     // '04:00:00',
     // '05:00:00',
-    '06:00:00',
+    // '06:00:00',
-    '07:00:00',
+    // '07:00:00',
     '08:00:00',
     '09:00:00',
     '10:00:00',
@@ -24,7 +40,16 @@ const UtilizationOvertime: React.FC = () => {
     '12:00:00',
     '13:00:00',
     '14:00:00',
-    '15:00:00'
+    '15:00:00',
+    '16:00:00',
+    '17:00:00',
+    '18:00:00',
+    '19:00:00',
+    '20:00:00',
+    '21:00:00',
+    '22:00:00',
+    '23:00:00',
+    '24:00:00'
   ];
   const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
   const generateData = () => {

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

@@ -1,5 +1,6 @@
 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';
 
@@ -9,6 +10,7 @@ const SystemLoad = () => {
   };
 
   return (
+    <PageContainer ghost title="System Load">
       <div className="system-load">
         <PageTools
           marginBottom={10}
@@ -62,6 +64,7 @@ const SystemLoad = () => {
           </Col>
         </Row>
       </div>
+    </PageContainer>
   );
 };
 

src/pages/dashboard/components/usage.tsx

@@ -133,7 +133,7 @@ const Usage = () => {
               data={userDataList}
               xField="time"
               yField="value"
-              height={360}
+              height={400}
             ></HBar>
           </PageContainer>
         </Col>
@@ -144,7 +144,7 @@ const Usage = () => {
               data={projectDataList}
               xField="time"
               yField="value"
-              height={360}
+              height={400}
             ></HBar>
           </PageContainer>
         </Col>

src/pages/dashboard/index.tsx

@@ -1,5 +1,4 @@
 import DividerLine from '@/components/divider-line';
-import { PageContainer } from '@ant-design/pro-components';
 import ActiveTable from './components/active-table';
 import Overview from './components/over-view';
 import SystemLoad from './components/system-load';
@@ -8,13 +7,9 @@ import Usage from './components/usage';
 const Dashboard: React.FC = () => {
   return (
     <>
-      <PageContainer ghost title={false}>
       <Overview></Overview>
-      </PageContainer>
       <DividerLine></DividerLine>
-      <PageContainer ghost title="System Load">
       <SystemLoad></SystemLoad>
-      </PageContainer>
       <DividerLine></DividerLine>
       <Usage></Usage>
       <DividerLine></DividerLine>

src/utils/index.ts

@@ -55,3 +55,87 @@ export const generateRandomArray = (config?: {
 
   return data;
 };
+
+export const generateFluctuatingData2 = ({
+  total = 100,
+  noiseLevel = 10,
+  max = 50,
+  min = 5
+}) => {
+  const x = [];
+  const y = [];
+
+  for (let i = 0; i < total; i++) {
+    // 生成一个基本的线性趋势，使用正弦函数
+    const phaseShift = Math.random() * 2 * Math.PI;
+    const trend =
+      max * Math.sin((3 * Math.PI * i + phaseShift) / total) + max / 2;
+
+    // 生成噪声
+    const noise = (Math.random() * 2 - 1) * noiseLevel;
+
+    // 叠加趋势和噪声
+    const value = trend + noise;
+    x.push(i);
+    y.push(Math.max(min, value));
+  }
+
+  return y;
+};
+
+export const generateFluctuatingData = ({
+  total = 50,
+  trendType = 'linear',
+  max = 1,
+  f = 1,
+  phase = 0,
+  min = 0
+}) => {
+  /**
+   * 生成一组用于折线图的数据,具有自然且美观的趋势。
+   *
+   * 参数:
+   * total (number): 生成数据点的数量
+   * trendType (string): 数据趋势类型, 可选'linear', 'sine', 'exponential'
+   * max (number): 波动幅度
+   * f (number): 波动频率
+   * phase (number): 波动相位
+   * min (number): 数据的最小值
+   *
+   * 返回:
+   * x (number[]): x轴数据
+   * y (number[]): y轴数据
+   */
+  const x = Array.from({ length: total }, (_, i) => (i * 10) / (total - 1));
+
+  let y;
+  switch (trendType) {
+    case 'linear':
+      y = x.map(
+        (val) => val * (Math.random() * 2 - 1) * 3 + Math.random() * 8 - 4
+      );
+
+      break;
+    case 'sine':
+      y = x.map(
+        (val) =>
+          max * Math.sin(2 * Math.PI * f * val + phase) + Math.random() * 2 - 1
+      );
+      break;
+    case 'exponential':
+      y = x.map(
+        (val) => Math.exp(val * Math.random() * 0.2) + Math.random() * 4 - 2
+      );
+      break;
+    default:
+      throw new Error(
+        '无效的trendType参数,请选择"linear", "sine"或"exponential".'
+      );
+  }
+
+  // 将数据调整到最小值
+  const minY = Math.min(...y);
+  y = y.map((val) => _.round(val - minY + min, 2));
+
+  return y;
+};