chore: display instance resource claim

src/components/simple-table/index.tsx

@@ -1,6 +1,6 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import classNames from 'classnames';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import TableHeader from './header';
 import './index.less';
@@ -21,8 +21,14 @@ interface SimpleTableProps {
 }
 const SimpleTabel: React.FC<SimpleTableProps> = (props) => {
   const { columns, dataSource, rowKey, bordered = true } = props;
+  const scroller = React.useRef<any>(null);
+  const { initialize } = useOverlayScroller();
+
+  React.useEffect(() => {
+    initialize(scroller.current);
+  }, [initialize]);
   return (
-    <SimpleBar style={{ maxHeight: 200 }}>
+    <div style={{ maxHeight: 200 }} ref={scroller}>
       <table
         className={classNames('simple-table', {
           'simple-table-bordered': bordered
@@ -43,7 +49,7 @@ const SimpleTabel: React.FC<SimpleTableProps> = (props) => {
           })}
         </tbody>
       </table>
-    </SimpleBar>
+    </div>
   );
 };
 

src/components/simple-table/info-column.tsx

@@ -1,26 +1,39 @@
 import React from 'react';
 
-import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Divider } from 'antd';
 
 interface InfoColumnProps {
-  fieldList: { label: string; key: string }[];
+  fieldList: {
+    label: string;
+    key: string;
+    locale?: boolean;
+    render?: (val: any, data: any) => any;
+  }[];
+  style?: React.CSSProperties;
   data: Record<string, any>;
 }
 const InfoColumn: React.FC<InfoColumnProps> = (props) => {
-  const { data, fieldList } = props;
+  const { data, fieldList, style } = props;
 
   const intl = useIntl();
 
   return (
-    <span className="flex">
+    <span className="flex" style={style}>
       {fieldList.map((item, index) => {
         return (
           <>
             <span className="flex-column flex-center">
-              <span> {intl.formatMessage({ id: item.label })}</span>
-              <span> {convertFileSize(data[item.key], 0)}</span>
+              <span>
+                {' '}
+                {item.locale
+                  ? intl.formatMessage({ id: item.label })
+                  : item.label}
+              </span>
+              <span style={{ color: 'var(--color-white-quaternary)' }}>
+                {' '}
+                {item.render?.(data[item.key], data) ?? data[item.key]}
+              </span>
             </span>
             {index < fieldList.length - 1 ? (
               <Divider