ui

src/app/basicVersion/exampleShow/ExampleDetail.js

@@ -37,6 +37,10 @@ class ExampleDetail extends Component {
         }
 
         // 查询跳转来的案例，转成 apigroup id
+        // 此前，传递的值是 schemaID，考虑到都是根据 schemaID 生成的案例，所以 bucketName 是基于 schema.edn 的，在 cos 比较好找
+        // 又考虑到 fc 中仍有不含 schema.edn 的页面 fc。 故添加了 case 的表和 project 的 projectType === 'case'
+        // 所以，这部分待修改
+        // 最好的解决是，查询所有 projectType 为 case 的 project，然后传过来一举两得
         let groupID = '';
         if (this.props.location && this.props.location.state) {
             this.setState({
@@ -71,9 +75,10 @@ class ExampleDetail extends Component {
         request(graphqlUrl, SEARCH_APIGROUP, {id: groupID}).then(res => {
             let caseDeploy = res.apiGWGroupbyid;
             let domain = caseDeploy.defaultDomain;
+            let userDomain = caseDeploy.userDomain;
             if (this._isMounted) {
                 this.setState({
-                    domain
+                    domain: userDomain ? userDomain : domain
                 })
             }
         })
@@ -89,13 +94,6 @@ class ExampleDetail extends Component {
         })
     };
 
-    graphQLFetcher = (graphQLParams) => {
-        return fetch(this.state.domain, {
-            method: 'post',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(graphQLParams),
-        }).then(response => response.json());
-    };
 
     render() {
         let {userID, bucketName, domain, showCustom, description, images} = this.state;
@@ -117,25 +115,27 @@ class ExampleDetail extends Component {
                                     </div>
 
                                     <Row>
-                                        <Col span={18}>
+                                        <Col span={18} style={{borderRight: '1px dashed #dcdadb', paddingRight: 20}}>
                                             <div>
                                                 <div className={'schema-name'}><FormattedMessage id='detail'/></div>
                                                 <div>{description ? description : '暂无简介'}</div>
                                                 <div className={'detail-images'}>
                                                     {
                                                         images.map(img => (
-                                                            <img src={img} alt="" height="500"/>
+                                                            <img key={img} src={img} alt="" height="500"/>
                                                         ))
                                                     }
                                                 </div>
                                             </div>
 
                                             <div style={{marginTop: 100}}>
-                                                <div className={'schema-name'}><FormattedMessage id='case graphql domain'/>
+                                                <div className={'schema-name'}><FormattedMessage
+                                                    id='case graphql domain'/>
                                                 </div>
                                                 <div className={'schema-table-list-title'}>
                                                     <Row>
-                                                        <Col span={15}><span className={'schema-table-title'}><FormattedMessage
+                                                        <Col span={15}><span
+                                                            className={'schema-table-title'}><FormattedMessage
                                                             id='defaultDomain'/></span></Col>
                                                     </Row>
                                                 </div>
@@ -145,11 +145,13 @@ class ExampleDetail extends Component {
                                                             {
                                                                 domain ?
                                                                     <div>
-                                                                        <span className={'schema-table-content'}>{domain} </span>
-                                                                        <Icon type="copy" theme="twoTone" onClick={() => {
-                                                                            copy(domain);
-                                                                            message.success('复制成功.');
-                                                                        }}/>
+                                                                        <span
+                                                                            className={'schema-table-content'}>{domain} </span>
+                                                                        <Icon type="copy" theme="twoTone"
+                                                                              onClick={() => {
+                                                                                  copy(domain);
+                                                                                  message.success('复制成功.');
+                                                                              }}/>
                                                                     </div>
                                                                     :
                                                                     <Spin/>
@@ -157,40 +159,43 @@ class ExampleDetail extends Component {
 
                                                         </Col>
                                                         <Col span={4}>
-                                                            <Button style={{marginTop: 10}} size={'small'} onClick={()=>{this.setState({showIDE: !this.state.showIDE})}}>{this.state.showIDE? 'closeIDE': 'showIDE'}</Button>
+                                                            <Button style={{marginTop: 10}} size={'small'}
+                                                                    onClick={() => {
+                                                                        this.setState({showIDE: !this.state.showIDE})
+                                                                    }}>{this.state.showIDE ? <FormattedMessage id='closeIDE'/> : <FormattedMessage id='showIDE'/>}</Button>
                                                         </Col>
                                                     </Row>
                                                 </div>
                                             </div>
 
                                             {
-                                                this.state.showIDE?
-                                                    <div style={{marginTop: 20}}>
-                                                        <GraphiQL fetcher={this.graphQLFetcher}/>
-                                                    </div>
+                                                this.state.showIDE ?
+                                                    <Graphiql domain={this.state.domain}/>
                                                     :
                                                     ''
                                             }
                                         </Col>
-                                        <Col span={6} >
+                                        <Col span={5} style={{marginLeft: 20}}>
                                             <div style={{marginTop: 50}}>
                                                 <div className={'choose-cloud-button-group'}>
-                                                    <Button className={'choose-cloud-button'} type='primary' onClick={() => {
-                                                        if (userID === '') {
-                                                            notification['warning']({
-                                                                message: '需要登录',
-                                                                description: '后续使用，需要先登录',
-                                                            });
-
-                                                            this.props.history.push({
-                                                                pathname: `/login`
-                                                            })
-                                                        } else {
-                                                            this.setState({
-                                                                showCustom: true
-                                                            })
-                                                        }
-                                                    }}>更近一步</Button>
+                                                    <div className={'schema-name'}><FormattedMessage id='i want to use it'/></div>
+                                                    <Button className={'choose-cloud-button'} type='primary'
+                                                            onClick={() => {
+                                                                if (userID === '') {
+                                                                    notification['warning']({
+                                                                        message: '需要登录',
+                                                                        description: '后续使用，需要先登录',
+                                                                    });
+
+                                                                    this.props.history.push({
+                                                                        pathname: `/login`
+                                                                    })
+                                                                } else {
+                                                                    this.setState({
+                                                                        showCustom: true
+                                                                    })
+                                                                }
+                                                            }}>更近一步</Button>
                                                 </div>
                                             </div>
                                         </Col>
@@ -212,4 +217,22 @@ class ExampleDetail extends Component {
     }
 }
 
-export default ExampleDetail
+export default ExampleDetail
+
+
+const Graphiql = ({domain}) => {
+    const domainFixed = 'http://' + domain + '/graphql';
+    const graphQLFetcher = (graphQLParams) => {
+        return fetch(domainFixed, {
+            method: 'post',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(graphQLParams),
+        }).then(response => response.json());
+    };
+
+    return (
+        <div style={{marginTop: 20}}>
+            <GraphiQL fetcher={graphQLFetcher}/>
+        </div>
+    );
+};

src/app/basicVersion/exampleShow/ExampleShow.jsx

@@ -92,4 +92,5 @@ class ExampleShow extends Component {
     }
 }
 
-export default ExampleShow;
+export default ExampleShow;
+

src/language/en_US.js

@@ -175,6 +175,9 @@ const en_US = {
     'no this cloud, click to save': 'no this cloud, click to save',
     'back to case show': 'back to case show',
     'back to all case show': 'back to case store',
-    'scan and use': 'scan and try'
+    'scan and use': 'scan and try',
+    'i want to use it': 'i want to use it',
+    'showIDE': 'showIDE',
+    'closeIDE': 'closeIDE'
 };
 export default en_US;

src/language/zh_CN.js

@@ -176,6 +176,9 @@ const zh_CN = {
     'no this cloud, click to save': '没有该服务商的 key，点我设置',
     'back to case show': '返回该案例',
     'back to all case show': '返回案例商城',
-    'scan and use': '案例商城，扫码体验'
+    'scan and use': '案例商城，扫码体验',
+    'i want to use it': '我也要用',
+    'showIDE': '开始数据操作',
+    'closeIDE': '关闭它'
 };
 export default zh_CN;