A web add system setting

spug_web/src/menus.js

@@ -19,7 +19,7 @@ export default [
   {
     icon: 'setting', title: '系统管理', child: [
       {title: '账户管理', path: '/system/account'},
-      {title: '系统信息', path: '/system/info'},
+      {title: '系统设置', path: '/system/setting'},
     ]
   },
 ]

spug_web/src/pages/system/routes.js

@@ -1,6 +1,8 @@
 import { makeRoute } from 'libs/router';
-import AccountIndex from './account/index';
+import Account from './account';
+import Setting from './setting';
 
 export default [
-  makeRoute('/account', AccountIndex)
+  makeRoute('/account', Account),
+  makeRoute('/setting', Setting),
 ]

spug_web/src/pages/system/setting/AlarmSetting.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button, Form, Input } from 'antd';
+import styles from './index.module.css';
+
+
+export default function AlarmSetting(props) {
+  return (
+    <React.Fragment>
+      <div className={styles.title}>报警服务设置</div>
+      <Form style={{maxWidth: 320}}>
+        <Form.Item colon={false} label="短信报警调用凭据">
+          <Input placeholder="请输入"/>
+        </Form.Item>
+        <Button type="primary">保存设置</Button>
+      </Form>
+    </React.Fragment>
+  )
+}

spug_web/src/pages/system/setting/BasicSetting.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Form, Input } from 'antd';
+import styles from './index.module.css';
+
+
+export default function BasicSetting(props) {
+  return (
+    <React.Fragment>
+      <div className={styles.title}>基本设置</div>
+      <Form style={{maxWidth: 320}}>
+        <Form.Item colon={false} label="昵称">
+          <Input placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item colon={false} label="邮箱">
+          <Input placeholder="请输入"/>
+        </Form.Item>
+
+        <Button type="primary">保存设置</Button>
+      </Form>
+    </React.Fragment>
+  )
+}

spug_web/src/pages/system/setting/MailServer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, Form, Input } from 'antd';
+import styles from './index.module.css';
+
+
+export default function MailServer(props) {
+  return (
+    <React.Fragment>
+      <div className={styles.title}>邮件服务设置</div>
+      <Form className={styles.form}>
+        <Form.Item colon={false} required label="邮件服务器">
+          <Input placeholder="请输入，例如：smtp.exmail.qq.com"/>
+        </Form.Item>
+        <Form.Item colon={false} required label="端口">
+          <Input placeholder="请输入，例如：465"/>
+        </Form.Item>
+        <Form.Item colon={false} required label="邮件账号">
+          <Input placeholder="请输入，例如：dev@exmail.com"/>
+        </Form.Item>
+        <Form.Item colon={false} required label="账号密码">
+          <Input.Password placeholder="请输入邮箱账号对应的密码" />
+        </Form.Item>
+        <Form.Item colon={false} label="发件人昵称">
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Button type="primary">保存设置</Button>
+      </Form>
+    </React.Fragment>
+  )
+}

spug_web/src/pages/system/setting/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu } from 'antd';
+import BasicSetting from './BasicSetting';
+import AlarmSetting from './AlarmSetting';
+import MailServer from './MailServer';
+import styles from './index.module.css';
+
+
+class Index extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKeys: ['basic']
+    }
+  }
+
+  render() {
+    const {selectedKeys} = this.state;
+    return (
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <Menu
+            mode="inline"
+            selectedKeys={selectedKeys}
+            style={{border: 'none'}}
+            onSelect={({selectedKeys}) => this.setState({selectedKeys})}>
+            <Menu.Item key="basic">基本设置</Menu.Item>
+            <Menu.Item key="alarm">报警服务设置</Menu.Item>
+            <Menu.Item key="mail">邮件服务设置</Menu.Item>
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          {selectedKeys[0] === 'basic' && <BasicSetting />}
+          {selectedKeys[0] === 'mail' && <MailServer />}
+          {selectedKeys[0] === 'alarm' && <AlarmSetting />}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Index

spug_web/src/pages/system/setting/index.module.css

@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    background-color: #fff;
+    padding: 16px 0;
+}
+.left {
+    flex: 2;
+    border-right: 1px solid #e8e8e8;
+}
+.right {
+    flex: 7;
+    padding: 8px 40px;
+}
+
+.title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+}
+
+.form {
+    max-width: 320px;
+}