improve

src/Common.js

@@ -46,7 +46,7 @@ export class HighlightedText extends PureComponent {
                 <pre>
                     {parts.map((p,idx)=>(
                         <span key={idx}>{
-                            PID_RE.test(p) ? <a onClick={()=>{this.props.show_pid(p)}}>{p}</a> :
+                            PID_RE.test(p) ? <a href={'##'+p} onClick={(e)=>{e.preventDefault(); this.props.show_pid(p);}}>{p}</a> :
                             NICKNAME_RE.test(p) ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> :
                             p
                         }</span>

src/Flows.css

@@ -23,7 +23,7 @@
     align-items: flex-start;
     width: calc(100% - 625px);
     margin-left: -25px;
-    padding-left: 20px;
+    padding-left: 18px;
     overflow-x: auto;
 }
 
@@ -63,7 +63,7 @@
 .left-container .flow-reply {
     flex: 0 0 300px;
     max-height: 15em;
-    margin-right: -5px;
+    margin-right: -7px;
     overflow-y: hidden;
 }
 

src/Flows.js

@@ -94,8 +94,15 @@ function FlowItem(props) {
                 <Time stamp={props.info.timestamp} />
             </div>
             <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
-            {props.info.type==='image' ? <p className="img"><img src={IMAGE_BASE+props.info.url} /></p> : null}
-            {props.info.type==='audio' ? <AudioWidget src={AUDIO_BASE+props.info.url} /> : null}
+            {props.info.type==='image' &&
+                <p className="img">
+                    {props.img_clickable ?
+                        <a href={IMAGE_BASE+props.info.url} target="_blank"><img src={IMAGE_BASE+props.info.url} /></a> :
+                        <img src={IMAGE_BASE+props.info.url} />
+                    }
+                </p>
+            }
+            {props.info.type==='audio' && <AudioWidget src={AUDIO_BASE+props.info.url} />}
         </div>
     );
 }
@@ -209,7 +216,8 @@ class FlowSidebar extends PureComponent {
                         </span>
                     }
                 </div>
-                <FlowItem info={this.state.info} color_picker={this.color_picker} attention={this.state.attention} show_pid={this.show_pid} />
+                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
+                    color_picker={this.color_picker} show_pid={this.show_pid} />
                 {this.state.replies.map((reply)=>(
                     <LazyLoad key={reply.cid} offset={500} height="5em" overflow={true} once={true}>
                         <Reply info={reply} color_picker={this.color_picker} show_pid={this.show_pid} />
@@ -283,7 +291,8 @@ class FlowItemRow extends PureComponent {
                 if(!CLICKABLE_TAGS[event.target.tagName.toLowerCase()])
                     this.show_sidebar();
             }}>
-                <FlowItem info={this.state.info} color_picker={this.color_picker} attention={this.state.attention} show_pid={this.show_pid} />
+                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={false}
+                    color_picker={this.color_picker} show_pid={this.show_pid} />
                 <div className="flow-reply-row">
                     {this.state.reply_status==='loading' && <div className="box box-tip">加载中</div>}
                     {this.state.reply_status==='failed' &&

src/UserAction.js

@@ -5,8 +5,8 @@ import './UserAction.css';
 
 import {API_BASE} from './Common';
 const LOGIN_BASE=window.location.protocol==='https:' ? '/login_proxy' : 'http://www.pkuhelper.com/services/login';
-const MAX_IMG_PX=1000;
-const MAX_IMG_FILESIZE=100000;
+const MAX_IMG_PX=2000;
+const MAX_IMG_FILESIZE=256000;
 
 export const TokenCtx=React.createContext({
     value: null,

src/flows_api.js

@@ -100,8 +100,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     },
@@ -114,8 +116,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     },
@@ -127,8 +131,10 @@ export const API={
         )
             .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
+                if(json.code!==0) {
+                    if(json.msg) alert(json.msg);
                     throw new Error(json);
+                }
                 return json;
             });
     }