diff --git a/ShadowEditor.Server/Controllers/System/RoleController.cs b/ShadowEditor.Server/Controllers/System/RoleController.cs
index ffa85a98..8d44743f 100644
--- a/ShadowEditor.Server/Controllers/System/RoleController.cs
+++ b/ShadowEditor.Server/Controllers/System/RoleController.cs
@@ -63,6 +63,67 @@ namespace ShadowEditor.Server.Controllers.System
             });
         }
 
+        /// <summary>
+        /// 添加
+        /// </summary>
+        /// <param name="model"></param>
+        /// <returns></returns>
+        [HttpPost]
+        public JsonResult Add(RoleEditModel model)
+        {
+            if (string.IsNullOrEmpty(model.Name))
+            {
+                return Json(new
+                {
+                    Code = 300,
+                    Msg = "Name is not allowed to be empty."
+                });
+            }
+
+            if (model.Name.StartsWith("_"))
+            {
+                return Json(new
+                {
+                    Code = 300,
+                    Msg = "Name is not allowed to start with _."
+                });
+            }
+
+            var mongo = new MongoHelper();
+
+            var filter = Builders<BsonDocument>.Filter.Eq("Name", model.Name);
+
+            var count = mongo.Count(Constant.RoleCollectionName, filter);
+
+            if (count > 0)
+            {
+                return Json(new
+                {
+                    Code = 300,
+                    Msg = "The name is already existed.",
+                });
+            }
+
+            var now = DateTime.Now;
+
+            var doc = new BsonDocument
+            {
+                ["ID"] = ObjectId.GenerateNewId(),
+                ["Name"] = model.Name,
+                ["CreateTime"] = now,
+                ["UpdateTime"] = now,
+                ["Status"] = 0,
+            };
+
+            mongo.InsertOne(Constant.RoleCollectionName, doc);
+
+            return Json(new
+            {
+                Code = 200,
+                Msg = "Saved successfully!"
+            });
+        }
+
         /// <summary>
         /// 编辑
         /// </summary>
diff --git a/ShadowEditor.Web/locales/zh-CN.json b/ShadowEditor.Web/locales/zh-CN.json
index 779485a2..fff34ea3 100644
--- a/ShadowEditor.Web/locales/zh-CN.json
+++ b/ShadowEditor.Web/locales/zh-CN.json
@@ -741,5 +741,6 @@
     "Department Management": "组织机构管理",
     "User Management": "用户管理",
     "Role Management": "角色管理",
