查看大图

public/react/src/common/educoder.js

@@ -50,3 +50,4 @@ export { default as DMDEditor } from './components/markdown/DMDEditor'
 
 
 
+export { default as ImageLayerHook } from './hooks/ImageLayerHook'

public/react/src/common/hooks/ImageLayerHook.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, memo } from 'react'
+import ImageLayer from '../../modules/page/layers/ImageLayer'
+import { isImageExtension } from 'educoder'
+function ImageLayerHook(props) {
+    const [showImage, setShowImage] = useState(false)
+    const [imageSrc, setImageSrc] = useState('')
+
+    const { parentSel, childSel, watchPropsArray } = props
+
+    const onImageLayerClose = () => {
+        setShowImage(false)
+        setImageSrc('')
+    }
+    const onDelegateClick = (event) => {
+        const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
+        // 判断imageSrc是否是图片
+        const fileName = event.target.innerHTML.trim()
+        if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName) || event.target.tagName == 'IMG' || imageSrc.indexOf('base64,') != -1) {
+            // 非回复里的头像图片; 非emoticons
+            if (imageSrc.indexOf('/images/avatars/User') === -1 && 
+                imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {  
+                setShowImage(true)
+                setImageSrc(imageSrc)
+            }
+            event.stopPropagation()
+            event.preventDefault && event.preventDefault()
+            event.originalEvent.preventDefault()
+            // event.originalEvent.stopPropagation()
+            // event.originalEvent.cancelBubble = true
+            return false;
+        }
+    }
+    useEffect(() => {
+        $(parentSel)
+            .delegate(childSel, "click", onDelegateClick);
+
+        return () => {
+            $(parentSel).undelegate(childSel, "click", onDelegateClick )
+        }
+    })
+
+    return (
+        <ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
+    )
+}
+
+export default memo(ImageLayerHook)

public/react/src/modules/courses/members/modal/CourseGroupChooserModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, memo } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { trigger } from 'educoder'
 import { Input, Checkbox } from "antd";
 import CourseGroupChooser from '../CourseGroupChooser'
@@ -105,4 +105,4 @@ function CourseGroupChooserModal({ course_groups = [], isAdminOrCreator, item, i
         </ModalWrapper>
     )
 }
-export default memo(CourseGroupChooserModal)
+export default useMemo(CourseGroupChooserModal)

public/react/src/modules/page/main/CodeEvaluateView.css

@@ -126,4 +126,5 @@
     display: inline-block;
     height: 10px;
     margin: 5px 0;
+    float: right;
 }

public/react/src/modules/user/modal/RealNameCertificationModal.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { message, Icon, Input, Form, Upload} from "antd";
 import axios from 'axios'
 import ModalWrapper from "../../courses/common/ModalWrapper"
-import { City, getUploadActionUrl,getImageUrl } from 'educoder'
+import { City, getUploadActionUrl, getImageUrl, ImageLayerHook } from 'educoder'
 import '../account/common.css'
 
 import authImg from '../../../images/account/auth.png'
@@ -202,6 +202,10 @@ class RealNameCertificationModal extends Component{
           .applyForModal .ant-form-item-label label {
             color: #979797
           }          
+          .applyForModal .ant-upload.ant-upload-drag .ant-upload {
+            padding: 0px;
+          }
+
           .certificationModal .ant-modal-body{
             padding:20px;
           }
@@ -295,9 +299,9 @@ class RealNameCertificationModal extends Component{
               </span>
               <Dragger {...uploadProps2}>
                 {imageUrl2 ? 
-                  <a href={imageUrl2} target="_blank" title="点击重新上传图片">
+                  // <a href={imageUrl2} target="_blank" title="点击重新上传图片"></a>
                     <img src={imageUrl2} alt="avatar" style={{ maxHeight: '110px'}}/>
-                  </a> : 
+                   : 
                   <React.Fragment>
                     <p className="ant-upload-drag-icon">
                       <i className="iconfont icon-cuban2shangchuanyunduan" style={{color:"#4B667F",font:"42px"}}></i>
@@ -311,7 +315,9 @@ class RealNameCertificationModal extends Component{
             <div className="df mt10 color-grey-9" style={{ justifyContent: 'center' }} >
               <span className="fl mr20 edu-txt-center" style={{width:"160px"}}>示例图片</span>
               <span className="fl edu-txt-center mr20" style={{width:"160px"}}>
-                <a href="javascript:void(0)" className="color-orange" style={{borderBottom:"1px solid #ff6800"}}>查看大图</a>
+                <ImageLayerHook parentSel={'#imageLayerBtn'} parentSel={'#imageLayerBtn'}
+                ></ImageLayerHook>
+                <a href="javascript:void(0)" id="imageLayerBtn" src={imageUrl || imageUrl2} className="color-orange" style={{borderBottom:"1px solid #ff6800"}}>查看大图</a>
                 </span>
             </div>
           </div>