新增可拖动的弹窗组件，现在所有弹窗都可以拖动了

src/common/_popStyle.scss

@@ -16,16 +16,20 @@
         background: rgba(0, 0, 0, 0.7);
 
         button {
+            padding: 0;
             border-radius: 5px;
         }
 
         .close {
             width: 23px;
             height: 23px;
-            font-size: 18px;
             color: #ffffff;
-            text-align: left;
             background: rgba(0, 0, 0, 0.8);
+            img {
+                width: 18px;
+                height: 18px;
+                vertical-align: sub;
+            }
         }
     }
 

src/component/Content/ContentItem.jsx

@@ -4,7 +4,8 @@ import notFollow from '../../static/notFollow.png'
 import followed from '../../static/followed.png'
 import setting from '../../static/setting.svg'
 import trash from '../../static/trash.svg'
-import {useContext} from "react";
+import dragIcon from '../../static/dragIcon.svg'
+import {useContext, useState} from "react";
 import {PopContext, Root} from "../../dataCenter/Root";
 import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
 
@@ -12,6 +13,7 @@ function ContentItem(props) {
     const {fetchData, updateIndex} = useContext(Root)
     const {showPop} = useContext(PopContext)
     const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId} = props.value
+    const [itemIcon, setItemIcon] = useState(toolBoxIcon)
     const jumpUrl = url => {
         window.location.href = url
     }
