From 27d629e4e42a97e1e670509ec4b9bd23d89704e2 Mon Sep 17 00:00:00 2001
From: ZoeLeeFZ <lizhou1021@qq.com>
Date: Tue, 16 Jul 2019 14:39:57 +0800
Subject: [PATCH] =?UTF-8?q?!408=20=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=9D=90=E8=B4=A8=E5=92=8C=E8=B4=B4=E5=9B=BE=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=20*=20=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA=E6=9D=90=E8=B4=A8?=
 =?UTF-8?q?=E5=92=8C=E8=B4=B4=E5=9B=BE=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Common/Utils.ts                           |  13 ++
 src/UI/Components/SourceManage/FileList.tsx   |  13 +-
 src/UI/Components/SourceManage/ImgList.tsx    |  94 ++++++++------
 .../Components/SourceManage/MaterialList.tsx  | 122 ++++++++++--------
 4 files changed, 142 insertions(+), 100 deletions(-)

diff --git a/src/Common/Utils.ts b/src/Common/Utils.ts
index 3b8ff2435..0ec050916 100644
--- a/src/Common/Utils.ts
+++ b/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;
+    }
+}
diff --git a/src/UI/Components/SourceManage/FileList.tsx b/src/UI/Components/SourceManage/FileList.tsx
index 2ec8e5c41..6c730e042 100644
--- a/src/UI/Components/SourceManage/FileList.tsx
+++ b/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
diff --git a/src/UI/Components/SourceManage/ImgList.tsx b/src/UI/Components/SourceManage/ImgList.tsx
index b1541baa7..355ca3ac4 100644
--- a/src/UI/Components/SourceManage/ImgList.tsx
+++ b/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,46 +69,63 @@ export class ImgList extends React.Component<IImgListProps, {}> {
         const isMatStore = this.props.store instanceof MaterialStore;
 
         return (
-            <ul>
-                {
-                    this.props.dataList.map(pic =>
+            <>
+                <ul>
                     {
-                        return (
-                            <li
-                                className={Classes.CARD}
-                                key={pic.image_id}
-                                onDoubleClick={() => this.handleApplyPic(pic)}
-                            >
-                                <Popover
-                                    className="look-img"
-                                    interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
-                                    hoverOpenDelay={1000}
-                                    usePortal={false}
-                                    content={
-                                        <div
-                                            style={{
-                                                width: 500,
-                                                height: 500,
-                                            }}
-                                        >
-                                            <img src={`${CURRENT_HOST}/${pic.path}`} alt="" />
-                                        </div>
+                        this.props.dataList.map(pic =>
+                        {
+                            return (
+                                <li
+                                    className={Classes.CARD}
+                                    key={pic.image_id}
+                                    onDoubleClick={() => this.handleApplyPic(pic)}
+                                >
+                                    <Popover
+                                        className="look-img"
+                                        interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
+                                        hoverOpenDelay={1000}
+                                        usePortal={false}
+                                        content={
+                                            <div
+                                                style={{
+                                                    width: 500,
+                                                    height: 500,
+                                                }}
+                                            >
+                                                <img src={`${CURRENT_HOST}/${pic.path}`} alt="" />
+                                            </div>
+                                        }
+                                        target={
+                                            <div className={isMatStore && "apply-img-hint"}>
+                                                <img src={`${CURRENT_HOST}/${pic.thumbs ? pic.thumbs['100'].path : pic.path}`} alt="" />
+                                            </div>
+                                        }
+                                    />
+                                    {
+                                        this.isShowSize &&
+                                        <div style={{
+                                            position: "absolute",
+                                            left: 5,
+                                            bottom: 25,
+                                            background: "#fff"
+                                        }}>{getFileSize(parseFloat(pic.size))}</div>
                                     }
-                                    target={
-                                        <div className={isMatStore && "apply-img-hint"}>
-                                            <img src={`${CURRENT_HOST}/${pic.thumbs ? pic.thumbs['100'].path : pic.path}`} alt="" />
-                                        </div>
+                                    <p title={pic.name}>{pic.name}</p>
+                                    {
+                                        !isMatStore && this.renderEditorPanel(pic)
                                     }
-                                />
-                                <p title={pic.name}>{pic.name}</p>
-                                {
-                                    !isMatStore && this.renderEditorPanel(pic)
-                                }
-                            </li>
-                        )
-                    })
-                }
-            </ul>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+                <Checkbox
+                    checked={this.isShowSize}
+                    style={{ position: "absolute", left: 20, bottom: 50 }}
+                    label="显示文件大小"
+                    onChange={() => this.isShowSize = !this.isShowSize}
+                />
+            </>
         );
     }
 }
diff --git a/src/UI/Components/SourceManage/MaterialList.tsx b/src/UI/Components/SourceManage/MaterialList.tsx
index 478f08b87..3575173d3 100644
--- a/src/UI/Components/SourceManage/MaterialList.tsx
+++ b/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,60 +74,77 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
     public render()
     {
         return (
-            <ul
-                className="mat-list"
-            >
-                {
-                    this.props.dataList.map(mtl =>
+            <>
+                <ul
+                    className="mat-list"
+                >
                     {
-                        return (
-                            <li
-                                key={mtl.image_id}
-                                onDragStart={() => this.handleDragStart(mtl)}
-                            >
-                                <div
-                                    className="look-mat hint editor-lint"
-                                    onDoubleClick={() => this.handleDbClick(mtl)}
+                        this.props.dataList.map(mtl =>
+                        {
+                            return (
+                                <li
+                                    key={mtl.image_id}
+                                    onDragStart={() => this.handleDragStart(mtl)}
                                 >
-                                    <img src={`${CURRENT_HOST}/${mtl.logo}`} />
-                                </div>
-                                <p title={mtl.name}>{mtl.name}</p>
-                                <Popover
-                                    position={Position.RIGHT}
-                                    content={
-                                        <Card>
-                                            <p>确认删除材质</p>
-                                            <div>
-                                                <Button style={{ marginRight: 10 }}
-                                                    className={Classes.POPOVER_DISMISS}
-                                                    text="取消" />
-                                                <Button
-                                                    className={Classes.POPOVER_DISMISS}
-                                                    intent={Intent.PRIMARY}
-                                                    onClick={() => this.props.deleteFun(mtl)}
-                                                    text="确定" />
-                                            </div>
-                                        </Card>
-                                    }
-                                    target={<Button
-                                        icon="cross"
-                                        minimal
-                                    />}
-                                />
-                                <Checkbox
-                                    className={mtl.isChecked && "selected"}
-                                    inline={true}
-                                    checked={mtl.isChecked}
-                                    onChange={e =>
+                                    <div
+                                        className="look-mat hint editor-lint"
+                                        onDoubleClick={() => this.handleDbClick(mtl)}
+                                    >
+                                        <img src={`${CURRENT_HOST}/${mtl.logo}`} />
+                                    </div>
                                     {
-                                        this.props.select(e, mtl);
-                                    }}
-                                />
-                            </li>
-                        )
-                    })
-                }
-            </ul>
+                                        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}
+                                        content={
+                                            <Card>
+                                                <p>确认删除材质</p>
+                                                <div>
+                                                    <Button style={{ marginRight: 10 }}
+                                                        className={Classes.POPOVER_DISMISS}
+                                                        text="取消" />
+                                                    <Button
+                                                        className={Classes.POPOVER_DISMISS}
+                                                        intent={Intent.PRIMARY}
+                                                        onClick={() => this.props.deleteFun(mtl)}
+                                                        text="确定" />
+                                                </div>
+                                            </Card>
+                                        }
+                                        target={<Button
+                                            icon="cross"
+                                            minimal
+                                        />}
+                                    />
+                                    <Checkbox
+                                        className={mtl.isChecked && "selected"}
+                                        inline={true}
+                                        checked={mtl.isChecked}
+                                        onChange={e =>
+                                        {
+                                            this.props.select(e, mtl);
+                                        }}
+                                    />
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+                <Checkbox
+                    checked={this.isShowSize}
+                    style={{ position: "absolute", left: 20, bottom: 50 }}
+                    label="显示文件大小"
+                    onChange={() => this.isShowSize = !this.isShowSize}
+                />
+            </>
         );
     }
 }