新增接口，更新功能

expressServer/routes/add.js

@@ -49,4 +49,5 @@ router.get('/addType', (req, res) => {
 })
 
 
+
 module.exports = router

expressServer/routes/query.js

@@ -20,13 +20,14 @@ router.get('/queryType', (req, res) => {
 });
 
 router.get('/queryToolBox', (req, res) => {
-    const SQL = 'SELECT * FROM toolbox';
+    const SQL = `SELECT * FROM toolbox`;
     Mysql.query(SQL, (err, result) => {
         if (err) {
             res.send({
                 success: false,
                 err
             })
+            throw err
         }
         res.send({
             success: true,
@@ -35,4 +36,29 @@ router.get('/queryToolBox', (req, res) => {
     })
 });
 
+router.get('/queryToolBoxByType', (req, res) => {
+
+})
+
+router.get('/queryToolBoxSortId', (req, res) => {
+    const SQL = 'SELECT sortId FROM toolBox'
+    Mysql.query(SQL, (err, result) => {
+        if (err) {
+            res.send({
+                success: false,
+                err
+            })
+            throw err
+        }
+        const _result = []
+        result.map(v => {
+            _result.push(v["sortId"])
+        })
+        res.send({
+            success: true,
+            data: _result.sort((a, b) => a - b)
+        })
+    })
+})
+
 module.exports = router

package.json

@@ -10,6 +10,7 @@
     "node-sass": "4.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-grid-layout": "^1.2.5",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/App.css

@@ -3,6 +3,7 @@ body, html{
   height: 100%;
   padding: 0;
   margin: 0;
+  overflow-x: hidden;
 }
 
 body {

src/common/_popStyle.scss

@@ -29,6 +29,7 @@
                 width: 18px;
                 height: 18px;
                 vertical-align: sub;
+                user-select: none;
             }
         }
     }

src/component/Content/Content.jsx

 import './Content.scss'
 import ContentItem from "./ContentItem";
-import {useContext} from "react";
+import {useContext, useEffect, useState} from "react";
 import {Root} from "../../dataCenter/Root";
 
 function Content(props) {
     const {dataCenter} = useContext(Root)
+    const [gridPosition, setGridPosition] = useState([])
+
+    useEffect(() => {
+        setGridPosition(dataCenter.toolBox && dataCenter.toolBox.map(v => v.toolBoxId))
+    }, [dataCenter.toolBox])
+
     return (
         <div className="content">
             {

src/component/Content/ContentItem.jsx

@@ -10,10 +10,14 @@ import {PopContext, Root} from "../../dataCenter/Root";
 import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
 
 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
     }
@@ -21,15 +25,16 @@ function ContentItem(props) {
         fetchData('/delete/deleteToolBoxById', {toolBoxId})
             .then(() => updateIndex())
     }
+
     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={dragIcon} alt="" onMouseDown={e => props.dragMouseDown(e)}/>
+                <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={itemIcon} onError={(e)=> setItemIcon(defaultIcon)}/>
+                <img src={itemIcon} alt='' 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

@@ -19,7 +19,14 @@ function PopContainer(props) {
     const handleMouseUp = () => setDraggable(false)
     const handleMouseMove = e => {
         if (draggable) {
-            dragRef.current.style.transform = `translate(${e.clientX - offset.x}px,${e.clientY - offset.y}px)`
+            let x = e.clientX - offset.x
+            let y = e.clientY - offset.y
+            // console.log(x, y)
+            if (x < 0) x = 0
+            if (y < 0) y = 0
+            if (x + dragRef.current['offsetWidth'] > document.body.offsetWidth) x = document.body.offsetWidth - dragRef.current['offsetWidth']
+            if (y + dragRef.current['offsetHeight'] > document.body.offsetHeight) y = document.body.offsetHeight - dragRef.current['offsetHeight']
+            dragRef.current.style.transform = `translate(${x}px,${y}px)`
         }
     }
     return (
@@ -30,7 +37,7 @@ function PopContainer(props) {
                  ref={dragRef}
             >
                 <div className="Pop-tool" onMouseDown={e => handleMouseDown(e)}>
-                    <button className="close" onClick={() => hidePop()}><img src={closeIcon}/></button>
+                    <button className="close" onClick={() => hidePop()}><img src={closeIcon} alt=''/></button>
                 </div>
                 {props.children}
             </div>

src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.jsx

 import {useContext} from "react";
-import {PopContext, Root} from "../../dataCenter/Root";
+import {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 [input, setInput] = useFormState({
         toolBoxName,
         toolBoxIcon,

src/component/Pop_addToolBox/Pop_addToolBox.jsx

 import './Pop_addToolBox.scss'
-import {useContext, useRef} from "react";
-import {PopContext, Root} from "../../dataCenter/Root";
+import {useContext} from "react";
+import {Root} from "../../dataCenter/Root";
 import {useFormState} from "../../utils/hook";
 import PopContainer from "../PopContainer/PopContainer";
 
 function Pop_addToolBox() {
     const {fetchData, updateIndex} = useContext(Root)
-    const {hidePop} = useContext(PopContext)
     const [input, setInput] = useFormState()
-    const PopRef = useRef()
 
     const addToolBox = () => {
         fetchData('/add/addToolBox', input)

src/component/Pop_addType/Pop_addType.jsx

 import {useContext} from "react";
-import {PopContext, Root} from "../../dataCenter/Root";
+import {Root} from "../../dataCenter/Root";
 import {useFormState} from "../../utils/hook";
 import PopContainer from "../PopContainer/PopContainer";
 import './Pop_addType.scss'
@@ -7,7 +7,6 @@ import './Pop_addType.scss'
 function Pop_addType(props) {
 
     const {fetchData, updateIndex} = useContext(Root)
-    const {hidePop} = useContext(PopContext)
 
     const [input, setInput] = useFormState()
 

src/dataCenter/reducer.js

 const initDataCenter = {
+    toolBox: null,
+    type: null
 }
 
 /**

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
+<?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"
+     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>

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
+<?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"
+     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>

src/utils/hook.js

-import {useCallback, useRef, useState} from "react";
+import {useCallback, useState} from "react";
 
 const useFormState = (initialValues = {}) => {
     const [input, setInput] = useState(initialValues)
@@ -18,41 +18,41 @@ 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)
-    }
-}
+// 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,

yarn.lock

@@ -3417,6 +3417,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@2.3.1, classnames@^2.2.5:
+  version "2.3.1"
+  resolved "http://npm.dui88.com:80/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha1-38+jiR4wbsHa0QXQ6I9EF7hTXo4=
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "http://npm.dui88.com:80/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -7336,6 +7341,11 @@ lodash.debounce@^4.0.8:
   resolved "http://npm.dui88.com:80/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.isequal@^4.0.0:
+  version "4.5.0"
+  resolved "http://npm.dui88.com:80/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "http://npm.dui88.com:80/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9357,7 +9367,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "http://npm.dui88.com:80/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -9577,11 +9587,30 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-draggable@^4.0.0, react-draggable@^4.0.3:
+  version "4.4.3"
+  resolved "http://npm.dui88.com:80/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
+  integrity sha1-ByfyyuWBPjaw5JYr8RsvnvK0BvM=
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "http://npm.dui88.com:80/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha1-PHQwEMk1lgjDdezWvHbzXZOZWwo=
 
+react-grid-layout@^1.2.5:
+  version "1.2.5"
+  resolved "http://npm.dui88.com:80/react-grid-layout/-/react-grid-layout-1.2.5.tgz#fa40288d5a1fa783484c44ce78b1e10eb5313d26"
+  integrity sha1-+kAojVofp4NITETOeLHhDrUxPSY=
+  dependencies:
+    classnames "2.3.1"
+    lodash.isequal "^4.0.0"
+    prop-types "^15.0.0"
+    react-draggable "^4.0.0"
+    react-resizable "^3.0.1"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "http://npm.dui88.com:80/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9597,6 +9626,14 @@ react-refresh@^0.8.3:
   resolved "http://npm.dui88.com:80/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha1-ch1GV2ctQAxePHXQY8SoX7LV1o8=
 
+react-resizable@^3.0.1:
+  version "3.0.4"
+  resolved "http://npm.dui88.com:80/react-resizable/-/react-resizable-3.0.4.tgz#aa20108eff28c52c6fddaa49abfbef8abf5e581b"
+  integrity sha1-qiAQjv8oxSxv3apJq/vvir9eWBs=
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^4.0.3"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "http://npm.dui88.com:80/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"