From 26e74e7ed4d0adfb6f692ccda92577f55b9a2901 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Tue, 23 Mar 2021 17:40:23 +0800 Subject: [PATCH 1/3] condition --- src/forge/Head/Header.js | 731 +++++++++++++++++++++++++++++++++ src/forge/Head/header.scss | 10 + src/modules/tpm/TPMIndex.css | 2 +- src/modules/tpm/TPMIndexHOC.js | 4 +- 4 files changed, 744 insertions(+), 3 deletions(-) create mode 100644 src/forge/Head/Header.js create mode 100644 src/forge/Head/header.scss diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js new file mode 100644 index 000000000..e7880362c --- /dev/null +++ b/src/forge/Head/Header.js @@ -0,0 +1,731 @@ +import React, { Component } from 'react'; +import AccountProfile from "../../modules/user/AccountProfile"; +import { getImageUrl } from 'educoder' +import axios from 'axios'; +import { Modal, Input, message, notification , Dropdown , Menu ,Divider } from 'antd'; + +import LoginDialog from '../../modules/login/LoginDialog'; +import GotoQQgroup from '../../modal/GotoQQgroup' +// import 'antd/lib/modal/style/index.css'; +// import 'antd/lib/checkbox/style/index.css'; +// import 'antd/lib/radio/style/index.css'; +// import 'antd/lib/input/style/index.css'; +import '../../modules/tpm/TPMIndex.css'; +import logo from '../../modules/tpm/images/logo.png'; +import './header.scss'; +const $ = window.$ +// TODO 这部分脚本从公共脚本中直接调用 +const { Search } = Input; +let old_url; + +window._header_componentHandler = null; +// 非trustie链接则新开页跳转 +const str = ['www.trustie.net','forgeplus.trustie.net','forum.trustie.net','testforgeplus.trustie.net'] +class NewHeader extends Component { + constructor(props) { + super(props) + this.state = { + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + RadioGroupvalue: undefined, + submitapplications: false, + isRender: false, + showSearchOpentype: false, + showTrial: false, + setevaluatinghides: false, + occupation: 0, + mydisplay: false, + headtypesonClickbool: false, + headtypess: "/", + settings: null, + goshowqqgtounp: false, + visiblemyss: false, + openSearch:false, + } + } + componentDidMount() { + // this.getAppdata(); + this.geturlsdata(); + window._header_componentHandler = this; + + //下拉框的显示隐藏 + var hoverTimeout; + var hoveredPanel; + $(".edu-menu-panel").hover(function () { + if (hoverTimeout) { // 一次只显示一个panel + if (hoveredPanel && hoveredPanel !== this) { + $(hoveredPanel).find(".edu-menu-list").hide() + } + clearTimeout(hoverTimeout); + hoverTimeout = null; + } + hoveredPanel = this; + $(this).find(".edu-menu-list").show(); + }, function () { + var that = this; + // 延迟hide + hoverTimeout = setTimeout(function () { + $(that).find(".edu-menu-list").hide(); + }, 800) + + }); + //获取游览器地址 + try { + window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href)) + } catch (e) {} + } + + SearchInput = (open,item)=>{ + if(open){ + return( +
{ + setTimeout(() => { + this.setState({ + openSearch:false + }) + }, 300) + }} + > + this.onGlobalSearch(value,item)} + autoFocus={true} + /> +
+ ) + }else{ + return { + this.setState({openSearch:true}) + }} /> + } + } + + onGlobalSearch=(value,item)=>{ + window.location.href=`${item && item.url}?value=` + value; + } + + openNotification = (messge) => { + notification.open({ + message: "提示", + description: + messge, + }); + }; + + + + componentWillReceiveProps(newProps, oldProps) { + this.setState({ + user: newProps.user + }) + if (newProps.Headertop !== undefined) { + old_url = newProps.Headertop.old_url + } + } + getCookie = (key) => { + var arr, reg = RegExp('(^| )' + key + '=([^;]+)(;|$)'); + if (arr === document.cookie.match(reg)) + return decodeURIComponent(arr[2]); + else + return null; + } + + delCookie = (name) => { + var exp = new Date(); + exp.setTime(exp.getTime() - 1); + var cval = this.getCookie(name); + if (cval != null) { + document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); + } + } + onLogout = () => { + const url = `/accounts/logout.json` + this.delCookie("autologin_trustie") + axios.get(url, { + }).then((response) => { + if (response.data.status === 1) { + this.setState({ + user: undefined + }) + window.location.href = "/login" + message.success('退出成功'); + } + }); + } + + tojoinclass = () => { + let { user } = this.state; + if (user === undefined) { + this.setState({ + isRender: true + }) + return + } + if (user && user.login === "") { + this.setState({ + isRender: true + }) + return; + } + if (user && user.profile_completed === false) { + this.setState({ + AccountProfiletype: true + }) + return; + } + this.setState({ + Addcoursestypes: true, + }) + } + + tojoinitem = () => { + if (this.props.user && this.props.user.email === undefined || this.props.user && this.props.user.email === null || this.props.user && this.props.user.email === "") { + this.openNotification("请先绑定邮箱，谢谢"); + return + } + let { user } = this.state; + if (user === undefined) { + this.setState({ + isRender: true + }) + return + } + if (user && user.login === "") { + this.setState({ + isRender: true + }) + return; + } + + if (user && user.profile_completed === false) { + this.setState({ + AccountProfiletype: true + }) + return; + } + + this.setState({ + tojoinitemtype: true + }) + } + + + submitstatevalue = (sum, value, data) => { + this.setState({ + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + submitapplicationssum: sum, + submitapplications: true, + submitapplicationsvalue: value, + submitapplicationsvaluedata: data, + RadioGroupvalue: undefined + }) + } + + onChangeRadioGroup = (e) => { + this.setState({ + RadioGroupvalue: e.target.value, + }); + } + + submitsubmitapplications = () => { + let { + submitapplicationssum, + submitapplicationsvaluedata + } = this.state; + this.setState({ + submitapplications: false, + RadioGroupvalue: undefined + }) + if (submitapplicationssum === 0) { + if (submitapplicationsvaluedata !== undefined) { + window.location.href = "/courses/" + submitapplicationsvaluedata; + } + } else if (submitapplicationssum === 1) { + if (submitapplicationsvaluedata !== undefined) { + window.location.href = "/projects/" + submitapplicationsvaluedata; + } + } + } + + hidesubmitapplications = () => { + this.setState({ + Addcoursestypes: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + submitapplications: false, + RadioGroupvalue: undefined + }) + } + educoderlogin = () => { + //登录账号 + this.setState({ + isRender: true + }) + } + educoderloginysl = () => { + //退出账号 + var url = `/accounts/logout.json`; + axios.get((url)).then((result) => { + if (result !== undefined) { + window.location.href = "/"; + } + }).catch((error) => { + console.log(error); + }) + } + + hideAddcoursestypes = () => { + this.setState({ + Addcoursestypes: false + }) + }; + HideAddcoursestypess = (i) => { + console.log("调用了"); + this.setState({ + Addcoursestypes: false, + mydisplay: true, + occupation: i, + }) + }; + ModalCancelsy = () => { + this.setState({ + mydisplay: false, + }) + }; + + + hidetojoinclass = () => { + this.setState({ + tojoinclasstype: false, + tojoinitemtype: false, + tojoinclasstitle: undefined, + rolearr: ["", ""], + Checkboxteacherchecked: false, + Checkboxstudentchecked: false, + Checkboxteachingchecked: false, + Checkboxteachertype: false, + Checkboxteachingtype: false, + code_notice: false, + checked_notice: false, + RadioGroupvalue: undefined + }) + } + + // 关闭 + cancelModulationModels = () => { + this.setState({ isRenders: false }) + } + + + setevaluatinghides = () => { + this.setState({ + setevaluatinghides: true + }) + } + //修改登录方法 + Modifyloginvalue = () => { + this.setState({ + isRender: false, + }) + } + + hideAccountProfile = () => { + this.setState({ + AccountProfiletype: false + }) + }; + headtypesonClick = (url, bool) => { + this.setState({ + headtypess: url, + headtypesonClickbool: bool, + }) + } + //获取数据为空的时候 + gettablogourlnull = () => { + this.setState({ + settings: undefined + }); + var link = document.createElement('link'), + oldLink = document.getElementById('dynamic-favicon'); + link.id = 'dynamic-favicon'; + link.rel = 'shortcut icon'; + link.href = "/react/build/./favicon.ico"; + if (oldLink) { + document.head.removeChild(oldLink); + } + document.head.appendChild(link); + }; + + //获取数据的时候 + gettablogourldata = (response) => { + document.title = response.data.setting.name; + var link = document.createElement('link'), + oldLink = document.getElementById('dynamic-favicon'); + link.id = 'dynamic-favicon'; + link.rel = 'shortcut icon'; + link.href = '/' + response.data.setting.tab_logo_url; + if (oldLink) { + document.head.removeChild(oldLink); + } + document.head.appendChild(link); + } + + handleVisibleChanges = (boll) => { + this.setState({ + visiblemyss: boll, + }) + } + + getAppdata = () => { + try { + var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting')); + var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse')); + this.setState({ + settings: chromesettingArray + }); + if (chromesettingArray.tab_logo_url) { + this.gettablogourldata(chromesettingresponseArray); + } else { + this.gettablogourlnull(); + } + } catch (e) { + this.geturlsdata(); + } + }; + + geturlsdata = () => { + let url = "/setting.json"; + axios.get(url).then((response) => { + if (response && response.data) { + this.setState({ settings: response.data.setting }); + // localStorage.setItem('chromesetting', JSON.stringify(response.data.setting)); + // localStorage.setItem('chromesettingresponse', JSON.stringify(response)); + try { + if (response.data.setting.tab_logo_url) { + this.gettablogourldata(response); + } else { + this.gettablogourlnull(); + } + } catch (e) { + this.gettablogourlnull(); + } + } else { + this.gettablogourlnull(); + } + }).catch((error) => { + this.gettablogourlnull(); + }); + } + + matchpaths = (url) => { + const { match } = this.props; + if(url){ + if (match.path.indexOf(url) > -1) { + return true + }else { + return false + } + } + } + + + // 处理弹框 + setgoshowqqgtounp = (bool) => { + this.setState({ + goshowqqgtounp: bool + }) + } + + addMenu=(list)=>{ + return( + list && list.length >0 && +
+ + { + list.map((item,key)=>{ + return( + (item.name !=="加入课堂" && item.name !=="加入开发项目") && {item.name} + ) + }) + } + +
+ ) + } + + render() { + const { match} = this.props; + let current_user = this.props.user; + let { Addcoursestypes, + tojoinitemtype, + tojoinclasstitle, + code_notice, + checked_notice, + AccountProfiletype, + submitapplications, + submitapplicationsvalue, + user, + isRender, + showSearchOpentype, + headtypesonClickbool, + headtypess, + settings, + goshowqqgtounp, + openSearch, + } = this.state; + /*用户名称 用户头像url*/ + let activeIndex = false; + let activeForums = false; + let activeShixuns = false; + let activePaths = false; + let coursestype = false; + let activePackages = false; + let activeMoopCases = false; + let activeCompetitions = false; + + if (match.path === '/forums') { + activeForums = true; + } else if (match.path.startsWith('/shixuns')) { + activeShixuns = true; + } else if (match.path.startsWith('/paths')) { + activePaths = true; + } else if (match.path.startsWith('/courses')) { + coursestype = true; + } else if (match.path.startsWith('/crowdsourcing')) { + activePackages = true; + } else if (match.path.startsWith('/moop_cases')) { + activeMoopCases = true; + } else if (match.path.startsWith('/competitions')) { + activeCompetitions = true; + } else { + activeIndex = true; + } + + let headtypes = '/'; + if (settings) { + if (settings.navbar) { + if (settings.navbar.length > 0) { + if (match.path === '/') { + if (headtypesonClickbool === false) { + headtypes = undefined; + } else { + headtypes = headtypess; + } + } else { + for (var i = 0; i < settings.navbar.length; i++) { + if (match.path === settings.navbar[i].link) { + headtypes = settings.navbar[i].link; + break; + } + } + } + } + } + } + let shixuntype = false; + let pathstype = false; + let coursestypes = false; + if (this.props && this.props.mygetHelmetapi != null) { + let shixun = "/shixuns"; + let paths = "/paths"; + let courses = "/courses"; + this.props.mygetHelmetapi.navbar.map((item, key) => { + var reg = RegExp(item.link); + if (shixun.match(reg)) { + if (item.hidden === true) { + shixuntype = true + } + } + if (paths.match(reg)) { + if (item.hidden === true) { + pathstype = true + } + } + if (courses.match(reg)) { + if (item.hidden === true) { + coursestypes = true + } + } + }) + } + + let search_url = settings && settings.common && settings.common.length> 0 && settings.common.filter(item=>item.name==="搜索"); + let notice_url = settings && settings.common && settings.common.length> 0 && settings.common.filter(item=>item.name==="通知"); + return ( +
+
+ {isRender === true ? + this.Modifyloginvalue()} + /> : ""} + + {AccountProfiletype === true ? + this.hideAccountProfile()} + {...this.props} + {...this.state} + /> : ""} + { + goshowqqgtounp === true ? + this.setgoshowqqgtounp(bool)}> + :"" + } + + { + settings && settings.nav_logo_url ? + 可控开源社区 + : + 可控开源社区 + } + +
+ { + settings && settings.navbar && settings.navbar.length > 0 ? +
    + { + settings.navbar && settings.navbar.map((item, key) => { + var new_link = item.link; + var user_login = this.props.user && this.props.user.login; + var is_hidden = item.hidden + if (new_link && (new_link.indexOf("courses") > -1 || new_link.indexOf("contests") > -1)) { + if (user_login) { + if (new_link.indexOf("courses") > -1) { + new_link = new_link.replace(/courses/g, "users/" + user_login + "/courses") + } else if (new_link.indexOf("contests") > -1) { + new_link = new_link.replace(/contests/g, "users/" + user_login + "/contests") + } + } else { + is_hidden = true + } + } + if (user_login && (new_link && new_link.indexOf("homes") > -1)) { + new_link = new_link.replace(/homes/g, "users/" + user_login + "/user_activities") + } + + var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) ); + var wl = waiLian && waiLian.length>0; + return ( +
  • this.headtypesonClick(item.link, true)} className={`${this.matchpaths(item.link) === true ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}> + {item.name} +
    • + ) + }) + } +
+ : "" + } +
+
+ {search_url && search_url.length>0 ? this.SearchInput(openSearch,search_url[0]):""} + { + current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)? + + + :"" + } + + {this.props.user && this.props.user.login && (notice_url && notice_url.length>0) ? +
+ {user && user.login && + + + + + + } +
:"" + } + +
+
+
    +
    +

    + {submitapplicationsvalue} +

    +
    +
  • + 取消 + 确定 +
    • +
+
+
+ +
+ {!user || (user && !user.login) ? + + this.educoderlogin()} className="mr5 color-grey-6">登录 + { + settings && settings.new_course && settings.new_course.register_url && + 注册 + } + + : +
+ + + + +
    +
  • {this.props.current_user.username}
    • + { + settings && settings.personal && settings.personal.length > 0 && settings.personal.map((item,key)=>{ + return( +
  • {item.name}
    • + ) + }) + } +
  • + this.educoderloginysl()}>退出 +
    • +
+
+ } +
+
+ ); + } +} + +export default NewHeader; diff --git a/src/forge/Head/header.scss b/src/forge/Head/header.scss new file mode 100644 index 000000000..3cde4d8fc --- /dev/null +++ b/src/forge/Head/header.scss @@ -0,0 +1,10 @@ + +.dropdownFlex{ + display:flex; + padding:5px; + background:#fff; + border-radius: 3px; + .ant-menu-vertical > .ant-menu-item{ + border:none + } +} \ No newline at end of file diff --git a/src/modules/tpm/TPMIndex.css b/src/modules/tpm/TPMIndex.css index 262996b37..47696ec97 100644 --- a/src/modules/tpm/TPMIndex.css +++ b/src/modules/tpm/TPMIndex.css @@ -28,7 +28,7 @@ body>.-task-title { width: 100%; height:70px; min-width: 1200px; - z-index: 10000; + z-index: 1000; background:rgba(255,255,255,1); position: fixed; box-shadow: 0px 0px 14px rgb(0 0 0 / 10%); diff --git a/src/modules/tpm/TPMIndexHOC.js b/src/modules/tpm/TPMIndexHOC.js index 0084c3334..0a1d1c48b 100644 --- a/src/modules/tpm/TPMIndexHOC.js +++ b/src/modules/tpm/TPMIndexHOC.js @@ -1,5 +1,5 @@ import React from 'react'; -import NewHeader from './NewHeader' +import Header from '../../forge/Head/Header' import NewFooter from './NewFooter' import { downloadFile } from 'educoder' import axios from 'axios'; @@ -391,7 +391,7 @@ export function TPMIndexHOC(WrappedComponent) { {...this.state} {...this.dialogObj} /> : ""} - +
Date: Tue, 23 Mar 2021 17:58:12 +0800 Subject: [PATCH 2/3] style --- src/forge/css/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/forge/css/index.scss b/src/forge/css/index.scss index cd82840ea..c1241e67c 100644 --- a/src/forge/css/index.scss +++ b/src/forge/css/index.scss @@ -188,6 +188,7 @@ form{ justify-content: space-between; cursor: pointer; padding-right: 20px; + margin:0px; a{ width:100%; } From ec1ff5d479e296ea24b1f070b00ef07a72d70e6c Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Wed, 24 Mar 2021 14:08:10 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E7=AE=80=E4=BB=8B=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/forge/Main/CoderDepot.jsx | 28 +++++++++++-- src/forge/Main/sub/UpdateDescModal.jsx | 56 ++++++++++++++++++++++++++ src/forge/Main/sub/sub.scss | 9 +++++ src/forge/Settings/Setting.js | 2 +- 4 files changed, 90 insertions(+), 5 deletions(-) create mode 100644 src/forge/Main/sub/UpdateDescModal.jsx diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx index 7db7d6bb4..d2a989c30 100644 --- a/src/forge/Main/CoderDepot.jsx +++ b/src/forge/Main/CoderDepot.jsx @@ -17,6 +17,7 @@ import Releases from '../Component/Releases'; import Contributors from '../Component/Contributors'; import LanguagePower from '../Component/LanguagePower'; import DrawerPanel from '../Component/DrawerPanel'; +import UpdateDescModal from './sub/UpdateDescModal'; import Nodata from '../Nodata'; @@ -38,6 +39,9 @@ function CoderDepot(props){ const [ isSpin , setIsSpin] = useState(true); const [ visible ,setVisible ] = useState(false); const [ mainFlag ,setMainFlag ] = useState(false); + const [ openModal , setOpenModal ] = useState(false); + const [ desc , setDesc ] = useState(undefined); + const [ website , setWebsite ] = useState(undefined); const owner = props.match.params.owner; const projectsId = props.match.params.projectsId; @@ -47,6 +51,8 @@ function CoderDepot(props){ useEffect(()=>{ if(props.projectDetail){ setProjectDetail(props.projectDetail); + setDesc(props.projectDetail.description); + setWebsite(props.projectDetail.website); } },[props]) @@ -208,8 +214,20 @@ function CoderDepot(props){ ) + function okUpdate(d,w){ + const url = `/${owner}/${projectsId}.json`; + axios.put(url,{ + description:d,website:w + }).then(result=>{ + if(result && result.data && result.data.id){ + setDesc(result.data.description); + setWebsite(result.data.website); + } + }) + } return( + setOpenModal(false)} onOk={okUpdate}/> { (dirInfo || fileInfo) && @@ -337,13 +355,15 @@ function CoderDepot(props){
-

简介

-

{projectDetail && projectDetail.content}

+ 简介 + {projectDetail.permission && (projectDetail.permission==="Admin" || projectDetail.permission==="Owner") && setOpenModal(true)} className="iconfont icon-anquanshezhi color-grey-9 font-15">} + + {desc &&

{desc}

} { - projectDetail && projectDetail.website && + website &&

- {projectDetail.website} + {website}

}

diff --git a/src/forge/Main/sub/UpdateDescModal.jsx b/src/forge/Main/sub/UpdateDescModal.jsx new file mode 100644 index 000000000..a2489bca8 --- /dev/null +++ b/src/forge/Main/sub/UpdateDescModal.jsx @@ -0,0 +1,56 @@ +import React , { forwardRef, useEffect } from 'react'; +import {Form , Modal , Input } from 'antd'; +import "./sub.scss"; +const { TextArea } = Input; +function UpdateDescModal({form , visible , onCancel , onOk,desc,website}){ + const { getFieldDecorator, validateFields , setFieldsValue } = form; + + useEffect(()=>{ + if(desc || website){ + setFieldsValue({ + website,desc + }) + } + },[desc,website]) + + function onSure(){ + validateFields((err,values)=>{ + if(!err){ + onCancel(); + onOk(values.desc,values.website) + } + }) + } + return( + +

+ + {getFieldDecorator("desc",{ + rules:[] + })( +