style migrate v3

spug_web/src/pages/config/app/Table.js

@@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { Action, TableCard, AuthButton } from 'components';
-import { http, hasPermission } from 'libs';
+import { http, hasPermission, history } from 'libs';
 import store from './store';
 
 @observer
@@ -31,6 +31,11 @@ class ComTable extends React.Component {
     })
   };
 
+  toConfig = (info) => {
+    store.record = info;
+    history.push(`/config/setting/app/${info.id}`)
+  }
+
   render() {
     let data = store.records;
     if (store.f_name) {
@@ -67,7 +72,7 @@ class ComTable extends React.Component {
               <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
               <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
               <Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
-              <Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
+              <Action.Button auth="config.app.view_config" onClick={() => this.toConfig(info)}>配置</Action.Button>
             </Action>
           )}/>
         )}

spug_web/src/pages/config/routes.js

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
- * Copyright (c) <spug.dev@gmail.com>
- * Released under the AGPL-3.0 License.
- */
-import { makeRoute } from 'libs/router';
-import Environment from './environment';
-import Service from './service';
-import App from './app';
-import Setting from './setting';
-
-
-export default [
-  makeRoute('/environment', Environment),
-  makeRoute('/service', Service),
-  makeRoute('/app', App),
-  makeRoute('/setting/:type/:id', Setting),
-]

spug_web/src/pages/config/service/Table.js

@@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { Action, TableCard, AuthButton } from 'components';
-import { http, hasPermission } from 'libs';
+import { http, hasPermission, history } from 'libs';
 import store from './store';
 
 @observer
@@ -31,6 +31,11 @@ class ComTable extends React.Component {
     })
   };
 
+  toConfig = (info) => {
+    store.record = info;
+    history.push(`/config/setting/src/${info.id}`)
+  }
+
   render() {
     return (
       <TableCard
@@ -62,7 +67,7 @@ class ComTable extends React.Component {
             <Action>
               <Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
               <Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-              <Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
+              <Action.Button auth="config.src.view_config" onClick={() => this.toConfig(info)}>配置</Action.Button>
             </Action>
           )}/>
         )}

spug_web/src/pages/config/setting/DiffConfig.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Table, Row, Col, Checkbox, Form, Button, Alert } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { Modal, Form, Table, Row, Col, Checkbox, Button, Alert } from 'antd';
 import http from 'libs/http';
 import envStore from '../environment/store';
 import styles from './index.module.css';
@@ -67,7 +68,8 @@ class Record extends React.Component {
         <div style={{display: page === 0 ? 'block' : 'none'}}>
           <Alert style={{width: 500, margin: '10px auto 20px', color: '#31708f !important'}} type="info"
                  message="Tips: 通过对比配置功能，可以查看多个环境间的配置差异"/>
-          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 1}} label="要对比的环境">
+          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 1}} label="要对比的环境"
+                     style={{lineHeight: '40px'}}>
             {envStore.records.map((item, index) => (
               <Row
                 key={item.id}
@@ -85,13 +87,13 @@ class Record extends React.Component {
           </Form.Item>
         </div>
         <div style={{display: page === 1 ? 'block' : 'none'}}>
-          <Button type="link" icon="arrow-left" style={{marginRight: 20}}
+          <Button type="link" icon={<ArrowLeftOutlined/>} style={{marginRight: 20}}
                   onClick={() => this.setState({page: page - 1})}>上一步</Button>
           <Checkbox checked={hideSame} onChange={() => this.setState({hideSame: !hideSame})}>隐藏相同配置</Checkbox>
           <Table pagination={false} dataSource={records} loading={loading} columns={this.getColumns()}/>
         </div>
       </Modal>
-    )
+    );
   }
 }
 

spug_web/src/pages/config/setting/Form.js

