场景列表。

ShadowEditor.Web/locales/zh-CN.json

@@ -640,5 +640,6 @@
     "Quadratic Bezier Curve": "二次贝塞尔曲线",
     "Scene data of string type is needed.": "需要字符串类型的场景数据参数！",
     "Cannot deserialize scene data.": "无法解析场景数据！",
-    "Total {{totalPage}} Pages": "共{{totalPage}}页"
+    "Total {{totalPage}} Pages": "共{{totalPage}}页",
+    "Create": "添加"
 }

ShadowEditor.Web/src/editor/assets/window/CategoryWindow.jsx

@@ -1,5 +1,5 @@
 import './css/CategoryWindow.css';
-import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, ImageUploader, Button, DataGrid, Columns, Column } from '../../../third_party';
+import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, ImageUploader, Button, DataGrid, Columns, Column, VBoxLayout, Toolbar } from '../../../third_party';
 import Ajax from '../../../utils/Ajax';
 
 /**
@@ -15,6 +15,9 @@ class CategoryWindow extends React.Component {
         };
 
         this.updateUI = this.updateUI.bind(this);
+        this.handleAdd = this.handleAdd.bind(this);
+        this.handleEdit = this.handleEdit.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
         this.handleSelect = this.handleSelect.bind(this);
         this.handleClose = this.handleClose.bind(this);
     }
@@ -26,16 +29,23 @@ class CategoryWindow extends React.Component {
         return <Window
             className={'CategoryWindow'}
             title={`${typeName} ${_t('Category Edit')}`}
-            style={{ width: '320px', height: '300px', }}
-            mask={true}
+            style={{ width: '280px', height: '400px', }}
+            mask={false}
             onClose={this.handleClose}>
             <Content>
-                <DataGrid data={data} onSelect={this.handleSelect}>
-                    <Columns>
-                        <Column field={'ID'} title={'ID'}></Column>
-                        <Column field={'Name'} title={'名称'}></Column>
-                    </Columns>
-                </DataGrid>
+                <VBoxLayout className={'box'}>
+                    <Toolbar className={'toolbar'}>
+                        <Button onClick={this.handleAdd}>{_t('Create')}</Button>
+                        <Button onClick={this.handleEdit}>{_t('Edit')}</Button>
+                        <Button onClick={this.handleDelete}>{_t('Delete')}</Button>
+                    </Toolbar>
+                    <DataGrid className={'list'} data={data} onSelect={this.handleSelect}>
+                        <Columns>
+                            <Column type={'number'} title={_t('#')}></Column>
+                            <Column field={'Name'} title={_t('Name')}></Column>
+                        </Columns>
+                    </DataGrid>
+                </VBoxLayout>
             </Content>
             <Buttons>
                 <Button onClick={this.handleClose}>{_t('Close')}</Button>
@@ -50,11 +60,29 @@ class CategoryWindow extends React.Component {
     updateUI() {
         Ajax.getJson(`${app.options.server}/api/Category/List?Type=${this.props.type}`, json => {
             this.setState({
-                data: json.Data,
+                data: json.Data.map(n => {
+                    return {
+                        id: n.ID,
+                        ID: n.ID,
+                        Name: n.Name,
+                    };
+                }),
             });
         });
     }
 
+    handleAdd() {
+
+    }
+
+    handleEdit() {
+
+    }
+
+    handleDelete() {
+
+    }
+
     handleSelect(obj) {
         debugger
     }

ShadowEditor.Web/src/editor/assets/window/EditWindow.jsx

@@ -37,7 +37,7 @@ class EditWindow extends React.Component {
             className={'EditWindow'}
             title={`${_t('Edit')} ${typeName}`}
             style={{ width: '320px', height: '300px', }}
-            mask={true}
+            mask={false}
             onClose={this.handleClose}>
             <Content>
                 <Form>

ShadowEditor.Web/src/editor/assets/window/css/CategoryWindow.css

@@ -0,0 +1,27 @@
+.Window.CategoryWindow>.wrap>.content {
+    left: 0;
+    right: 0;
+    top: 24px;
+    bottom: 0;
+}
+
+.Window.CategoryWindow>.wrap>.content>.box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.Window.CategoryWindow>.wrap>.content>.box>.toolbar {
+    padding: 2px 0;
+    box-sizing: border-box;
+}
+
+.Window.CategoryWindow>.wrap>.content>.box>.toolbar>.Button {
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+}
+
+.Window.CategoryWindow>.wrap>.content>.box>.list {
+    width: 100%;
+}

ShadowEditor.Web/src/ui/table/DataGrid.jsx

@@ -12,11 +12,6 @@ class DataGrid extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            data: props.data,
-            selected: null,
-        };
-
         this.handleClick = this.handleClick.bind(this, props.onSelect);
     }
 
@@ -24,19 +19,15 @@ class DataGrid extends React.Component {
         const id = event.currentTarget.getAttribute('data-id');
         const record = this.state.data.filter(n => n.id === id)[0];
 
-        this.setState({
-            selected: id,
-        });
-
         onSelect && onSelect(record);
     }
 
     render() {
-        const { className, style, children } = this.props;
-        const { data, selected } = this.state;
+        const { className, style, children, data, selected } = this.props;
 
         const columns = children.props.children.map(n => {
             return {
+                type: n.props.type,
                 field: n.props.field,
                 title: n.props.title,
             };
@@ -45,7 +36,8 @@ class DataGrid extends React.Component {
         const header = <thead>
             <tr>
                 {columns.map(n => {
-                    return <td name={n.field} key={n.field}>{n.title}</td>;
+                    let field = n.type === 'number' ? 'number' : n.field;
+                    return <td name={n.field} key={field}>{n.title}</td>;
                 })}
             </tr>
         </thead>;
@@ -53,8 +45,12 @@ class DataGrid extends React.Component {
         const body = <tbody>
             {data.map(n => {
                 return <tr className={selected === n.id ? 'selected' : null} data-id={n.id} key={n.id} onClick={this.handleClick}>
-                    {columns.map(m => {
-                        return <td key={m.field}>{n[m.field]}</td>;
+                    {columns.map((m, j) => {
+                        if (m.type === 'number') {
+                            return <td key={'number'}>{j + 1}</td>;
+                        } else {
+                            return <td key={m.field}>{n[m.field]}</td>;
+                        }
                     })}
                 </tr>;
             })}
@@ -77,6 +73,7 @@ DataGrid.propTypes = {
         }
     },
     data: PropTypes.array,
+    selected: PropTypes.string,
     onSelect: PropTypes.func,
 };
 
@@ -85,6 +82,7 @@ DataGrid.defaultProps = {
     style: null,
     children: null,
     data: [],
+    selected: null,
     onSelect: null,
 };