fix: Add Task Executor to system panel #2061 (#2070)

### What problem does this PR solve?

fix: Add Task Executor to system panel #2061

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/setting-system/task-bar-chat.tsx

@@ -0,0 +1,91 @@
+import { TaskExecutorElapsed } from '@/interfaces/database/user-setting';
+import { Divider, Flex } from 'antd';
+import { max } from 'lodash';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts';
+
+import styles from './index.less';
+
+interface IProps {
+  data: TaskExecutorElapsed;
+}
+
+const getColor = (value: number) => {
+  if (value > 120) {
+    return 'red';
+  } else if (value <= 120 && value > 50) {
+    return '#faad14';
+  }
+  return '#52c41a';
+};
+
+const getMaxLength = (data: TaskExecutorElapsed) => {
+  const lengths = Object.keys(data).reduce<number[]>((pre, cur) => {
+    pre.push(data[cur].length);
+    return pre;
+  }, []);
+  return max(lengths) ?? 0;
+};
+
+const fillEmptyElementByMaxLength = (list: any[], maxLength: number) => {
+  if (list.length === maxLength) {
+    return list;
+  }
+  return list.concat(
+    new Array(maxLength - list.length).fill({
+      value: 0,
+      actualValue: 0,
+      fill: getColor(0),
+    }),
+  );
+};
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="custom-tooltip">
+        <p
+          className={styles.taskBarTooltip}
+        >{`${payload[0].payload.actualValue}`}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const TaskBarChat = ({ data }: IProps) => {
+  const maxLength = getMaxLength(data);
+  return (
+    <Flex gap="middle" vertical>
+      {Object.keys(data).map((key) => {
+        const list = data[key].map((x) => ({
+          value: x > 120 ? 120 : x,
+          actualValue: x,
+          fill: getColor(x),
+        }));
+        const nextList = fillEmptyElementByMaxLength(list, maxLength);
+        return (
+          <Flex key={key} className={styles.taskBar} vertical>
+            <b className={styles.taskBarTitle}>ID: {key}</b>
+            <ResponsiveContainer>
+              <BarChart data={nextList} barSize={20}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <Tooltip content={<CustomTooltip></CustomTooltip>} />
+                <Bar dataKey="value" />
+              </BarChart>
+            </ResponsiveContainer>
+            <Divider></Divider>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default TaskBarChat;