部署 save

src/app/basicVersion/caseShow/UserCustom.js

@@ -3,13 +3,14 @@ import {Link} from 'react-router-dom';
 import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
 import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
 import {CloudConfig} from "../../../login/CloudConfig";
-import {Button, Spin, Input, Radio, Modal, Icon} from 'antd';
+import {Button, Spin, Input, Radio, Modal, Icon, Steps, Row, Col} from 'antd';
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
 import {idGen} from "../../../func";
 import axios from 'axios';
 import './index.css';
 
+const Step = Steps.Step;
 const RadioGroup = Radio.Group;
 axios.defaults.withCredentials = true;
 
@@ -22,7 +23,6 @@ class UserCustom extends Component {
             customName: '',
             cloudName: 'tencent',
             dbKind: 'fc-db', // mongodb fc-db
-            check: 0,
             disableDeployButton: false,
             deployFailed: false
         };
@@ -230,141 +230,29 @@ class UserCustom extends Component {
                     <FormattedMessage id="back to case show"/>
                 </div>
 
-                <div>
-                    <div className={'schema-name'}><FormattedMessage id='service name'/></div>
-                    <div>
-                        <span className='item-title-cloud'><FormattedMessage id='service name'/>:</span>
-                        <Input
-                            style={{width: 250}}
-                            value={customName}
-                            onChange={(e) => {
-                                this.setState({customName: e.target.value})
-                            }}
-                        />
-                        {
-                            customName === '' ?
-                                <span style={{color: 'orange'}}>不能为空</span> : ''
-                        }
-                    </div>
-                </div>
-                <div style={{marginTop: 20}}>
-                    <div className={'schema-name'}><FormattedMessage id='Cloud Setting'/></div>
-                    <p><Link to="/common/communication">阿里云、华为云、亚马逊请联系我们</Link></p>
-                    <br/>
-                    <RadioGroup
-                        onChange={(e) => {
-                            this.setState({cloudName: e.target.value})
-                        }}
-                        value={cloudName}
-                    >
-                        <Radio value={'tencent'}><FormattedMessage id='tencent cloud'/></Radio>
-                        <Radio value={'aliyun'}><FormattedMessage id='aliyun'/></Radio>
-                        <Radio value={'aws'}><FormattedMessage id='amazon cloud'/></Radio>
-                        <Radio value={'huawei'}><FormattedMessage id='Huawei'/></Radio>
-                    </RadioGroup>
-                    {/*该处设置 check 属性，就是为了：当点击取消后，能够再次查询*/}
-                    <CloudQueryAndConfig
-                        userID={userID}
-                        getCloudDetail={this.getCloudDetail}
-                        cloudName={cloudName}
-                        check={check}
-                        reCheck={() => {
-                            this.setState({check: check + 1})
-                        }}/>
-                </div>
-                <div style={{marginTop: 20}}>
-                    <div className={'schema-name'}><FormattedMessage id='DB Choose'/></div>
-                    <RadioGroup
-                        onChange={(e) => {
-                            this.setState({dbKind: e.target.value})
-                        }}
-                        value={this.state.dbKind}
-                    >
-                        <Radio value='fc-db'>fc-db</Radio>
-                        {/*<Radio value='mongodb'>mongodb</Radio>*/}
-                    </RadioGroup>
-                </div>
-                <div>
-                    {
-                        deployFailed ?
-                            <span style={{color: 'red', fontSize: 20}}>部署失败!</span>
-                            :
-                            ''
-                    }
-                </div>
-                <div>
-                    {
-                        disableDeployButton ?
-                            <Spin tip="部署大约需要几分钟..."/>
-                            :
-                            <Button style={{margin: '20px 0'}} type='primary' onClick={() => {
-                                this.setState({
-                                    disableDeployButton: true
-                                });
-
-                                // store *.edn to cos
-                                let deployConf = dbKind === 'mongodb' ?
-                                    ` {:secretId "${secretID ? secretID : 'AKIDkYBvY0LOJ2bzCDmnMjz4xgFertmVJlVE'}"\n` +
-                                    ` :secretKey "${secretKey ? secretKey : 'zwjKk29TdcYP8g2FG5kCSWmz3wcH92lN'}"\n` +
-                                    ` :appId "${appId}"\n` +
-                                    ' :region "ap-beijing" \n' +
-                                    ' }\n'
-                                    :
-                                    ` {:secretId "${secretID ? secretID : 'AKIDkYBvY0LOJ2bzCDmnMjz4xgFertmVJlVE'}"\n` +
-                                    ` :secretKey "${secretKey ? secretKey : 'zwjKk29TdcYP8g2FG5kCSWmz3wcH92lN'}"\n` +
-                                    ` :appId "${appId ? appId : '1254337200'}"\n` +
-                                    ' :region "ap-beijing"\n' +
-                                    ' :bucket "fc-db"\n' +
-                                    ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
-                                    ` :fc-db-store "case/fc-db/${userID}/${bucketName}.dat"\n` +
-                                    ' :fc-db-dir "case"\n' +
-                                    ' :local-tmp-dir "/tmp"\n' +
-                                    ' :local-db-file "fcdb.dat"\n' +
-                                    ' :update-tx? true \n' +
-                                    ' :force-down? true\n' +
-                                    ' }';
-
-                                let a = axios.post(storeFile, {
-                                    'file-name': `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`,
-                                    bucket: 'case',
-                                    cont: deployConf
-                                });
-
-                                let cont = '{:uri {\n' +
-                                    ':auth {:admin-db   "order"\n' +
-                                    ' :u    "ly"\n' +
-                                    ' :p   "autorunC1705"\n' +
-                                    ' :host "119.27.174.13"}}\n' +
-                                    ' :db-name "order"}';
-
-                                let b = dbKind === 'mongodb' ?
-                                    axios.post(storeFile, {
-                                        'file-name': `${bucketName}/${dbKind}/${userID}/mongo-config.edn`,
-                                        bucket: 'case',
-                                        cont
-                                    })
-                                    :
-                                    Promise.resolve({status: 200});
-
-                                let c = dbKind === 'mongodb' ?
-                                    Promise.resolve({status: 200})
-                                    :
-                                    axios.post(copyCos, {
-                                        'src-bucket': 'case',
-                                        'src-key': `${bucketName}/${bucketName}.dat`,
-                                        'dest-bucket': "case",
-                                        'dest-key': `${bucketName}/fc-db/${userID}/${bucketName}.dat`
-                                    });
-
-                                Promise.all([a, b, c]).then(value => {
-                                    if (value.every(res => res.status === 200)) {
-                                        console.log('store file success , start deploying');
-                                        this.deploy();
-                                    }
-                                });
-                            }}>部署</Button>
-                    }
-                </div>
+                <Row>
+                    <Col span={9} offset={2}>
+                        <div className='step-kind'>
+                            发布体验
+                        </div>
+                        <Steps direction="vertical" current={2}>
+                            <Step title=<Step00/> />
+                            <Step title=<Step01/> />
+                        </Steps>
+                    </Col>
+                    <Col span={9} offset={2}>
+                        <div className='step-kind'>
+                            发布上线
+                        </div>
+                        <Steps direction="vertical" current={5}>
+                            <Step title=<Step10/> />
+                            <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
+                            <Step title=<Step12/> />
+                            <Step title=<Step13/> />
+                            <Step title=<Step14/> />
+                        </Steps>
+                    </Col>
+                </Row>
             </div>
         )
     }
