chore: display instance resource claim

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_y6wf3nguxjl.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_d7ffxju7lc6.js'
 });
 
 export default IconFont;

src/components/image-editor/index.tsx

@@ -915,48 +915,42 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
             </Tooltip>
           </div>
           <div className="tools">
-            {maskUpload?.length ? (
-              <span className="flex-center upload-mask">
-                <span className="font-size-12">
-                  {intl.formatMessage({ id: 'playground.image.mask.uploaded' })}
-                </span>
-              </span>
-            ) : (
+            {imageStatus.isOriginal && (
               <>
-                {imageStatus.isOriginal && (
-                  <>
-                    <Tooltip
-                      title={intl.formatMessage({
+                <Tooltip
+                  title={
+                    <span style={{ whiteSpace: 'pre-wrap' }}>
+                      {intl.formatMessage({
                         id: 'playground.image.negativeMask.tips'
                       })}
-                    >
-                      <Checkbox
-                        onChange={handleOnChangeMask}
-                        className="flex-center"
-                        checked={invertMask}
-                        disabled={isDisabled || !!maskUpload?.length}
-                      >
-                        <span className="font-size-12">
-                          {intl.formatMessage({
-                            id: 'playground.image.negativeMask'
-                          })}
-                        </span>
-                      </Checkbox>
-                    </Tooltip>
-                    <Tooltip
-                      title={intl.formatMessage({
-                        id: 'playground.image.saveMask'
+                    </span>
+                  }
+                >
+                  <Checkbox
+                    onChange={handleOnChangeMask}
+                    className="flex-center"
+                    checked={invertMask}
+                    disabled={isDisabled || !!maskUpload?.length}
+                  >
+                    <span className="font-size-12">
+                      {intl.formatMessage({
+                        id: 'playground.image.negativeMask'
                       })}
-                    >
-                      <Button onClick={downloadMask} size="middle" type="text">
-                        <IconFont
-                          className="font-size-14"
-                          type="icon-save2"
-                        ></IconFont>
-                      </Button>
-                    </Tooltip>
-                  </>
-                )}
+                    </span>
+                  </Checkbox>
+                </Tooltip>
+                <Tooltip
+                  title={intl.formatMessage({
+                    id: 'playground.image.saveMask'
+                  })}
+                >
+                  <Button onClick={downloadMask} size="middle" type="text">
+                    <IconFont
+                      className="font-size-14"
+                      type="icon-save2"
+                    ></IconFont>
+                  </Button>
+                </Tooltip>
               </>
             )}
             {!imageStatus.isOriginal && (

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