Tree.jsx

ShadowEditor.UI/src/editor/ESideBar.jsx

@@ -2,13 +2,13 @@ import './css/ESideBar.css';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
-// layout
 import TabLayout from '../layout/TabLayout.jsx';
 import VBoxLayout from '../layout/VBoxLayout.jsx';
 
-// panel
 import Panel from '../panel/Panel.jsx';
 
+import HierarchyPanel from './sidebar/HierarchyPanel.jsx';
+
 /**
  * 侧边栏
  * @author tengge / https://github.com/tengge1
@@ -21,7 +21,7 @@ class ESideBar extends React.Component {
 
         return <VBoxLayout className={classNames('ESideBar', className)} style={style}>
             <TabLayout className={'top'}>
-                <Panel title={'Hierarchy'} header={false}></Panel>
+                <HierarchyPanel title={'Hierarchy'} />
                 <Panel title={'History'} header={false}></Panel>
             </TabLayout>
             <TabLayout className={'bottom'}>

ShadowEditor.UI/src/editor/sidebar/HierarchyPanel.jsx

@@ -0,0 +1,71 @@
+import './css/HierarchyPanel.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+import Panel from '../../panel/Panel.jsx';
+import Tree from '../../tree/Tree.jsx';
+
+/**
+ * 场景树状图
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {Object} style 样式
+ */
+class HierarchyPanel extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.data = [{
+            value: '1',
+            text: '程序员',
+            children: [{
+                value: '11',
+                text: '前端',
+                children: [{
+                    value: '111',
+                    text: 'HTML',
+                }, {
+                    value: '112',
+                    text: 'CSS',
+                }, {
+                    value: '113',
+                    text: 'JS'
+                }]
+            }, {
+                value: '12',
+                text: '后端',
+                children: [{
+                    value: '121',
+                    text: 'Java',
+                }, {
+                    value: '122',
+                    text: 'C#',
+                }]
+            }]
+        }, {
+            value: '2',
+            text: '测试',
+            children: [{
+                value: '21',
+                text: '黑盒测试'
+            }, {
+                value: '22',
+                text: '白盒测试'
+            }]
+        }];
+    }
+
+    render() {
+        const { className, style } = this.props;
+
+        return <Tree data={this.data}>
+        </Tree>;
+    }
+}
+
+HierarchyPanel.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+export default HierarchyPanel;

ShadowEditor.UI/src/form/css/IconButton.css

@@ -12,7 +12,7 @@
 }
 
 .IconButton:hover {
-    background: linear-gradient(to bottom, rgba(193, 222, 255, 0.2), rgba(193, 222, 255, 0.4));
+    background: linear-gradient(to bottom, rgba(193, 222, 255, 0.8), rgba(193, 222, 255, 0.98));
     border: 1px solid rgb(183, 212, 246);
 }
 

ShadowEditor.UI/src/tree/Tree.jsx

@@ -5,16 +5,37 @@ import PropTypes from 'prop-types';
 /**
  * 树
  * @author tengge / https://github.com/tengge1
+ * @property {Array} data 数据
  * @property {String} className 样式类
  * @property {Object} style 样式
  */
 class Tree extends React.Component {
-    render() {
-        const { className, style } = this.props;
+    constructor(props) {
+        super(props);
+    }
 
-        return <div className={classNames('Tree', className)} style={style}>
-            树
-        </div>;
+    render() {
+        const { data, className, style } = this.props;
+
+        var list = [];
+
+        Array.isArray(data) && data.forEach(n => {
+            list.push(this.createNode(n));
+        });
+
+        return <ul>{list}</ul>;
+    }
+
+    createNode(data) {
+        const leaf = !data.children || data.children.length === 0;
+        const children = leaf ? null : (<ul>{data.children.map(n => {
+            return this.createNode(n);
+        })}</ul>);
+
+        return <li value={data.value} key={data.value}>
+            <a href={'javascript:;'}>{data.text}</a>
+            {leaf ? null : <ul>{children}</ul>}
+        </li>;
     }
 }