@@ -382,8 +270,6 @@ class CloudQueryAndConfig extends Component {
             secretID: '',
             secretKey: '',
             appId: '',
-            exitCloudInfo: false,
-
             visible: false,
             confirmLoading: false,
         }
@@ -405,7 +291,6 @@ class CloudQueryAndConfig extends Component {
                             secretID: secretId,
                             secretKey,
                             appId,
-                            exitCloudInfo: false
                         });
                     }
                     this.props.getCloudDetail(id, secretId, secretKey, appId);
@@ -413,9 +298,7 @@ class CloudQueryAndConfig extends Component {
                     console.log('数据库有多个同一云服务商的 key');
                 } else {
                     if (this._isMounted) {
-                        this.setState({
-                            exitCloudInfo: true
-                        })
+
                     }
                 }
             }
@@ -452,36 +335,96 @@ class CloudQueryAndConfig extends Component {
     }
 
     render() {
-        let {exitCloudInfo, visible, confirmLoading, cloudName} = this.state;
+        let {visible, confirmLoading, cloudName} = this.state;
         return (
             <div>
-                {
+                <Button type='primary' onClick={this.showModal}>点击填写</Button>
+
+                <Modal
+                    title="云服务商秘钥设置"
+                    visible={visible}
+                    confirmLoading={confirmLoading}
+                    footer={null}
+                    onCancel={this.handleCancel}
+                >
+                    <CloudConfig cloudName={cloudName}/>
+                </Modal>
+            </div>
+        )
+    }
+}
 
