style: ui colors

src/components/card-wrapper/index.less

@@ -2,4 +2,5 @@
   border-radius: var(--border-radius-middle);
   background-color: var(--color-white-1);
   box-shadow: var(--box-shadow-base);
+  padding: 10px;
 }

src/components/card-wrapper/index.tsx

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

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', 'yellow'],
+    // color: color || ['red', 'blue', 'green', 'yellow'],
     colorField: 'type',
     autoFit: true,
     slider,
@@ -36,7 +36,8 @@ const LineChart: React.FC<LineChartProps> = (props) => {
     //   sizeField: 2
     // },
     style: {
-      lineWidth: 1.5
+      lineWidth: 1.5,
+      opacity: 0.8
     },
     legend: {
       color: {

src/components/charts/liquid.tsx

@@ -0,0 +1,79 @@
+import { Liquid } from '@ant-design/plots';
+import { useEffect, useState } from 'react';
+
+interface LiquidChartProps {
+  percent: number;
+  color?: string;
+  title?: string;
+  height?: number;
+  width?: number;
+  thresholds?: number[];
+  rangColor?: string[];
+}
+const LiquidChart: React.FC<LiquidChartProps> = (props) => {
+  const {
+    percent,
+    color,
+    title,
+    width,
+    height,
+    thresholds = [],
+    rangColor = []
+  } = props;
+
+  const primaryColor = 'rgba(84, 204, 152,0.8)';
+  const [fillColor, setFillColor] = useState<string>(primaryColor);
+
+  const calcColorByPercent = () => {
+    if (color) {
+      return color;
+    }
+    if (!rangColor.length) {
+      return primaryColor;
+    }
+
+    if (rangColor.length && thresholds.length) {
+      let index = 0;
+      for (let i = 0; i < thresholds.length; i++) {
+        if (percent <= thresholds[i]) {
+          index = i;
+          break;
+        }
+      }
+      return rangColor[index];
+    }
+    return primaryColor;
+  };
+
+  useEffect(() => {
+    const fc = calcColorByPercent();
+    setFillColor(fc);
+  }, [percent]);
+
+  const config = {
+    percent,
+    textAlign: 'center',
+    autoFit: true,
+    title: {
+      title,
+      size: 0,
+      style: {
+        align: 'center',
+        titleFontSize: 12,
+        titleFill: 'rgba(0,0,0,0.88)',
+        titleFontWeight: 500
+      }
+    },
+
+    style: {
+      textAlign: 'center',
+      outlineBorder: 2,
+      waveLength: 128,
+      stroke: fillColor,
+      fill: fillColor
+    }
+  };
+  return <Liquid {...config} />;
+};
+
+export default LiquidChart;

src/components/seal-table/styles/index.less

@@ -2,57 +2,69 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+
   .header-row-wrapper {
     height: 40px;
     margin-bottom: 10px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
     .header-row-prefix-wrapper {
       padding-left: var(--ant-table-cell-padding-inline);
     }
+
     .row {
       flex: 1;
     }
   }
+
   .row-box {
     margin-bottom: 20px;
     border-radius: var(--ant-table-header-border-radius);
     overflow: hidden;
   }
+
   .expanded-row {
     background-color: var(--color-white-1);
-    padding: 16px 16px;
+    padding: 16px;
     border: 1px solid var(--color-fill-1);
     border-top: 0;
     border-radius: 0 0 var(--ant-table-header-border-radius)
       var(--ant-table-header-border-radius);
   }
+
   .row-wrapper {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--color-fill-1);
+    background-color: var(--color-white-1);
     transition: all 0.2s ease;
+
     &:hover {
       background-color: var(--ant-table-row-hover-bg);
       transition: all 0.2s ease;
     }
+
     &-selected {
       background-color: var(--ant-table-row-selected-bg);
       transition: all 0.2s ease;
+
       &:hover {
         background-color: var(--ant-table-row-selected-hover-bg);
         transition: all 0.2s ease;
       }
     }
+
     .row-prefix-wrapper {
       padding-left: var(--ant-table-cell-padding-inline);
     }
   }
+
   .seal-table-row {
     flex: 1;
   }
+
   .spin {
     text-align: center;
     display: flex;