新增登录窗口。

README.md

@@ -30,6 +30,7 @@ Supported Languages: 中文 / [繁體中文](README-tw.md) / [English](README-en
 19. 暂时隐藏挖坑工具。
 20. Three.js信息查看窗口。
 21. 贴图面板可选择上传图片、天空盒、视频，新增添加天空盒窗口。
+22. 新增登录窗口。
 
 ## v0.3.2更新
 

ShadowEditor.Web/locales/zh-CN.json

@@ -732,5 +732,9 @@
     "Version": "版本",
     "Upload Image": "上传图片",
     "Upload Sky Box": "上传天空盒",
-    "Upload Video": "上传视频"
+    "Upload Video": "上传视频",
+    "Login": "登录",
+    "Login successfully!": "登录成功",
+    "Username": "用户名",
+    "Password": "密码"
 }

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

@@ -11,6 +11,7 @@ import ToolMenu from './ToolMenu.jsx';
 import OptionsMenu from './OptionsMenu.jsx';
 import HelpMenu from './HelpMenu.jsx';
 // import EditorTabMenu from './EditorTabMenu.jsx';
+import LoginMenu from './LoginMenu.jsx';
 
 /**
  * 编辑器菜单栏
@@ -35,6 +36,7 @@ class EditorMenuBar extends React.Component {
             <MenuItemSeparator direction={'horizontal'} />
             {/* <EditorTabMenu /> */}
             <MenuBarFiller />
+            <LoginMenu />
         </MenuBar>;
     }
 }

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

@@ -0,0 +1,25 @@
+import { classNames, PropTypes, MenuBar, MenuItem } from '../../third_party';
+import LoginWindow from './window/LoginWindow.jsx';
+
+/**
+ * 状态菜单
+ * @author tengge / https://github.com/tengge1
+ */
+class LoginMenu extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    render() {
+        return <MenuItem title={_t(`Login`)} onClick={this.handleClick}></MenuItem>;
+    }
+
+    handleClick() {
+        const win = app.createElement(LoginWindow);
+        app.addElement(win);
+    }
+}
+
+export default LoginMenu;

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

@@ -0,0 +1,67 @@
+import './css/LoginWindow.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 LoginWindow 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('Login')}
+            title={_t('Login')}
+            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 LoginWindow;