@@ -3,114 +3,97 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState } from 'react';
-import {observer} from 'mobx-react';
+import { observer } from 'mobx-react';
-import {Modal, Form, Input, Checkbox, Switch, Row, Col, message} from 'antd';
+import { Modal, Form, Input, Checkbox, Switch, Row, Col, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 import envStore from '../environment/store'
 import styles from './index.module.css';
+import lds from 'lodash';
 
-@observer
+export default observer(function () {
-class ComForm extends React.Component {
+  const isModify = store.record.id !== undefined;
-  constructor(props) {
+  const [form] = Form.useForm();
-    super(props);
+  const [loading, setLoading] = useState(false);
-    this.isModify = store.record.id !== undefined;
+  const [envs, setEnvs] = useState(isModify ? [store.env.id] : []);
-    this.state = {
-      loading: false,
-      envs: this.isModify ? [store.env.id] : []
-    }
-  }
 
-  handleSubmit = () => {
+  function handleSubmit() {
-    this.setState({loading: true});
+    setLoading(true);
-    const formData = this.props.form.getFieldsValue();
+    const formData = form.getFieldsValue();
     formData['is_public'] = store.type === 'src' ? false : formData['is_public'];
     let request;
-    if (this.isModify) {
+    if (isModify) {
       formData['id'] = store.record.id;
       request = http.patch('/api/config/', formData)
     } else {
       formData['type'] = store.type;
       formData['o_id'] = store.id;
-      formData['envs'] = this.state.envs;
+      formData['envs'] = envs;
       request = http.post('/api/config/', formData)
     }
     request.then(res => {
       message.success('操作成功');
       store.formVisible = false;
       store.fetchRecords()
-    }, () => this.setState({loading: false}))
+    }, () => setLoading(false))
-  };
-
-  handleEnvCheck = (id) => {
-    if (!this.isModify) {
-      const index = this.state.envs.indexOf(id);
-      if (index !== -1) {
-        this.state.envs.splice(index, 1);
-      } else {
-        this.state.envs.push(id);
-      }
-      this.setState({envs: this.state.envs})
-    }
-  };
-
-  render() {
-    const info = store.record;
-    const {envs} = this.state;
-    const {getFieldDecorator} = this.props.form;
-    return (
-      <Modal
-        visible
-        width={800}
-        maskClosable={false}
-        title={store.record.id ? '更新配置' : '新增配置'}
-        onCancel={() => store.formVisible = false}
-        confirmLoading={this.state.loading}
-        onOk={this.handleSubmit}>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-          <Form.Item required label="Key">
-            {getFieldDecorator('key', {initialValue: info['key']})(
-              <Input disabled={this.isModify} placeholder="请输入"/>
-            )}
-          </Form.Item>
-          <Form.Item label="Value">
-            {getFieldDecorator('value', {initialValue: info['value']})(
-              <Input.TextArea placeholder="请输入"/>
-            )}
-          </Form.Item>
-          <Form.Item label="备注">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入备注信息"/>
-            )}
-          </Form.Item>
-          {store.type === 'app' && (
-            <Form.Item label="类型">
-              {getFieldDecorator('is_public', {
-                initialValue: info['is_public'] === undefined || info['is_public'],
-                valuePropName: 'checked'
-              })(
-                <Switch checkedChildren="公共" unCheckedChildren="私有"/>
-              )}
-            </Form.Item>
-          )}
-          <Form.Item label="选择环境">
-            {envStore.records.map((item, index) => (
-              <Row
-                key={item.id}
-                onClick={() => this.handleEnvCheck(item.id)}
-                style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
-                <Col span={2}><Checkbox disabled={this.isModify} checked={envs.includes(item.id)}/></Col>
-                <Col span={4} className={styles.ellipsis}>{item.key}</Col>
-                <Col span={9} className={styles.ellipsis}>{item.name}</Col>
-                <Col span={9} className={styles.ellipsis}>{item.desc}</Col>
-              </Row>
-            ))}
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
   }
-}
 
-export default Form.create()(ComForm)
+  function handleEnvCheck(id) {
+    if (!isModify) {
+      const tmp = lds.clone(envs);
+      const index = tmp.indexOf(id);
+      if (index !== -1) {
+        tmp.splice(index, 1)
+      } else {
+        tmp.push(id)
+      }
+      setEnvs(tmp)
+    }
+  }
+
+  return (
+    <Modal
+      visible
+      width={800}
+      maskClosable={false}
+      title={store.record.id ? '更新配置' : '新增配置'}
+      onCancel={() => store.formVisible = false}
+      confirmLoading={loading}
+      onOk={handleSubmit}>
+      <Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
+        <Form.Item required name="key" label="Key">
+          <Input disabled={isModify} placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item name="value" label="Value">
+          <Input.TextArea placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item name="desc" label="备注">
+          <Input.TextArea placeholder="请输入备注信息"/>
+        </Form.Item>
+        {store.type === 'app' && (
+          <Form.Item
+            label="类型"
+            name="is_public"
+            valuePropName="checked"
+            initialValue={store.record.is_public === undefined || store.record.is_public}>
+            <Switch checkedChildren="公共" unCheckedChildren="私有"/>
+          </Form.Item>
+        )}
+        <Form.Item label="选择环境" style={{lineHeight: '40px'}}>
+          {envStore.records.map((item, index) => (
+            <Row
+              key={item.id}
+              onClick={() => handleEnvCheck(item.id)}
+              style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
+              <Col span={2}><Checkbox disabled={isModify} checked={envs.includes(item.id)}/></Col>
+              <Col span={4} className={styles.ellipsis}>{item.key}</Col>
+              <Col span={9} className={styles.ellipsis}>{item.name}</Col>
+              <Col span={9} className={styles.ellipsis}>{item.desc}</Col>
+            </Row>
+          ))}
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})

spug_web/src/pages/config/setting/JSONView.js

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
+import { SaveOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, message } from 'antd';
 import Editor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-json';
@@ -67,14 +68,14 @@ class JSONView extends React.Component {
           value={body}
           onChange={v => this.setState({body: v})}/>
         {readOnly && <AuthButton
-          icon="edit"
+          icon={<EditOutlined/>}
           type="link"
           size="large"
           auth={`config.${store.type}.edit_config`}
           style={{position: 'absolute', top: 0, right: 0}}
           onClick={() => this.setState({readOnly: false})}>编辑</AuthButton>}
         {readOnly || <Button
-          icon="save"
+          icon={<SaveOutlined />}
           type="link"
           size="large"
           loading={loading}

spug_web/src/pages/config/setting/TableView.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Modal, Tooltip, Icon, message } from 'antd';
+import { LockOutlined } from '@ant-design/icons';
+import { Table, Modal, Tooltip, message } from 'antd';
 import { Action } from 'components';
 import ComForm from './Form';
 import { http, hasPermission } from 'libs';
@@ -14,7 +15,7 @@ import store from './store';
 @observer
 class TableView extends React.Component {
   lockIcon = <Tooltip title="私有配置应用专用，不会被其他应用获取到">
-    <Icon style={{marginRight: 5}} type="lock"/>
+    <LockOutlined style={{marginRight: 5}} />
   </Tooltip>;
 
   columns = [{

spug_web/src/pages/config/setting/TextView.js

@@ -10,6 +10,7 @@ import 'ace-builds/src-noconflict/mode-space';
 import 'ace-builds/src-noconflict/theme-tomorrow';
 import store from './store';
 import { http } from "libs";
+import { SaveOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, message } from 'antd';
 import { AuthButton } from 'components';
 
@@ -61,14 +62,14 @@ class TextView extends React.Component {
           readOnly={readOnly}
           onChange={v => this.setState({body: v})}/>
         {readOnly && <AuthButton
-          icon="edit"
+          icon={<EditOutlined/>}
           type="link"
           size="large"
           auth={`config.${store.type}.edit_config`}
           style={{position: 'absolute', top: 0, right: 0}}
           onClick={() => this.setState({readOnly: false})}>编辑</AuthButton>}
         {readOnly || <Button
-          icon="save"
+          icon={<SaveOutlined />}
           type="link"
           size="large"
           loading={loading}

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

@@ -6,17 +6,27 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Menu, Input, Button, Select, PageHeader, Modal } from 'antd';
-import { TableOutlined, UnorderedListOutlined, NumberOutlined } from '@ant-design/icons';
+import {
+  DiffOutlined,
+  HistoryOutlined,
+  NumberOutlined,
+  SyncOutlined,
+  TableOutlined,
+  UnorderedListOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 import envStore from '../environment/store';
 import styles from './index.module.css';
 import history from 'libs/history';
-import { SearchForm, AuthDiv, AuthButton } from 'components';
+import { SearchForm, AuthDiv, AuthButton, Breadcrumb } from 'components';
 import DiffConfig from './DiffConfig';
 import TableView from './TableView';
 import TextView from './TextView';
 import JSONView from './JSONView';
 import Record from './Record';
 import store from './store';
+import appStore from '../app/store';
+import srcStore from '../service/store';
 
 @observer
 class Index extends React.Component {
@@ -63,52 +73,62 @@ class Index extends React.Component {
 
   render() {
     const {view} = this.state;
+    const isApp = store.type === 'app';
+    const record = isApp ? appStore.record : srcStore.record;
     return (
-      <AuthDiv auth={`config.${store.type}.view_config`} className={styles.container}>
+      <AuthDiv auth={`config.${store.type}.view_config`}>
-        <div className={styles.left}>
+        <Breadcrumb>
-          <PageHeader
+          <Breadcrumb.Item>配置中心</Breadcrumb.Item>
-            title="环境列表"
+          <Breadcrumb.Item onClick={() => history.goBack()}>{isApp ? '应用配置' : '服务配置'}</Breadcrumb.Item>
-            style={{padding: '0 0 10px 10px'}}
+          <Breadcrumb.Item>{record.name}</Breadcrumb.Item>
-            onBack={() => history.goBack()}
+        </Breadcrumb>
-            extra={<Button type="link" icon="diff" onClick={store.showDiff}>对比配置</Button>}/>
+        <div className={styles.container}>
-          <Menu
+          <div className={styles.left}>
-            mode="inline"
+            <PageHeader
-            selectedKeys={[String(store.env.id)]}
+              title="环境列表"
-            style={{border: 'none'}}
+              style={{padding: '0 0 10px 10px'}}
-            onSelect={({item}) => this.updateEnv(item.props.env)}>
+              onBack={() => history.goBack()}
-            {envStore.records.map(item => (
+              extra={<Button type="link" icon={<DiffOutlined/>} onClick={store.showDiff}>对比配置</Button>}/>
-              <Menu.Item key={item.id} env={item}>{item.name} ({item.key})</Menu.Item>
+            <Menu
-            ))}
+              mode="inline"
-          </Menu>
+              selectedKeys={[String(store.env.id)]}
-        </div>
+              style={{border: 'none'}}
-        <div className={styles.right}>
+              onSelect={({item}) => this.updateEnv(item.props.env)}>
-          <SearchForm>
+              {envStore.records.map(item => (
-            <SearchForm.Item span={6} title="视图">
+                <Menu.Item key={item.id} env={item}>{item.name} ({item.key})</Menu.Item>
-              <Select value={view} style={{width: '100%'}} onChange={v => this.setState({view: v})}>
+              ))}
-                <Select.Option value="1"><TableOutlined style={{marginRight: 10}}/>表格</Select.Option>
+            </Menu>
-                <Select.Option value="2"><UnorderedListOutlined style={{marginRight: 10}}/>文本</Select.Option>
+          </div>
-                <Select.Option value="3"><NumberOutlined style={{marginRight: 10}}/>JSON</Select.Option>
+          <div className={styles.right}>
-              </Select>
+            <SearchForm>
-            </SearchForm.Item>
+              <SearchForm.Item span={6} title="视图" style={{paddingLeft: 0}}>
-            <SearchForm.Item span={7} title="Key">
+                <Select value={view} style={{width: '100%'}} onChange={v => this.setState({view: v})}>
-              <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
+                  <Select.Option value="1"><TableOutlined style={{marginRight: 10}}/>表格</Select.Option>
-            </SearchForm.Item>
+                  <Select.Option value="2"><UnorderedListOutlined style={{marginRight: 10}}/>文本</Select.Option>
-            <SearchForm.Item span={3}>
+                  <Select.Option value="3"><NumberOutlined style={{marginRight: 10}}/>JSON</Select.Option>
-              <Button type="primary" icon="sync" onClick={this.handleRefresh}>刷新</Button>
+                </Select>
-            </SearchForm.Item>
+              </SearchForm.Item>
-            <SearchForm.Item span={4}>
+              <SearchForm.Item span={7} title="Key">
-              <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}} icon="history"
+                <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
-                      onClick={store.showRecord}>更改历史</Button>
+              </SearchForm.Item>
-            </SearchForm.Item>
+              <SearchForm.Item span={3}>
-            <SearchForm.Item span={4} style={{textAlign: 'right'}}>
+                <Button type="primary" icon={<SyncOutlined/>} onClick={this.handleRefresh}>刷新</Button>
-              <AuthButton auth="config.app.edit_config|config.service.edit_config" disabled={view !== '1'}
+              </SearchForm.Item>
-                          type="primary" icon="plus" onClick={() => store.showForm()}>新增配置</AuthButton>
+              <SearchForm.Item span={4}>
-            </SearchForm.Item>
+                <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}}
-          </SearchForm>
+                        icon={<HistoryOutlined/>}
+                        onClick={store.showRecord}>更改历史</Button>
+              </SearchForm.Item>
+              <SearchForm.Item span={4} style={{textAlign: 'right'}}>
+                <AuthButton auth="config.app.edit_config|config.service.edit_config" disabled={view !== '1'}
+                            type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新增配置</AuthButton>
+              </SearchForm.Item>
+            </SearchForm>
 
-          {view === '1' && <TableView/>}
+            {view === '1' && <TableView/>}
-          {view === '2' && <TextView ref={ref => this.textView = ref}/>}
+            {view === '2' && <TextView ref={ref => this.textView = ref}/>}
-          {view === '3' && <JSONView ref={ref => this.JSONView = ref}/>}
+            {view === '3' && <JSONView ref={ref => this.JSONView = ref}/>}
+          </div>
         </div>
         {store.recordVisible && <Record/>}
         {store.diffVisible && <DiffConfig/>}

spug_web/src/routes.js

@@ -32,6 +32,7 @@ import ScheduleIndex from './pages/schedule';
 import ConfigEnvironment from './pages/config/environment';
 import ConfigService from './pages/config/service';
 import ConfigApp from './pages/config/app';
+import ConfigSetting from './pages/config/setting';
 
 import MonitorIndex from './pages/monitor';
 
@@ -77,6 +78,7 @@ export default [
       {title: '环境管理', auth: 'config.env.view', path: '/config/environment', component: ConfigEnvironment},
       {title: '服务配置', auth: 'config.src.view', path: '/config/service', component: ConfigService},
       {title: '应用配置', auth: 'config.app.view', path: '/config/app', component: ConfigApp},
+      {path: '/config/setting/:type/:id', component: ConfigSetting},
     ]
   },
   {icon: <MonitorOutlined/>, title: '监控中心', auth: 'monitor.monitor.view', path: '/monitor', component: MonitorIndex},