+ {loading ?
+ );
+ return (
+
+
+
+
+ }
+ >
+ {AnnModalType === 1 ? (
+ {word}
+ ) : ( + + )} +
+ {word ? (
+
+
+ ) : (
+
+
+
+ 版主：{content.name}
+ + {word} +
+{user && user.description ? user.description : "这家伙太懒了，还未填写个人描述！"}
+ {user && !user.is_current_user && ( +-
+ {
+ author && author.length > 0 ?
+ author.map((item,key)=>{
+ return(
+
-
+ {
+ list && list.length>0 ? list.map((item,key)=>{
+ return(
+
- {item.subject} + ) + }): +
-
+ {recommand && recommand.length > 0
+ ? recommand.map((item, key) => {
+ return (
+
+ {item.title}
+ {item.description || "暂无描述~"}
+ {/*
+ {item.description}
*/} + {item.watchers_count}人收藏{item.memos_count}个话题 +
+ {list && list.length > 0
+ ? list.map((item, key) => {
+ return (
+
+ 
+
+ );
+};
diff --git a/src/forums/Component/ItemDropDown.jsx b/src/forums/Component/ItemDropDown.jsx
new file mode 100644
index 000000000..8d5406ea9
--- /dev/null
+++ b/src/forums/Component/ItemDropDown.jsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { Menu , Dropdown , notification } from "antd";
+import {Link} from 'react-router-dom';
+import axios from 'axios';
+
+// permission = {
+// admin://管理员
+// banned_permission：//管理员、且有置顶、推荐权限
+// is_currentUser: true, #是否为当前用户，判断是否显示编辑/删除，并隐藏其他的
+// is_fine: true, #是否精华帖子
+// sticky: true, #是否置顶
+// memo_watched: true, #是否收藏
+// is_deleted:true#是否已经申请删除
+// }
+export default ({ id , permission , calbackFunc , confirm }) => {
+ // 置顶、取消置顶
+ function changeSticky(s){
+ let sticky = s ? 0 : 1;//1为置顶，0为取消置顶
+ const url = `/v1/memos/${id}/set-top-or-down.json`;
+ axios.get(url,{
+ params:{
+ sticky
+ }
+ }).then(result=>{
+ if(result){
+ notification.open({message:"提示",description:result.data.message});
+ calbackFunc && calbackFunc();
+ }
+ })
+ }
+ // 推荐、取消推荐
+ function changeFine(f){
+ let is_fine = f ? 0 : 1;//1表示加精，0表示取消加精
+ const url = `/v1/memos/${id}/is_fine.json`;
+ axios.post(url,{
+ is_fine
+ }).then(result=>{
+ if(result){
+ notification.open({message:"提示",description:result.data.message});
+ calbackFunc && calbackFunc();
+ }
+ })
+ }
+
+ // 关注、取消关注
+ function changeMemoWatched(m){
+ let is_watch = m ? 0 : 1;//1为添加关注，0为取消关注
+ const url = `/v1/memos/${id}/watch_memo.json`;
+ axios.post(url,{
+ is_watch
+ }).then(result=>{
+ if(result){
+ notification.open({message:"提示",description:result.data.message});
+ calbackFunc && calbackFunc();
+ }
+ })
+ }
+ // 管理员直接删除帖子
+ function deleteForum(){
+ confirm && confirm({
+ content: '确认删除帖子?',
+ onOk:()=>{
+ const url = `/v1/memos/${id}/destroy.json`;
+ axios.post(url).then(result=>{
+ if(result){
+ notification.open({message:"提示",description:result.data.message});
+ calbackFunc && calbackFunc();
+ window.location.href="/forums"
+ }
+ })
+ }
+ })
+ }
+
+ // 发布者申请删除、撤销申请删除
+ function sendDeleteForum(d){
+ let is_apply = d ? 0 : 1;//1为申请删除，0为撤销申请删除
+ confirm && confirm({
+ content: '确认申请删帖?',
+ onOk:()=>{
+ const url = `/v1/memos/${id}/confirm_delete.json`;
+ axios.post(url,{
+ is_apply
+ }).then(result=>{
+ if(result){
+ notification.open({message:"提示",description:result.data.message});
+ calbackFunc && calbackFunc();
+ }
+ })
+ }
+ })
+ }
+
+ const menu=(
+ permission &&
+
+ )
+ return (
+
+ {item.description || 暂无描述~}
+
+ 版主：{item.user_name}
+
+
+
+ );
+ })
+ : ""}
+
+
+ {item.title}
+ 帖子数：{item.memos_count} +-
+ {list && list.length > 0 ? (
+ list.map((item, key) => {
+ let permission = {
+ index:key,
+ admin:current_user && current_user.admin,
+ banned_permission:item.banned_permission,
+ login:current_user && current_user.login,
+ is_currentUser:current_user && (item.user_login === current_user.login),
+ is_fine:item.is_fine,
+ sticky:item.sticky,
+ memo_watched:item.memo_watched,
+ user_banned_permission:item.banned_permission,
+ is_deleted:item.apply_destroy
+ }
+ return (
+
-
+
+ ++ {Type(item.tag_name)} + + {item.subject} + + { item.sticky === true ? {Tag("置顶")} : "" } + { item.is_original === true ? {Tag("原创")} : "" } + { item.is_fine === true ? {Tag("精华")} : "" } + ++ { item.apply_destroy ? 已申请删帖 : "" } + { + current_user && current_user.login ? + ++ :"" + } + + ++ + + + + {item.replies_count} + + + + {item.praises_count} + + + + {item.replies_count} + + ++ {item.forum_section_title ? {item.forum_section_title} : "" } + {item.published_time ?{item.published_time} : "" } +
+ );
+ })
+ ) :
+
+
:""
+ );
+});
diff --git a/src/forums/Component/Prise.jsx b/src/forums/Component/Prise.jsx
new file mode 100644
index 000000000..394f01b46
--- /dev/null
+++ b/src/forums/Component/Prise.jsx
@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { message } from "antd";
+export default ({ isPrised, num, memo_id, container_type, current_login }) => {
+ const [flag, setFlag] = useState(undefined);
+ const [number, setNumber] = useState(undefined);
+
+ useEffect(() => {
+ setFlag(isPrised);
+ setNumber(num);
+ }, []);
+
+ function priseForums() {
+ if (current_login) {
+ axios
+ .post(`/v1/discusses/${memo_id}/plus.json`, {
+ container_type: container_type,
+ id: memo_id,
+ type: flag ? 0 : 1,
+ })
+ .then((result) => {
+ setNumber(result.data.praise_count);
+ setFlag(!flag);
+ message.success(flag ? "取消点赞" : "已点赞")
+ })
+ .catch((error) => {
+ message.error(error);
+ });
+ } else {
+ window.open("/login", "_blank");
+ }
+ }
+ return (
+
+
+
+
+ {number}
+
+ );
+};
diff --git a/src/forums/Component/Title.jsx b/src/forums/Component/Title.jsx
new file mode 100644
index 000000000..c31adbd14
--- /dev/null
+++ b/src/forums/Component/Title.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Nav = styled.div`{
+ background-color:#fff;
+ padding:20px 30px;
+ border-bottom:1px solid #eee;
+ font-size:16px;
+ color:#333;
+ display:flex;
+ justify-content: space-between;
+ align-items:center;
+}`
+
+export default (({children,className})=>{
+ return(
+
+ )
+})
\ No newline at end of file
diff --git a/src/forums/Component/Top.jsx b/src/forums/Component/Top.jsx
new file mode 100644
index 000000000..203aa822c
--- /dev/null
+++ b/src/forums/Component/Top.jsx
@@ -0,0 +1,152 @@
+import React, { useEffect , useState } from "react";
+import { Button , notification } from "antd";
+import { WhiteBack, FlexStart, P, FlexAJ, AlignCenter } from "../css/layout";
+import Radius from "../image/radius.png";
+import styled from "styled-components";
+import axios from "axios";
+import {Link} from 'react-router-dom';
+
+const Img = styled.img`
+ {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ margin-right: 15px;
+ }
+`;
+const Prag = styled.p`
+ {
+ color: #333;
+ font-size: 14px;
+ line-height: 18px;
+ margin: 10px 0px;
+ text-align: justify;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ word-break: break-all;
+ max-height: 54px;
+ }
+`;
+const Spanleft = styled.span`
+ {
+ margin-right: 30px;
+ color: #888;
+ font-size: 12px;
+ }
+`;
+const Spanright = styled.span`
+ {
+ margin-left: 30px;
+ color: #888;
+ font-size: 12px;
+ & > label {
+ color: #333;
+ }
+ }
+`;
+export default ({ headData, title , operation , history }) => {
+ const [section, setSection] = useState(undefined);
+ const [sectionUser, setSectionUser] = useState(undefined);
+ const [forumModers, setForumModers] = useState(undefined);
+ const [ watched , setWacth ] = useState(headData && headData.watched);
+
+ useEffect(() => {
+ if (headData) {
+ setSection(headData.forum_section);
+ setSectionUser(headData.forum_section_user);
+ setForumModers(headData.forum_moders);
+ setWacth(headData.watched);
+ }
+ }, [headData]);
+
+ // 收藏、取消收藏
+ function saveForum(id){
+ if(id){
+ const url = `/v1/memos/forum_memos/${id}/is_watch.json`;
+ axios.post(url,{
+ is_watch:watched?0:1
+ }).then(result=>{
+ if(result && result.data && result.data.status!=-1){
+ setWacth(!watched);
+ notification.open({message:"提示",description:result.data.message});
+ }
+ }).catch(error=>{
+ console.log(error);
+ })
+ }
+ }
+
+ function toManage(id){
+ history.push(`/forums/manage/${section && section.id}`);
+ }
+
+ return (
+
+
+
+ {
+ operation ?
+
+ :""
+ }
+
+
+
+
+ {section && section.description ? (
+ {section.description}
+ ) : (
+ ""
+ )}
+
+
+ 版主：{sectionUser && sectionUser.username}
+ {forumModers && forumModers.length > 0 ? (
+
+ 管理员：
+ {forumModers.map((item, key) => {
+ return key < forumModers.length - 1
+ ? {item.username}、
+ : {item.username};
+ })}
+
+ ) : (
+ ""
+ )}
+
+
+
+ 版块主题：
+
+ {section && section.publish_today_coun ? (
+
+ 今日发帖：
+
+ ) : (
+ ""
+ )}
+ {section && section.replies_today_count ? (
+
+ 今日回帖：
+
+ ) : (
+ ""
+ )}
+
+
+
+ {section && section.title}
+-
+ {
+ user && user.login ?
+
+
+
+
+
+ <span>论坛首页</span>
+ <AlignCenter>
+ <span
+ onClick={() => changeSort("published_at")}
+ className={
+ sort === "published_at" ? "green cPointer" : "cPointer"
+ }
+ >
+ 最新
+ </span>
+ <LeftLine
+ onClick={() => changeSort("replies_count")}
+ className={
+ sort === "published_at" ? "cPointer" : "green cPointer"
+ }
+ style={{ fontSize: "16px" }}
+ >
+ 最热
+ </LeftLine>
+ </AlignCenter>
+
+
+
+
+
+
+
+
+
+
+ 热门话题
+
+
+ 版主推荐
+
+
+
+
+ {plate && plate.length > 0
+ ? plate.map((item, key) => {
+ return item.children_tags && item.children_tags.length > 0 ? (
+
+
+ {/* {item.name} */}
+
+ <Link to={`/forums/theme/${item.id}`}>
+ {item.name}
+ </Link>
+
+
+
+ ) : (
+ ""
+ );
+ })
+ : ""}
+
+ );
+}
+export default aa;
diff --git a/src/forums/ForumsDetail.jsx b/src/forums/ForumsDetail.jsx
new file mode 100644
index 000000000..a8ee79da9
--- /dev/null
+++ b/src/forums/ForumsDetail.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { getUrl } from "educoder";
+import { Breadcrumb, Spin, Empty } from "antd";
+import { Link } from "react-router-dom";
+import {
+ WhiteBack,
+ Box,
+ Long,
+ Short,
+ Gap,
+ FlexAJ,
+ AlignCenter,
+ P,
+} from "./css/layout";
+import Title from "./Component/Title";
+import RenderHtml from "../components/render-html";
+import { Type, Tag } from "./Component/ItemType";
+import Drop from "./Component/ItemDropDown";
+import UserInfo from "./Component/UserInfo";
+import Prise from "./Component/Prise";
+import ListItem from "./Component/ListItem";
+import AuthorCard from "./Component/AuthorCard";
+import BestItem from "./Component/BestItem";
+import Original from "./image/original.png";
+import Comments from "./new_comments/comments";
+import Attachments from '../forge/Upload/attachment';
+function memo_show(props) {
+ const memo_id = props.match.params.id;
+ const current_user = props.current_user;
+
+ const [memo, getMemo] = useState(null);
+ const [memoUser, getMemoUser] = useState(null);
+ const [replies, setReplies] = useState([]);
+ const [memoImage, setMemoImage] = useState(null);
+ const [recent_memos, setRecentmemos] = useState([]);
+ const [bannedPermission, setPermission] = useState(undefined);
+ const [isBanned, setIsBanned] = useState(false);
+ const [page, setListPage] = useState(1);
+ const [limit, setLimitType] = useState(5);
+ const [isSpin, setSpinType] = useState(false);
+ const [dropPermission, setDropPermission] = useState({});
+ useEffect(() => {
+ init();
+ related_memos();
+ }, [memo_id]);
+
+ async function init() {
+ setSpinType(true);
+ let url = `/v1/memos/${memo_id}.json`;
+ axios
+ .get(url)
+ .then((result) => {
+ if (result) {
+ let per = {
+ admin:result.data && result.data.is_current_admin,
+ login: result.data && result.data.current_login,
+ banned_permission:result.data.banned_permission,
+ is_currentUser: result.data.author_info ? result.data.author_info.is_current_user : undefined,
+ is_fine: result.data.memo && result.data.memo.is_fine,
+ sticky: result.data.memo && result.data.memo.sticky,
+ memo_watched: result.data.memo && result.data.memo.memo_watched,
+ is_deleted:result.data.memo && result.data.memo.apply_destroy
+ }
+ setPermission(per);
+
+ getMemo(result.data.memo);
+ setMemoImage(result.data.memo_image_info); //封面信息
+ setRecentmemos(result.data.recent_memos);
+ setIsBanned(result.data.is_banned);
+ getMemoUser(result.data.author_info);
+ }
+ setSpinType(false);
+ })
+ .catch((e) => {
+ setSpinType(false);
+ console.log(e);
+ });
+ }
+
+ function related_memos() {
+ let url = `/v1/memos/${memo_id}/related_memos.json`;
+ axios
+ .get(url)
+ .then((result) => {
+ if (result) {
+ setReplies(result.data.memos);
+ }
+ setSpinType(false);
+ })
+ .catch((e) => {
+ setSpinType(false);
+ console.log(e);
+ });
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {memo && memoUser ? (
+
+
+ );
+}
+
+export default memo_show;
diff --git a/src/forums/Index.jsx b/src/forums/Index.jsx
new file mode 100644
index 000000000..fd087b0bf
--- /dev/null
+++ b/src/forums/Index.jsx
@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
+import { Route, Switch } from "react-router-dom";
+import Loading from "../Loading";
+import Loadable from "react-loadable";
+import "./css/Index.css";
+import "./css/All.scss";
+
+const Detail = Loadable({
+ loader: () => import("./ForumsDetail"),
+ loading: Loading,
+});
+const Theme = Loadable({
+ loader: () => import("./Theme"),
+ loading: Loading,
+});
+const Forums = Loadable({
+ loader: () => import("./Forums"),
+ loading: Loading,
+});
+const New = Loadable({
+ loader: () => import("./New"),
+ loading: Loading,
+});
+class Index extends Component {
+ render() {
+ return (
+
+
+
+ 论坛
+
+ {memo && memo.forum_tag && memo.forum_tag.id && (
+
+
+ {memo && memo.forum_tag.title}
+
+
+ )}
+
+ {memo ? memo.subject : "帖子详情"}
+
+
+
+
+
+
+
+
+ {
+ replies && replies.length > 0 &&
+
+
+ <span className="greenLiftLine">相关推荐</span>
+
+
+
+ }
+
+
+
+
+
+ <span>作者最近文章</span>
+ <a
+ className="font-12 grey-9"
+ href={`/accounts/${memoUser && memoUser.login}/memos`}
+ >
+ 更多
+ <i className="font-12 iconfont icon-youjiantou ml5"></i>
+ </a>
+
+
+
+
+
+
+ ) : (
+
+
+ <div className="headerInfoLeft">
+ {memo && Type(`${memo.tag_name}`)}
+ <p className="font-18 grey-3" style={{ marginBottom: "0px",maxWidth:"514px"}}>
+ {memo && memo.subject}
+ </p>
+ {memo && memo.is_fine && Tag("精华")}
+ {memo && memo.sticky && Tag("置顶")}
+ </div>
+ <div style={{width:"130px",textAlign:"right"}}>
+ {current_user && current_user.login ? (
+ <Drop permission={bannedPermission} id={memo_id} calbackFunc={init} confirm={props.confirm}/>
+ ):""}
+ </div>
+ {memo && memo.is_original && (
+ <img
+ src={Original}
+ className="originalTag"
+ width="80px"
+ />
+ )}
+
+
+
+
+
+
+ {memoImage && (
+
+ {memo.reprint_link && (
+
+ 
+
+ )}
+
+ 转载自：{memo.reprint_link}
+ )} +
+
+
+
+
+ {/* 主题全部 */}
+ (
+
+ {/* 详情 */}
+
+
+
+
+
+
+ );
+ }
+}
+export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index)));
diff --git a/src/forums/New.jsx b/src/forums/New.jsx
new file mode 100644
index 000000000..743456295
--- /dev/null
+++ b/src/forums/New.jsx
@@ -0,0 +1,374 @@
+import React, { useCallback, useState, useEffect, forwardRef } from "react";
+import { Banner, WhiteBack, AlignCenter, Greenback } from "./css/layout";
+import { Form, Input, Select, Radio, Button, notification, Spin } from "antd";
+import MDEditor from "../modules/tpm/challengesnew/tpm-md-editor";
+import Uplaod from "../forge/Upload/Index";
+import UplaodCover from "../forge/Upload/Cover";
+import Attachments from '../forge/Upload/attachment';
+import "./css/All.scss";
+import axios from "axios";
+
+const TextArea = Input.TextArea;
+const Option = Select.Option;
+
+// forum_id: values.forum_id, //大主题版块的id, int类型 （必填）
+// attachment_id: ImgInfo.attachment_id, //上传的封面id
+// children_forum_id: values.children_forum_id, //小主题版块的id，int类型
+// attachments, //上传的附件id数组
+// memo: {
+// //帖子的相关内容
+// subject: values.subject, // 帖子的标题 （必填）
+// content, //帖子的内容 （必填）
+// tag_id: values.tag_id, //帖子的标签，1为交流，2为求助（必填）
+// is_original: values.is_original, //是否原创，默认为true，（必填）
+// reprint_link: values.reprint_link, //转载链接，仅当is_original为false时，出现
+// }
+function New(props, ref) {
+ const {
+ form: { getFieldDecorator, validateFields, setFieldsValue },
+ } = props;
+ const [parentPlate, setParentPlate] = useState(undefined); //父版块
+ const [childPlate, setChildPlate] = useState(undefined); //子版块
+ const [content, setContent] = useState(""); //内容
+ const [ImgInfo, setImgInfo] = useState(undefined); //封面图信息
+ const [attachments, setAttachments] = useState(undefined); //上传附件的id数组
+ const [spinning, setSpining] = useState(false);
+
+ const [ fileList ,setFileList ] = useState(undefined);
+
+ const [ originalType , setOriginalType ] = useState(2);
+
+ let forumId = props.match.params.forumId;
+
+ useEffect(() => {
+ setFieldsValue({
+ tag_id: 1,
+ is_original: 2,
+ });
+ getPlate();
+ }, []);
+
+ function getDetail(plate){
+ if(forumId){
+ const url = `/v1/memos/${forumId}/edit.json`;
+ axios.get(url).then(result=>{
+ if(result){
+ setContent(result.data.content);
+
+ let forum_id = result.data.forum_section && result.data.forum_section.forum_id;
+ let child = plate && plate.filter((item) => item.id === forum_id);
+ let memo_original = result.data.is_original ? 1 : 2
+ setChildPlate(child && child.length>0 && child[0].children_tags);
+ setOriginalType(memo_original)
+ setFieldsValue({
+ ...result.data,
+ forum_id,
+ tag_id: result.data.tag_id,
+ children_forum_id:result.data.forum_section_id,
+ is_original: memo_original
+ });
+ let attachments_url = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
+ return({
+ title:item.title,
+ ...item
+ })
+ });
+ let array = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
+ return item.id
+ })
+ setAttachments(array);
+ setFileList(attachments_url);
+ setImgInfo(result.data.memo_image_info);
+ }
+ }).catch(error=>{
+ console.log(error);
+ })
+ }
+ }
+
+ // 获取所有版块
+ function getPlate() {
+ setSpining(true);
+
+ const url = `/v1/forum_sections.json`;
+ axios.get(url)
+ .then((result) => {
+ if (result && result.data) {
+ setParentPlate(result.data.forum_sections);
+ setFieldsValue({
+ forum_id: 0,
+ });
+ if(forumId){
+ getDetail(result.data.forum_sections);
+ }
+ setSpining(false);
+
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+ // 切换主题版块
+ function changeParent(e) {
+ let child = parentPlate.filter((item) => item.id === e);
+ if (child && child.length === 1) {
+ setChildPlate(child[0].children_tags);
+ setFieldsValue({
+ children_forum_id:
+ child[0].children_tags && child[0].children_tags.length > 0
+ ? child[0].children_tags[0].id
+ : "",
+ });
+ } else {
+ setChildPlate(undefined);
+ setFieldsValue({
+ children_forum_id: "",
+ });
+ }
+ }
+
+ const helper = useCallback(
+ (label, name, rules, widget, isRequired) => (
+
+
+ { forumId ? "编辑" : "新建"}
+
+
+ + 主题板块 +
+
+ {helper(
+ "",
+ "forum_id",
+ [{ required: true, message: "请选择主题板块" }],
+
+ )}
+ {helper(
+ "",
+ "children_forum_id",
+ [],
+
+ )}
+
+
+
+
+ { forumId ? "保存" : "提交"}
+
+
+
+ );
+}
+export default Form.create()(forwardRef(New));
diff --git a/src/forums/Nodata.js b/src/forums/Nodata.js
new file mode 100644
index 000000000..1e09608f8
--- /dev/null
+++ b/src/forums/Nodata.js
@@ -0,0 +1,18 @@
+import React , { Component } from 'react';
+
+import nodata from './image/nodata.png';
+
+class Nodata extends Component{
+ render(){
+ const { _html } = this.props;
+ return(
+
+
+ )
+ }
+}
+export default Nodata;
\ No newline at end of file
diff --git a/src/forums/Theme.js b/src/forums/Theme.js
new file mode 100644
index 000000000..aa47a549e
--- /dev/null
+++ b/src/forums/Theme.js
@@ -0,0 +1,156 @@
+//主题页
+import React, { useState, useEffect } from "react";
+import { Breadcrumb, Menu, Spin } from "antd";
+import { Link } from "react-router-dom";
+import ListSearch from './Component/ListSearch';
+import { Box, Long, Short, Gap, WhiteBack, LeftLine, FlexAJ, AlignCenter } from './css/layout';
+import axios from 'axios';
+import Tops from './Component/Top';
+import ListItem from './Component/ListItem';
+import Paginations from './Component/Paginations';
+import ThemeRight from './ThemeRight';
+import Nodata from './Nodata';
+import './css/Theme.scss';
+
+function theme(props) {
+ const [ operation , setOperation ]= useState(undefined);
+ const [menuKey, setMenuKey] = useState("all");//tab
+ const [search, setSearch] = useState(undefined);//搜索内容
+ const [listSpin, setListSpin] = useState(true);
+ const [sort, setSort] = useState("published_at");//排序
+ const [pageSize, setPageSize] = useState(0);//每页条数
+ const [page, setPage] = useState(1);
+ const [total, setTotal] = useState(0);
+ const [memos, setMemos] = useState(undefined);//帖子列表
+ const [ breadCrumb , setBreadCrumb ] = useState(undefined);
+ const [ headData , setHeadData] = useState(undefined);// 头部信息
+
+ let plateMainId = props.match.params.plateMainId;
+ let current_user = props.current_user;
+
+ // 获取列表
+ useEffect(() => {
+ if (plateMainId) {
+ InitList();
+ }
+ }, [plateMainId, page, search, menuKey, sort])
+
+ async function InitList() {
+ setListSpin(true);
+ const url = `/v1/memos/forum_memos/${plateMainId}.json`;
+ axios.get(url, {
+ params: {
+ page, search, sort, select_type: menuKey
+ }
+ }).then(result => {
+ if (result) {
+ setMemos(result.data.memos);
+ setTotal(result.data.memos_count);
+ setListSpin(false);
+ setPageSize(result.data.limit);
+ }
+ }).catch(error => {
+ console.log(error);
+ })
+ }
+
+ useEffect(()=>{
+ async function getTopInfo(){
+ const url = `/v1/memos/forum_memos_head/${plateMainId}.json`;
+ axios.get(url).then(result=>{
+ if(result && result.data){
+ setBreadCrumb(result.data.bread_crumb.forum_tag);
+ setHeadData(result.data);
+ filterUsers(current_user,result.data.forum_moders,result.data.forum_section_user);
+ }
+ }).catch(error=>{
+ console.log(error);
+ })
+ }
+ if(plateMainId && current_user) getTopInfo();
+ },[plateMainId, current_user])
+
+ let pathname = props.location.pathname;
+ useEffect(() => {
+ if (pathname) {
+ if (pathname === "/forums/involvedTopics") {
+ setMenuKey("my_topics");
+ } else if (pathname === "/forums/topic") {
+ setMenuKey("my_memos");
+ } else if (pathname === "/forums/recommend") {
+ setMenuKey("is_fine");
+ } else {
+ setMenuKey("all");
+ }
+ }
+ }, [pathname])
+ // 判断当前用户是否是版主或者管理员
+ function filterUsers(currentUser,moders,users){
+ if(currentUser){
+ let admin = moders && moders.filter(item=>item.user_login === current_user.login);//管理员
+ let creater = users && users.user_login === current_user.login;//版主
+ setOperation((admin && admin.length>0)|| creater);
+ }
+ }
+ // 搜索
+ function onSearch(e) {
+ setSearch(e);
+ }
+ // 翻页
+ function changePage(page) {
+ setPage(page);
+ }
+
+ function changeMenu(e) {
+ setMenuKey(e.key);
+ }
+ return (
+
+ 
+
+ {_html}
+
+
+ 论坛交流
+ { breadCrumb && breadCrumb.title ? {breadCrumb.title} :"" }
+ { breadCrumb && breadCrumb.children_bread_crumb ?{breadCrumb.children_bread_crumb && breadCrumb.children_bread_crumb.title} :""}
+
+
+
+
+
+
+
+
+ setSort("published_at")} className={sort === "published_at" ? "green cPointer" : "cPointer"}>最新
+ setSort("replies_count")} className={sort === "published_at" ? "cPointer" : "green cPointer"} style={{ fontSize: '14px' }}>最热
+
+
+
+ {
+ memos && memos.length > 0 ?
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+} export default theme
\ No newline at end of file
diff --git a/src/forums/ThemeRight.jsx b/src/forums/ThemeRight.jsx
new file mode 100644
index 000000000..4028baf75
--- /dev/null
+++ b/src/forums/ThemeRight.jsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import AuthorItem from './Component/AuthorItem';
+import BestModalItem from './Component/BestModalItem';
+import Announcement from './Component/Announcement';
+
+export default (({ plateId , operation })=> {
+ const [content, setContent] = useState(undefined);//公告
+ const [ recommand , setRecommand ]= useState(undefined);//推荐版块
+ const [ author , setAuthor ]= useState(undefined);//推荐作者
+
+ useEffect(()=>{
+ async function Init(){
+ const url = `/v1/memos/forum_memos_right/${plateId}.json`;
+ axios.get(url).then(result=>{
+ if(result){
+ setContent({notice:result.data.notice,login:result.data.user_login,name:result.data.username});
+ setRecommand(result.data.recommend_forum_sections);
+ setAuthor(result.data.active_users);
+ }
+ }).catch(error=>{
+ console.log(error);
+ })
+ }
+ if(plateId){
+ Init();
+ }
+ },[plateId])
+
+ return (
+
+
+
+ :
+
+
+
+ }
+ {
+ author && author.length > 0 &&
+
+
+
+ }
+ {
+ recommand && recommand.length > 0 &&
+
+
+
+ }
+
+
+ );
+}
+export default children_journals;
diff --git a/src/forums/new_comments/comment.scss b/src/forums/new_comments/comment.scss
new file mode 100644
index 000000000..a092c3fd9
--- /dev/null
+++ b/src/forums/new_comments/comment.scss
@@ -0,0 +1,59 @@
+.comments-lists{
+ padding: 10px 30px 15px 30px;
+ .ant-list-item{padding: 16px 20px !important;}
+ .new-comment-head{
+ background-color: #fafafa;
+ }
+ .user-image{
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ }
+ .add_reply_button{
+ background-color: #fff!important;
+ color: #bbb;
+ width: 100%;
+ text-align: left;
+ border: 1px solid #eee;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+}
+.grid-item{
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ align-items: center;
+}
+.grid-item-3{
+ display: grid;
+ grid-template-columns: max-content max-content 1fr;
+ align-items: center;
+}
+.grid-item-left{
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ align-items: center;
+}
+.ver-middle{vertical-align: middle;}
+.grid-item-top {
+ display: grid;
+ align-items: center;
+ grid-template-columns: max-content 1fr;
+ align-items: flex-start;
+}
+.pd20{padding: 20px;}
+.width100{width: 100%;}
+.color-grey-8{color: #888;}
+.children-memo-item{
+ // padding: 0 20px ;
+ background-color: #fafafa;
+ // margin-left: 40px;
+ margin-top: 10px;
+}
+.color-green{
+ color: #21B350;
+}
+.user-is-star{
+ background-color: #21B350 !important;
+ color: #fff !important;
+}
diff --git a/src/forums/new_comments/comment_list.js b/src/forums/new_comments/comment_list.js
new file mode 100644
index 000000000..b0354306b
--- /dev/null
+++ b/src/forums/new_comments/comment_list.js
@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from "react";
+import RenderHtml from "../../components/render-html";
+import { Popconfirm, Button, message } from "antd";
+import { Link } from "react-router-dom";
+import NewComment from "./new_comment";
+import { getUrl } from "educoder";
+import axios from "axios";
+import ChildrenJournals from "./children_journals";
+function comment_list({
+ item,
+ user_image,
+ current_login,
+ is_children,
+ target_type,
+ commet_destroy,
+}) {
+ const [is_reply, setIsReply] = useState(false);
+ const [is_delete, setIsDelete] = useState(false);
+ const [deleteSpin, setDeleteSpin] = useState(false);
+ const [subComments, setSubComments] = useState([]);
+ const [subCommentsCount, setSubCommentsCount] = useState(0);
+ const [page, setChangePage] = useState(1);
+ const [is_praise, setIsPraise] = useState(false);
+ const [praisesCont, setPraisesCount] = useState(0);
+ const [isSpin, setIsSpin] = useState(false);
+ const [limit, setLimit] = useState(5);
+ useEffect(() => {
+ setSubComments(item.children);
+ if (item.children) {
+ setSubCommentsCount(item.children.length);
+ }else{
+ setSubCommentsCount(0);
+ }
+ setIsPraise(item.user_praise);
+ setPraisesCount(item.praise_count);
+ }, [item]);
+ const is_reply_click = (reply_boolean) => {
+ if (current_login) {
+ setIsReply(reply_boolean);
+ } else {
+ window.open("/login", "_blank");
+ }
+ };
+
+ const praise_reply = (id) => {
+ if (current_login) {
+ axios
+ .post(`/v1/discusses/${id}/plus.json`, {
+ container_type: "Memo",
+ id: id,
+ type: is_praise ? 0 : 1,
+ })
+ .then((result) => {
+ setPraisesCount(result.data.praise_count);
+ setIsPraise(!is_praise);
+ message.success(is_praise ? "取消点赞" : "已点赞")
+ })
+ .catch((error) => {
+ message.error(error);
+ });
+ } else {
+ window.open("/login", "_blank");
+ }
+ };
+
+ function deleteorder(id) {
+ setDeleteSpin(true);
+ let url = `/v1/memos/${id}/destroy.json`;
+ axios
+ .post(url)
+ .then((result) => {
+ if (result) {
+ if (result.data.status === 0) {
+ setIsDelete(true);
+ if (is_children) {
+ setSubCommentsCount(subCommentsCount - 1);
+ } else {
+ commet_destroy();
+ }
+ message.success(result.data.message);
+ } else {
+ message.error(result.data.message);
+ }
+ }
+ setDeleteSpin(false);
+ })
+ .catch((e) => {
+ setDeleteSpin(false);
+ message.error(e);
+ });
+ }
+ const create_new_children = (reply) => {
+ if (subComments && subComments.length > 0) {
+ setSubComments([reply, ...subComments]);
+ } else {
+ setSubComments([reply]);
+ }
+ setSubCommentsCount(subCommentsCount + 1);
+ setIsReply(false);
+ };
+
+ function get_more_reply(id) {
+ let new_page = page;
+ if (subCommentsCount < limit) {
+ setChangePage(1);
+ new_page = 1;
+ } else {
+ new_page = page + 1;
+ setChangePage(new_page);
+ }
+ setIsSpin(true);
+ let url = `/v1/${target_type}/${id}/more_reply.json`;
+ axios
+ .get(url, {
+ params: { page: new_page, limit },
+ })
+ .then((result) => {
+ if (result && result.data.memo_replies) {
+ setSubComments(subComments.concat(result.data.memo_replies));
+ }
+ setIsSpin(false);
+ })
+ .catch((e) => {
+ setIsSpin(false);
+ message.error(e);
+ });
+ }
+
+ return (
+ - (
+
+ {is_delete ? (
+
+ );
+}
+export default comment_list;
diff --git a/src/forums/new_comments/comments.js b/src/forums/new_comments/comments.js
new file mode 100644
index 000000000..d4cf6caa2
--- /dev/null
+++ b/src/forums/new_comments/comments.js
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from "react";
+
+import axios from "axios";
+
+import { List, Pagination, message, Spin } from "antd";
+
+import Title from "./Title";
+import NewComment from "./new_comment";
+import CommentList from "./comment_list";
+import ClickReply from "./head_reply_button";
+import "./comment.scss";
+
+function comments({
+ target_id,
+ target_type,
+ current_user_image,
+ current_login,
+}) {
+ const [currentImage, setCurrentImage] = useState(null);
+ const [replies, setReplies] = useState([]);
+ const [replies_count, setRepliesCount] = useState(0);
+
+ const [isSpin, setIsSpin] = useState(false);
+ const [page, setListPage] = useState(1);
+ const [limit, setLimitType] = useState(10);
+ const [isClick, setIsClick] = useState(false);
+ useEffect(() => {
+ async function init() {
+ setIsSpin(true);
+ let url = `/v1/${target_type}/${target_id}/more_reply.json`;
+ axios
+ .get(url, {
+ params: { page, limit },
+ })
+ .then((result) => {
+ if (result && result.data.memo_replies) {
+ setReplies(result.data.memo_replies);
+ setRepliesCount(result.data.memos_count);
+ }
+ setIsSpin(false);
+ })
+ .catch((e) => {
+ setIsSpin(false);
+ message.error(e);
+ });
+ }
+ init();
+ }, [page, target_id]);
+
+ useEffect(() => {
+ if (current_user_image) {
+ setCurrentImage(current_user_image);
+ } else {
+ setCurrentImage("/images/avatars/User/boy.jpg");
+ }
+ }, []);
+ // 翻页
+ function changePage(page) {
+ setListPage(page);
+ }
+
+ const click_reply = (reply_boolean) => {
+ if(current_login){
+ setIsClick(reply_boolean);
+ }else{
+ window.open("/login", "_blank")
+ }
+ };
+
+ const create_new_reply = (reply) => {
+ let new_memos_count = replies_count + 1
+ setRepliesCount(new_memos_count)
+ setReplies([reply, ...replies]);
+ setIsClick(false);
+ };
+
+ const success_delete_reply = (reply) => {
+ let new_memos_count = replies_count - 1
+ setRepliesCount(new_memos_count)
+ };
+
+ return (
+ 已删除
+ ) : (
+
+
+ )}
+
+
+ })
+
+
+ {item && item.username}
+
+
+
+ {item.content && (
+
+
+ {item.time}
+
+ {is_reply && !is_children && (
+
+ {item.admin || current_login === item.user_login ? (
+ deleteorder(item.id)}
+ >
+
+
+ ) : (
+ ""
+ )}
+ {!is_children && (
+
+ )}
+ {!is_children && (
+
+ )}
+
+
+
+
+ )}
+
+
+ <span className="greenLiftLine">
+ 评论
+ {replies_count > 0 && (
+ <span className="tip_tag">{replies_count}</span>
+ )}
+ </span>
+
+
+
+
+
+ );
+}
+
+export default comments;
diff --git a/src/forums/new_comments/head_reply_button.js b/src/forums/new_comments/head_reply_button.js
new file mode 100644
index 000000000..46b36d510
--- /dev/null
+++ b/src/forums/new_comments/head_reply_button.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Button } from "antd";
+import { getUrl } from "educoder";
+function reply_click({ user_image, click_button }) {
+ const click_reply_to = () =>{
+ click_button(true)
+ }
+ return (
+
+ {isClick ? (
+
+ - (
+
+
+ )}
+
+ })
+
+
+
+
+ );
+}
+export default reply_click;
diff --git a/src/forums/new_comments/new_comment.js b/src/forums/new_comments/new_comment.js
new file mode 100644
index 000000000..2021791b0
--- /dev/null
+++ b/src/forums/new_comments/new_comment.js
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import { getUrl } from "educoder";
+import { Button, message } from "antd";
+import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
+import axios from "axios";
+function new_comment({ memo_id, user_image, click_button, new_reply }) {
+ const [journal_spin, setJournalSpin] = useState(false);
+ const [content, setContent] = useState("");
+
+ function change_input(value) {
+ setContent(value);
+ }
+
+ function add_reply() {
+ setJournalSpin(true);
+ let url = `/v1/memos/${memo_id}/reply.json`;
+ axios
+ .post(url, {parent_id: memo_id, content: content})
+ .then((result) => {
+ if (result) {
+ if (result.data.status === 0) {
+ new_reply(result.data.reply)
+ } else {
+ message.error(result.data.message);
+ }
+ }
+ setJournalSpin(false);
+ })
+ .catch((e) => {
+ setJournalSpin(false);
+ message.error(e);
+ });
+ }
+ function click_reply_cancel() {
+ click_button(false);
+ }
+
+ return (
+
+
+
+ );
+}
+export default new_comment;
diff --git a/src/modules/tpm/TPMIndex.css b/src/modules/tpm/TPMIndex.css
index 8ee4561dd..094e41f0f 100644
--- a/src/modules/tpm/TPMIndex.css
+++ b/src/modules/tpm/TPMIndex.css
@@ -95,7 +95,7 @@ body>.-task-title {
}
.newContainer {
- background: #EAEBEC !important;
+ background: #f5f5f5;
}
.ant-modal-title {
diff --git a/src/user_info/Index.jsx b/src/user_info/Index.jsx
new file mode 100644
index 000000000..c4ffa2468
--- /dev/null
+++ b/src/user_info/Index.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
+import { SnackbarHOC } from "educoder";
+import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
+import { Route, Switch } from "react-router-dom";
+import Loading from "../Loading";
+import Loadable from "react-loadable";
+import UserInfo from "./User/Account";
+import { MainContent, MinH400 } from "./css/projects";
+import '../forums/css/All.scss';
+import '../forums/css/Index.css';
+
+const Projects = Loadable({
+ loader: () => import("./User/Projects"),
+ loading: Loading,
+});
+
+const Memos = Loadable({
+ loader: () => import("./Memo/Memos"),
+ loading: Loading,
+});
+
+const Sections = Loadable({
+ loader: () => import("./Memo/Sections"),
+ loading: Loading,
+});
+
+const Blocks = Loadable({
+ loader: () => import("./User/BlockUsers"),
+ loading: Loading,
+});
+
+function Index(props) {
+ return (
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index)));
diff --git a/src/user_info/Memo/Memos.js b/src/user_info/Memo/Memos.js
new file mode 100644
index 000000000..7e04731b8
--- /dev/null
+++ b/src/user_info/Memo/Memos.js
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { PagenationDiv } from "../css/projects";
+import { Spin, Empty, Pagination } from "antd";
+import ForumSections from "./SelectTitle";
+import { SelectSection } from "../css/layout";
+import ListItem from "../../forums/Component/ListItem";
+import RepliesMemos from "./Replies";
+
+function memos(props) {
+ const user_login = props.match.params.login;
+ const [is_current_uesr, setIsCurrentUser] = useState(false);
+ const [memos, getMemos] = useState([]);
+ const [memosSize, setMemosSize] = useState(0);
+ const [page, setListPage] = useState(1);
+ const [memo_type, setMemoType] = useState(null);
+ const [limit, setLimitType] = useState(15);
+ const [isSpin, setSpinType] = useState(false);
+ const [common_select, setCommonSelect] = useState(null);
+ useEffect(() => {
+ let memos_type = props.location.pathname.split("/")
+ setMemoType(memos_type.pop());
+ }, [props.location]);
+
+ useEffect(() => {
+ if(memo_type){
+ init();
+ }
+ }, [memo_type, common_select, page]);
+
+ async function init() {
+ setSpinType(true);
+
+ let url = `/v1/my_memos/${user_login}/memos.json`;
+ axios.get(url, {
+ params: {
+ ...common_select,
+ limit,
+ memo_type,
+ page,
+ },
+ }).then((result) => {
+ if (result) {
+ getMemos(result.data.memos);
+ setMemosSize(result.data.memos_count);
+ setIsCurrentUser(result.data.is_current_user);
+ }
+ setSpinType(false);
+ })
+ .catch((e) => {
+ setSpinType(false);
+ console.log(e);
+ });
+ }
+
+ function select_memos(target_params) {
+ setCommonSelect(target_params);
+ }
+ const handleChangePage = (page) => {
+ setListPage(page);
+ };
+
+ return (
+
+ {is_current_uesr && (
+
+
+ {memos && memos.length > 0 ? (
+
+
+ {memosSize > limit && (
+
+
+ )}
+
+ );
+}
+export default memos;
diff --git a/src/user_info/Memo/Replies.js b/src/user_info/Memo/Replies.js
new file mode 100644
index 000000000..1d6e093c9
--- /dev/null
+++ b/src/user_info/Memo/Replies.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { FlexAJ, AlignCenter } from "../../forums/css/layout";
+import "./select_title.scss";
+import Drop from "../../forums/Component/ItemDropDown";
+import { Link } from "react-router-dom";
+function replies_memos({ memos }) {
+ return (
+
+
+ )}
+ 共{memosSize}个帖子
+
+ {memo_type === "replies" ?
+
+ ) : (
+ -
+ {memos.map((item, key) => {
+ return (
+
-
+
+ + ++ 评论文章： + {item.subject} + ++ + {item && item.new_reply && ( + +++ )} + 查看 +{item.new_reply.content}++ {item.new_reply.published_time} ++
+ );
+ })}
+
+
+
+ )
+
+}
\ No newline at end of file
diff --git a/src/user_info/Memo/SectionItem.js b/src/user_info/Memo/SectionItem.js
new file mode 100644
index 000000000..315d4722e
--- /dev/null
+++ b/src/user_info/Memo/SectionItem.js
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { Card, Col, Button, message } from "antd";
+import "../User/user.scss";
+import axios from "axios";
+function section_item({ forum_section, key }) {
+ const [isStar, setIsStar] = useState(true)
+ const [isLoading, setIsLoading] = useState(false)
+
+ function rendomColor() {
+ let r_a = Math.floor(Math.random() * 255);
+ let r_g = Math.floor(Math.random() * 255);
+ let r_b = Math.floor(Math.random() * 255);
+ let radom_color = "rgba(" + r_a + "," + r_g + "," + r_b + ",0.8)";
+ return radom_color;
+ }
+
+ function handleClick(){
+ setIsLoading(true);
+ let url = `/v1/memos/forum_memos/${forum_section.id}/is_watch.json`;
+ axios.post(url, {
+ is_watch: isStar ? 0 : 1
+ })
+ .then((result) => {
+ if(result.data.status === 0){
+ message.success(result.data.message);
+ setIsStar(!isStar)
+ }else{
+ message.error(result.data.message);
+ }
+ setIsLoading(false);
+ })
+ .catch((e) => {
+ setIsLoading(false);
+ console.log(e);
+ });
+ }
+ return (
+
+
+ {forum_section.title}
+
+ {forum_section.memos_count}个话题
+
+
+
+ {forum_sections && forum_sections.length > 0 ? (
+
+ {forum_sections.map((item, key) => {
+ return
+ ) : (
+
+ {sectionsSize > limit && (
+
+
+ )}
+
+ );
+}
+export default sections;
diff --git a/src/user_info/Memo/SelectTitle.js b/src/user_info/Memo/SelectTitle.js
new file mode 100644
index 000000000..35c8675ef
--- /dev/null
+++ b/src/user_info/Memo/SelectTitle.js
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Cascader,DatePicker, Button } from "antd";
+import "./select_title.scss";
+import { SelectSection, GridItem2 } from "../css/layout";
+
+const SectionOptions = [
+ {
+ title: "待审查的话题",
+ id: "hidden",
+ },
+ {
+ title: "已发布的话题",
+ id: "show",
+ },
+];
+
+const InputSize = "large"
+function select_title({section_params, select_memos}) {
+ const [isLoading, setLoadingType] = useState(false);
+ const [forumSections, setSectionsType] = useState([]);
+ const [sectionParams, setSectionParams] = useState([]);
+ useEffect(() => {
+ async function init() {
+ setLoadingType(true);
+ let url = `/v1/forum_sections/select_sections.json`;
+ axios
+ .get(url)
+ .then((result) => {
+ if (result) {
+ setSectionsType(result.data);
+ }
+ setLoadingType(false);
+ })
+ .catch((e) => {
+ setLoadingType(false);
+ console.log(e);
+ });
+ }
+ init();
+ }, []);
+
+ function onChange(value, selectedOptions) {
+ let new_section_params = {...sectionParams, forum_section_id: value[value.length-1]}
+ setSectionParams(new_section_params)
+ select_memos(new_section_params)
+ }
+
+ function isHiddenChange(value, selectedOptions) {
+ let new_section_params = {...sectionParams, is_hidden: value[0]}
+ setSectionParams(new_section_params)
+ select_memos(new_section_params)
+ }
+
+ function selectBeginTime(date,dateString) {
+ setSectionParams({...sectionParams, start_time: dateString})
+ }
+
+ function selectEndTime(date,dateString) {
+ setSectionParams({...sectionParams, end_time: dateString})
+ }
+
+ function SectionSearch(){
+ select_memos(sectionParams)
+ }
+
+ function filter(inputValue, path) {
+ return path.some(
+ (option) =>
+ option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default select_title;
diff --git a/src/user_info/Memo/select_title.scss b/src/user_info/Memo/select_title.scss
new file mode 100644
index 000000000..720416d02
--- /dev/null
+++ b/src/user_info/Memo/select_title.scss
@@ -0,0 +1,27 @@
+.d-inline-block{display: inline-block;}
+.section-cascader{
+ width: 120px;
+
+}
+.ant-cascader-menu{
+ min-height: 20px;
+ max-height: 180px;
+ height: auto;
+}
+.forumList{
+ padding:0px 30px;
+}
+.forumList > li{
+ border-bottom: 1px solid #eee;
+ padding:15px 0px;
+}
+.forumList > li:last-child{
+ border-bottom: none;
+}
+.color-gray-8{color: #888;}
+.reply-link{
+ padding: 2px 16px;
+ color: #21B350 !important;
+ border: 1px solid #21B350;
+ border-radius: 20px;
+}
\ No newline at end of file
diff --git a/src/user_info/Modal/modal.scss b/src/user_info/Modal/modal.scss
new file mode 100644
index 000000000..7795594d8
--- /dev/null
+++ b/src/user_info/Modal/modal.scss
@@ -0,0 +1,18 @@
+.fs16{font-size: 16px;}
+.lineH2{line-height: 2;}
+
+.tips-modal-confirm{
+ .ant-modal-body{
+ width: 100%;
+ color: #333333;
+ height: 180px;
+ display: table-cell;
+ vertical-align: middle;
+ .modal-content-padding{
+ padding: 10px 25px;
+ }
+ }
+}
+.tips-modal {
+ .ant-modal-footer{border-top: none !important}
+}
\ No newline at end of file
diff --git a/src/user_info/Modal/tip_modal.js b/src/user_info/Modal/tip_modal.js
new file mode 100644
index 000000000..4629d8156
--- /dev/null
+++ b/src/user_info/Modal/tip_modal.js
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Modal, Button } from "antd";
+import "./modal.scss";
+function tip_modal({ data, okClick, cancelClick }) {
+ const [isShow, setShowModal] = useState(false);
+ useEffect(() => {
+ setShowModal(true);
+ });
+ const ok_click = () => {
+ setShowModal(false);
+ okClick(data.modal_type);
+ };
+ const cancel_click = () => {
+ setShowModal(false);
+ cancelClick(false);
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+ {data &&
+ (data.modal_type === "confirm" ? (
+ cancel_click()}
+ footer={[
+
+ ) : (
+ ok_click()}
+ onCancel={() => cancel_click()}
+ okText="确认"
+ cancelText="取消"
+ wrapClassName="tips-modal-confirm"
+ >
+
+ ))}
+
+ );
+}
+export default tip_modal;
diff --git a/src/user_info/User/Account.js b/src/user_info/User/Account.js
new file mode 100644
index 000000000..4c163186c
--- /dev/null
+++ b/src/user_info/User/Account.js
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import HeadUser from "./HeadUser";
+import { MainUser, HeadImage, HeadCon } from "../css/layout.jsx";
+import { Spin } from "antd";
+import UserMenu from "./Menu";
+import "../css/layout.scss"
+function account(props) {
+ const [UserInfo, setUserInfo] = useState(null); //用户的内容
+ const [isSpin, setSpin] = useState(false); //用户的内容
+ const user_login = props.match.params.login;
+ useEffect(() => {
+ async function init(login) {
+ setSpin(true);
+ let url = `/v1/users/${login}/user_info.json`;
+ axios
+ .get(url)
+ .then((result) => {
+ if (result) {
+ setUserInfo(result.data.user);
+ }
+ setSpin(false);
+ })
+ .catch((e) => {
+ setSpin(false);
+ console.log(e);
+ });
+ }
+ if (user_login) {
+ init(user_login);
+ }
+ }, []);
+
+ return (
+
+
+
,
+ ]}
+ >
+
+
+ {data.content}
+
+ {data.head && (
+
+
+ {data.head}
+
+ )}
+ {data.content && {data.content}
}
+
+
+ {item.username}
+
+
+
+ {item.brief ? item.brief : "这家伙太懒了，还未填写个人描述！"}
+
+
+ {/*
+
+
*/}
+
+
+ {users && users.length > 0 ? (
+
+ {users.map((item, key) => {
+ return
+ ) : (
+
+ {usersSize > limit && (
+
+
+ )}
+
+ );
+}
+export default block_users;
diff --git a/src/user_info/User/Blocks.js b/src/user_info/User/Blocks.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/user_info/User/HeadUser.js b/src/user_info/User/HeadUser.js
new file mode 100644
index 000000000..8e6abb811
--- /dev/null
+++ b/src/user_info/User/HeadUser.js
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Pt80, HeadTab, ShowName, DivInline } from "../css/layout.jsx";
+import UserIdentify from "./UserIdentify";
+import UserAvatar from "./UserAvatar";
+import UserBrief from "./UserBrief";
+import StarUser from "./StarUser";
+
+
+function head_user({ UserInfo }) {
+ const [fansCount, setFansCount] = useState(0)
+ const fans_count = (count) => {
+ let new_fans_count = UserInfo.fans_count + count
+ setFansCount(new_fans_count)
+ }
+ return (
+
+
+
+
+ 粉丝
+
+ {fansCount <= 0 ? UserInfo && UserInfo.fans_count : fansCount}
+
+
+ {UserInfo && (
+
+ 关注
+
+ {UserInfo && UserInfo.stars_count}
+
+
+ {UserInfo && UserInfo.username}
+
+
+ {UserInfo &&
+ );
+}
+export default head_user;
diff --git a/src/user_info/User/Menu.js b/src/user_info/User/Menu.js
new file mode 100644
index 000000000..1f7a01805
--- /dev/null
+++ b/src/user_info/User/Menu.js
@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import { Menu } from "antd";
+import "./menu.scss";
+
+function user_menu({ is_current_user, login, props }) {
+ const [defaultMenu, setDefaultMenu] = useState("p_project");
+ const handleClick = (e) => {
+ setDefaultMenu(e.key);
+ props.history.push(`/accounts/${login}/${e.key}`);
+ };
+ useEffect(() => {
+ const location_path = props.location.pathname.split("/");
+ const current_path = location_path[location_path.length - 1];
+ if (location_path.length > 3 && current_path) {
+ setDefaultMenu(current_path);
+ } else {
+ setDefaultMenu("p_project");
+ }
+ }, [props.location]);
+ const show_name = is_current_user ? "我" : "TA";
+ return (
+
+ {UserInfo && (
+
+
+
+
+ );
+}
+export default user_menu;
diff --git a/src/user_info/User/ProjectItem.js b/src/user_info/User/ProjectItem.js
new file mode 100644
index 000000000..cf01e8872
--- /dev/null
+++ b/src/user_info/User/ProjectItem.js
@@ -0,0 +1,53 @@
+import React from "react";
+import { Card, Col, Avatar, Tooltip } from "antd";
+import { getUrl } from "educoder";
+import "./user.scss";
+
+function project_item({ project, key }) {
+ const item_bottom = () => {
+ return (
+
+
+
+
+
+
+
+ {project.name}
+
+
+ {is_current_uesr && (
+
+ {projects && projects.length > 0 ? (
+
+ {projects.map((item, key) => {
+ return
+ ) : (
+
+ {projectsSize > limit && (
+
+
+ )}
+
+ );
+}
+export default user_projects;
diff --git a/src/user_info/User/StarUser.js b/src/user_info/User/StarUser.js
new file mode 100644
index 000000000..ddf3b6dea
--- /dev/null
+++ b/src/user_info/User/StarUser.js
@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from "react";
+import { Button, message} from "antd";
+import axios from "axios";
+import { DivInline } from "../css/layout.jsx";
+import "./user.scss";
+import TipModal from "../Modal/tip_modal";
+
+function star_user({
+ is_watched,
+ login,
+ current_login,
+ user_id,
+ set_fans_count,
+ is_blocked,
+ is_blocked_by,
+ user_name,
+ show_block
+}) {
+ const [isStar, setStarStatus] = useState(false);
+ const [isBlocked, setBlockStatus] = useState(false);
+ const [showModal, setModalStatus] = useState(false);
+ const [isLoading, setLoadinStatus] = useState(false);
+ const [isBlockLoading, setBlockLoadingStatus] = useState(false);
+ const [modalData, setDataModal] = useState({});
+ useEffect(() => {
+ if (is_watched) {
+ setStarStatus(is_watched);
+ }
+ if (is_blocked) {
+ setBlockStatus(is_blocked);
+ }
+ },[is_blocked, is_watched]);
+ const to_star = (star_type) => {
+ if(current_login){
+ setLoadinStatus(true);
+ let url = `/v1/users/${login}/watch_user.json`;
+ if (is_blocked_by) {
+ setModalStatus(true)
+ setLoadinStatus(false);
+ setDataModal({
+ title: "提示",
+ modal_type: "confirm",
+ head: null,
+ content: "对方已将你加入黑名单，你不能关注对方。"
+ });
+ } else {
+ axios
+ .post(url, { watch: star_type, login: login })
+ .then((result) => {
+ if (result && result.data.status >= 0) {
+ message.success(result.data.message);
+ setStarStatus(!isStar);
+ if (star_type === "watch") {
+ set_fans_count(1);
+ } else {
+ set_fans_count(-1);
+ }
+ } else {
+ message.error(result.data.message);
+ }
+ setLoadinStatus(false);
+ })
+ .catch((e) => {
+ setLoadinStatus(false);
+ console.log(e);
+ });
+ }
+ }else{
+ window.open("/login", "_blank")
+ }
+
+ };
+ const to_block = (block_type) => {
+ setModalStatus(false);
+ setBlockLoadingStatus(true);
+ let url = `/v1/users/${login}/block_user.json`;
+ axios
+ .post(url, { block: block_type })
+ .then((result) => {
+ if (result && result.data.status >= 0) {
+ message.success(result.data.message);
+ setBlockStatus(!isBlocked);
+ if (block_type === "block" && isStar) {
+ //如果是已关注的状态，则取消关注状态
+ setStarStatus(false);
+ set_fans_count(-1);
+ }
+ } else {
+ message.error(result.data.message);
+ }
+ setBlockLoadingStatus(false);
+ })
+ .catch((e) => {
+ setBlockLoadingStatus(false);
+ console.log(e);
+ });
+ };
+ const confirm_block = () => {
+
+ if (isBlocked) {
+ setDataModal({
+ title: "移出黑名单",
+ modal_type: "cancel",
+ head: null,
+ content: "移出黑名单后，对方可以关注你，向你发私信，评论你的帖子。"
+ });
+ } else {
+ setDataModal({
+ title: "加入黑名单",
+ modal_type: "block",
+ head: `确定要将${user_name}加入黑名单？`,
+ content:
+ " 加入黑名单后，已有关注关系将被解除，对方不能再关注你，向你发私信，评论你的帖子等。但仍可以查看你的公开信息。"
+ });
+ }
+ setModalStatus(true);
+ };
+ const cancel_click = () => {
+ setModalStatus(false)
+ setBlockLoadingStatus(false)
+ }
+ return (
+
+
+
+ )}
+
+ 共{projectsSize}个项目
+
+
+
+
+
+ {show_block && current_login && }
+
+
+ {showModal && (
+
+ {!isEdit && (
+
+ );
+}
+export default user_brief;
diff --git a/src/user_info/User/UserIdentify.js b/src/user_info/User/UserIdentify.js
new file mode 100644
index 000000000..b90f0d071
--- /dev/null
+++ b/src/user_info/User/UserIdentify.js
@@ -0,0 +1,109 @@
+import React from "react";
+import { Tooltip } from "antd";
+import { getImageUrl } from "educoder";
+import {
+ DivInline,
+ GridItem5,
+ IdentifyName,
+ IdentifyA,
+} from "../css/layout.jsx";
+function user_identify({ user_info }) {
+ const identityImage = getImageUrl(
+ "images/educoder/icon/auto-identityed.svg"
+ );
+ const identityIng = getImageUrl("images/educoder/icon/auto-identity.svg");
+ const autoPosted = getImageUrl("images/educoder/icon/auto-posted.svg");
+ const autoPost = getImageUrl("images/educoder/icon/auto-post.svg");
+ const autoPhone = getImageUrl("images/educoder/icon/auto-phone.svg");
+ const autoPhoned = getImageUrl("images/educoder/icon/auto-phoneed.svg");
+ const autoMailed = getImageUrl("images/educoder/icon/auto-emailed.svg");
+ const autoMail = getImageUrl("images/educoder/icon/auto-email.svg");
+
+ return (
+
+ {editBrief
+ ? editBrief
+ : brief
+ ? brief
+ : "这家伙很懒，什么都没留下~"}
+ {is_current_user && (
+ setEditStatus(true)}>
+
+ )}
+ {isEdit && (
+
+ )}
+
+
+
+ {user_info.identify && user_info.identify !== "学生" && (
+ {user_info.identify}
+ )}
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+ );
+}
+
+export default user_identify;
diff --git a/src/user_info/User/menu.scss b/src/user_info/User/menu.scss
new file mode 100644
index 000000000..10472bc30
--- /dev/null
+++ b/src/user_info/User/menu.scss
@@ -0,0 +1,45 @@
+.user-menu, .user-submenu {
+ .ant-menu-horizontal {
+ border-bottom: none !important;
+ padding: 15px !important;
+ text-align: left !important;
+ }
+ .ant-menu-item{
+ border-bottom: none !important;
+ font-size: 16px !important;
+ margin: 0 10px !important;
+ }
+}
+.user-menu{
+ .ant-menu-item-selected{
+ color: #21B350 !important;
+ border: 1px solid #21B350 !important;
+ border-radius: 24px;
+ &::after{
+ content: none !important
+ }
+ }
+ .ant-menu-item:hover{
+ color: #21B350 !important;
+ &::after{
+ content: '';
+ position: absolute;
+ left: 30px;
+ bottom: 0;
+ right: auto;
+ height: 2px;
+ width: 15px;
+ background-color: #21B350;
+ }
+ }
+}
+.user-submenu{
+ margin-top: 15px;
+ .ant-menu-item-selected, .ant-menu-item:hover{
+ color: #21B350 !important;
+ }
+ .ant-menu-horizontal {
+ padding: 8px 15px !important;
+ }
+}
+
diff --git a/src/user_info/User/user.scss b/src/user_info/User/user.scss
new file mode 100644
index 000000000..ca4e47b01
--- /dev/null
+++ b/src/user_info/User/user.scss
@@ -0,0 +1,192 @@
+.pt80 {
+ padding-top: 80px;
+}
+.pr {
+ position: relative;
+}
+.width120 {
+ width: 120px;
+}
+.ant-btn-success {
+ color: #fff;
+ background-color: #21b350;
+ border-color: #21b350 !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+ -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+ box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+}
+.ant-btn-success:hover {
+ color: #fff;
+ background-color: #21b350;
+ border-color: #21b350;
+ opacity: 0.8;
+}
+.ant-btn-success.ant-btn-background-ghost {
+ color: #21b350 !important;
+}
+.ant-btn-success:focus {
+ color: #fff;
+ background-color: #21b350;
+ border-color: #21b350 !important;
+}
+.fs12 {
+ font-size: 12px;
+}
+
+.black-color {
+ color: rgba(51, 51, 51, 1);
+}
+.ant-btn-background-ghost.ant-btn-danger {
+ color: #fa4a4a;
+ border-color: #fa4a4a;
+}
+.ant-btn-danger {
+ border-color: #fa4a4a;
+ background-color: #fa4a4a;
+}
+.grid-item-left {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ align-items: center;
+}
+.user-project-size {
+ padding: 16px 25px;
+}
+.text-right {
+ text-align: right;
+}
+.color-grey {
+ color: #999 !important;
+}
+.color-black {
+ color: #333;
+}
+.color-green {
+ color: #21b351 !important;
+}
+.minH300 {
+ min-height: 300px;
+}
+.pd100 {
+ padding: 100px 20px;
+}
+.project-card-item {
+ margin-bottom: 20px;
+ position: relative;
+ .project-public-tip {
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ .project-item-user {
+ text-align: center;
+ margin-top: 16px;
+ }
+ .ant-card-hoverable:hover {
+ bottom: 3px;
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
+ }
+ .project-user-school {
+ color: #999;
+ margin: 16px 0 10px 0;
+ font-size: 16px;
+ height: 32px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ .project-user-bottom {
+ color: #666 !important;
+ }
+ .ant-card {
+ padding: 16px 0;
+ }
+ .ant-card-head {
+ border-bottom: none;
+ text-align: center;
+ padding: 0 20px;
+ }
+ .ant-card-head-wrapper {
+ padding: 16px 0 0 0;
+ }
+ .ant-card-head-title {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ height: 45px;
+ white-space: initial;
+ padding: 0;
+ a {
+ font-size: 16px;
+ color: #1a0b00;
+ }
+
+ a:hover {
+ color: #21b351;
+ }
+ }
+ .publicpart {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 0;
+ height: 0;
+ border-left: 80px solid #21b351;
+ border-bottom: 80px solid transparent;
+ z-index: 1;
+ }
+ .smalltrangle {
+ display: block;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ border-left: 25px solid #fff;
+ border-bottom: 25px solid transparent;
+ z-index: 2;
+ }
+ .publicword {
+ transform: rotate(-45deg);
+ text-align: center;
+ color: #fff;
+ font-size: 14px;
+ display: block;
+ position: absolute;
+ width: 50px;
+ left: 0px;
+ z-index: 3;
+ top: 16px;
+ }
+ .ant-card-body {
+ padding: 0 24px;
+ }
+ .ant-card-actions {
+ background: #fff;
+ li {
+ margin: 16px 0 0 0;
+ }
+ }
+}
+.position-absolute {
+ position: absolute;
+}
+
+.forum-section-card{
+ .ant-card{border-radius: 8px;}
+ .intresting-forum-section{
+ text-align: center;
+ height: 166px;
+ overflow: hidden;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ justify-content: center;
+ }
+ .ant-card-body{margin-top: -16px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
+}
+.block-item-user{
+ text-align: center;
+ padding: 50px 0 40px 0;
+ width: 100%;
+ display: inline-block;
+}
\ No newline at end of file
diff --git a/src/user_info/css/head_user.jsx b/src/user_info/css/head_user.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/user_info/css/layout.jsx b/src/user_info/css/layout.jsx
new file mode 100644
index 000000000..b09e5adcd
--- /dev/null
+++ b/src/user_info/css/layout.jsx
@@ -0,0 +1,149 @@
+import styled from 'styled-components';
+import imgs from '../images/userhead.jpg';
+
+export const NewUserMain = styled.div`{
+ margin: 0 auto;
+ min-width: 1200px;
+ padding-top: 60px;
+ padding-bottom: 117px;
+}`
+
+export const SelectSection = styled.div`{
+ padding: 15px;
+ margin-top: 15px;
+ background: #fff;
+ input, button{height: 36px; line-height: 36px;}
+ input::placeholder{font-size: 14px;}
+}`
+
+export const MainUser = styled.div`{
+ width: 100%;
+ background: #fff;
+ margin-bottom: 20px;
+ position: relative;
+}`
+
+export const HeadImage = styled.div`{
+ width: 100%;
+ height: 160px;
+ background-image: url('${imgs}');
+ position: absolute;
+ width: 100%;
+ left: 0px;
+ top: 0px;
+}`
+
+export const HeadCon = styled.div`{
+ position: absolute;
+ width: 100%;
+ left: 0px;
+ top: 0px;
+ min-height: 356px;
+}`
+
+export const IdentifyA = styled.a`{
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 50%;
+ background-color: #F4FAFF;
+ margin-right: 5px;
+}`
+
+export const RelativePos = styled.div`{
+ position: relative;
+}`
+
+export const DivInline = styled.div`{
+ display: inline-block;
+ width: auto;
+ line-height: 26px;
+ font-size: 16px;
+}`
+
+export const IdentifyName = styled.span`{
+ color: #686868;
+ font-size: 14px;
+ margin-right: 10px;
+}`
+
+export const GridItem5 = styled.div`{
+ display: grid;
+ grid-template-columns: max-content max-content max-content max-content max-content;
+ align-items: center;
+}`
+
+export const GridItem2 = styled.div`{
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ align-items: center;
+}`
+export const Pt80 = styled.div`{
+ padding-top: 80px;
+}`
+
+export const ShowName = styled.span`{
+ display: block;
+ width: auto;
+ color: #05101A;
+ font-size: 24px;
+ height: 28px;
+ line-height: 28px;
+ margin-top: 5px;
+ clear: both;
+}`
+
+export const HeadPhoto = styled.div`{
+ margin-top: 14px;
+ text-align: center;
+ background: #FFFFff;
+ width: 115px;
+ height: 115px;
+ padding: 3px;
+ border-radius: 50%;
+ position: relative;
+ float: left;
+ margin-top: 19px;
+ box-sizing: border-box;
+}`
+
+export const HeadPhotoHover = styled.div`{
+ display: block;
+ cursor: pointer;
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ width: 109px;
+ height: 109px;
+ text-align: center;
+ line-height: 112px;
+ border-radius: 50%;
+ background-color: rgba(0,0,0,0.5);
+ color: #fff;
+ .upload-edit-word{
+ color: #fff !important;
+ }
+}`
+
+export const HeadTab = styled.div`{
+ width: 188px;
+ height: 60px;
+ text-align: center;
+ span {
+ color: #989898;
+ font-size: 14px;
+ };
+ a {
+ color: #fff;
+ font-size: 24px;
+ line-height: 2;
+ };
+ span, a{
+ {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+ }
+}`
\ No newline at end of file
diff --git a/src/user_info/css/layout.scss b/src/user_info/css/layout.scss
new file mode 100644
index 000000000..1fd43739a
--- /dev/null
+++ b/src/user_info/css/layout.scss
@@ -0,0 +1,3 @@
+a:hover {
+ color: #21b351;
+}
\ No newline at end of file
diff --git a/src/user_info/css/projects.jsx b/src/user_info/css/projects.jsx
new file mode 100644
index 000000000..37797aa75
--- /dev/null
+++ b/src/user_info/css/projects.jsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const MainContent = styled.div`{
+ width: 1200px;
+ margin: 0 auto;
+ zoom: 1;
+}`
+export const PagenationDiv = styled.div`{
+ text-align: center;
+ padding: 20px;
+}`
+
+export const MinH400 = styled.div`{
+ min-height: 400px;
+}`
\ No newline at end of file
diff --git a/src/user_info/images/userhead.jpg b/src/user_info/images/userhead.jpg
new file mode 100644
index 000000000..0be793deb
Binary files /dev/null and b/src/user_info/images/userhead.jpg differ