!408 添加显示材质和贴图大小

* 添加显示材质和贴图大小

src/Common/Utils.ts

@@ -241,3 +241,16 @@ export function Uint8ArrayToBase64(bytes: Uint8Array)
         binary += String.fromCharCode(bytes[i]);
     return window.btoa(binary);
 }
+
+/**转换服务端获取的文件大小 */
+export function getFileSize(size: number)
+{
+    let units = ["B", "KB", "MB", "GB"];
+    for (let u of units)
+    {
+        if (size > 1 && size < 1024)
+            return FixedNotZero(size, 2) + u;
+        else
+            size /= 1024;
+    }
+}

src/UI/Components/SourceManage/FileList.tsx

@@ -6,7 +6,7 @@ import { CURRENT_HOST } from '../../../Common/HostUrl';
 import { MouseKey } from '../../../Common/KeyEnum';
 import { FileServer } from '../../../DatabaseServices/FileServer';
 import { TopPanelStore } from '../../Store/TopPanelStore';
-import { FixedNotZero } from '../../../Common/Utils';
+import { getFileSize } from '../../../Common/Utils';
 
 export interface IFileListProps
 {
@@ -18,17 +18,6 @@ export interface IFileListProps
     info: { fid: string, name: string };
 }
 
-function getFileSize(size: number)
-{
-    let units = ["B", "KB", "MB", "GB"];
-    for (let u of units)
-    {
-        if (size > 1 && size < 1024)
-            return FixedNotZero(size, 2) + u;
-        else
-            size /= 1024;
-    }
-}
 
 @inject('store')
 @observer

src/UI/Components/SourceManage/ImgList.tsx

@@ -3,6 +3,8 @@ import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { MaterialStore } from '../../Store/MaterialStore';
 import { CURRENT_HOST } from '../../../Common/HostUrl';
+import { getFileSize } from '../../../Common/Utils';
+import { observable } from 'mobx';
 
 export interface IImgListProps
 {
@@ -15,6 +17,7 @@ export interface IImgListProps
 @inject('store')
 @observer
 export class ImgList extends React.Component<IImgListProps, {}> {
+    @observable private isShowSize = false;
     renderEditorPanel(pic)
     {
         return (
@@ -66,6 +69,7 @@ export class ImgList extends React.Component<IImgListProps, {}> {
         const isMatStore = this.props.store instanceof MaterialStore;
 
         return (
+            <>
                 <ul>
                     {
                         this.props.dataList.map(pic =>
@@ -97,6 +101,15 @@ export class ImgList extends React.Component<IImgListProps, {}> {
                                             </div>
                                         }
                                     />
+                                    {
+                                        this.isShowSize &&
+                                        <div style={{
+                                            position: "absolute",
+                                            left: 5,
+                                            bottom: 25,
+                                            background: "#fff"
+                                        }}>{getFileSize(parseFloat(pic.size))}</div>
+                                    }
                                     <p title={pic.name}>{pic.name}</p>
                                     {
                                         !isMatStore && this.renderEditorPanel(pic)
@@ -106,6 +119,13 @@ export class ImgList extends React.Component<IImgListProps, {}> {
                         })
                     }
                 </ul>
+                <Checkbox
+                    checked={this.isShowSize}
+                    style={{ position: "absolute", left: 20, bottom: 50 }}
+                    label="显示文件大小"
+                    onChange={() => this.isShowSize = !this.isShowSize}
+                />
+            </>
         );
     }
 }

src/UI/Components/SourceManage/MaterialList.tsx

@@ -6,6 +6,8 @@ import { appUi } from '../../Layout/ApplicationLayout';
 import { AppToaster } from '../Toaster';
 import { inflate, MaterialIn, MaterialInAndAppendAppData } from '../../../Common/SerializeMaterial';
 import { MaterialUrls, CURRENT_HOST } from '../../../Common/HostUrl';
+import { observable } from 'mobx';
+import { getFileSize } from '../../../Common/Utils';
 
 export interface IImgListProps
 {
@@ -17,6 +19,7 @@ export interface IImgListProps
 
 @observer
 export class MaterialList extends React.Component<IImgListProps, {}> {
+    @observable private isShowSize = false;
     private readyMtl;
     private handleGetMtlJson = async (mat: { material_id: string }): Promise<string | undefined> =>
     {
@@ -71,6 +74,7 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
     public render()
     {
         return (
+            <>
                 <ul
                     className="mat-list"
                 >
@@ -88,6 +92,15 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
                                     >
                                         <img src={`${CURRENT_HOST}/${mtl.logo}`} />
                                     </div>
+                                    {
+                                        this.isShowSize &&
+                                        <div style={{
+                                            position: "absolute",
+                                            left: 5,
+                                            bottom: 25,
+                                            background: "#fff"
+                                        }}>{getFileSize(parseFloat(mtl.size))}</div>
+                                    }
                                     <p title={mtl.name}>{mtl.name}</p>
                                     <Popover
                                         position={Position.RIGHT}
@@ -125,6 +138,13 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
                         })
                     }
                 </ul>
+                <Checkbox
+                    checked={this.isShowSize}
+                    style={{ position: "absolute", left: 20, bottom: 50 }}
+                    label="显示文件大小"
+                    onChange={() => this.isShowSize = !this.isShowSize}
+                />
+            </>
         );
     }
 }