A 系统设置-关于页面

spug_api/apps/setting/urls.py

@@ -6,6 +6,7 @@ from django.conf.urls import url
 from .views import *
 
 urlpatterns = [
+    url(r'^$', SettingView.as_view()),
     url(r'^ldap_test/$', ldap_test),
-    url('', SettingView.as_view()),
+    url(r'^about/$', get_about)
 ]

spug_api/apps/setting/views.py

@@ -1,10 +1,13 @@
 # Copyright: (c) OpenSpug Organization. https://github.com/openspug/spug
 # Copyright: (c) <spug.dev@gmail.com>
 # Released under the MIT License.
+import django
 from django.views.generic import View
+from django.conf import settings
 from libs import JsonParser, Argument, json_response
 from apps.setting.utils import AppSetting
 from apps.setting.models import Setting
+import platform
 import ldap
 
 
@@ -41,5 +44,13 @@ def ldap_test(request):
     return json_response(error=error)
 
 
+def get_about(request):
+    return json_response({
+        'python_version': platform.python_version(),
+        'system_version': platform.platform(),
+        'spug_version': settings.SPUG_VERSION,
+        'django_version': django.get_version()
+    })
+
 
 

spug_api/spug/settings.py

@@ -121,6 +121,8 @@ AUTHENTICATION_EXCLUDES = (
     re.compile('/apis/.*'),
 )
 
+SPUG_VERSION = 'v2.2.0'
+
 # override default config
 try:
     from spug.overrides import *

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

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the MIT License.
+ */
+import React from 'react';
+import styles from './index.module.css';
+import { Descriptions, Spin } from "antd";
+import { observer } from 'mobx-react'
+import { http } from 'libs';
+
+
+@observer
+class About extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fetching: true,
+      info: {}
+    }
+  }
+
+  componentDidMount() {
+    http.get('/api/setting/about/')
+      .then(res => this.setState({info: res}))
+      .finally(() => this.setState({fetching: false}))
+  }
+
+
+  render() {
+    const {info, fetching} = this.state;
+    return (
+      <Spin spinning={fetching}>
+        <div className={styles.title}>关于</div>
+        <Descriptions column={1}>
+          <Descriptions.Item label="操作系统">{info['system_version']}</Descriptions.Item>
+          <Descriptions.Item label="Python版本">{info['python_version']}</Descriptions.Item>
+          <Descriptions.Item label="Django版本">{info['django_version']}</Descriptions.Item>
+          <Descriptions.Item label="Spug版本">{info['spug_version']}</Descriptions.Item>
+          <Descriptions.Item label="官网文档">
+            <a href="https://spug.dev" target="_blank">https://spug.dev</a>
+          </Descriptions.Item>
+        </Descriptions>
+      </Spin>
+    )
+  }
+}
+
+export default About

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

@@ -54,38 +54,38 @@ class LDAPSetting extends React.Component {
     return (
       <React.Fragment>
         <div className={styles.title}>LDAP设置</div>
-        <Form style={{maxWidth: 400}}>
+        <Form style={{maxWidth: 400}} labelCol={{span: 8}} wrapperCol={{span: 16}}>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="LDAP服务地址">
+          <Form.Item required label="LDAP服务地址">
             {getFieldDecorator('server', {initialValue: this.setting['server'],
               rules: [{required: true, message: '请输入LDAP服务地址'}]})(
               <Input placeholder="请输入LDAP服务地址"/>
             )}
           </Form.Item>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="LDAP服务端口">
+          <Form.Item required label="LDAP服务端口">
             {getFieldDecorator('port', {initialValue: this.setting['port'],
               rules: [{required: true, message: '请输入LDAP服务端口'}]})(
               <Input placeholder="例如：389"/>
             )}
           </Form.Item>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="管理员DN">
+          <Form.Item required label="管理员DN">
             {getFieldDecorator('admin_dn', {initialValue: this.setting['admin_dn'],
               rules: [{required: true, message: '请输入LDAP管理员DN'}]})(
               <Input placeholder="例如：cn=admin,dc=spug,dc=dev"/>
             )}
           </Form.Item>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="管理员密码">
+          <Form.Item required label="管理员密码">
             {getFieldDecorator('password', {initialValue: this.setting['password'],
               rules: [{required: true, message: '请输入LDAP管理员密码'}]})(
               <Input.Password placeholder="请输入LDAP管理员密码"/>
             )}
           </Form.Item>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="LDAP搜索规则">
+          <Form.Item required label="LDAP搜索规则">
             {getFieldDecorator('rules', {initialValue: this.setting['rules'],
               rules: [{required: true, message: '请输入LDAP搜索规则'}]})(
               <Input placeholder="例如：cn"/>
             )}
           </Form.Item>
-          <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="基本DN">
+          <Form.Item required label="基本DN">
             {getFieldDecorator('base_dn', {initialValue: this.setting['base_dn'],
               rules: [{required: true, message: '请输入LDAP基本DN'}]})(
               <Input placeholder="例如：dc=spug,dc=dev"/>

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

@@ -10,6 +10,7 @@ import BasicSetting from './BasicSetting';
 import AlarmSetting from './AlarmSetting';
 import LDAPSetting from './LDAPSetting';
 import OpenService from './OpenService';
+import About from './About';
 import styles from './index.module.css';
 import store from './store';
 
@@ -40,6 +41,7 @@ class Index extends React.Component {
             <Menu.Item key="ldap">LDAP设置</Menu.Item>
             <Menu.Item key="alarm">报警服务设置</Menu.Item>
             <Menu.Item key="service">开放服务设置</Menu.Item>
+            <Menu.Item key="about">关于</Menu.Item>
           </Menu>
         </div>
         <div className={styles.right}>
@@ -47,6 +49,7 @@ class Index extends React.Component {
           {selectedKeys[0] === 'ldap' && <LDAPSetting />}
           {selectedKeys[0] === 'alarm' && <AlarmSetting />}
           {selectedKeys[0] === 'service' && <OpenService />}
+          {selectedKeys[0] === 'about' && <About />}
         </div>
       </AuthDiv>
     )