no message

src/components/GameItem/index.jsx

@@ -12,6 +12,8 @@ import {ReactComponent as UNLikeIcon} from "@assets/singlesvg/xiai_bai.svg";
 import {ReactComponent as LikeIcon} from "@assets/singlesvg/xiai_hong.svg";
 import {useDispatch, useSelector} from "react-redux";
 import {getGameLike, updateGameLike} from "@features/mainSlice";
+import {updatePageGameLike} from "@features/pageSlice";
+import SvgIcon from "@components/SvgIcon";
 
 const GameItem=({data,handleRoom,...props})=>{
     const navigate=useNavigate();
@@ -59,6 +61,7 @@ const GameItem=({data,handleRoom,...props})=>{
     }
     const handleLike=()=>{
         dispatch(updateGameLike({id:data.id,like:(1-like)}));
+        dispatch(updatePageGameLike({data:data,like:(1-like)}));
     }
     // return (
     //     <div className={styles.grid_item}>
@@ -110,7 +113,8 @@ const GameItem=({data,handleRoom,...props})=>{
             </button>
             <button className={styles.favorite_con} onClick={handleLike}>
                 {
-                    like?(<LikeIcon></LikeIcon>):(<UNLikeIcon></UNLikeIcon>)
+                    // like?(<LikeIcon></LikeIcon>):(<UNLikeIcon></UNLikeIcon>)
+                    <SvgIcon className={`${styles.icon} ${like?styles.icon_active:''}`} herf={"icon_Favorites1"}></SvgIcon>
                 }
             </button>
         </div>

src/components/GameItem/styles.module.scss

@@ -82,9 +82,13 @@
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.65);
     padding: 0.25rem;
-    svg{
+    & .icon{
       width: 1.2rem;
       height: 1.2rem;
+      fill: rgba(255, 255, 255, 0.8);;
+      &_active{
+        fill: #ffdf46;
+      }
     }
   }
 }

src/components/GameSmallList/index.jsx

@@ -270,9 +270,10 @@ const GameSmallList=({data,user})=>{
         if (selected !== -1) {
             gridStyle.rowGap=`${rowTop}rem`;
         }
+        let len=list.length;
         return (
             <>
-                <div className={styles.grid_list_m} ref={gridListMRef} style={gridStyle}>
+                <div className={`${styles.grid_list_m} ${len<5?styles.grid_list_m_onerow:''}`} ref={gridListMRef} style={gridStyle}>
                     {
                         list.map((item, index) => {
                             let itemStyle={}

src/components/GameSmallList/styles.module.scss

@@ -88,6 +88,9 @@
     grid-auto-flow: column;
     //grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
     grid-auto-columns: calc(100% / 3 - (2)* var(--grid-gap) / 3);
+    &_onerow{
+      grid-template-rows: repeat(1, 1fr);
+    }
     gap: var(--grid-gap);
     position: relative;
     scroll-snap-type: x mandatory;

src/features/pageSlice.js

@@ -1,18 +1,27 @@
 import {createAction, createSlice} from "@reduxjs/toolkit";
 import {REQ_STATUS} from "@api/config";
 import {buildReqReducer, reqPageModules} from "@features/api";
-
-const parseModules=(data,key="")=>{
+const addFavoriteKey=(state,key)=>{
+    let favoriteKeys=state.favoriteKeys;
+    if (!favoriteKeys.includes(key)){
+        favoriteKeys.push(key);
+    }
+    state.favoriteKeys=favoriteKeys;
+}
+const parseModules=(data,key="",state)=>{
     if (data!=null){
         for (let i = 0; i <data.length ; i++) {
             let item=data[i];
             if (item!=null){
                 let tkey=key+"_"+i;
                 item["_mkey"]=tkey;
+                if (item.data_key==="favorite"){
+                    addFavoriteKey(state,tkey);
+                }
                 let tdata=item.data;
                 if (tdata!=null){
                     tkey=tkey+"_data";
-                    item.data=parseModules(tdata,tkey);
+                    item.data=parseModules(tdata,tkey,state);
                 }
             }
         }
@@ -41,7 +50,7 @@ const reducerPage=(state,action)=>{
     if (json&&json.code===0){
         let data=json.data==null?[]:json.data;
         let pageID=json.pageID;
-        data=parseModules(data,pageID);
+        data=parseModules(data,pageID,state);
         state.pageData[pageID]=data;
     }
 }
@@ -69,13 +78,48 @@ export const Page=createSlice({
                 let newObj={page:payload.page,totalPage:payload.totalPage,data:newData};
                 Object.assign(module,newObj);
             }
+        }),
+        updatePageGameLike:((state, action) => {
+            let {data,like}=action.payload;
+            let favoriteKeys=state.favoriteKeys;
+            if (favoriteKeys&&favoriteKeys.length>0){
+                for (let i = 0; i < favoriteKeys.length; i++) {
+                    let mkey=favoriteKeys[i];
+                    let module=getModuleData(state.pageData,mkey);
+                    if (module!=null){
+                        let oldData=module.data;
+                        if (oldData==null)oldData=[];
+                        if (oldData.length===0){
+                            if (like===1)oldData.unshift(data);
+                        }
+                        else
+                        {
+                            let index=-1;
+                            for (let j = 0; j < oldData.length; j++) {
+                                let item=oldData[j];
+                                if (item!=null&&item.id===data.id){
+                                    index=j;
+                                    break;
+                                }
+                            }
+                            if (like===1){
+                                if (index===-1)oldData.unshift(data);
+                            }
+                            else {
+                                if (index>=0)oldData.splice(index,1);
+                            }
+                        }
+                        module.data=oldData;
+                    }
+                }
+            }
         })
     },
     extraReducers: (builder) => {
         buildReqReducer(builder,reqPageModules,reducerPage,pageStatus);
     },
 })
-export const {updateGameList} = Page.actions;
+export const {updateGameList,updatePageGameLike} = Page.actions;
 export const getFetchStatus=(state)=>{
     return state.page.status;
 }