所有接口改为查询Mysql数据库

新增：工具盒修改，删除，增加功能

expressServer/SQLPool.js

+const MYSQL = require('mysql')
+
+const Mysql = MYSQL.createPool({
+    'host': '127.0.0.1',
+    'port': '3306',
+    'user': 'wty',
+    'password': 'wty990215',
+    'database': 'dui123',
+    'connectionLimit': 1000
+})
+
+module.exports = Mysql

expressServer/app.js

@@ -5,10 +5,10 @@ const logger = require('morgan');
 
 const indexRouter = require('./routes/index');
 const usersRouter = require('./routes/users');
-const databaseRouter = require('./routes/dataBase/dataBase')
 const queryRouter = require('./routes/query')
 const addRouter = require('./routes/add')
 const deleteRouter = require('./routes/delete')
+const updateRouter = require('./routes/update')
 
 const app = express();
 global.domain = 'http://127.0.0.1:3001'
@@ -41,10 +41,10 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
-app.use('/database', databaseRouter)
 app.use('/query', queryRouter)
 app.use('/add', addRouter)
 app.use('/delete',deleteRouter)
+app.use('/update', updateRouter)
 
 
 module.exports = app;

expressServer/package.json

@@ -7,10 +7,12 @@
   },
   "dependencies": {
     "@types/express": "^4.17.13",
+    "@types/mysql": "^2.15.19",
     "cookie-parser": "~1.4.4",
     "debug": "~2.6.9",
     "express": "~4.16.1",
     "morgan": "~1.9.1",
+    "mysql": "^2.18.1",
     "nodemon": "^2.0.12",
     "request": "^2.88.2"
   }

expressServer/routes/add.js

 const express = require('express')
 const request = require("request");
