属性面板。

ShadowEditor.Web/src/editor2/component/BasicComponent.jsx

@@ -1,3 +1,5 @@
+import { PropertyGrid, PropertyGroup, TextProperty } from '../../third_party';
+
 /**
  * 基本信息组件
  * @author tengge / https://github.com/tengge1
@@ -8,7 +10,9 @@ class BasicComponent extends React.Component {
     }
 
     render() {
-        return <div></div>;
+        return <PropertyGroup name={L_BASIC_INFO}>
+            <TextProperty name={'name'} label={L_NAME}></TextProperty>
+        </PropertyGroup>;
     }
 }
 

ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx

@@ -1,5 +1,6 @@
 import './css/PropertyPanel.css';
 import { classNames, PropTypes, PropertyGrid } from '../../third_party';
+import BasicComponent from '../component/BasicComponent.jsx';
 
 /**
  * 属性面板
@@ -8,65 +9,12 @@ import { classNames, PropTypes, PropertyGrid } from '../../third_party';
 class PropertyPanel extends React.Component {
     constructor(props) {
         super(props);
-
-        this.data = [{
-            name: 'General',
-            expand: true,
-            children: [{
-                type: 'text',
-                name: 'name',
-                label: 'Name',
-                value: 'Box',
-            }, {
-                type: 'label',
-                name: 'type',
-                label: 'Type',
-                value: 'Box',
-            }, {
-                type: 'checkbox',
-                name: 'visible',
-                label: 'Visible',
-                value: true,
-            }]
-        }, {
-            name: 'Transform',
-            expand: false,
-            children: [{
-                type: 'number',
-                name: 'translateX',
-                label: 'TranslateX',
-                value: 0,
-            }, {
-                type: 'number',
-                name: 'translateY',
-                label: 'TranslateY',
-                value: 0,
-            }, {
-                type: 'number',
-                name: 'translateZ',
-                label: 'TranslateZ',
-                value: 0,
-            }, {
-                type: 'number',
-                name: 'rotateX',
-                label: 'RotateX',
-                value: 0,
-            }, {
-                type: 'number',
-                name: 'rotateY',
-                label: 'RotateY',
-                value: 0,
-            }, {
-                type: 'number',
-                name: 'rotateZ',
-                label: 'RotateZ',
-                value: 0,
-            }]
-        }];
     }
 
     render() {
-        return <PropertyGrid data={this.data} />;
+        return <PropertyGrid>
+            <BasicComponent></BasicComponent>
+        </PropertyGrid>;
     }
 }
 

ShadowEditor.Web/src/ui/index.js

@@ -54,6 +54,9 @@ export { default as Panel } from './panel/Panel.jsx';
 
 // property
 export { default as PropertyGrid } from './property/PropertyGrid.jsx';
+export { default as PropertyGroup } from './property/PropertyGroup.jsx';
+export { default as DisplayProperty } from './property/DisplayProperty.jsx';
+export { default as TextProperty } from './property/TextProperty.jsx';
 
 // svg
 export { default as SVG } from './svg/SVG.jsx';

ShadowEditor.Web/src/ui/property/DisplayProperty.jsx

@@ -0,0 +1,60 @@
+import './css/DisplayProperty.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 文本属性
+ * @author tengge / https://github.com/tengge1
+ */
+class DisplayProperty extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+
+        };
+    }
+
+    handleCollapse() {
+
+    }
+
+    render() {
+        const { className, style, data } = this.props;
+
+        return <div className={classNames('DisplayProperty', className)} style={style}>
+            {data.map((group, i) => {
+                return <div className={'group'} key={i}>
+                    <div className={'head'}>
+                        <div className={'icon'}>
+                            <i className={group.expand !== false ? 'icon-expand' : 'icon-collapse'} />
+                        </div>
+                        <div className={'title'}>{group.name}</div>
+                    </div>
+                    <div className={classNames('property', group.expand === false ? 'hide' : null)}>
+                        {group.children.map((item, j) => {
+                            return <div className={'item'} key={item.name || j}>
+                                <div className={'label'}>{item.label}</div>
+                                <div className={'value'}>{item.value}</div>
+                            </div>;
+                        })}
+                    </div>
+                </div>;
+            })}
+        </div>;
+    }
+}
+
+DisplayProperty.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    data: PropTypes.array,
+};
+
+DisplayProperty.defaultProps = {
+    className: null,
+    style: null,
+    data: [],
+};
+
+export default DisplayProperty;