修改页面

.idea/dui123.iml

@@ -8,11 +8,12 @@
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/expressServer/.idea" />
       <excludeFolder url="file://$MODULE_DIR$/.idea/inspectionProfiles" />
-      <excludeFolder url="file://$MODULE_DIR$/node_modules" />
       <excludeFolder url="file://$MODULE_DIR$/server/node_modules" />
       <excludeFolder url="file://$MODULE_DIR$/server/staticFile/build" />
+      <excludeFolder url="file://$MODULE_DIR$/node_modules" />
     </content>
     <content url="file://$MODULE_DIR$/node_modules" />
+    <content url="file://$MODULE_DIR$/node_modules/@types" />
     <content url="file://$MODULE_DIR$/server/node_modules" />
     <content url="file://$MODULE_DIR$/server/node_modules/@types" />
     <content url="file://$MODULE_DIR$/server/node_modules/sso-oauth2" />

server/routes/query.js

@@ -42,7 +42,7 @@ getMysql.then(Mysql => {
         let {isFollow, type_id} = req.query
         let SQL = `SELECT toolbox.*, type_childtype_toolbox.child_type_id FROM type_childtype_toolbox INNER JOIN toolbox ON type_childtype_toolbox.toolbox_id = toolbox.toolbox_id WHERE type_childtype_toolbox.type_id = ?`
         if (!isFollow && !type_id){
-            SQL = `SELECT * FROM toolbox`
+            SQL = `SELECT toolbox.*, type_childtype_toolbox.child_type_id, type_childtype_toolbox.type_id FROM type_childtype_toolbox INNER JOIN toolbox ON type_childtype_toolbox.toolbox_id = toolbox.toolbox_id`
         }
         if (isFollow) {
             // type_id = JSON.parse(type_id)

server/routes/users.js

@@ -13,6 +13,16 @@ const ErrorCode = {
 getMysql.then(Mysql => {
     /* GET users listing. */
     router.get('/getUser', async (req, res) => {
+        res.send({
+            success: true,
+            data: {
+                name: '王天宇',
+                id: 1,
+                follow: []
+            }
+        })
+
+
         const {sso_ticket} = req.cookies
         console.info('cookies: ', req.cookies)
         if (!sso_ticket) {

src/component/Content/Content.jsx

@@ -4,18 +4,25 @@ import {useContext} from "react";
 import {Root} from "../../dataCenter/Root";
 
 function Content(props) {
+    const {childTypeId, typeId} = props
     const {dataCenter} = useContext(Root)
     return (
         <div className="content">
             {
-                dataCenter.toolBox?.length ? dataCenter?.toolBox?.filter(v => {
-                        if (dataCenter.child_type_id === 'all') return true
-                        else return v.child_type_id === dataCenter.child_type_id
-                    }).map(v => {
-                        return (
-                            <ContentItem key={v['toolbox_id']} value={v}/>
-                        )
-                    })
+                dataCenter.toolBox?.length ? dataCenter?.toolBox
+                        .filter(v => {
+                            if (typeId === 'all') return true
+                            else if (typeId === 'follow') return dataCenter.userInfo.follow.includes(v.type_id)
+                            else return v.type_id === typeId
+                        })
+                        .filter(v => {
+                            if (childTypeId === 'all') return true
+                            else return v.child_type_id === childTypeId
+                        }).map(v => {
+                            return (
+                                <ContentItem key={v['toolbox_id']} value={v}/>
+                            )
+                        })
                     :
                     '没有数据了！'
             }

src/component/Content/Content.scss

@@ -2,7 +2,7 @@
 .content{
     width: 100%;
     max-width: 1190px;
-    min-width: 612px;
+    min-width: 1190px;
     background: $backgroundColor;
     border-radius: 0 0 3px 3px;
     box-sizing: border-box;

src/component/ContentAdmin/Content.jsx

 import './Content.scss'
-import ContentItemAdmin from "./ContentItemAdmin";
 import {useContext} from "react";
 import {Root} from "../../dataCenter/Root";
-import ContentItem from "../Content/ContentItem";
+import ContentItemAdmin from "./ContentItemAdmin";
 
-function Content(props) {
+function ContentAdmin(props) {
+    const {childTypeId, typeId} = props
     const {dataCenter} = useContext(Root)
-
     return (
         <div className="content">
             {
-                dataCenter.toolBox?.length ? dataCenter?.toolBox?.filter(v => {
-                        if (dataCenter.child_type_id === 'all') return true
-                        else return v.child_type_id === dataCenter.child_type_id
-                    }).map(v => {
-                        return (
-                            <ContentItemAdmin key={v['toolbox_id']} value={v}/>
-                        )
-                    })
+                dataCenter.toolBox?.length ? dataCenter?.toolBox
+                        .filter(v => {
+                            if (typeId === 'all') return true
+                            else if (typeId === 'follow') return dataCenter.userInfo.follow.includes(v.type_id)
+                            else return v.type_id === typeId
+                        })
+                        .filter(v => {
+                            if (childTypeId === 'all') return true
+                            else return v.child_type_id === childTypeId
+                        }).map(v => {
+                            return (
+                                <ContentItemAdmin key={v['toolbox_id']} value={v}/>
+                            )
+                        })
                     :
                     '没有数据了！'
             }
@@ -25,4 +30,4 @@ function Content(props) {
     )
 }
 
-export default Content
+export default ContentAdmin

src/component/IndexContent/IndexContent.jsx

+import ToolType from "../ToolType/ToolType";
+import Content from "../Content/Content";
+import {useState} from "react";
+
+
+function IndexContent(props){
+    const {typeData} = props
+    const [typeId, setTypeId] = useState(typeData[0].type_id)
+    const [childTypeId, setChildTypeId] = useState('all')
+    return (
+        <>
+            <div className="tool-nav">
+                <ToolType typeData={typeData} setChildTypeId={setChildTypeId} setTypeId={setTypeId} typeId={typeId} childTypeId={childTypeId}/>
+            </div>
+            <div className="container">
+                <Content typeId={typeId} childTypeId={childTypeId}/>
+            </div>
+        </>
+    )
+}
+
+export  default  IndexContent

src/component/IndexContent/IndexContentAdmin.jsx

+import ToolType from "../ToolType/ToolType";
+import Content from "../Content/Content";
+import {useState} from "react";
+import ContentAdmin from "../ContentAdmin/Content";
+
+
+function IndexContent(props){
+    const {typeData} = props
+    const [typeId, setTypeId] = useState(typeData[0].type_id)
+    const [childTypeId, setChildTypeId] = useState('all')
+    return (
+        <>
+            <div className="tool-nav">
+                <ToolType typeData={typeData} setChildTypeId={setChildTypeId} setTypeId={setTypeId} typeId={typeId} childTypeId={childTypeId}/>
+            </div>
+            <div className="container">
+                <ContentAdmin typeId={typeId} childTypeId={childTypeId}/>
+            </div>
+        </>
+    )
+}
+
+export  default  IndexContent

src/component/ToolType/ToolType.jsx

 import './ToolType.scss'
 import {useContext} from "react";
 import {Root} from "../../dataCenter/Root";
-import {CHANGE_CHILD_TYPE, CHANGE_TYPE} from "../../dataCenter/action";
 
 const ChildTypeItem = props => {
     const {dataCenter, dispatch} = useContext(Root)
-    const {child_type_id, child_type_name} = props
+    const {childTypeId, child_type_id, child_type_name, setChildTypeId} = props
     const classNameArr = ['child-type-item']
-    if (child_type_id === dataCenter.child_type_id) {
+    if (child_type_id === childTypeId) {
         classNameArr.push('child-type-item-selected')
     }
     const handleClick = () => {
-        console.log(child_type_id)
-        dispatch(CHANGE_CHILD_TYPE(child_type_id))
+        setChildTypeId(child_type_id)
     }
     return (
         <div className={classNameArr.join(' ')} onClick={handleClick}>{child_type_name}</div>
@@ -21,31 +19,40 @@ const ChildTypeItem = props => {
 
 
 function ToolType(props) {
+    const {typeData, setChildTypeId, setTypeId, typeId, childTypeId} = props
     const {dataCenter, dispatch} = useContext(Root)
+    const getTypeData = ()=>{
+        return typeData.filter(v => v.type_id === typeId)[0]
+    }
+    if (!Array.isArray(typeData)) return (<div>无数据,或数据格式错误</div>)
     return (
         <>
             <div className="tab-tool-type">
-                <div className={dataCenter.type_id === 'follow' ? 'item-tool-type item-tool-type-selected' : 'item-tool-type'}
-                     onClick={() => dispatch(CHANGE_TYPE('follow'))}>我的收藏
-                </div>
                 {
-                    dataCenter?.type?.length > 0 && dataCenter.type.map(v => {
-                        const classNameArr = ['item-tool-type ']
-                        if (v["type_id"] === dataCenter.type_id) classNameArr.push('item-tool-type-selected')
-                        return (
-                            <div key={v["type_id"]} className={classNameArr.join('')}
-                                 onClick={() => dispatch(CHANGE_TYPE( v["type_id"]))}>{v.type_name}</div>
-                        )
-                    })
+                    Array.isArray(typeData) && typeData.map(v => (
+                        <div
+                            className={typeId === v.type_id ? 'item-tool-type item-tool-type-selected' : 'item-tool-type'}
+                            onClick={() => setTypeId(v?.type_id)} key={v.type_id}>
+                            {v?.type_name}
+                        </div>
+                    ))
                 }
+
             </div>
             <div className="child-type">
-                <ChildTypeItem key={'all'} child_type_id={'all'} child_type_name={'全部'}/>
                 {
-                    dataCenter?.childType?.length > 0 && dataCenter?.childType.map(v => {
+                    typeId !== 'all' &&
+                    <ChildTypeItem key={'all'} child_type_id={'all'} child_type_name={'全部'}
+                                   setChildTypeId={setChildTypeId} childTypeId={childTypeId}/>
+                }
+                {
+                    Array.isArray(getTypeData()?.children) && getTypeData().children.map(v => {
                         return (
                             <ChildTypeItem key={v.child_type_id} child_type_id={v.child_type_id}
-                                           child_type_name={v.child_type_name}/>
+                                           child_type_name={v.child_type_name}
+                                           setChildTypeId={setChildTypeId}
+                                           childTypeId={childTypeId}
+                            />
                         )
                     })
                 }

src/dataCenter/reducer.js

@@ -4,7 +4,7 @@ const initDataCenter = {
     childType: null,
     userInfo: null,
     needUpdateIndex: false,
-    type_id: 'follow',
+    type_id: 'all',
     child_type_id: 'all'
 }
 

src/page/index/index.jsx

@@ -7,6 +7,7 @@ import {useContext, useEffect} from "react";
 import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
 import {useHistory} from "react-router-dom";
 import gotoLogin from "../../utils/gotoLogin";
+import IndexContent from "../../component/IndexContent/IndexContent";
 
 function Index() {
     const history = useHistory()
@@ -18,8 +19,8 @@ function Index() {
             )
     }
     useEffect(() => {
-        fetchData('/query/queryType', {}, 'type')
-            .then(() => fetchData('/query/queryChildType', {type_id: dataCenter.type_id}, 'childType'))
+        fetchData('/typeManage/queryTypeForManage', {}, 'type')
+            // .then(() => fetchData('/query/queryChildType', {type_id: dataCenter.type_id}, 'childType'))
             .then(() => dispatch(NEED_UPDATE_INDEX()))
     }, [dataCenter.type_id])
 
@@ -28,7 +29,7 @@ function Index() {
             const _typeId = dataCenter.type_id === 'follow' ? {
                 isFollow: true,
                 type_id: JSON.stringify(dataCenter?.userInfo?.follow)
-            } : {type_id: dataCenter.type_id}
+            } : {}
             fetchData('/query/queryToolBox', _typeId, 'toolBox').then(() => dispatch(NEED_UPDATE_INDEX()))
         }
     }, [dataCenter.needUpdateIndex])
@@ -55,12 +56,12 @@ function Index() {
                             src="https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1"/>
                 </div>
             </div>
-            <div className="tool-nav">
-                <ToolType/>
-            </div>
-            <div className="container">
-                <Content/>
-            </div>
+           <IndexContent typeData={[{type_id: 'all', type_name: '全部'}, {type_id: 'follow', type_name: '我的收藏'}]}/>
+            {
+                Array.isArray(dataCenter?.type) && dataCenter?.type?.map(v => (
+                  <IndexContent typeData={[v]} key={v.type_id}/>
+                ))
+            }
             <div className="index-footer">
                 兑吧研发中心·杭州兑吧网络科技有限公司版权所有
                 <br/>

src/page/indexAdmin/index.jsx

@@ -8,6 +8,8 @@ import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
 import AdminIndex from "../../component/AdminIndex/AdminIndex";
 import {useHistory} from "react-router-dom";
 import gotoLogin from "../../utils/gotoLogin";
+import IndexContent from "../../component/IndexContent/IndexContent";
+import IndexContentAdmin from "../../component/IndexContent/IndexContentAdmin";
 
 function Index() {
     const history = useHistory()
@@ -21,8 +23,8 @@ function Index() {
     }
 
     useEffect(() => {
-        fetchData('/query/queryType', {}, 'type')
-            .then(()=> fetchData('/query/queryChildType',{type_id: dataCenter.type_id},'childType'))
+        fetchData('/typeManage/queryTypeForManage', {}, 'type')
+            // .then(()=> fetchData('/query/queryChildType',{type_id: dataCenter.type_id},'childType'))
             .then(() => dispatch(NEED_UPDATE_INDEX()))
     }, [dataCenter.type_id])
 
@@ -58,12 +60,12 @@ function Index() {
                                 src="https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1"/>
                     </div>
                 </div>
-                <div className="tool-nav">
-                    <ToolType/>
-                </div>
-                <div className="container">
-                    <Content/>
-                </div>
+                <IndexContentAdmin typeData={[{type_id: 'all', type_name: '全部'}, {type_id: 'follow', type_name: '我的收藏'}]}/>
+                {
+                    Array.isArray(dataCenter?.type) && dataCenter?.type?.map(v => (
+                        <IndexContentAdmin typeData={[v]} key={v.type_id}/>
+                    ))
+                }
                 <div className="index-footer">
                     兑吧研发中心·杭州兑吧网络科技游戏公司版权所有
                     <br/>