@@ -22,11 +24,12 @@ function ContentItem(props) {
     return (
         <div className="content-item">
             <div className="content-adminTool">
+                <img src={dragIcon} alt=""/>
                 <img src={setting} alt="" onClick={()=>showPop((<PopToolBoxConfig value={props.value}/>))}/>
                 <img src={trash} alt="" onClick={() => deleteItem(toolBoxId)}/>
             </div>
             <div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}>
-                <img src={toolBoxIcon ? toolBoxIcon : defaultIcon} alt={toolBoxName}/>
+                <img src={itemIcon} onError={(e)=> setItemIcon(defaultIcon)}/>
             </div>
             <div className="item-name" onClick={() => jumpUrl(toolBoxUrl)}>{toolBoxName}</div>
             <div className="item-desc">{toolBoxDesc}</div>

src/component/PopContainer/PopContainer.jsx

+import {useContext, useRef, useState} from "react";
+import {PopContext} from "../../dataCenter/Root";
+import closeIcon from '../../static/closeIcon.svg'
+
+function PopContainer(props) {
+    const dragRef = useRef()
+    const {hidePop} = useContext(PopContext)
+    const [offset, setOffset] = useState({x: 0, y: 0})
+    const [draggable, setDraggable] = useState(false)
+    const handleMouseDown = e => {
+        e.stopPropagation()
+        setDraggable(true)
+        setOffset({
+            x: e.clientX - dragRef.current['getBoundingClientRect']().x,
+            y: e.clientY - dragRef.current['getBoundingClientRect']().y
+        })
+    }
+
+    const handleMouseUp = () => setDraggable(false)
+    const handleMouseMove = e => {
+        if (draggable) {
+            dragRef.current.style.transform = `translate(${e.clientX - offset.x}px,${e.clientY - offset.y}px)`
+        }
+    }
+    return (
+        <div className="drag-Container"
+             onMouseUp={() => handleMouseUp()}
+             onMouseMove={(e) => handleMouseMove(e)}>
+            <div className="Pop-container"
+                 ref={dragRef}
+            >
+                <div className="Pop-tool" onMouseDown={e => handleMouseDown(e)}>
+                    <button className="close" onClick={() => hidePop()}><img src={closeIcon}/></button>
+                </div>
+                {props.children}
+            </div>
+        </div>
+    )
+}
+
+export default PopContainer

src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.jsx

@@ -2,11 +2,12 @@ import {useContext} from "react";
 import {PopContext, Root} from "../../dataCenter/Root";
 import {useFormState} from "../../utils/hook";
 import PopConfirm from "../PopConfirm/PopConfirm";
+import PopContainer from "../PopContainer/PopContainer";
 
 function Pop_toolBoxConfig(props) {
     const {toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl, toolBoxId} = props.value
     const {fetchData, updateIndex} = useContext(Root)
-    const {hidePop,showPop} = useContext(PopContext)
+    const {hidePop, showPop} = useContext(PopContext)
     const [input, setInput] = useFormState({
         toolBoxName,
         toolBoxIcon,
@@ -21,10 +22,7 @@ function Pop_toolBoxConfig(props) {
 
 
     return (
-        <div className="Pop-container">
-            <div className="Pop-tool">
-                <button className="close" onClick={() => hidePop()}>X</button>
-            </div>
+        <PopContainer>
             <h2 className='Pop-title'>{toolBoxName}</h2>
             <div className="formArea">
                 <div className="input-group ">
@@ -53,9 +51,12 @@ function Pop_toolBoxConfig(props) {
                 </div>
             </div>
             <div className="Pop-bottom">
-                <button className='btn-submit-addToolBox' onClick={() => showPop((<PopConfirm title={`确定要修改${toolBoxName}吗？`}/>))}>提交</button>
+                <button className='btn-submit-addToolBox'
+                        onClick={() => updateToolBox()}>提交
+                </button>
             </div>
-        </div>
+        </PopContainer>
+
     )
 }
 

src/component/Pop_addToolBox/Pop_addToolBox.jsx

@@ -2,6 +2,7 @@ import './Pop_addToolBox.scss'
 import {useContext, useRef} from "react";
 import {PopContext, Root} from "../../dataCenter/Root";
 import {useFormState} from "../../utils/hook";
+import PopContainer from "../PopContainer/PopContainer";
 
 function Pop_addToolBox() {
     const {fetchData, updateIndex} = useContext(Root)
@@ -15,11 +16,7 @@ function Pop_addToolBox() {
     }
 
     return (
-        <div className="Pop-container"
-             ref={PopRef}>
-            <div className="Pop-tool">
-                <button className="close" onClick={() => hidePop()}>X</button>
-            </div>
+        <PopContainer>
             <h2 className='Pop-title'>新建工具盒</h2>
             <div className="formArea">
                 <div className="input-group ">
@@ -50,7 +47,7 @@ function Pop_addToolBox() {
             <div className="Pop-bottom">
                 <button className='btn-submit-addToolBox' onClick={() => addToolBox()}>提交</button>
             </div>
-        </div>
+        </PopContainer>
     )
 }
 

src/component/Pop_addType/Pop_addType.jsx

 import {useContext} from "react";
 import {PopContext, Root} from "../../dataCenter/Root";
 import {useFormState} from "../../utils/hook";
+import PopContainer from "../PopContainer/PopContainer";
+import './Pop_addType.scss'
+
+function Pop_addType(props) {
 
-function Pop_addType(props){
     const {fetchData, updateIndex} = useContext(Root)
     const {hidePop} = useContext(PopContext)
+
     const [input, setInput] = useFormState()
 
     const addType = () => {
@@ -13,14 +17,12 @@ function Pop_addType(props){
     }
 
     return (
-        <div className="Pop-container">
-            <div className="Pop-tool">
-                <button className="close" onClick={() => hidePop()}>X</button>
-            </div>
+        <PopContainer>
             <h2 className='Pop-title'>新建类型</h2>
             <div className="formArea">
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('typeName', e.target.value)} defaultValue={input?.typeName}
+                    <input type="text" onChange={e => setInput('typeName', e.target.value)}
+                           defaultValue={input?.typeName}
                            min={1} required/>
                     <span> 类型名称</span>
                 </div>
@@ -28,9 +30,8 @@ function Pop_addType(props){
             <div className="Pop-bottom">
                 <button className='btn-submit-addToolBox' onClick={() => addType()}>提交</button>
             </div>
-        </div>
+        </PopContainer>
     )
-
 }
 
 export default Pop_addType

src/component/Pop_addType/Pop_addType.scss

 @import "../../common/popStyle";
+.drag-Container{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 .Pop-container{
     position: absolute;
-    top: 100px;
-    left: 200px;
+    top: 0;
+    left: 0;
 }

src/component/ToolType/ToolType.jsx

@@ -4,9 +4,12 @@ import {Root} from "../../dataCenter/Root";
 
 function ToolType (props) {
     const {dataCenter} = useContext(Root)
-    const [typeId, setTypeId] = useState(1)
+    const [typeId, setTypeId] = useState(0)
     return (
         <div className="tab-tool-type">
+            {
+                <div className={typeId === 0 ?'item-tool-type item-tool-type-selected' :  'item-tool-type'} onClick={()=>setTypeId(0)}>全部</div>
+            }
             {
                 dataCenter?.type?.length && dataCenter.type.map(v => {
                     const classNameArr = ['item-tool-type ']

src/page/index.jsx

@@ -5,6 +5,7 @@ import {useContext, useEffect, useState} from "react";
 import PopAddToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
 import {PopContext, Root} from "../dataCenter/Root";
 import PopAddType from "../component/Pop_addType/Pop_addType";
+import logo from '../static/logo.png'
 
 function Index() {
     const {updateIndex} = useContext(Root)
@@ -23,7 +24,7 @@ function Index() {
             <div className="index">
 
                 <div className="nav">
-                    <div className="nav-title">Dui123</div>
+                    <div className="nav-title"><img src={logo} alt=""/></div>
                 </div>
                 <div className="adminTool">
                     <button className='btn-admin' onClick={() => setPop((<PopAddToolBox/>))}>新建工具盒</button>

src/page/index.scss

@@ -32,6 +32,11 @@ body {
             line-height: 40px;
             font-weight: bold;;
             text-align: center;
+            margin-left: 20px;
+
+            img {
+                width: 100%;
+            }
         }
     }
 

src/static/closeIcon.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1630047440929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1458" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M257.28 212.053333a32 32 0 0 0-45.226667 45.226667L466.773333 512l-254.72 254.72a32 32 0 1 0 45.226667 45.226667L512 557.226667l254.72 254.72a32 32 0 1 0 45.226667-45.226667L557.226667 512l254.72-254.72a32 32 0 0 0-45.226667-45.226667L512 466.773333 257.28 212.053333z" fill="#ffffff" p-id="1459"></path></svg>
\ No newline at end of file

src/static/dragIcon.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1630047561806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1233" data-spm-anchor-id="a313x.7781069.0.i1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M544 256h-64v512h64V256z" fill="#040000" p-id="1234"></path><path d="M493.29 210.71l-64.11 64.11c-16.67 16.67-4.87 45.18 18.71 45.18h128.22c23.58 0 35.38-28.51 18.71-45.18l-64.11-64.11a26.47 26.47 0 0 0-37.42 0zM493.29 813.29l-64.11-64.11c-16.67-16.67-4.87-45.18 18.71-45.18h128.22c23.58 0 35.38 28.51 18.71 45.18l-64.11 64.11a26.47 26.47 0 0 1-37.42 0zM768 480.01H256V544h512v-63.99z" fill="#000000" p-id="1235" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M209.84 530.8l65.06 64.5c16.71 16.56 45.1 4.7 45.1-18.8v-129c0-23.52-28.39-35.35-45.1-18.79l-65.06 64.5a26.47 26.47 0 0 0 0 37.59zM813.29 530.71l-64.11 64.11C732.5 611.49 704 599.69 704 576.11V447.89c0-23.58 28.5-35.39 45.18-18.71l64.11 64.11a26.47 26.47 0 0 1 0 37.42z" fill="#000000" p-id="1236" data-spm-anchor-id="a313x.7781069.0.i4" class="selected"></path></svg>
\ No newline at end of file

src/utils/hook.js

-import {useCallback, useState} from "react";
+import {useCallback, useRef, useState} from "react";
 
 const useFormState = (initialValues = {}) => {
     const [input, setInput] = useState(initialValues)
@@ -10,6 +10,51 @@ const useFormState = (initialValues = {}) => {
     return [input, setInputData]
 }
 
+
+const useDrag = () => {
+
+}
+
+
+
+//这个hook很有意思，怎么样保存return出去的那个组件的数据呢
+function usePopContainer(props) {
+    const dragRef = useRef()
+    const [offset, setOffset] = useState({x: 0, y: 0})
+    const [draggable, setDraggable] = useState(false)
+    const handleMouseDown = e => {
+        e.stopPropagation()
+        setDraggable(true)
+        setOffset({
+            x: e.clientX - dragRef.current['getBoundingClientRect']().x,
+            y: e.clientY - dragRef.current['getBoundingClientRect']().y
+        })
+    }
+
+    const handleMouseUp = () => setDraggable(false)
+    const handleMouseMove = e => {
+        if (draggable) {
+            dragRef.current.style.transform = `translate(${e.clientX - offset.x}px,${e.clientY - offset.y}px)`
+            console.log(dragRef.current.style.transform)
+        }
+    }
+    return {
+        PopContainer: props => (
+            <div className="drag-Container"
+                 onMouseUp={() => handleMouseUp()}
+                 onMouseMove={(e) => handleMouseMove(e)}>
+                <div className="Pop-container"
+                     ref={dragRef}
+                >
+                    {props.children}
+                </div>
+            </div>
+        ),
+        dragMouseDown: e => handleMouseDown(e)
+    }
+}
+
 export {
-    useFormState
+    useFormState,
+    useDrag,
 }