-    "Authority Management": "权限管理"
+    "Authority Management": "权限管理",
+    "The name is already existed.": "该名称已经存在。"
 }
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/Application.js b/ShadowEditor.Web/src/Application.js
index 4654e149..63cf96ae 100644
--- a/ShadowEditor.Web/src/Application.js
+++ b/ShadowEditor.Web/src/Application.js
@@ -103,7 +103,7 @@ Application.prototype.toast = function (content) {
 
     setTimeout(() => {
         this.removeElement(component);
-    }, 5000);
+    }, 3000);
 };
 
 /**
diff --git a/ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx b/ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx
index ac846dbe..b81aa3f6 100644
--- a/ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx
+++ b/ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx
@@ -10,11 +10,22 @@ class RoleManageWindow extends React.Component {
     constructor(props) {
         super(props);
 
+        this.state = {
+            data: [],
+            pageSize: 20,
+            pageNum: 1,
+            total: 0,
+        };
+
+        this.update = this.update.bind(this);
         this.handleAdd = this.handleAdd.bind(this);
+        this.handleEdit = this.handleEdit.bind(this);
         this.handleClose = this.handleClose.bind(this);
     }
 
     render() {
+        const { data } = this.state;
+
         return <Window
             className={'RoleManageWindow'}
             title={_t('Role Management')}
@@ -25,7 +36,7 @@ class RoleManageWindow extends React.Component {
                 <Toolbar>
                     <Button onClick={this.handleAdd}>{_t('Create')}</Button>
                 </Toolbar>
-                <DataGrid url={`${app.options.server}/api/Role/List`}>
+                <DataGrid data={data}>
                     <Columns>
                         <Column type={'number'} title={'#'}></Column>
                         <Column field={'Name'} title={_t('Name')}></Column>
@@ -35,7 +46,29 @@ class RoleManageWindow extends React.Component {
         </Window>;
     }
 
+    componentDidMount() {
+        this.update();
+    }
+
+    update() {
+        fetch(`${app.options.server}/api/Role/List`).then(response => {
+            response.json().then(json => {
+                this.setState({
+                    total: json.Data.total,
+                    data: json.Data.rows,
+                });
+            });
+        });
+    }
+
     handleAdd() {
+        const win = app.createElement(EditRoleWindow, {
+            callback: this.update,
+        });
+        app.addElement(win);
+    }
+
+    handleEdit() {
         const win = app.createElement(EditRoleWindow);
         app.addElement(win);
     }
diff --git a/ShadowEditor.Web/src/editor/menu/window/role/EditRoleWindow.jsx b/ShadowEditor.Web/src/editor/menu/window/role/EditRoleWindow.jsx
index e4a33f7c..bf086244 100644
--- a/ShadowEditor.Web/src/editor/menu/window/role/EditRoleWindow.jsx
+++ b/ShadowEditor.Web/src/editor/menu/window/role/EditRoleWindow.jsx
@@ -9,8 +9,8 @@ class EditRoleWindow extends React.Component {
         super(props);
 
         this.state = {
-            username: '',
-            password: '',
+            id: props.id,
+            name: props.name,
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -19,7 +19,7 @@ class EditRoleWindow extends React.Component {
     }
 
     render() {
-        const { username, password } = this.state;
+        const { name } = this.state;
 
         return <Window
             className={_t('EditRoleWindow')}
@@ -30,12 +30,8 @@ class EditRoleWindow extends React.Component {
             <Content>
                 <Form>
                     <FormControl>
-                        <Label>{_t('Username')}</Label>
-                        <Input name={'username'} value={username} onChange={this.handleChange}></Input>
-                    </FormControl>
-                    <FormControl>
-                        <Label>{_t('Password')}</Label>
-                        <Input name={'password'} value={password} onChange={this.handleChange}></Input>
+                        <Label>{_t('Name')}</Label>
+                        <Input name={'name'} value={name} onChange={this.handleChange}></Input>
                     </FormControl>
                 </Form>
             </Content>
@@ -46,15 +42,38 @@ class EditRoleWindow extends React.Component {
         </Window>;
     }
 
-    handleChange(name, value) {
+    handleChange(value, name) {
         this.setState({
             [name]: value,
         });
     }
 
-    handleSave() {
-        this.handleClose();
-        app.toast(_t('Login successfully!'));
+    handleSave(callback) {
+        const { id, name } = this.state;
+
+        if (!name || name.trim() === '') {
+            app.toast(_t('Name is not allowed to be empty.'));
+            return;
+        }
+
+        const url = !id ? `/api/Role/Add` : `/api/Role/Edit`;
+
+        fetch(`${app.options.server}${url}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: `ID=${id}&Name=${name}`,
+        }).then(response => {
+            response.json().then(json => {
+                if (json.Code !== 200) {
+                    app.toast(_t(json.Msg));
+                    return;
+                }
+                this.handleClose();
+                callback && callback();
+            });
+        });
     }
 
     handleClose() {
@@ -62,4 +81,16 @@ class EditRoleWindow extends React.Component {
     }
 }
 
+EditRoleWindow.propTypes = {
+    id: PropTypes.string,
+    name: PropTypes.string,
+    callback: PropTypes.func,
+};
+
+EditRoleWindow.defaultProps = {
+    id: '',
+    name: '',
+    callback: null,
+};
+
 export default EditRoleWindow;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/ui/table/DataGrid.jsx b/ShadowEditor.Web/src/ui/table/DataGrid.jsx
index 30d8db4f..b84c5abe 100644
--- a/ShadowEditor.Web/src/ui/table/DataGrid.jsx
+++ b/ShadowEditor.Web/src/ui/table/DataGrid.jsx
@@ -12,19 +12,11 @@ class DataGrid extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            pageSize: 20,
-            pageNum: 1,
-            total: 0,
-            rows: [],
-        };
-
         this.handleClick = this.handleClick.bind(this, props.onSelect);
     }
 
     render() {
-        const { className, style, children, data, selected } = this.props;
-        const { pageSize, pageNum, total, rows } = this.state;
+        const { className, style, children, data, pageSize, pageNum, total, selected } = this.props;
 
         const columns = children.props.children.map(n => {
             return {
@@ -44,7 +36,7 @@ class DataGrid extends React.Component {
         </thead>;
 
         const body = <tbody>
-            {[].concat(data, rows).map((n, i) => {
+            {data.map((n, i) => {
                 return <tr className={selected === n.id ? 'selected' : null} data-id={n.id} key={n.id} onClick={this.handleClick}>
                     {columns.map((m, j) => {
                         if (m.type === 'number') {
@@ -65,26 +57,6 @@ class DataGrid extends React.Component {
         </div>;
     }
 
-    componentDidMount() {
-        this.update();
-    }
-
-    update() {
-        const url = this.props.url;
-        if (!url) {
-            return;
-        }
-
-        fetch(url).then(response => {
-            response.json().then(json => {
-                this.setState({
-                    total: json.Data.total,
-                    rows: json.Data.rows,
-                });
-            });
-        });
-    }
-
     handleClick(onSelect, event) {
         const id = event.currentTarget.getAttribute('data-id');
 
@@ -103,8 +75,11 @@ DataGrid.propTypes = {
             return new TypeError(`Invalid prop \`${propName}\` of type \`${children.type.name}\` supplied to \`${componentName}\`, expected \`Columns\`.`);
         }
     },
+    pages: PropTypes.bool,
     data: PropTypes.array,
-    url: PropTypes.string,
+    pageSize: PropTypes.number,
+    pageNum: PropTypes.number,
+    total: PropTypes.number,
     selected: PropTypes.string,
     onSelect: PropTypes.func,
 };
@@ -113,8 +88,11 @@ DataGrid.defaultProps = {
     className: null,
     style: null,
     children: null,
+    pages: false,
     data: [],
-    url: null,
+    pageSize: 20,
+    pageNum: 1,
+    total: 0,
     selected: null,
     onSelect: null,
 };