feat: 首页大类查看更多，题目列表标签

src/components/category-list/index.jsx

@@ -8,7 +8,7 @@ import {
     CaretUpOutlined,
 } from '@ant-design/icons';
 import req from '@utils/request';
-import { Divider, Spin } from 'antd';
+import { Divider, Spin, Modal } from 'antd';
 import _ from 'lodash';
 import './index.less';
 import { apiName, imgObject } from './constant';
@@ -32,12 +32,25 @@ const categoryShowCount = 4;
 
 const cacheMap = {}
 
+/**
+     * 上万后展示 W+
+     * @param {*} total
+     * @returns
+     */
+const formatTotal = (total) => {
+    if (total >= 10000) {
+        return Math.floor(total / 10000) + 'W+';
+    }
+    return total;
+}
+
 const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
     const [secondCategoryList, setSecondCategoryList] = useState([])
     const [currentActive, setCurrentActive] = useState(categoryList[0])
     const [isPutAway, setIsPutAway] = useState(true)
     const [loading, setLoading] = useState(false)
     const [currentLabelIndex, setCurrentLabelIndex] = useState([])
+    const [openMoreFlag, setOpenMoreFlag] = useState(false)
 
 
     const getLabels = (id) => {
@@ -126,7 +139,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                     );
                 })}
                 {categoryList.length > 7 && (
-                    <div className="first-category-more">
+                    <div className="first-category-more" onClick={() => setOpenMoreFlag(true)}>
                         更多
                         <RightOutlined />
                     </div>
@@ -136,6 +149,57 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
     };
 
 
+    /**
+     * 点击更多的分类项
+     * @param {*} id
+     * @returns
+     */
+    const onChangeCategoryMore = (cur) => () => {
+        setOpenMoreFlag(false)
+        setCurrentActive(cur)
+        let list = [...categoryList].reduce((pre, item) => {
+            if (item.id !== cur.id) {
+                pre.push(item);
+            } else {
+                pre.unshift(item);
+            }
+            return pre;
+        }, []);
+        props.onChangeCategoryMore && props.onChangeCategoryMore(cur.id, list);
+    };
+
+    /**
+     * 更多分类
+     * @returns
+     */
+    const renderMoreBox = () => {
+        return (
+            <div className="first-category-more-list">
+                {categoryList.slice(7).map((categoryModuleItem, categoryModuleIndex) => {
+                    return (
+                        <div
+                            className="first-category-item"
+                            key={`first_more_category_${categoryModuleItem.id}`}
+                            style={{
+                                backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
+                            }}
+                            onClick={onChangeCategoryMore(
+                                categoryModuleItem
+                            )}
+                        >
+                            <div className="first-category-item-title">
+                                {categoryModuleItem.categoryName}
+                            </div>
+                            <div className="first-category-item-count">
+                                {formatTotal(categoryModuleItem.subjectCount)}道题
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
     /**
      * 选择标签-支持单选（多选）
      * @param {*} categoryId 一级分类id
@@ -291,6 +355,14 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                     {secondCategoryList?.length > 0 && this.renderSecondContainer()}
                 </Fragment>
             )} */}
+            <Modal
+                open={openMoreFlag}
+                footer={null}
+                closable={true}
+                centered
+                onCancel={() => setOpenMoreFlag(false)}>
+                {renderMoreBox()}
+            </Modal>
         </div>
     )
 }

src/components/category-list/index.less

@@ -1,6 +1,7 @@
 .category-box {
     .first-category-list {
         display: flex;
+        width: 100%;
         .first-category-item {
             flex-shrink: 1;
             display: inline-flex;
@@ -16,30 +17,30 @@
             background-color: rgba(0, 0, 0, 0.04);
             font-weight: 400;
             transition: all 0.5s;
-            .first-category-item-title {
+            &-title {
                 color: #ffffff;
                 font-size: 14px;
                 text-overflow: ellipsis;
                 -webkit-line-clamp: 1;
                 overflow: hidden;
-                /* autoprefixer: off */
                 -webkit-box-orient: vertical;
                 display: -webkit-box;
                 word-wrap: break-word;
                 word-break: break-all;
             }
-            .first-category-item-count {
+            &-count {
                 font-size: 12px;
                 color: rgba(255, 255, 255, 0.65);
                 line-height: 16px;
+                word-wrap: break-word;
             }
             &:hover {
                 transition: all 0.5s;
                 transform: translateY(-8px);
             }
-        }
+            &-active {
-        .first-category-item-active {
+                transform: translateY(-8px);
-            transform: translateY(-8px);
+            }
         }
         .first-category-more {
             display: flex;
@@ -140,3 +141,60 @@
         }
     }
 }
+
+.ant-modal-content {
+        width: 606px;
+        background-color: #fff;
+        .ant-modal-body {
+            padding: 24px;
+            .first-category-more-list {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+                .first-category-item {
+                    flex-shrink: 1;
+                    display: inline-flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    margin: 10px 8px;
+                    padding: 10px 12px;
+                    width: 120px;
+                    height: 76px;
+                    cursor: pointer;
+                    border-radius: 4px;
+                    background-size: 100% 100%;
+                    background-color: rgba(0, 0, 0, 0.04);
+                    font-weight: 400;
+                    transition: all 0.5s;
+                    &-title {
+                        color: #ffffff;
+                        font-size: 14px;
+                        text-overflow: ellipsis;
+                        -webkit-line-clamp: 1;
+                        overflow: hidden;
+                        /* autoprefixer: off */
+                        -webkit-box-orient: vertical;
+                        display: -webkit-box;
+                        word-wrap: break-word;
+                        word-break: break-all;
+                    }
+                    &-count {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.65);
+                        line-height: 16px;
+                        word-wrap: break-word;
+                    }
+                    &:hover {
+                        transition: all 0.5s;
+                        transform: translateY(-8px);
+                    }
+                    &-active {
+                        transform: translateY(-8px);
+                    }
+                    &:nth-child(4n) {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+    }

src/components/question-list/index.jsx

@@ -45,11 +45,11 @@ const QuestionList = (props) => {
 
             </div>
             <div className="question-info-tags">
-              {item?.tags?.length > 0 &&
+              {item?.labelName?.length > 0 &&
-                item.tags.map((tagsItem, index) => {
+                item.labelName.map((tagsItem) => {
                   return (
-                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
+                    <div className="question-info-tag" key={tagsItem} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
-                      {tagsItem.name}
+                      {tagsItem}
                     </div>
                   );
                 })}

src/views/question-bank/components/ranking-box/index.less

@@ -5,7 +5,7 @@
   justify-content: center;
   margin: 0 0 20px 16px;
   padding: 0px 16px 0px;
-  width: 310px;
+  // width: 310px;
   max-height: 416px;
   background-color: #ffffff;
   border-radius: 8px;

src/views/question-bank/index.tsx

@@ -1,6 +1,6 @@
 // import { Component } from 'react';
 import { useState, useEffect, memo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+// import { useSearchParams } from 'react-router-dom'
 import QuestionList from '@components/question-list';
 import CategoryList from '@components/category-list';
 import ContributionList from './components/contribution-list';
@@ -12,7 +12,7 @@ import './index.less';
 
 const QuestionBank = () => {
 
-    const [firstCategoryList, setFirstCategoryList] = useState([])
+    const [firstCategoryList, setFirstCategoryList] = useState<Record<string, any>[]>([])
     const [questionList, setQuestionList] = useState([])
     const [isShowSpin, setIsShowSpin] = useState(false)
     const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
@@ -22,12 +22,12 @@ const QuestionBank = () => {
     const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
     const [secondCategoryId, setSecondCategoryId] = useState('')
 
-    let [searchParams, setSearchParams] = useSearchParams();
+    // let [searchParams, setSearchParams] = useSearchParams();
-    const changeUrlParam = () => {
+    // const changeUrlParam = () => {
-        // console.log(searchParams.size)
+    //     // console.log(searchParams.size)
-        setSearchParams({ id: 1 })
+    //     setSearchParams({ id: 1 })
-        // window.history.pushState({}, '0', window.location.href + '?url=' + '参数');
+    //     // window.history.pushState({}, '0', window.location.href + '?url=' + '参数');
-    }
+    // }
 
     /**
      * 获取大类分类
@@ -102,11 +102,23 @@ const QuestionBank = () => {
 
     useEffect(() => {
         if (labelList && secondCategoryId) {
-            setSearchParams({ second: secondCategoryId, label: labelList })
+            // setSearchParams({ second: secondCategoryId, label: labelList })
             queryQuestionList()
         }
     }, [labelList, pageIndex, secondCategoryId])
 
+    /**
+   * 更多分类切换
+   * @param {*} e
+   */
+    const onChangeCategoryMore = (id: string, categoryList: Record<string, any>[]) => {
+        setFirstCategoryList(categoryList)
+        setPromaryCategoryId(id)
+        setLabelList('')
+        setQuestionList([])
+        setPageIndex(1)
+        setTotal(0)
+    }
 
     return (
         <div className="question-bank-box">
@@ -120,6 +132,7 @@ const QuestionBank = () => {
                                 onChangeLabel={onChangeLabel}
                                 primaryCategoryId={primaryCategoryId}
                                 isMultipleChoice={false}
+                                onChangeCategoryMore={onChangeCategoryMore}
                             />
                         )}
                     </div>