Commit f98e5a10 authored by wty's avatar wty

优化子类样式等

parent 31ee1c6f
import './ContentItem.scss'
import defaultIcon from '../../static/defaultIcon.png'
import notFollow from '../../static/notFollow.png'
import followed from '../../static/followed.png'
import {useContext, useEffect, useState} from "react";
import {Root} from "../../dataCenter/Root";
function ContentItem(props) {
const {dataCenter, fetchData, updateIndex} = useContext(Root)
const {dataCenter, fetchData} = useContext(Root)
const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, toolBoxId} = props.value
const [isFollow, setIsFollow] = useState(false)
const [itemIcon, setItemIcon] = useState(toolBoxIcon)
......@@ -22,14 +21,13 @@ function ContentItem(props) {
_follow.splice(index, 1)
}
fetchData('/users/follow', {follow: JSON.stringify(_follow), userId: dataCenter.userInfo.uid})
.then(() => updateIndex())
.then(() => fetchData('/users/getUser',{},'userInfo'))
.then(() => fetchData('/users/getUser', {}, 'userInfo'))
}
useEffect(() => {
if (dataCenter.userInfo?.follow.includes(toolBoxId)) {
setIsFollow(true)
}else {
} else {
setIsFollow(false)
}
}, [dataCenter.toolBox, dataCenter.userInfo])
......@@ -41,7 +39,7 @@ function ContentItem(props) {
!itemIcon && <div className="defaultIcon">{toolBoxName[0]}</div>
}
{
itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/>
itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/>
}
</div>
......
import './Content.scss'
import ContentItem from "./ContentItem";
import ContentItemAdmin from "./ContentItemAdmin";
import {useContext, useEffect, useState} from "react";
import {Root} from "../../dataCenter/Root";
function Content(props) {
const {dataCenter} = useContext(Root)
return (
<div className="content">
{
dataCenter.childType?.length ? dataCenter?.toolBox?.filter(v => {
if (dataCenter.childTypeId === 'all') return true
else return v.childTypeId === dataCenter.childTypeId
}).map(v => {
dataCenter?.toolBox?.length ? dataCenter.toolBox.map(v => {
return (
<ContentItem key={v['toolBoxId']} value={v}/>
<ContentItemAdmin key={v['toolBoxId']} value={v}/>
)
})
:
......
......@@ -5,18 +5,17 @@ import followed from '../../static/followed.png'
import setting from '../../static/setting.svg'
import trash from '../../static/trash.svg'
import dragIcon from '../../static/dragIcon.svg'
import { useContext, useState } from "react";
import { PopContext, Root } from "../../dataCenter/Root";
import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
import {useContext, useState} from "react";
import {PopContext, Root} from "../../dataCenter/Root";
import ToolModal from "../../modal/ToolModal"
function ContentItem(props) {
function ContentItemAdmin(props) {
const [visible, setVisible] = useState(false)
const { fetchData, updateIndex } = useContext(Root)
const { showPop } = useContext(PopContext)
const {fetchData} = useContext(Root)
const {showPop} = useContext(PopContext)
const { toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId } = props.value
const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId} = props.value
const [itemIcon, setItemIcon] = useState(toolBoxIcon)
......@@ -24,25 +23,29 @@ function ContentItem(props) {
window.location.href = url
}
const deleteItem = toolBoxId => {
fetchData('/delete/deleteToolBoxById', { toolBoxId })
.then(() => updateIndex())
fetchData('/delete/deleteToolBoxById', {toolBoxId})
}
return (
<div className="content-item">
<div className="content-adminTool">
<img src={dragIcon} alt="" />
<img src={setting} alt="" onClick={() => setVisible(true)} />
<img src={trash} alt="" onClick={() => deleteItem(toolBoxId)} />
<img src={dragIcon} alt=""/>
<img src={setting} alt="" onClick={() => setVisible(true)}/>
<img src={trash} alt="" onClick={() => deleteItem(toolBoxId)}/>
</div>
<div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}>
<img src={itemIcon} alt='' onError={(e) => setItemIcon(defaultIcon)} />
{
!itemIcon && <div className="defaultIcon">{toolBoxName[0]}</div>
}
{
itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/>
}
</div>
<div className="item-name" onClick={() => jumpUrl(toolBoxUrl)}>{toolBoxName}</div>
<div className="item-desc">{toolBoxDesc}</div>
<a className='item-url' href={toolBoxUrl}>{toolBoxUrl}</a>
<div className="follow">
<img className='icon-follow' src={follow ? followed : notFollow} alt="" />
<img className='icon-follow' src={follow ? followed : notFollow} alt=""/>
收藏
</div>
{visible && <ToolModal
......@@ -57,4 +60,4 @@ function ContentItem(props) {
)
}
export default ContentItem
export default ContentItemAdmin
import logo from "../../static/logo.png";
import './index.scss'
import ToolType from "../../component/ToolType/ToolType";
import Content from "../../component/Content/Content";
import Content from '../../component/ContentAdmin/Content'
import {PopContext, Root} from "../../dataCenter/Root";
import {useContext, useEffect, useState} from "react";
import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment