refactor: credential table columns

src/components/drop-down-buttons/index.tsx

@@ -4,6 +4,7 @@ import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
 import './index.less';
 
 type Trigger = 'click' | 'hover';
@@ -19,6 +20,17 @@ interface DropdownButtonsProps {
   onSelect: (val: any, item?: any) => void;
 }
 
+const DropdownWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ant-color-bg-elevated);
+  padding: 5px;
+  align-items: flex-start;
+  border-radius: var(--border-radius-base);
+  box-shadow: var(--ant-box-shadow-secondary);
+  min-width: 160px;
+`;
+
 const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   items,
   size = 'middle',
@@ -66,16 +78,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
           type="primary"
           dropdownRender={(menus: any) => {
             return (
-              <div
-                className="flex flex-column "
-                style={{
-                  backgroundColor: 'var(--ant-color-bg-elevated)',
-                  padding: 5,
-                  alignItems: 'flex-start',
-                  borderRadius: 'var(--border-radius-base)',
-                  boxShadow: 'var(--ant-box-shadow-secondary)'
-                }}
-              >
+              <DropdownWrapper>
                 {_.map(_.tail(items), (item: any) => {
                   return (
                     <Button
@@ -86,13 +89,17 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
                       key={item.key}
                       disabled={item.disabled}
                       onClick={() => handleMenuClick(item)}
-                      style={{ width: '100%', justifyContent: 'flex-start' }}
+                      style={{
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        paddingInline: 10
+                      }}
                     >
                       {intl.formatMessage({ id: item.label })}
                     </Button>
                   );
                 })}
-              </div>
+              </DropdownWrapper>
             );
           }}
           buttonsRender={([leftButton, rightButton]) => [

src/components/echarts/line-chart.tsx

@@ -1,10 +1,13 @@
 import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
+import { genColors } from '@/utils';
 import _ from 'lodash';
 import React, { memo, useMemo } from 'react';
+import echarts from '.';
 import { ChartProps } from './types';
 
+const LinearGradient = echarts.graphic.LinearGradient;
 const LineChart: React.FC<ChartProps> = (props) => {
   const {
     seriesData,
@@ -81,6 +84,11 @@ const LineChart: React.FC<ChartProps> = (props) => {
 
   const dataOptions = useMemo((): any => {
     const data = _.map(seriesData, (item: any) => {
+      const colors = genColors({
+        color: item.color,
+        alpha1: 0.5,
+        alpha2: 0.1
+      });
       return {
         ...item,
         ...lineItemConfig,
@@ -93,6 +101,18 @@ const LineChart: React.FC<ChartProps> = (props) => {
           ...lineItemConfig.lineStyle,
           color: item.color
         }
+        // areaStyle: {
+        //   color: new LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: colors[0]
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: colors[1]
+        //     }
+        //   ])
+        // }
       };
     });
     return {

src/components/echarts/mix-line-bar.tsx

@@ -1,10 +1,14 @@
 import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
+import { genColors } from '@/utils';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
+import echarts from '.';
 import { ChartProps } from './types';
 
+const LinearGradient = echarts.graphic.LinearGradient;
+
 const MixLineBarChart: React.FC<
   ChartProps & {
     chartData: {
@@ -78,6 +82,11 @@ const MixLineBarChart: React.FC<
 
   const dataOptions = useMemo((): any => {
     const linedata = _.map(lineSeriesData, (item: any) => {
+      const colors = genColors({
+        color: item.color,
+        alpha1: 0.5,
+        alpha2: 0.1
+      });
       return {
         ...item,
         ...lineItemConfig,
@@ -91,6 +100,18 @@ const MixLineBarChart: React.FC<
           ...lineItemConfig.lineStyle,
           color: item.color
         }
+        // areaStyle: {
+        //   color: new LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: colors[0]
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: colors[1]
+        //     }
+        //   ])
+        // }
       };
     });
 

src/components/scroller-modal/index.tsx

@@ -45,6 +45,7 @@ const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
   return (
     <Modal
       {...props}
+      destroyOnClose={true}
       styles={{
         content: {
           padding: 0