用户、角色、权限管理窗口。

ShadowEditor.Web/locales/zh-CN.json

@@ -741,5 +741,5 @@
     "Department Management": "组织机构管理",
     "User Management": "用户管理",
     "Role Management": "角色管理",
-    "Authority management": "权限管理"
+    "Authority Management": "权限管理"
 }

ShadowEditor.Web/src/editor/menu/SystemMenu.jsx

@@ -1,4 +1,7 @@
 import { classNames, PropTypes, MenuBar, MenuItem, MenuItemSeparator } from '../../third_party';
+import UserManagementWindow from './window/UserManagementWindow.jsx';
+import RoleManageWindow from './window/RoleManageWindow.jsx';
+import AuthorityManagementWindow from './window/AuthorityManagementWindow.jsx';
 
 /**
  * 系统菜单
@@ -8,7 +11,6 @@ class SystemMenu extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleDepartment = this.handleDepartment.bind(this);
         this.handleUser = this.handleUser.bind(this);
         this.handleRole = this.handleRole.bind(this);
         this.handleAuthority = this.handleAuthority.bind(this);
@@ -18,24 +20,23 @@ class SystemMenu extends React.Component {
         return <MenuItem title={_t('System')}>
             <MenuItem title={_t('User Management')} onClick={this.handleUser}></MenuItem>
             <MenuItem title={_t('Role Management')} onClick={this.handleRole}></MenuItem>
-            <MenuItem title={_t('Authority management')} onClick={this.handleAuthority}></MenuItem>
+            <MenuItem title={_t('Authority Management')} onClick={this.handleAuthority}></MenuItem>
         </MenuItem>;
     }
 
-    handleDepartment() {
-
-    }
-
     handleUser() {
-
+        const win = app.createElement(UserManagementWindow);
+        app.addElement(win);
     }
 
     handleRole() {
-
+        const win = app.createElement(RoleManageWindow);
+        app.addElement(win);
     }
 
     handleAuthority() {
-
+        const win = app.createElement(AuthorityManagementWindow);
+        app.addElement(win);
     }
 }
 

ShadowEditor.Web/src/editor/menu/window/AuthorityManagementWindow.jsx

@@ -0,0 +1,67 @@
+import './css/AuthorityManagementWindow.css';
+import { PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Button } from '../../../third_party';
+import Ajax from '../../../utils/Ajax';
+
+/**
+ * 权限管理窗口
+ * @author tengge / https://github.com/tengge1
+ */
+class AuthorityManagementWindow extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            username: '',
+            password: '',
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSave = this.handleSave.bind(this, props.callback);
+        this.handleClose = this.handleClose.bind(this);
+    }
+
+    render() {
+        const { username, password } = this.state;
+
+        return <Window
+            className={_t('AuthorityManagementWindow')}
+            title={_t('Authority Management')}
+            style={{ width: '320px', height: '200px' }}
+            mask={false}
+            onClose={this.handleClose}>
+            <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>
+                    </FormControl>
+                </Form>
+            </Content>
+            <Buttons>
+                <Button onClick={this.handleSave}>{_t('OK')}</Button>
+                <Button onClick={this.handleClose}>{_t('Cancel')}</Button>
+            </Buttons>
+        </Window>;
+    }
+
+    handleChange(name, value) {
+        this.setState({
+            [name]: value,
+        });
+    }
+
+    handleSave() {
+        this.handleClose();
+        app.toast(_t('Login successfully!'));
+    }
+
+    handleClose() {
+        app.removeElement(this);
+    }
+}
+
+export default AuthorityManagementWindow;

ShadowEditor.Web/src/editor/menu/window/RoleManageWindow.jsx

@@ -24,8 +24,8 @@ class RoleManageWindow extends React.Component {
         const { username, password } = this.state;
 
         return <Window
-            className={_t('Login')}
-            title={_t('Login')}
+            className={_t('RoleManageWindow')}
+            title={_t('Role Management')}
             style={{ width: '320px', height: '200px' }}
             mask={false}
             onClose={this.handleClose}>

ShadowEditor.Web/src/editor/menu/window/UserManagementWindow.jsx

@@ -0,0 +1,67 @@
+import './css/UserManagementWindow.css';
+import { PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Button } from '../../../third_party';
+import Ajax from '../../../utils/Ajax';
+
+/**
+ * 用户管理窗口
+ * @author tengge / https://github.com/tengge1
+ */
+class UserManagementWindow extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            username: '',
+            password: '',
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSave = this.handleSave.bind(this, props.callback);
+        this.handleClose = this.handleClose.bind(this);
+    }
+
+    render() {
+        const { username, password } = this.state;
+
+        return <Window
+            className={_t('UserManagementWindow')}
+            title={_t('User Management')}
+            style={{ width: '320px', height: '200px' }}
+            mask={false}
+            onClose={this.handleClose}>
+            <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>
+                    </FormControl>
+                </Form>
+            </Content>
+            <Buttons>
+                <Button onClick={this.handleSave}>{_t('OK')}</Button>
+                <Button onClick={this.handleClose}>{_t('Cancel')}</Button>
+            </Buttons>
+        </Window>;
+    }
+
+    handleChange(name, value) {
+        this.setState({
+            [name]: value,
+        });
+    }
+
+    handleSave() {
+        this.handleClose();
+        app.toast(_t('Login successfully!'));
+    }
+
+    handleClose() {
+        app.removeElement(this);
+    }
+}
+
+export default UserManagementWindow;