From 963bb9063c760dd795e82b48d51c3aaad00356bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Mon, 23 Mar 2020 20:24:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=84=E9=98=85=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E5=9B=BE=E7=89=87=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/src/AppConfig.js                 |  2 +-
 public/react/src/common/hooks/ImageLayer2.js  |  6 +--
 .../src/modules/page/layers/ImageLayer.js     | 51 +++++++++++++++++--
 .../modules/page/layers/TaskResultLayer.css   | 11 +++-
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/public/react/src/AppConfig.js b/public/react/src/AppConfig.js
index 5182cb991..2d04baa58 100644
--- a/public/react/src/AppConfig.js
+++ b/public/react/src/AppConfig.js
@@ -46,7 +46,7 @@ debugType = "admin";
 // 老师
 // debugType="teacher";
 // 学生
- debugType="student";
+// debugType="student";
 
 
 
diff --git a/public/react/src/common/hooks/ImageLayer2.js b/public/react/src/common/hooks/ImageLayer2.js
index 202a7f343..504e491ca 100644
--- a/public/react/src/common/hooks/ImageLayer2.js
+++ b/public/react/src/common/hooks/ImageLayer2.js
@@ -18,8 +18,8 @@ function ImageLayer2(props) {
         const fileName = event.target.innerHTML.trim()
         if (isImageExtension((imageSrc && imageSrc.trim())) || isImageExtension(fileName) || event.target.tagName == 'IMG' || (imageSrc && imageSrc.indexOf('base64,')) != -1) {
             // 非回复里的头像图片; 非emoticons
-            if (imageSrc.indexOf('/images/avatars/User') === -1 && 
-                imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {  
+            if (imageSrc.indexOf('/images/avatars/User') === -1 &&
+                imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {
                 setShowImage(true)
                 setImageSrc(imageSrc)
             }
@@ -41,7 +41,7 @@ function ImageLayer2(props) {
     })
 
     return (
-        <ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
+      showImage?<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>:""
     )
 }
 
diff --git a/public/react/src/modules/page/layers/ImageLayer.js b/public/react/src/modules/page/layers/ImageLayer.js
index af9359fe4..17f40bdf9 100644
--- a/public/react/src/modules/page/layers/ImageLayer.js
+++ b/public/react/src/modules/page/layers/ImageLayer.js
@@ -1,10 +1,27 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'
-
+import { Button,Icon} from 'antd';
 import './TaskResultLayer.css'
 
 class ImageLayer extends Component {
 
+	constructor(props) {
+		super(props);
+		this.state = {
+			visible: false,
+			previewImage: '',
+			current: 90,
+			transStyle: ''
+		}
+	}
+	translate = () => {
+		this.setState({
+			current:(this.state.current+90)%360,
+			transStyle:'rotate('+this.state.current+'deg)'
+		});
+	}
+
+
   	render() {
       	let { showImage, imageSrc, onImageLayerClose } = this.props;
 
@@ -13,10 +30,34 @@ class ImageLayer extends Component {
 	    return ReactDOM.createPortal(
 	    	<div>
 		    	{showImage ?
-  		    	<div className="taskResultLayer" onClick={onImageLayerClose} style={{overflow: 'auto'}}>
-  		    		<div className="passContent">
-                	<img src={ imageSrc }  className="passImg" unselectable="on" alt=""/>
-	  		      	</div>
+  		    	<div className="taskResultLayer">
+							<div className={"ImageLayerbutton mt20"}>
+								<Button
+									className={"fr"}
+									onClick={()=>this.props.onImageLayerClose()}
+								>
+									关闭<Icon type="close" />
+								</Button>
+
+								<Button
+									href={imageSrc}
+									className={"fr mr10"}
+								>
+									下载<Icon type="vertical-align-bottom" />
+								</Button>
+
+								<Button
+									onClick = {()=>this.translate()}
+									className={"fr mr10"}
+								>
+									旋转<Icon type="reload" theme="outlined" />
+								</Button>
+							</div>
+  		    		<div className="passContent" style={{ transform:this.state.transStyle}}>
+                	<img src={imageSrc}  className="passImg" unselectable="on" alt=""/>
+	  		     	</div>
+
+
 	            </div>
 		      	:
 		      	<div></div>
diff --git a/public/react/src/modules/page/layers/TaskResultLayer.css b/public/react/src/modules/page/layers/TaskResultLayer.css
index 25f570a56..962aed0db 100644
--- a/public/react/src/modules/page/layers/TaskResultLayer.css
+++ b/public/react/src/modules/page/layers/TaskResultLayer.css
@@ -7,7 +7,7 @@
     background:rgba(0,0,0,0.8);
     top: 0px;
     overflow: hidden;
-}   
+}
     .taskResultLayer .closeIcon{
         position: absolute;
         right: 100px;
@@ -40,7 +40,7 @@
     justify-content: center;
     align-items: center;
     display: -webkit-flex;
-    height: 100%;
+    height: 90%;
     text-align: center;
 }
 .passImg{
@@ -137,4 +137,11 @@
 
 .vertical4{
     vertical-align: -4px;
+}
+
+.ImageLayerbutton{
+    position: absolute;
+    top: 0px;
+    right: 10px;
+    z-index: 10;
 }
\ No newline at end of file