From c8a003d2b8a8eecd2a86b2de518eed97133d7754 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Sat, 29 Jun 2019 20:52:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=BA=E6=99=AF=E5=88=97=E8=A1=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ShadowEditor.UI/src/icon/Icon.jsx             |  4 +--
 ShadowEditor.UI/src/image/ImageList.jsx       | 22 ++++++++++----
 ShadowEditor.UI/src/image/css/ImageList.css   | 30 +++++++++++++++++++
 .../src/editor2/assets/ScenePanel.jsx         | 20 +++++++++----
 .../src/editor2/assets/css/ScenePanel.css     |  5 ++++
 5 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 ShadowEditor.Web/src/editor2/assets/css/ScenePanel.css

diff --git a/ShadowEditor.UI/src/icon/Icon.jsx b/ShadowEditor.UI/src/icon/Icon.jsx
index 7e115da4..e8de1ce8 100644
--- a/ShadowEditor.UI/src/icon/Icon.jsx
+++ b/ShadowEditor.UI/src/icon/Icon.jsx
@@ -10,12 +10,12 @@ class Icon extends React.Component {
     render() {
         const { className, style, icon, ...others } = this.props;
 
-        return <div
+        return <i
             className={classNames('Icon', 'iconfont',
                 icon && 'icon-' + icon,
                 className)}
             style={style}
-            {...others}></div>;
+            {...others}></i>;
     }
 }
 
diff --git a/ShadowEditor.UI/src/image/ImageList.jsx b/ShadowEditor.UI/src/image/ImageList.jsx
index 39a8fe92..b90716b5 100644
--- a/ShadowEditor.UI/src/image/ImageList.jsx
+++ b/ShadowEditor.UI/src/image/ImageList.jsx
@@ -2,29 +2,41 @@ import './css/ImageList.css';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
+import Icon from '../icon/Icon.jsx';
+
 /**
  * 图片列表
  * @author tengge / https://github.com/tengge1
  */
 class ImageList extends React.Component {
     render() {
-        const { className, style, ...others } = this.props;
+        const { className, style, data } = this.props;
 
-        return <img
-            className={classNames('ImageList', className)}
-            style={style}
-            {...others}></img>;
+        return <div className={'ImageList'}>
+            {data.map(n => {
+                return <div className={'item'} key={n.ID}>
+                    {n.Thumbnail ?
+                        <img className={'img'} src={n.Thumbnail}></img> :
+                        <div className={'no-img'}>
+                            <Icon icon={'scenes'}></Icon>
+                        </div>}
+                    <div className={'title'}>{n.Name}</div>
+                </div>;
+            })}
+        </div>;
     }
 }
 
 ImageList.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
+    data: PropTypes.array,
 };
 
 ImageList.defaultProps = {
     className: null,
     style: null,
+    data: [],
 };
 
 export default ImageList;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/image/css/ImageList.css b/ShadowEditor.UI/src/image/css/ImageList.css
index e69de29b..f8849067 100644
--- a/ShadowEditor.UI/src/image/css/ImageList.css
+++ b/ShadowEditor.UI/src/image/css/ImageList.css
@@ -0,0 +1,30 @@
+.ImageList {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 30px);
+    overflow-y: auto;
+}
+
+.ImageList>.item {
+    width: calc(50% - 4px);
+    margin: 2px;
+    display: inline-block;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+}
+
+.ImageList>.item>.img {
+    width: 100%;
+}
+
+.ImageList>.item>.no-img {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ImageList>.item>.title {
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor2/assets/ScenePanel.jsx b/ShadowEditor.Web/src/editor2/assets/ScenePanel.jsx
index 970bb7be..014f2c88 100644
--- a/ShadowEditor.Web/src/editor2/assets/ScenePanel.jsx
+++ b/ShadowEditor.Web/src/editor2/assets/ScenePanel.jsx
@@ -1,6 +1,7 @@
+import './css/ScenePanel.css';
+
 import { classNames, PropTypes, SearchField, ImageList } from '../../third_party';
 import Ajax from '../../utils/Ajax';
-import EditWindow from '../window/EditWindow';
 import Converter from '../../serialization/Converter';
 import GISScene from '../../gis/Scene';
 
@@ -11,20 +12,29 @@ import GISScene from '../../gis/Scene';
 class ScenePanel extends React.Component {
     constructor(props) {
         super(props);
+
+        this.state = {
+            data: [],
+        };
     }
 
     render() {
+        const { data } = this.state;
+
         return <div className={'ScenePanel'}>
             <SearchField></SearchField>
-            <ImageList></ImageList>
+            <ImageList data={data}></ImageList>
         </div>;
     }
 
     componentDidMount() {
         Ajax.getJson(`/api/Scene/List`, obj => {
-            this.data = obj.Data;
-            search.setValue('');
-            this.onSearch();
+            this.setState({
+                data: obj.Data,
+            });
+            // this.data = obj.Data;
+            // search.setValue('');
+            // this.onSearch();
         });
     }
 }
diff --git a/ShadowEditor.Web/src/editor2/assets/css/ScenePanel.css b/ShadowEditor.Web/src/editor2/assets/css/ScenePanel.css
new file mode 100644
index 00000000..a122ecb1
--- /dev/null
+++ b/ShadowEditor.Web/src/editor2/assets/css/ScenePanel.css
@@ -0,0 +1,5 @@
+.ScenePanel {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file