@@ -46,15 +46,24 @@ const remarks = {
4646class PublishModal extends React . Component {
4747 state = {
4848 isLoad : false ,
49+ explain : [
50+ < p key = "0" > < FormattedMessage id = "app.header.publish-cloud.build" /> </ p > ,
51+ < p key = "1" >
52+ < FormattedMessage id = "app.header.publish-cloud.state" />
53+ { ' BUILDING' }
54+ </ p > ,
55+ ] ,
4956 } ;
5057
5158 componentDidMount ( ) {
5259 // 监听有没有在发布
5360 const { templateData } = this . props ;
5461 const currentBuild = JSON . parse ( window . localStorage . getItem ( buildId ) ) ;
5562 if ( currentBuild && currentBuild [ templateData . uid ] ) {
56- this . props . changePublishState ( true ) ;
57- this . onMonitorPublishState ( currentBuild [ templateData . uid ] ) ;
63+ this . setState ( { isLoad : true } , ( ) => {
64+ this . props . changePublishState ( true ) ;
65+ this . onMonitorPublishState ( currentBuild [ templateData . uid ] ) ;
66+ } ) ;
5867 }
5968 }
6069
@@ -92,6 +101,7 @@ class PublishModal extends React.Component {
92101 }
93102
94103 onMonitorPublishState = ( id ) => {
104+ const { explain } = this . state ;
95105 ticker . clear ( this . getPublishState ) ;
96106 this . getPublishState = ticker . interval ( ( ) => {
97107 fetch ( `${ nowURL } api/deploy/${ id } ` , {
@@ -100,15 +110,16 @@ class PublishModal extends React.Component {
100110 headers : {
101111 'Content-Type' : 'application/json' ,
102112 } ,
103- } ) . then ( res => res . json ( ) ) . then ( ( { url, lambdas : [ item ] } ) => {
113+ } ) . then ( res => res . json ( ) ) . then ( ( res ) => {
114+ const { url, lambdas : [ item ] } = res ;
104115 if ( item ) {
105116 switch ( item . readyState ) {
106117 case 'READY' :
107118 notification . open ( {
108- message : '发布成功' ,
119+ message : < FormattedMessage id = "app.header.publish-cloud.success" /> ,
109120 description : (
110121 < p >
111- 你的网站已发布成功,URL地址:
122+ < FormattedMessage id = "app.header.publish-cloud.successRemarks" />
112123 < a href = { `https://${ url } ` } target = "_blank" >
113124 { url }
114125 </ a >
@@ -119,10 +130,18 @@ class PublishModal extends React.Component {
119130 this . publishEnd ( ) ;
120131 break ;
121132 case 'ERROR' :
122- message . error ( '发布失败。' ) ;
133+ message . error ( < FormattedMessage id = "app.header.publish-cloud.error" /> ) ;
123134 this . publishEnd ( ) ;
124135 break ;
125136 default :
137+ explain . push ( (
138+ < p key = { explain . length . toString ( ) } >
139+ < FormattedMessage id = "app.header.publish-cloud.state" />
140+ { ' ' }
141+ { item . readyState }
142+ </ p >
143+ ) ) ;
144+ this . setState ( { explain } ) ;
126145 break ;
127146 }
128147 }
@@ -176,66 +195,83 @@ class PublishModal extends React.Component {
176195 render ( ) {
177196 const { templateData, location, onSave, changePublishState, form, ...props } = this . props ;
178197 const { getFieldDecorator } = form ;
179- const { isLoad } = this . state ;
198+ const { isLoad, explain } = this . state ;
180199 const locale = isZhCN ( location . pathname ) ? 'zh-CN' : 'en-US' ;
181200 const page = templateData . data . page || { } ;
182201 return (
183202 < Modal
184203 { ...props }
185204 >
186- < h3 style = { { marginBottom : 16 } } >
187- < FormattedMessage id = "app.header.publish-cloud.explain" />
188- </ h3 >
189- < p >
190- < Icon type = "profile" />
191- { ' ' }
192- { remarks [ locale ] }
193- </ p >
194- < p style = { { margin : '8px 0' } } >
195- < Icon type = "experiment" />
196- { ' ' }
197- < FormattedMessage id = "app.header.publish-cloud.remarks" />
198- </ p >
199- < p >
200- < Icon type = "exclamation-circle" />
201- { ' ' }
202- < FormattedMessage id = "app.header.publish-cloud.remarks2" />
203- </ p >
204- < h3 style = { { marginTop : 16 } } >
205- < FormattedMessage id = "app.header.publish-cloud.pageEdit" />
206- </ h3 >
207- < p />
208- < Form onSubmit = { this . onClick } className = "modal-form" >
209- < Item label = "Title" >
210- { getFieldDecorator ( 'title' , {
211- initialValue : page . title ,
212- } ) ( < Input /> ) }
213- </ Item >
214- < Item label = "Description" >
215- { getFieldDecorator ( 'description' , {
216- initialValue : page . description ,
217- } ) ( < TextArea /> ) }
218- </ Item >
219- < Item
220- label = { (
221- < span >
222- Favicon (ico, png or jpg)
223- < Tooltip title = { < FormattedMessage id = "app.header.publish-cloud.favicon" /> } >
224- < Icon type = "question-circle" style = { { margin : '0 8px' } } />
225- </ Tooltip >
226- </ span >
227- ) }
205+ { isLoad ? (
206+ < div
207+ style = { {
208+ color : '#E6E1DC' ,
209+ backgroundColor : '#202020' ,
210+ boxShadow : 'inset 0 0 10px black' ,
211+ height : 300 ,
212+ overflowY : 'auto' ,
213+ padding : 16 ,
214+ } }
228215 >
229- { getFieldDecorator ( 'favicon' , {
230- initialValue : page . favicon ,
231- } ) ( < Input /> ) }
232- </ Item >
233- < Item style = { { marginTop : 16 } } >
234- < Button disabled = { isLoad } type = "primary" icon = { isLoad ? 'loading' : 'cloud-upload' } htmlType = "submit" >
235- < FormattedMessage id = "app.header.publish-cloud.button" />
236- </ Button >
237- </ Item >
238- </ Form >
216+ { explain }
217+ </ div >
218+ ) : (
219+ < >
220+ < h3 style = { { marginBottom : 16 } } >
221+ < FormattedMessage id = "app.header.publish-cloud.explain" />
222+ </ h3 >
223+ < p >
224+ < Icon type = "profile" />
225+ { ' ' }
226+ { remarks [ locale ] }
227+ </ p >
228+ < p style = { { margin : '8px 0' } } >
229+ < Icon type = "experiment" />
230+ { ' ' }
231+ < FormattedMessage id = "app.header.publish-cloud.remarks" />
232+ </ p >
233+ < p >
234+ < Icon type = "exclamation-circle" />
235+ { ' ' }
236+ < FormattedMessage id = "app.header.publish-cloud.remarks2" />
237+ </ p >
238+ < h3 style = { { marginTop : 16 } } >
239+ < FormattedMessage id = "app.header.publish-cloud.meta" />
240+ </ h3 >
241+ < p />
242+ < Form onSubmit = { this . onClick } className = "modal-form" >
243+ < Item label = "Title" >
244+ { getFieldDecorator ( 'title' , {
245+ initialValue : page . title ,
246+ } ) ( < Input /> ) }
247+ </ Item >
248+ < Item label = "Description" >
249+ { getFieldDecorator ( 'description' , {
250+ initialValue : page . description ,
251+ } ) ( < TextArea /> ) }
252+ </ Item >
253+ < Item
254+ label = { (
255+ < span >
256+ Favicon (ico, png or jpg)
257+ < Tooltip title = { < FormattedMessage id = "app.header.publish-cloud.favicon" /> } >
258+ < Icon type = "question-circle" style = { { margin : '0 8px' } } />
259+ </ Tooltip >
260+ </ span >
261+ ) }
262+ >
263+ { getFieldDecorator ( 'favicon' , {
264+ initialValue : page . favicon ,
265+ } ) ( < Input /> ) }
266+ </ Item >
267+ < Item style = { { marginTop : 16 } } >
268+ < Button disabled = { isLoad } type = "primary" icon = { isLoad ? 'loading' : 'cloud-upload' } htmlType = "submit" >
269+ < FormattedMessage id = "app.header.publish-cloud.button" />
270+ </ Button >
271+ </ Item >
272+ </ Form >
273+ </ >
274+ ) }
239275 </ Modal >
240276 ) ;
241277 }
0 commit comments