Hotfix/update task measurement page style

shell/app/charts/theme.js

@@ -474,22 +474,24 @@ export const theme = {
     },
   },
   tooltip: {
-    backgroundColor: '#ffffff',
-    borderColor: 'rgba(0, 0, 0, .1)',
-    borderWidth: 1,
+    trigger: 'axis',
+    backgroundColor: 'rgba(48,38,71,0.96)',
+    borderWidth: 0,
+    padding: [8, 16],
     textStyle: {
-      color: 'rgba(0, 0, 0, .6)',
+      color: '#fff',
     },
     axisPointer: {
-      lineStyle: {
-        color: '#cccccc',
-        width: 1,
+      type: 'line',
+      label: {
+        show: false,
       },
-      crossStyle: {
-        color: '#cccccc',
-        width: 1,
+      lineStyle: {
+        type: 'dashed',
+        color: 'rgba(48,38,71,0.40)',
       },
     },
+    borderColor: 'rgba(0, 0, 0, .1)',
   },
   timeline: {
     lineStyle: {

shell/app/common/components/erda-alert/index.tsx

@@ -24,9 +24,6 @@ interface IProps {
   type?: AlertProps['type'];
 }
 
-// TODO: clear old storage data, remove this after 21-12-10
-localStorage.removeItem('erda-bp-list');
-
 const ErdaAlert = ({ type = 'info', message, showOnceKey, className }: IProps) => {
   const alertList = JSON.parse(localStorage.getItem('erda-alert-list') || '{}');
   const [isHidden, setIsHidden] = React.useState(showOnceKey ? alertList[showOnceKey] : false);

shell/app/config-page/components/container/container.spec.d.ts

@@ -41,6 +41,8 @@ declare namespace CP_CONTAINER {
     props: {
       className: string;
       onClick?: () => void;
+      leftProportion?: number;
+      rightProportion?: number;
     };
   };
 }

shell/app/config-page/components/container/container.tsx

@@ -69,16 +69,16 @@ export const RowContainer = (props: CP_CONTAINER.Props) => {
 
 export const LRContainer = (props: CP_CONTAINER.Props) => {
   const { left, right, props: configProps, ...rest } = props;
-  const { contentSetting = '' } = configProps || {};
+  const { contentSetting = '', leftProportion = 1, rightProportion } = configProps || {};
   const leftCls = classnames({
     left: true,
-    'flex-1': contentSetting !== 'start',
+    [`flex-${leftProportion}`]: contentSetting !== 'start',
   });
 
   return (
     <Container {...rest} props={{ ...(props.props || {}), direction: 'row' }}>
       <div className={leftCls}>{left}</div>
-      <div className="right">{right}</div>
+      <div className={`right ${rightProportion ? `flex-${rightProportion}` : ''}`}>{right}</div>
     </Container>
   );
 };

shell/app/config-page/components/simple-chart/simple-chart.tsx

@@ -45,14 +45,16 @@ const getOption = (chart: CP_SIMPLE_CHART.IData['chart']) => {
         </div>`;
       },
       textStyle: {
-        fontSize: 12,
         color: '#fff',
       },
       axisPointer: {
         type: 'line',
         label: {
           show: false,
-          color: '#fff',
+        },
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(48,38,71,0.40)',
         },
       },
     },
@@ -63,9 +65,11 @@ const getOption = (chart: CP_SIMPLE_CHART.IData['chart']) => {
         type: 'line',
         smooth: false,
         lineStyle: {
-          color: newColorMap.warning4,
           width: 3,
         },
+        itemStyle: {
+          color: newColorMap.warning4,
+        },
         showSymbol: false,
         areaStyle: {
           opacity: 0.5,

shell/app/config-page/components/text-block-group/text-block-group.scss

@@ -15,6 +15,6 @@
   background: $color-default-02;
 
   .erda-text-block-info {
-    width: 120px;
+    min-width: 100px;
   }
 }

shell/app/config-page/components/text-block-group/text-block-group.tsx

@@ -18,17 +18,24 @@ import './text-block-group.scss';
 
 const TextBlockGroup = (props: CP_TEXT_BLOCK_GROUP.Props) => {
   const { props: configProps, data } = props;
+  const firstRowNum = data.data[0]?.length;
 
   return (
     <div className={`cp-text-block-group flex flex-col overflow-y-auto p-4 ${getClass(configProps)}`}>
       {data.data.map((rows, rowKey: number) => {
         const isFirstRow = rowKey === 0;
         return (
-          <div key={rowKey} className={`cp-text-block-group-row flex items-center ${isFirstRow ? '' : 'mt-4'}`}>
+          <div
+            key={rowKey}
+            className={`cp-text-block-group-row flex items-center justify-between ${isFirstRow ? '' : 'mt-4'}`}
+          >
             {rows.map((item, idx: number) => {
               const isFirstItem = idx === 0;
               return <TextBlockInfo key={`${rowKey}-${idx}`} className={isFirstItem ? '' : 'ml-2'} {...item} />;
             })}
+            {new Array(firstRowNum - rows.length).fill(1).map((idx: number) => (
+              <div className="erda-text-block-info" key={idx} />
+            ))}
           </div>
         );
       })}

shell/app/modules/project/pages/issue/task-summary.tsx

@@ -52,6 +52,8 @@ const TaskSummary = () => {
           container: {
             props: {
               className: 'm-4',
+              leftProportion: 3,
+              rightProportion: 7,
             },
           },
           simpleChart: {