style: dashboard style

src/components/charts/gauge.tsx

@@ -29,14 +29,18 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
         range: rangColor
       }
     },
+    startAngle: Math.PI,
+    endAngle: 0,
     title: {
-      // title,
+      title,
+      size: 0,
       titleFontSize: 14,
       style: {
         align: 'center'
       }
     },
     style: {
+      arcShape: 'round',
       textContent: (target: number, total: number) => {
         return `${(target / total) * 100}%`;
       }

src/components/charts/pie-chart.tsx

@@ -0,0 +1,37 @@
+import { Pie } from '@ant-design/plots';
+import numeral from 'numeral';
+
+interface PieChartProps {
+  data: { label: string; value: number }[];
+  height?: number;
+  radius?: number;
+}
+const PieChart: React.FC<PieChartProps> = (props) => {
+  const { data, height = 340, radius = 0.9 } = props;
+
+  return (
+    <Pie
+      height={height}
+      radius={radius}
+      angleField="value"
+      colorField="label"
+      data={data}
+      legend={{
+        color: {
+          position: 'bottom',
+          layout: {
+            justifyContent: 'center'
+          }
+        }
+      }}
+      label={{
+        position: 'outside',
+        text: (item: { label: number; value: number }) => {
+          return `${item.label}: ${numeral(item.value).format('0,0')}`;
+        }
+      }}
+    />
+  );
+};
+
+export default PieChart;

src/components/page-tools/index.tsx

@@ -6,17 +6,27 @@ type PageToolsProps = {
   right?: React.ReactNode;
   marginBottom?: number;
   marginTop?: number;
+  style?: React.CSSProperties;
 };
 
 const PageTools: React.FC<PageToolsProps> = (props) => {
-  const { left, right, marginBottom = 0, marginTop = 70 } = props;
+  const {
+    left,
+    right,
+    marginBottom = 0,
+    marginTop = 70,
+    style: pageStyle
+  } = props;
 
-  const newStyle: Record<string, string> = useMemo(() => {
-    const style: Record<string, string> = {};
+  const newStyle: React.CSSProperties = useMemo(() => {
+    const style: React.CSSProperties = {};
     style.marginBottom = `${marginBottom}px`;
     style.marginTop = `${marginTop}px`;
+    if (pageStyle) {
+      Object.assign(style, pageStyle);
+    }
     return style;
-  }, [marginBottom, marginTop]);
+  }, [marginBottom, marginTop, pageStyle]);
 
   return (
     <div className="page-tools" style={newStyle}>

src/components/status-tag/index.less

@@ -11,6 +11,10 @@
   font-size: var(--font-size-base);
   overflow: hidden;
 
+  &.download {
+    background-color: rgb(47 191 133 / 30%);
+  }
+
   .download {
     display: flex;
     justify-content: center;

src/components/status-tag/index.tsx

@@ -48,7 +48,9 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
   };
   return (
     <span
-      className={classNames('status-tag')}
+      className={classNames('status-tag', {
+        download: download?.percent
+      })}
       style={
         download
           ? {