chore: first login modify password

src/components/seal-table/components/table-row.tsx

@@ -1,3 +1,5 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
 import classNames from 'classnames';
@@ -18,16 +20,23 @@ const TableRow: React.FC<
     rowKey,
     columns,
     pollingChildren,
+    watchChildren,
     onExpand,
     renderChildren,
-    loadChildren
+    loadChildren,
+    loadChildrenAPI
   } = props;
-
+  const { setChunkRequest } = useSetChunkRequest();
   const [expanded, setExpanded] = useState(false);
   const [checked, setChecked] = useState(false);
   const [childrenData, setChildrenData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
+  const chunkRequestRef = useRef<any>(null);
+
+  const { updateChunkedList } = useUpdateChunkedList(childrenData, {
+    setDataList: setChildrenData
+  });
 
   useEffect(() => {
     if (rowSelection) {
@@ -45,6 +54,7 @@ const TableRow: React.FC<
       if (pollTimer.current) {
         clearInterval(pollTimer.current);
       }
+      chunkRequestRef.current?.current?.cancel?.();
     };
   }, []);
 
@@ -71,6 +81,31 @@ const TableRow: React.FC<
     }
   };
 
+  const updateChildrenHandler = (list: any) => {
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+  const createChunkRequest = () => {
+    chunkRequestRef.current?.current?.cancel?.();
+    if (!watchChildren) {
+      return;
+    }
+    const url = loadChildrenAPI?.(record) as string;
+    try {
+      chunkRequestRef.current = setChunkRequest({
+        url,
+        params: {
+          page: 1,
+          perPage: 100
+        },
+        handler: updateChildrenHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+
   const handleRowExpand = async () => {
     setExpanded(!expanded);
     onExpand?.(!expanded, record);
@@ -80,6 +115,7 @@ const TableRow: React.FC<
     }
 
     if (expanded) {
+      chunkRequestRef.current?.current?.cancel?.();
       return;
     }
 
@@ -88,6 +124,9 @@ const TableRow: React.FC<
       pollTimer.current = setInterval(() => {
         handlePolling();
       }, 1000);
+    } else if (watchChildren) {
+      await handleLoadChildren();
+      createChunkRequest();
     } else {
       handleLoadChildren();
     }
@@ -194,4 +233,4 @@ const TableRow: React.FC<
   );
 };
 
-export default TableRow;
+export default React.memo(TableRow);

src/components/seal-table/index.tsx

@@ -15,9 +15,11 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     loading,
     expandable,
     pollingChildren,
+    watchChildren,
     rowSelection,
     renderChildren,
-    loadChildren
+    loadChildren,
+    loadChildrenAPI
   } = props;
 
   const [selectAll, setSelectAll] = useState(false);
@@ -131,8 +133,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               expandable={expandable}
               rowKey={rowKey}
               pollingChildren={pollingChildren}
+              watchChildren={watchChildren}
               renderChildren={renderChildren}
               loadChildren={loadChildren}
+              loadChildrenAPI={loadChildrenAPI}
               onExpand={onExpand}
             ></TableRow>
           );

src/components/seal-table/types.ts

@@ -30,10 +30,12 @@ export interface SealTableProps {
   expandable?: React.ReactNode;
   dataSource: any[];
   pollingChildren?: boolean;
+  watchChildren?: boolean;
   loading?: boolean;
   onExpand?: (expanded: boolean, record: any) => void;
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;
+  loadChildrenAPI?: (record: any) => string;
   rowKey: string;
 }
 

src/components/util-bar/index.less

@@ -0,0 +1,17 @@
+.util-bar-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    font-weight: var(--font-weight-medium);
+    padding: 20px 0;
+  }
+
+  .ant-progress.ant-progress-circle .ant-progress-text {
+    font-size: 24px;
+  }
+}

src/components/util-bar/index.tsx

@@ -0,0 +1,52 @@
+import { Progress } from 'antd';
+import './index.less';
+
+interface UitilBarProps {
+  title?: string;
+  percent: number;
+  steps?: number;
+  gapDegree?: number;
+  strokeWidth?: number;
+  size?: number;
+  trailColor?: string;
+  strokeColor?: string;
+}
+const UitilBar: React.FC<UitilBarProps> = (props) => {
+  const {
+    percent,
+    steps = 10,
+    gapDegree = 170,
+    strokeWidth = 12,
+    title,
+    size = 160,
+    strokeColor,
+    trailColor = 'rgba(221,221,221,.5)'
+  } = props;
+
+  const strokeColorFunc = (percent: number) => {
+    if (percent <= 50) {
+      return 'var(--ant-color-primary)';
+    }
+    if (percent <= 80) {
+      return 'var(--ant-color-warning)';
+    }
+    return 'var(--ant-color-error)';
+  };
+  return (
+    <div className="util-bar-box">
+      {title && <span className="title">{title}</span>}
+      <Progress
+        type="dashboard"
+        steps={steps}
+        gapDegree={gapDegree}
+        strokeWidth={strokeWidth}
+        size={size}
+        percent={percent}
+        trailColor={trailColor}
+        strokeColor={strokeColor || strokeColorFunc(percent)}
+      ></Progress>
+    </div>
+  );
+};
+
+export default UitilBar;