-                    <div>
-                        {
-                            exitCloudInfo ?
-                                <Button type="danger" size="small" onClick={this.showModal}>
-                                    <FormattedMessage id='no this cloud, click to save'/>
-                                </Button>
-                                :
-                                <Button size="small" onClick={this.showModal}>
-                                    <FormattedMessage id='Using the default system configuration, you can click to modify.'/>
-                                </Button>
-                        }
-
-                        <Modal
-                            title="云服务商秘钥设置"
-                            visible={visible}
-                            confirmLoading={confirmLoading}
-                            footer={null}
-                            onCancel={this.handleCancel}
-                        >
-                            <CloudConfig cloudName={cloudName}/>
-                        </Modal>
-                    </div>
+const Step00 = (props) => (
+    <div className='step-block'>
+        <Button type="primary" size='large' style={{borderRadius: 10}}>一键部署</Button>
+        <div style={{fontSize: 16}}>
+            默认部署至腾讯云. 亚马逊，阿里云等请联系我们
+        </div>
+    </div>
+);
+
+const Step01 = (props) => (
+    <div className='step-block'>
+        扫码查看结果
+    </div>
+);
+
+const Step10 = (props) => (
+    <div className='step-block'>
+        第一步：注册腾讯云账户
+        <Button style={{marginLeft: 20}}>使用帮助</Button>
+    </div>
+);
+
+
+class Step11 extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            check: 0
+        }
+    }
 
-                }
+    render() {
+        let {userID, getCloudDetail} = this.props;
+        let {check} = this.state;
+        return (
+            <div className='step-block'>
+                第二步：填写腾讯云秘钥，一键部署
+                <Button style={{marginLeft: 20}}>使用帮助</Button>
+                <div>
+                    <CloudQueryAndConfig
+                        userID={userID}
+                        getCloudDetail={getCloudDetail}
+                        cloudName='tencent'
+                        check={check}
+                        reCheck={() => {
+                            this.setState({check: check + 1})
+                        }}
+                    />
+                </div>
             </div>
         )
     }
-}
+}
+
+
+const Step12 = (props) => (
+    <div className='step-block'>
+        第三步：注册微信公众号/小程序
+        <Button style={{marginLeft: 20}}>使用帮助</Button>
+    </div>
+);
+
+const Step13 = (props) => (
+    <div className='step-block'>
+        第四步：微信公众号/小程序 后台填写配置
+        <Button style={{marginLeft: 20}}>使用帮助</Button>
+    </div>
+);
+
+const Step14 = (props) => (
+    <div className='step-block'>
+        开始使用
+    </div>
+);

src/app/basicVersion/caseShow/index.css

@@ -58,4 +58,15 @@
 .case-item {
     margin-bottom: 50px;
     box-shadow: 3px 8px 16px 3px rgba(0,0,0,0.2);
+}
+
+.step-kind {
+    text-align: center;
+    margin: 60px 0;
+    font-size: 30px;
+}
+
+.step-block {
+    height: 120px;
+    font-size: 20px;
 }

src/language/zh_CN.js

@@ -178,7 +178,7 @@ const zh_CN = {
     'no this cloud, click to save': '没有该服务商的 key，点我设置',
     'there is this cloud, click to check': '存在该服务商的 key，点我检查',
     'Using the default system configuration, you can click to modify.': '默认使用系统配置，点击此处可修改',
-    'back to case show': '返回该案例',
+    'back to case show': '扫码体验',
     'back to all case show': '返回案例模板',
     'scan and use': '案例模板，扫码体验',
     'i want to use it directly': '我要直接使用',