+const Mysql = require("../SQLPool");
 const router = express.Router()
 
 router.get('/addToolBox', (req, res) => {
-    const {name,icon,desc,url} = req.query
-    const data = encodeURI(JSON.stringify({name,icon,desc,url}))
+    const {toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl} = req.query
     // res.send({success: true})
-    request(`${domain}/database/addData?tableName=toolBox&data=${data}`, {}, (err, response, body) => {
-        if (!err && response.statusCode === 200) {
-            const data = JSON.parse(body)
-            res.send({
-                success: true,
-                data: data.data
-            })
-        } else {
+    const SQL = 'INSERT INTO toolbox (toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl) VALUES (?,?,?,?)'
+    try {
+        Mysql.query(SQL, [toolBoxName, toolBoxDesc, toolBoxIcon, toolBoxUrl], (err, result) => {
+            if (err) {
                 res.send({
+                    success: false,
                     err
                 })
+                throw err
             }
+            res.send({
+                success: true,
+                data: result
+            })
         })
+    }catch (e){
+        console.error(e)
+    }
 })
 
 router.get('/addType', (req, res) => {
-    const {name} = req.query
-    const data = encodeURI(JSON.stringify({name}))
-    // res.send({success: true})
-    request(`${domain}/database/addData?tableName=type&data=${data}`, {}, (err, response, body) => {
-        if (!err && response.statusCode === 200) {
-            const data = JSON.parse(body)
-            res.send({
-                success: true,
-                data: data.data
-            })
-        } else {
+    const {typeName} = req.query
+    const SQL = 'INSERT INTO type (typeName) VALUES (?)'
+    try {
+        Mysql.query(SQL, [typeName], (err, result) => {
+            if (err) {
                 res.send({
+                    success: false,
                     err
                 })
+                throw err
             }
+            res.send({
+                success: true,
+                data: result
+            })
         })
+    }catch (e){
+        console.error(e)
+    }
 })
 
 

expressServer/routes/dataBase/dataBase.js

-const express = require('express')
-const fs = require('fs')
-const path = require('path')
-const router = express.Router()
-
-const tablePath = {
-    toolBox: path.join(__dirname, './toolBox.json'),
-    type: path.join(__dirname, './type.json')
-}
-
-const add = (tableName, addData) => {
-    fs.readFile(tablePath[tableName], (err, data) => {
-        if (err) {
-            console.error(err)
-            throw err
-        }
-        const _data = JSON.parse(data.toString())
-        const lastId = _data[_data.length - 1]?.id || 0
-        _data.push(Object.assign({id: lastId + 1}, addData))
-        fs.writeFile(tablePath[tableName], JSON.stringify(_data), (err) => {
-            if (err) {
-                console.error(err)
-                return err
-            }
-            console.log('数据添加成功')
-        })
-    })
-}
-
-const deleteData = (tableName, dataId) => {
-    fs.readFile(tablePath[tableName], (err, data) => {
-        if (err) {
-            console.error(err)
-            throw err
-        }
-        const _data = JSON.parse(data.toString())
-        const newData = _data.filter(v => +v.id !== +dataId)
-        fs.writeFile(tablePath[tableName], JSON.stringify(newData), (err) => {
-            if (err) {
-                console.error(err)
-                return err
-            }
-            console.log('数据删除成功')
-        })
-    })
-}
-
-const queryTable = (tableName) => {
-    const data = fs.readFileSync(tablePath[tableName], {encoding: 'utf-8'})
-    return JSON.parse(data)
-}
-
-router.get('/queryTable', (req, res) => {
-    const {tableName} = req.query
-    console.log('查询：', tableName)
-    const data = queryTable(tableName)
-    if (data) {
-        res.send({
-            data
-        })
-    } else {
-        res.send({
-            Error: data
-        })
-    }
-})
-
-router.get('/addData', (req, res) => {
-    const {tableName, data} = req.query
-    const _data = JSON.parse(data)
-    try {
-        add(tableName, _data)
-        res.send({
-            data: '数据添加成功！'
-        })
-    } catch (e) {
-        console.log(e)
-        res.send({
-            e
-        })
-    }
-})
-
-router.get('/deleteDataById', (req, res) => {
-    const {tableName, dataId} = req.query
-    try {
-        deleteData(tableName, dataId)
-        res.send({
-            data: '数据删除成功！'
-        })
-    } catch (e) {
-        console.log(e)
-        res.send({
-            e
-        })
-    }
-})
-
-
-module.exports = router

expressServer/routes/dataBase/toolBox.json

-[{"id":1,"name":"星火组件库文档","icon":"https://yun.duiba.com.cn/editor/spark/favicon.ico","desc":"星火组件库文档，烽火台3.0文档也在里头哦~","url":"http://spark.duiba.com.cn/docs/"},{"id":10,"name":"测试数据","icon":"https://yun.duiba.com.cn/spark/assets/511a27ba957e5cf744e96e914e65383b3ba8dae3.png","desc":"测试数据","url":"www.baidu.com"},{"id":14,"name":"1","icon":"1","desc":"1","url":"1"}]
\ No newline at end of file

expressServer/routes/dataBase/type.json

-[{"id":1,"typeName":"我的"}]

expressServer/routes/delete.js

 const express = require('express')
 const request = require('request')
+const Mysql = require("../SQLPool");
 const router = express.Router()
 
 router.get('/deleteToolBoxById', (req, res) => {
-    const {id} = req.query
-    request(`${domain}/database/deleteDataById?tableName=toolBox&dataId=${id}`, {}, (err, response, body) => {
-        if (!err && response.statusCode === 200) {
-            const data = JSON.parse(body)
-            res.send({
-                success: true,
-                data: data.data
-            })
-        } else {
+    const {toolBoxId} = req.query
+    const SQL = 'DELETE FROM toolbox WHERE toolBoxId = ?'
+    try {
+        Mysql.query(SQL, [toolBoxId], (err, result) => {
+            if (err) {
                 res.send({
+                    success: false,
                     err
                 })
+                throw err
             }
+            res.send({
+                success: true,
+                data: result
+            })
         })
+    }catch (e){
+        console.error(e)
+    }
 
 })
 

expressServer/routes/query.js

 const express = require('express')
 const request = require("request");
+const Mysql = require('../SQLPool')
 const router = express.Router()
 
 router.get('/queryType', (req, res) => {
-    request(`${domain}/database/queryTable?tableName=type`, {}, (err, response, body) => {
-        if (!err && response.statusCode === 200) {
-            const data = JSON.parse(body)
+    const SQL = 'SELECT * FROM type'
+    Mysql.query(SQL, (err, result) => {
+        if (err) {
             res.send({
-                success: true,
-                data: data.data
+                success: false,
+                err
             })
-        } else {
+        }
         res.send({
-                error: err
+            success: true,
+            data: result
         })
-        }
     })
 });
 
 router.get('/queryToolBox', (req, res) => {
-    request(`${domain}/database/queryTable?tableName=toolBox`, {}, (err, response, body) => {
-        if (!err && response.statusCode === 200) {
-            const data = JSON.parse(body)
+    const SQL = 'SELECT * FROM toolbox';
+    Mysql.query(SQL, (err, result) => {
+        if (err) {
             res.send({
-                success: true,
-                data: data.data
+                success: false,
+                err
             })
-        } else {
+        }
         res.send({
-                error: err
+            success: true,
+            data: result
         })
-        }
     })
 });
 

expressServer/routes/update.js

+const express = require('express')
+const router = express.Router()
+const Mysql = require('../SQLPool')
+
+router.get('/updateToolBox', (req, res) => {
+    const {toolBoxName, toolBoxIcon, toolBoxUrl, toolBoxDesc, toolBoxId} = req.query
+    const SQL = 'UPDATE toolbox SET toolBoxName= ?, toolBoxIcon=?, toolBoxUrl=?, toolBoxDesc=? WHERE toolBoxId = ?'
+
+    Mysql.query(SQL, [toolBoxName, toolBoxIcon, toolBoxUrl, toolBoxDesc, toolBoxId], (err, result) => {
+        if (err) {
+            res.send({
+                success: false,
+                err
+            })
+        }
+        res.send({
+            success: true,
+            data: result
+        })
+    })
+})
+
+
+module.exports = router

expressServer/yarn.lock

@@ -53,6 +53,13 @@
   resolved "http://npm.dui88.com:80/@types%2fmime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
   integrity sha1-k+Jb+e51/g/YC1lLxP6w6GIRG1o=
 
+"@types/mysql@^2.15.19":
+  version "2.15.19"
+  resolved "http://npm.dui88.com:80/@types%2fmysql/-/mysql-2.15.19.tgz#d158927bb7c1a78f77e56de861a3b15cae0e7aed"
+  integrity sha1-0ViSe7fBp4935W3oYaOxXK4Oeu0=
+  dependencies:
+    "@types/node" "*"
+
 "@types/node@*":
   version "16.7.1"
   resolved "http://npm.dui88.com:80/@types%2fnode/-/node-16.7.1.tgz#c6b9198178da504dfca1fd0be9b2e1002f1586f0"
@@ -182,6 +189,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bignumber.js@9.0.0:
+  version "9.0.0"
+  resolved "http://npm.dui88.com:80/bignumber.js/-/bignumber.js-9.0.0.tgz#805880f84a329b5eac6e7cb6f8274b6d82bdf075"
+  integrity sha1-gFiA+Eoym16sbny2+CdLbYK98HU=
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "http://npm.dui88.com:80/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -369,7 +381,7 @@ cookie@0.4.0:
   resolved "http://npm.dui88.com:80/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
   integrity sha1-vrQ35wIrO21JAZ0IhmUwPr6cFLo=
 
-core-util-is@1.0.2:
+core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "http://npm.dui88.com:80/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
@@ -740,6 +752,11 @@ inherits@2.0.3:
   resolved "http://npm.dui88.com:80/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
+inherits@~2.0.3:
+  version "2.0.4"
+  resolved "http://npm.dui88.com:80/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
+
 ini@1.3.7:
   version "1.3.7"
   resolved "http://npm.dui88.com:80/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
@@ -829,6 +846,11 @@ is-yarn-global@^0.3.0:
   resolved "http://npm.dui88.com:80/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
   integrity sha1-1QLTOCWQ6jAEiTdGdUyJE5lz4jI=
 
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "http://npm.dui88.com:80/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "http://npm.dui88.com:80/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -970,6 +992,16 @@ ms@^2.1.1:
   resolved "http://npm.dui88.com:80/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha1-V0yBOM4dK1hh8LRFedut1gxmFbI=
 
+mysql@^2.18.1:
+  version "2.18.1"
+  resolved "http://npm.dui88.com:80/mysql/-/mysql-2.18.1.tgz#2254143855c5a8c73825e4522baf2ea021766717"
+  integrity sha1-IlQUOFXFqMc4JeRSK68uoCF2Zxc=
+  dependencies:
+    bignumber.js "9.0.0"
+    readable-stream "2.3.7"
+    safe-buffer "5.1.2"
+    sqlstring "2.3.1"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "http://npm.dui88.com:80/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -1072,6 +1104,11 @@ prepend-http@^2.0.0:
   resolved "http://npm.dui88.com:80/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "http://npm.dui88.com:80/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha1-eCDZsWEgzFXKmud5JoCufbptf+I=
+
 proxy-addr@~2.0.4:
   version "2.0.7"
   resolved "http://npm.dui88.com:80/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -1140,6 +1177,19 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+readable-stream@2.3.7:
+  version "2.3.7"
+  resolved "http://npm.dui88.com:80/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "http://npm.dui88.com:80/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -1194,7 +1244,7 @@ responselike@^1.0.2:
   dependencies:
     lowercase-keys "^1.0.0"
 
-safe-buffer@5.1.2:
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "http://npm.dui88.com:80/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha1-mR7GnSluAxN0fVm9/St0XDX4go0=
@@ -1265,6 +1315,11 @@ signal-exit@^3.0.2:
   resolved "http://npm.dui88.com:80/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw=
 
+sqlstring@2.3.1:
+  version "2.3.1"
+  resolved "http://npm.dui88.com:80/sqlstring/-/sqlstring-2.3.1.tgz#475393ff9e91479aea62dcaf0ca3d14983a7fb40"
+  integrity sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A=
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "http://npm.dui88.com:80/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -1308,6 +1363,13 @@ string-width@^4.0.0, string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "http://npm.dui88.com:80/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=
+  dependencies:
+    safe-buffer "~5.1.0"
+
 strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "http://npm.dui88.com:80/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -1457,6 +1519,11 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "http://npm.dui88.com:80/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "http://npm.dui88.com:80/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"

src/component/Content/Content.jsx

@@ -10,7 +10,7 @@ function Content(props) {
             {
                 dataCenter?.toolBox?.length ? dataCenter.toolBox.map(v => {
                         return (
-                            <ContentItem key={v.id} value={v}/>
+                            <ContentItem key={v['toolBoxId']} value={v}/>
                         )
                     })
                     :

src/component/Content/ContentItem.jsx

@@ -5,30 +5,32 @@ import followed from '../../static/followed.png'
 import setting from '../../static/setting.svg'
 import trash from '../../static/trash.svg'
 import {useContext} from "react";
-import {Root} from "../../dataCenter/Root";
+import {PopContext, Root} from "../../dataCenter/Root";
+import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
 
 function ContentItem(props) {
     const {fetchData, updateIndex} = useContext(Root)
-    const {icon, name, desc, url, follow, id} = props.value
+    const {showPop} = useContext(PopContext)
+    const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId} = props.value
     const jumpUrl = url => {
         window.location.href = url
     }
-    const deleteItem = id => {
-        fetchData('/delete/deleteToolBoxById', {id: id})
+    const deleteItem = toolBoxId => {
+        fetchData('/delete/deleteToolBoxById', {toolBoxId})
             .then(() => updateIndex())
     }
     return (
         <div className="content-item">
             <div className="content-adminTool">
-                <img src={setting} alt=""/>
-                <img src={trash} alt="" onClick={() => deleteItem(id)}/>
+                <img src={setting} alt="" onClick={()=>showPop((<PopToolBoxConfig value={props.value}/>))}/>
+                <img src={trash} alt="" onClick={() => deleteItem(toolBoxId)}/>
             </div>
-            <div className="item-icon" onClick={() => jumpUrl(url)}>
-                <img src={icon ? icon : defaultIcon} alt={name}/>
+            <div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}>
+                <img src={toolBoxIcon ? toolBoxIcon : defaultIcon} alt={toolBoxName}/>
             </div>
-            <div className="item-name" onClick={() => jumpUrl(url)}>{name}</div>
-            <div className="item-desc">{desc}</div>
-            <a className='item-url' href={url}>{url}</a>
+            <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=""/>
                 收藏

src/component/Content/ContentItem.scss

@@ -17,8 +17,8 @@
         width: 36px;
         height: 15px;
         position: absolute;
-        top: 3px;
-        right: 10px;
+        top: -18px;
+        right: 4px;
         line-height: 15px;
         display: flex;
         justify-content: space-between;

src/component/PopConfirm/PopConfirm.jsx

+import {useContext} from "react";
+import {PopContext} from "../../dataCenter/Root";
+
+function PopConfirm(props){
+
+    const {hidePop} = useContext(PopContext)
+    const {submit, title} = props
+
+    return (
+        <div className="Pop-container">
+            <div className="Pop-tool">
+                <button className="close" onClick={() => hidePop()}>X</button>
+            </div>
+            <h2 className='Pop-title'>{title}</h2>
+            <div className="Pop-bottom">
+                <button className='btn-submit-addToolBox' onClick={() => submit()}>确定</button>
+                <button className='btn-submit-addToolBox' onClick={() => submit()}>取消</button>
+            </div>
+        </div>
+    )
+}
+
+export default PopConfirm

src/component/PopConfirm/PopConfirm.scss

+@import "../../common/popStyle";
+.Pop-container{
+    position: absolute;
+}

src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.jsx

+import {useContext} from "react";
+import {PopContext, Root} from "../../dataCenter/Root";
+import {useFormState} from "../../utils/hook";
+import PopConfirm from "../PopConfirm/PopConfirm";
+
+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,
+        toolBoxDesc,
+        toolBoxUrl
+    })
+
+    const updateToolBox = () => {
+        fetchData('/update/updateToolBox', Object.assign({}, input, {toolBoxId}))
+            .then(() => updateIndex())
+    }
+
+
+    return (
+        <div className="Pop-container">
+            <div className="Pop-tool">
+                <button className="close" onClick={() => hidePop()}>X</button>
+            </div>
+            <h2 className='Pop-title'>{toolBoxName}</h2>
+            <div className="formArea">
+                <div className="input-group ">
+                    <input type="text" onChange={e => setInput('toolBoxName', e.target.value)}
+                           defaultValue={input?.['toolBoxName']}
+                           min={1} required/>
+                    <span> 名称</span>
+                </div>
+                <div className="input-group ">
+                    <input type="text" onChange={e => setInput('toolBoxIcon', e.target.value)}
+                           defaultValue={input?.['toolBoxIcon']}
+                           min={1} required/>
+                    <span> 图标</span>
+                </div>
+                <div className="input-group ">
+                    <input type="text" onChange={e => setInput('toolBoxDesc', e.target.value)}
+                           defaultValue={input?.['toolBoxDesc']}
+                           min={1} required/>
+                    <span> 描述</span>
+                </div>
+                <div className="input-group ">
+                    <input type="text" onChange={e => setInput('toolBoxUrl', e.target.value)}
+                           defaultValue={input?.['toolBoxUrl']} min={1}
+                           required/>
+                    <span> 链接</span>
+                </div>
+            </div>
+            <div className="Pop-bottom">
+                <button className='btn-submit-addToolBox' onClick={() => showPop((<PopConfirm title={`确定要修改${toolBoxName}吗？`}/>))}>提交</button>
+            </div>
+        </div>
+    )
+}
+
+export default Pop_toolBoxConfig

src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.scss

+@import "../../common/popStyle";
+.Pop-container{
+    position: absolute;
+}

src/component/Pop_addToolBox/Pop_addToolBox.jsx

@@ -23,22 +23,26 @@ function Pop_addToolBox() {
             <h2 className='Pop-title'>新建工具盒</h2>
             <div className="formArea">
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('name', e.target.value)} defaultValue={input?.name}
+                    <input type="text" onChange={e => setInput('toolBoxName', e.target.value)}
+                           defaultValue={input?.['toolBoxName']}
                            min={1} required/>
                     <span> 名称</span>
                 </div>
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('icon', e.target.value)} defaultValue={input?.icon}
+                    <input type="text" onChange={e => setInput('toolBoxIcon', e.target.value)}
+                           defaultValue={input?.['toolBoxIcon']}
                            min={1} required/>
                     <span> 图标</span>
                 </div>
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('desc', e.target.value)} defaultValue={input?.desc}
+                    <input type="text" onChange={e => setInput('toolBoxDesc', e.target.value)}
+                           defaultValue={input?.['toolBoxDesc']}
                            min={1} required/>
                     <span> 描述</span>
                 </div>
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('url', e.target.value)} defaultValue={input?.url} min={1}
+                    <input type="text" onChange={e => setInput('toolBoxUrl', e.target.value)}
+                           defaultValue={input?.['toolBoxUrl']} min={1}
                            required/>
                     <span> 链接</span>
                 </div>

src/component/Pop_addType/Pop_addType.jsx

@@ -20,7 +20,7 @@ function Pop_addType(props){
             <h2 className='Pop-title'>新建类型</h2>
             <div className="formArea">
                 <div className="input-group ">
-                    <input type="text" onChange={e => setInput('name', e.target.value)} defaultValue={input?.name}
+                    <input type="text" onChange={e => setInput('typeName', e.target.value)} defaultValue={input?.typeName}
                            min={1} required/>
                     <span> 类型名称</span>
                 </div>

src/component/ToolType/ToolType.jsx

@@ -10,9 +10,9 @@ function ToolType (props) {
             {
                 dataCenter?.type?.length && dataCenter.type.map(v => {
                     const classNameArr = ['item-tool-type ']
-                    if (v.id === typeId) classNameArr.push('item-tool-type-selected')
+                    if (v["typeId"] === typeId) classNameArr.push('item-tool-type-selected')
                     return (
-                        <div key={v.id} className={classNameArr.join('')} onClick={()=>setTypeId(v.id)}>{v.typeName}</div>
+                        <div key={v["typeId"] } className={classNameArr.join('')} onClick={()=>setTypeId(v["typeId"])}>{v.typeName}</div>
                     )
                 })
             }

src/data.js

 const data = {
-    index: {
-        toolType: [{
-            id: 1,
-            type: '我的'
-        }, {
-            id: 2,
-            type: '工具'
-        }, {
-            id: 3,
-            type: '文档'
-        },],
 
-        content: Array.from({length: 20}, (v, i) => {
-            return {
-                id: i+1,
-                name: '你TM找茬是不是',
-                icon: null,
-                desc: '你看看现在哪有瓜啊，都是大棚的瓜，你嫌贵我还嫌贵呢!',
-                url: 'https://www.bilibili.com',
-            }
-        })
-
-    }
 }
 
 export default data

src/page/index.jsx

@@ -2,27 +2,32 @@ import './index.scss'
 import ToolType from "../component/ToolType/ToolType";
 import Content from "../component/Content/Content";
 import {useContext, useEffect, useState} from "react";
-import Pop_addToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
+import PopAddToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
 import {PopContext, Root} from "../dataCenter/Root";
-import Pop_addType from "../component/Pop_addType/Pop_addType";
+import PopAddType from "../component/Pop_addType/Pop_addType";
 
 function Index() {
     const {updateIndex} = useContext(Root)
-    const [pop, setPop] = useState('')
-    console.log(JSON.stringify({name: 1, icon: 1, desc: 1, url: 'https://www.baidu.com'}))
+    const [pop, setPop] = useState()
+
+    const showPop = popComponent => {
+        setPop(popComponent)
+    }
 
     useEffect(() => {
         updateIndex()
     }, [])
 
     return (
+        <PopContext.Provider value={{hidePop: () => setPop(''), showPop: popName => showPop(popName)}}>
             <div className="index">
+
                 <div className="nav">
                     <div className="nav-title">Dui123</div>
                 </div>
                 <div className="adminTool">
-                <button className='btn-admin' onClick={() => setPop('addToolBox')}>新建工具盒</button>
-                <button className='btn-admin' onClick={() => setPop('addType')}>新建类型</button>
+                    <button className='btn-admin' onClick={() => setPop((<PopAddToolBox/>))}>新建工具盒</button>
+                    <button className='btn-admin' onClick={() => setPop((<PopAddType/>))}>新建类型</button>
                 </div>
                 <div className="tool-nav">
                     <ToolType/>
@@ -31,15 +36,11 @@ function Index() {
                 <div className="container">
                     <Content/>
                 </div>
-            <PopContext.Provider value={{hidePop: () => setPop('')}}>
                 {
-                    pop === 'addToolBox' && <Pop_addToolBox/>
+                    pop
                 }
-                {
-                    pop === 'addType' && <Pop_addType/>
-                }
-            </PopContext.Provider>
             </div>
+        </PopContext.Provider>
     )
 }