场景列表。

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>;
     }
 }
 

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;

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;
+}

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();
         });
     }
 }

ShadowEditor.Web/src/editor2/assets/css/ScenePanel.css

@@ -0,0 +1,5 @@
+.ScenePanel {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}