From d44f5a72d12f4599cb113d41728d33ca100ce2b7 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 24 Jun 2024 09:37:11 +0800 Subject: [PATCH] style: dashboard --- config/config.ts | 1 + {src => public/static}/favicon.ico | Bin src/assets/images/favicon.ico | Bin 0 -> 4286 bytes src/components/card-wrapper/index.less | 2 +- src/components/charts/column-bar.tsx | 7 +- src/components/charts/gauge.tsx | 6 +- src/components/charts/h-bar.tsx | 7 +- src/components/charts/line-chart.tsx | 7 +- src/global.less | 6 +- src/layouts/index.tsx | 2 +- .../dashboard/components/active-table.tsx | 8 +- .../dashboard/components/system-load.tsx | 2 +- src/pages/dashboard/components/usage.tsx | 82 ++++++++++-------- src/pages/dashboard/index.tsx | 3 - src/pages/playground/index.tsx | 31 ++++--- src/pages/playground/style/ground-left.less | 2 - 16 files changed, 95 insertions(+), 71 deletions(-) rename {src => public/static}/favicon.ico (100%) create mode 100644 src/assets/images/favicon.ico diff --git a/config/config.ts b/config/config.ts index 2f794d2e..d6874c03 100644 --- a/config/config.ts +++ b/config/config.ts @@ -65,6 +65,7 @@ export default defineConfig({ } : {}), // esbuildMinifyIIFE: true, + favicons: ['/static/favicon.ico'], jsMinifier: 'terser', cssMinifier: 'cssnano', presets: ['umi-presets-pro'], diff --git a/src/favicon.ico b/public/static/favicon.ico similarity index 100% rename from src/favicon.ico rename to public/static/favicon.ico diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..76597beaa72f5ed586307fa9185d13a7871eb3be GIT binary patch literal 4286 zcmdT{K}b|V7#>YbBuqr2&Cp#9kq8eKQ4zI>M0hBOkm%Gw!o#jwhYlsVA|ah5qJxL< z5Mt1&Q;0-LghYp3vj~x>kdTN-S;CFX>HFT!JcjY@^R2aqo_zlQ{PTbR|G$}eGqXYz z;V&E({4X9>3b9KF(FDLGq5$pAgTDXyneC2wkHvx0$+-%emF?`-C_^}!(dk(X=9=KhQJ+-CWa_XzN_K>2?oZq6M5edWOW0_E1@ zcMS2X-t=r-3b5ZSaBkMXwb%?q&AC8(2k;%xb(-=A><8#)KXT+C;|%BEdBvjbBI7_l1}2r>=n;e8$~#~Vmx^Nq;i?IJIXeu{envH`V?2^vL*Kr_uPYiUHQ9f4eb_XTZPQ|t$Ec1 zf3=p}IW+V04inWp=-lf*0H1LVxOc+2xO1!tDc}`{E;jHE_)C0sL7R=u!LHA#fHHKhQXu!PUOR zwZ%2VI{0n!+&l+t*r#a&c$SR<4OU@IJ&kG`>RT8X>4_J0GVncOl_A^6v=fVo~;Q{mjRZ6 zj|x*l)J$hY&A^(dNvw-dqF;oDqzDbmL})aNqmT|@yOES4JtM{Hl1wZu%0zNSPMyuj UO#j-+^?tcCEoEYxl*@JU4`YEvK>z>% literal 0 HcmV?d00001 diff --git a/src/components/card-wrapper/index.less b/src/components/card-wrapper/index.less index 1f8a2457..28e021ae 100644 --- a/src/components/card-wrapper/index.less +++ b/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); } diff --git a/src/components/charts/column-bar.tsx b/src/components/charts/column-bar.tsx index 2f1a4d2d..42c6d588 100644 --- a/src/components/charts/column-bar.tsx +++ b/src/components/charts/column-bar.tsx @@ -43,7 +43,10 @@ const BarChart: React.FC = (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 = (props) => { radiusTopLeft: 12, radiusTopRight: 12, align: 'center', - width: 30 + width: 20 } }; diff --git a/src/components/charts/gauge.tsx b/src/components/charts/gauge.tsx index 817e06ae..e226e247 100644 --- a/src/components/charts/gauge.tsx +++ b/src/components/charts/gauge.tsx @@ -47,9 +47,11 @@ const GaugeChart: React.FC = (props) => { title: { title, size: 0, - titleFontSize: 14, style: { - align: 'center' + align: 'center', + titleFontSize: 14, + titleFill: 'rgba(0,0,0,0.88)', + titleFontWeight: 500 } }, style: { diff --git a/src/components/charts/h-bar.tsx b/src/components/charts/h-bar.tsx index 11f17159..90486c88 100644 --- a/src/components/charts/h-bar.tsx +++ b/src/components/charts/h-bar.tsx @@ -43,7 +43,10 @@ const BarChart: React.FC = (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 = (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 } }; diff --git a/src/components/charts/line-chart.tsx b/src/components/charts/line-chart.tsx index 0020ef36..5c7c45b2 100644 --- a/src/components/charts/line-chart.tsx +++ b/src/components/charts/line-chart.tsx @@ -39,11 +39,12 @@ const LineChart: React.FC = (props) => { lineWidth: 1.5 }, legend: { - itemMarker: { - symbol: 'circle' - }, color: { layout: { justifyContent: 'center' } + }, + size: { + itemLabelFontSize: 14, + itemLabelFontWeight: 500 } }, tooltip: { diff --git a/src/global.less b/src/global.less index 141cff53..6e60286a 100644 --- a/src/global.less +++ b/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); diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 3ed73779..edb88887 100644 --- a/src/layouts/index.tsx +++ b/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(); diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index f3f40693..91062cd7 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -132,9 +132,9 @@ const projectData = [ const ActiveTable = () => { return ( - + { /> - + {
System Load diff --git a/src/pages/dashboard/components/usage.tsx b/src/pages/dashboard/components/usage.tsx index d7580e69..cf9ee33a 100644 --- a/src/pages/dashboard/components/usage.tsx +++ b/src/pages/dashboard/components/usage.tsx @@ -94,46 +94,65 @@ const Usage = () => { return ( <> Usage} right={ } /> - + - + + + + + + + + - + - + + + + + + + + - + {/* - - - + { background: bgColor, borderRadius: 'var(--border-radius-base)' }} - > - - + > - + */} ); }; diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 03c17a3e..c8fbd297 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -7,11 +7,8 @@ const Dashboard: React.FC = () => { return ( <> - {/* */} - {/* */} - {/* */} ); diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx index 35bf7161..07c56d15 100644 --- a/src/pages/playground/index.tsx +++ b/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 ( -
-
- -
-
{/* */}
-
- + +
+
+ +
+
+ +
+ +
+ +
-
+ ); }; diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less index 961ae1fb..72301e1f 100644 --- a/src/pages/playground/style/ground-left.less +++ b/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);