@who列表

src/modules/tpm/challengesnew/css/newquestion.css

@@ -9,8 +9,26 @@
 /*md编辑器中输入@弹出可选人列表样式*/
 .at_who_list{
     position: absolute;
+    z-index: 99;
+    width: 180px;
+    max-height: 160px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
+    border-radius: 4px;
     top: 100px;
     left: 100px;
-    background-color: red;
+    overflow-y: scroll;
-    z-index: 99;
+}
+.at_who{
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid rgba(212, 212, 212, 0.5);
+}
+.at_who img{
+    width:30px;
+    height:30px;
+    border-radius:50%;
+    margin-right: 10px;
 }

src/modules/tpm/challengesnew/tpm-md-editor.js

@@ -1,13 +1,11 @@
-
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { getUploadActionUrl, getUrl } from 'educoder';
 import ResizeObserver from 'resize-observer-polyfill';
-
+import { getImageUrl } from 'educoder';
 import '../../courses/css/Courses.css';
 import './css/TPMchallengesnew.css';
 import 'codemirror/lib/codemirror.css';
 import './css/newquestion.css';
-import { AutoComplete } from 'antd';
 const $ = window.$
 
 const mdIcons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "inline-latex", "latex", '|', "image", "table", '|', "line-break", "watch", "clear"];
@@ -41,7 +39,6 @@ function md_rec_data(k, mdu, id) {
 }
 window.md_rec_data = md_rec_data;
 
-
 function md_elocalStorage(editor, mdu, id) {
   let oc = window.sessionStorage.getItem('content' + mdu)
   if (oc !== null && oc !== editor.getValue()) {
@@ -76,14 +73,6 @@ function md_elocalStorage(editor, mdu, id) {
   return tid
 }
 
-const atWhoList = (
-  <div className="at_who_list">aaa</div>
-)
-
-const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"},
-{image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"},
-{image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"}]
-
 export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true }) => {
 
   const editorEl = useRef();
@@ -94,6 +83,12 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   const editorBodyId = `mdEditors_${mdID}`;
   const tipId = `e_tips_mdEditor_${mdID}`;
   
+  const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"},
+  {image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"},
+  {image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"},
+  {image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准"},
+  {image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准1"}]
+
   function onLayout() {
     let ro;
     if (editorEl.current) {
@@ -111,6 +106,19 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
     return ro;
   }
 
+  const atWhoList = (
+    <div className="at_who_list">
+      {users && users.map((item,key)=>{
+        return(
+          <div className="at_who">
+            { item.image_url && <img src={getImageUrl(item.image_url)}></img> }
+            <span>{item.username}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+
   useEffect(() => {
     if (editorInstance) {
       return
@@ -288,7 +296,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       <div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `} >
         <div className={`edu-back-greyf5 radius4 editormd ${error ? 'error' : ''}`} id={containerId} >
           <textarea style={{ display: 'none' }} id={editorBodyId} name="content"></textarea>
-          {atWhoVisible && atWhoList}
+          {/* {atWhoVisible && atWhoList} */}
+          {atWhoList}
           <div className="CodeMirror cm-s-defualt"></div>
         </div>
       </div>