From d3f3baa93e77f90a77a3db4481dacad8ab1635a3 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 18 Jun 2024 11:28:17 +0800 Subject: [PATCH] build: css files dir --- config/config.ts | 25 ++-- src/components/charts/gauge.tsx | 1 + .../dashboard/components/active-table.tsx | 6 +- src/pages/dashboard/components/over-view.tsx | 25 ++-- .../components/resource-utilization.tsx | 41 +++++-- .../dashboard/components/system-load.tsx | 109 +++++++++--------- src/pages/dashboard/components/usage.tsx | 4 +- src/pages/dashboard/index.tsx | 9 +- src/utils/index.ts | 84 ++++++++++++++ 9 files changed, 211 insertions(+), 93 deletions(-) diff --git a/config/config.ts b/config/config.ts index 3e9ad485..d237579b 100644 --- a/config/config.ts +++ b/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.module.rules.delete('images'); - config.plugin('extract-css').use(MiniCssExtractPlugin, [ - { - filename: 'css/[name].[contenthash:8].css', - chunkFilename: 'css/[name].[contenthash:8].chunk.css', - ignoreOrder: true - } - ]); + // config.plugin('extract-css').use(MiniCssExtractPlugin, [ + // { + // filename: 'css/[name].[contenthash:8].css', + // 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'); diff --git a/src/components/charts/gauge.tsx b/src/components/charts/gauge.tsx index 5790cc9c..032903fc 100644 --- a/src/components/charts/gauge.tsx +++ b/src/components/charts/gauge.tsx @@ -30,6 +30,7 @@ const GaugeChart: React.FC = (props) => { } }, title: { + // title, titleFontSize: 14, style: { align: 'center' diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 0a94be9e..712de2f0 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/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) => {record.quota}k }, { title: 'Token Utilization', dataIndex: 'utilization', - key: 'utilization' + key: 'utilization', + render: (text: any, record: any) => {record.utilization}% }, { title: 'Members', diff --git a/src/pages/dashboard/components/over-view.tsx b/src/pages/dashboard/components/over-view.tsx index e5422cdd..a3469e66 100644 --- a/src/pages/dashboard/components/over-view.tsx +++ b/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,17 +63,19 @@ const Overview: React.FC = (props) => { ); }; return ( - - {overviewConfigs.map((config, index) => ( - - {renderCardItem({ - label: config.label, - value: renderValue(data[config.key] || 0), - bgColor: config.backgroundColor - })} - - ))} - + + + {overviewConfigs.map((config, index) => ( + + {renderCardItem({ + label: config.label, + value: renderValue(data[config.key] || 0), + bgColor: config.backgroundColor + })} + + ))} + + ); }; diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx index fd5bb50c..914b62c2 100644 --- a/src/pages/dashboard/components/resource-utilization.tsx +++ b/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(), - CPU: generateRandomArray(), - Memory: generateRandomArray(), - VRAM: generateRandomArray() + GPU: generateFluctuatingData({ + total: 17, + max: 80, + 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', - '07:00:00', + // '06: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 = () => { diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx index 69e955b9..5b65e730 100644 --- a/src/pages/dashboard/components/system-load.tsx +++ b/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,59 +10,61 @@ const SystemLoad = () => { }; return ( -
- - } - /> - - - - - - - - - - - - - - - -
+ +
+ + } + /> + + + + + + + + + + + + + + + +
+ ); }; diff --git a/src/pages/dashboard/components/usage.tsx b/src/pages/dashboard/components/usage.tsx index 567e0989..73a69b24 100644 --- a/src/pages/dashboard/components/usage.tsx +++ b/src/pages/dashboard/components/usage.tsx @@ -133,7 +133,7 @@ const Usage = () => { data={userDataList} xField="time" yField="value" - height={360} + height={400} > @@ -144,7 +144,7 @@ const Usage = () => { data={projectDataList} xField="time" yField="value" - height={360} + height={400} > diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 1c062c6a..6ebc44ce 100644 --- a/src/pages/dashboard/index.tsx +++ b/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 ( <> - - - + - - - + diff --git a/src/utils/index.ts b/src/utils/index.ts index 98b36945..bf82ed5c 100644 --- a/src/utils/index.ts +++ b/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; +};