feat: 修改刷题

src/App.tsx

@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
 import './App.less';
-import { Routes, Route, Link } from "react-router-dom"
+import { Outlet } from "react-router-dom"
-import req from '@utils/request.ts';
 import PubSub from 'pubsub-js';
 import { Input } from 'antd';
-import QuestionBank from './views/question-bank';
-import UploadQuestions from './views/upload-questions';
 import Logo from '@views/imgs/logo.jpg'
 import Head from '@views/imgs/head.jpg'
 import TopMenu from '@components/top-menu'
@@ -25,22 +22,7 @@ class NavTop extends Component {
   timerRef = React.createRef();
 
   componentDidMount() {
-    // req({
+
-    //   method: 'post',
-    //   url: 'admin/interview/peo/getDirectorInfo',
-    // }).then((re) => {
-    //   this.setState(
-    //     {
-    //       userName: re.data?.name ?? '',
-    //       intervieweEamil: re.data?.email ?? '',
-    //       headImg: '',
-    //     },
-    //     () => {
-    //       window.localStorage.setItem('interviewerName', re.data?.name ?? 'XXX');
-    //       window.localStorage.setItem('intervieweEamil', re.data?.email ?? 'XXX');
-    //     }
-    //   );
-    // });
     PubSub.subscribe('handleToRender', () => {
       this.setState({});
     });
@@ -88,25 +70,12 @@ class NavTop extends Component {
     );
   }
 }
-class RouteExample extends Component {
-  render() {
-    return (
-      <>
-        <NavTop />
-        <Routes>
-          <Route path="/question-bank" element={<QuestionBank />}></Route>
-          <Route path="/upload-questions" element={<UploadQuestions />}></Route>
-        </Routes>
-      </>
-
-    );
-  }
-}
 export default class App extends Component {
   render() {
     return (
       <div className="app-main">
-        <RouteExample />
+        <NavTop />
+        <Outlet />
       </div>
     );
   }

src/components/category-list/index.jsx

@@ -246,10 +246,10 @@ export default class CategoryList extends Component {
                             }}
                             onClick={this.onChangeCategory(categoryModuleItem.primaryCategoryId)}>
                             <div className="first-category-item-title">
-                                {categoryModuleItem.levelName}
+                                {categoryModuleItem.categoryName}
                             </div>
                             <div className="first-category-item-count">
-                                {categoryModuleItem.count}道题
+                                {categoryModuleItem.count || 50}道题
                             </div>
                         </div>
                     );

src/components/good-collection-error/constant.js

@@ -0,0 +1,9 @@
+export const good = {
+    0: '未点赞',
+    1: '已点赞',
+};
+
+export const collection = {
+    0: '未收藏',
+    1: '已收藏',
+};

src/components/good-collection-error/index.jsx

@@ -0,0 +1,262 @@
+import React, { Component } from 'react'
+import { Modal, Input, Radio, message } from 'antd'
+import { HeartTwoTone, LikeTwoTone, InfoCircleTwoTone } from '@ant-design/icons'
+import { collection, good } from './constant'
+import req from '@utils/request'
+import './index.less'
+
+const { TextArea } = Input
+export default class GoodCollectionError extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isGood: false, //是否点赞
+      isCollection: false, //是否收藏
+      goodAmount: 0, //点赞数量
+      collectionAmount: 0, //收藏数量
+      // index: 1,
+      question: [], //题目列表
+      isModal: false, //是否显示纠错弹框
+      value: 1, //纠错类型对应值
+      inputValue: '', //纠错详情内容
+      questionId: '', //题目id
+    }
+  }
+  /**纠错类型 */
+  errorType = [
+    {
+      value: 1,
+      content: '答案错误',
+    },
+    {
+      value: 2,
+      content: '题目与答案不符',
+    },
+  ]
+  componentDidMount() {
+    // this.getDetail()
+  }
+
+  getDetail() {
+    let params = {
+      subjectId: this.props.questionId,
+    }
+    req({
+      method: 'post',
+      data: params,
+      url: 'admin/question/collect/getDetail',
+    })
+      .then((res) => {
+        if (res.data) {
+          this.setState({
+            isGood: res.data.isThump,
+            goodAmount: res.data.thumpCount,
+            isCollection: res.data.isCollect,
+            collectionAmount: res.data.collectCount,
+          })
+        }
+      })
+      .catch((err) => console.log(err))
+  }
+
+  /**
+   * 点击纠错按钮
+   */
+  handleModal = () => {
+    this.setState({
+      isModal: true,
+    })
+  }
+  /**
+   * 点击弹框确认按钮
+   */
+  handleOk = () => {
+    const { value, inputValue } = this.state
+    const { questionId } = this.props
+
+    let params = {
+      subjectId: questionId,
+      errorType: value,
+      errorMsg: inputValue,
+    }
+    if (inputValue.length === 0) {
+      message.warning('请填写纠错详情!')
+    } else {
+      this.setState({
+        isModal: false,
+        inputValue: '',
+      })
+      message.success('感谢纠错，立即更改！')
+      JDreq({
+        method: 'post',
+        data: params,
+        url: '/admin/question/subjectError/add',
+      })
+    }
+  }
+  /**
+   * 点击弹框取消按钮
+   */
+  handleCancel = () => {
+    this.setState({
+      isModal: false,
+      inputValue: '',
+    })
+  }
+  /**
+   *
+   * @param {选择纠错类型} e
+   */
+  handleChangeRadio = (e) => {
+    this.setState({
+      value: e.target.value,
+    })
+  }
+  /**
+   *
+   * @param {纠错详情中填写内容} e
+   */
+  handleChangeInput = (e) => {
+    this.setState({
+      inputValue: e.target.value,
+    })
+  }
+  /**
+   *
+   * @returns 点击点赞按钮
+   */
+  handleChangeGood = () => {
+    return message.info('敬请期待')
+    const { isGood, goodAmount } = this.state
+    const { questionId } = this.props
+    let params = {
+      subjectId: questionId,
+    }
+    this.setState(
+      {
+        isGood: isGood === true ? false : true,
+        goodAmount: isGood === true ? goodAmount - 1 : goodAmount + 1,
+      },
+      () => {
+        JDreq({
+          method: 'post',
+          data: params,
+          url: 'admin/question/thump/addOrCancel',
+        }).catch((err) => console.log(err))
+      }
+    )
+  }
+  /**
+   * 点击收藏按钮
+   */
+  handleChangeCollection = () => {
+    return message.info('敬请期待')
+    const { isCollection, collectionAmount } = this.state
+    const { questionId } = this.props
+    let params = {
+      subjectId: questionId,
+    }
+    this.setState(
+      {
+        isCollection: isCollection === true ? false : true,
+        collectionAmount: isCollection === true ? collectionAmount - 1 : collectionAmount + 1,
+      },
+      () => {
+        req({
+          method: 'post',
+          data: params,
+          url: 'admin/question/collect/addOrCancel',
+        }).catch((err) => console.log(err))
+      }
+    )
+  }
+  render() {
+    const { isCollection, isGood, isModal, value, collectionAmount, goodAmount } = this.state
+    return (
+      <div className="left">
+        <div
+          className="good"
+          size="middle"
+          onClick={() => {
+            this.handleChangeGood()
+          }}
+        >
+          <LikeTwoTone twoToneColor={isGood == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />({goodAmount})
+        </div>
+        <div
+          className="collection"
+          onClick={() => {
+            this.handleChangeCollection()
+          }}
+        >
+          <HeartTwoTone twoToneColor={isCollection == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />(
+          {collectionAmount})
+        </div>
+        {/* <div className="comment">
+                    <MessageTwoTone twoToneColor="blue" style={{ marginRight: 4 }} />
+                    评论
+                </div> */}
+        <div
+          className="error-collection"
+          onClick={() => {
+            console.log('111')
+            this.handleModal()
+          }}
+        >
+          <InfoCircleTwoTone twoToneColor="red" style={{ marginRight: 4 }} />
+          纠错
+        </div>
+        <Modal
+          className="error-modal"
+          title="题目纠错"
+          visible={isModal}
+          destroyOnClose={true}
+          onOk={() => {
+            this.handleOk()
+          }}
+          onCancel={() => {
+            this.handleCancel()
+          }}
+          okText="确认"
+          cancelText="取消"
+          style={{ fontWeight: 500 }}
+        >
+          <div>
+            <div className="error-collection-title">纠错类型</div>
+            <div className="error-collection-type">
+              {this.errorType.map((item, index) => {
+                return (
+                  <div key={index} className="error-collection-type-detail">
+                    <Radio.Group
+                      onChange={(e) => {
+                        this.handleChangeRadio(e)
+                      }}
+                      defaultValue={1}
+                      buttonStyle="solid"
+                      value={value}
+                    >
+                      <Radio.Button value={item.value} className="ll">
+                        {item.content}
+                      </Radio.Button>
+                    </Radio.Group>
+                  </div>
+                )
+              })}
+            </div>
+            <div className="error-collection-title">纠错详情</div>
+            <TextArea
+              className="error-input"
+              placeholder="请输入..."
+              maxLength={256}
+              rows={4}
+              showCount={true}
+              onChange={(e) => {
+                this.handleChangeInput(e)
+              }}
+            />
+          </div>
+        </Modal>
+      </div>
+    )
+  }
+}

src/components/good-collection-error/index.less

@@ -0,0 +1,42 @@
+
+.left {
+  display: flex;
+  flex: 1;
+  margin: 20px 10px 20px 0px;
+  .good,
+  .collection,
+  .comment {
+    margin: 0 10px 0 0;
+    cursor: pointer;
+  }
+  .error-collection {
+    margin: 0 10px 0 0;
+    cursor: pointer;
+  }
+
+  .error-input {
+    background-color: red;
+  }
+}
+.ant-modal-body {
+  padding: 12px 24px 20px 24px;
+}
+.error-collection-title {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.error-collection-type {
+  display: flex;
+  .error-collection-type-detail {
+    font-weight: 500;
+    padding: 0 8px 6px 0;
+    .ll {
+      border-radius: 30px;
+    }
+  }
+}
+.ant-modal-title {
+  font-weight: 500;
+  font-size: 20px;
+}

src/components/question-list/index.jsx

@@ -1,25 +1,23 @@
-import React, { Component, Fragment } from "react";
+import React, { Component, Fragment, useState } from "react";
-
 import { Tag, Table, Pagination, Input } from "antd";
-import { filterDifficulty, gradeObject, imgObject } from "./constant";
+import { filterDifficulty, gradeObject } from "./constant";
+import { useNavigate } from "react-router-dom";
 import { splicingQuery } from "@utils";
 import "./index.less";
 const { Search } = Input;
 
 const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff']
 
-class QuestionList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectValue: "难度",
-    };
-  }
 
-  componentDidMount() { }
+const QuestionList = (props) => {
 
 
-  RandomNumBoth = (Min, Max) => {
+  const [selectValue, setSelectValue] = useState('难度')
+  const navigate = useNavigate();
+
+
+
+  const RandomNumBoth = (Min, Max) => {
     //差值
     const Range = Max - Min;
     // 随机数
@@ -30,7 +28,7 @@ class QuestionList extends Component {
   /**
    * 题目列表
    */
-  questionColumns = [
+  const questionColumns = [
     {
       title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}>
         （当前
@@ -50,7 +48,7 @@ class QuestionList extends Component {
               {item?.tags?.length > 0 &&
                 item.tags.map((tagsItem, index) => {
                   return (
-                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[this.RandomNumBoth(0, 7)] }}>
+                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
                       {tagsItem.name}
                     </div>
                   );
@@ -103,8 +101,7 @@ class QuestionList extends Component {
    * 选择标签
    * @param {*} id
    */
-  handleChangeSelect = (id) => {
+  const handleChangeSelect = (id) => {
-    console.log(id);
     let selectValue = "难度";
     if (id != 0) {
       filterDifficulty.forEach((item) => {
@@ -113,14 +110,8 @@ class QuestionList extends Component {
         }
       });
     }
-    this.setState(
+    setSelectValue(selectValue)
-      {
+    props.handleChangeSelect(id);
-        selectValue,
-      },
-      () => {
-        this.props.handleChangeSelect(id);
-      }
-    );
   };
 
   /**
@@ -129,25 +120,25 @@ class QuestionList extends Component {
    * @param {*} type
    * @returns
    */
-  onChangeAction = (item, index) => () => {
+  const onChangeAction = (item, index) => () => {
     let { isNotToDetail, difficulty, primaryCategoryId, labelList, pageIndex } =
-      this.props;
+      props;
-    !isNotToDetail &&
+    !isNotToDetail && navigate("/brush-question")
-      this.props.history.push(
+    // this.props.history.push(
-        splicingQuery("/brush-questions", {
+    //   splicingQuery("/brush-questions", {
-          id: item?.id,
+    //     id: item?.id,
-          index: index + (pageIndex - 1) * 10 + 1,
+    //     index: index + (pageIndex - 1) * 10 + 1,
-          difficulty,
+    //     difficulty,
-          primaryCategoryId,
+    //     primaryCategoryId,
-          labelList,
+    //     labelList,
-        })
+    //   })
-      );
+    // );
     if (!isNotToDetail) return;
-    this.toChangeSelectRows(item);
+    toChangeSelectRows(item);
   };
 
-  toChangeSelectRows = (record) => {
+  const toChangeSelectRows = (record) => {
-    let newSelectedRows = [...this.props.selectRows];
+    let newSelectedRows = [...props.selectRows];
     const isHas = newSelectedRows.some((rowItem) => rowItem.id === record.id);
     if (isHas) {
       newSelectedRows = newSelectedRows.filter(
@@ -156,59 +147,19 @@ class QuestionList extends Component {
     } else {
       newSelectedRows.push(record);
     }
-    this.props.setSelectRows(newSelectedRows);
+    props.setSelectRows(newSelectedRows);
   };
 
-  onChangePagination = (e) => {
+  const onChangePagination = (e) => {
-    this.props.onChangePagination(e);
+    props.onChangePagination(e);
   };
 
-  render() {
-    const { questionList, total, pageIndex, isHideSelect, isMultiple } =
-      this.props;
-    return (
-      <Fragment>
-        <div className="question-list-filter">
-          {!isHideSelect && this.renderFilterContainer()}
-          <div className="question-list-container">
-            <Table
-              onRow={(record, index) => {
-                return {
-                  onClick: this.onChangeAction(record, index), // 点击行
-                };
-              }}
-              columns={this.questionColumns}
-              dataSource={questionList}
-              rowKey={(record) => record.id}
-              // bordered={false}
-              pagination={false}
-              rowClassName="question-table-row"
-            />
-            {total > 10 && (
-              <Pagination
-                style={{
-                  padding: "24px 0",
-                  textAlign: "center",
-                }}
-                showQuickJumper
-                defaultCurrent={pageIndex}
-                total={total}
-                onChange={this.onChangePagination}
-              />
-            )}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
   /**
    * 过滤框-搜索框-模块
    * @returns
    */
-  renderFilterContainer = () => {
+  const renderFilterContainer = () => {
-    const { selectValue } = this.state;
+    const { total, isShowSearch, setSearchStr } = props;
-    const { total, isShowSearch, setSearchStr } = this.props;
     return (
       <div className="question-filter-container">
         {isShowSearch && (
@@ -223,6 +174,46 @@ class QuestionList extends Component {
       </div>
     );
   };
+
+  const { questionList, total, pageIndex, isHideSelect, isMultiple } =
+    props;
+
+  return (
+    <Fragment>
+      <div className="question-list-filter">
+        {!isHideSelect && renderFilterContainer()}
+        <div className="question-list-container">
+          <Table
+            onRow={(record, index) => {
+              return {
+                onClick: onChangeAction(record, index), // 点击行
+              };
+            }}
+            columns={questionColumns}
+            dataSource={questionList}
+            rowKey={(record) => record.id}
+            // bordered={false}
+            pagination={false}
+            rowClassName="question-table-row"
+          />
+          {total > 10 && (
+            <Pagination
+              style={{
+                padding: "24px 0",
+                textAlign: "center",
+              }}
+              showQuickJumper
+              defaultCurrent={pageIndex}
+              total={total}
+              onChange={onChangePagination}
+            />
+          )}
+        </div>
+      </div>
+    </Fragment>
+  );
+
+
 }
 
 

src/components/top-menu/index.jsx

@@ -1,14 +1,16 @@
+import { message } from 'antd';
 import React, { Component } from 'react'
+import { useLocation } from 'react-router-dom';
 import './index.less'
 // 顶部tab
 const MENULIST = [
   {
-    key: 'shareIndex',
+    key: 'questionBank',
     title: '刷题',
-    route: '/share-index',
+    route: '/question-bank',
   },
   {
-    key: 'questionBank',
+    key: 'prictiseQuestion',
     title: '练题',
     route: '/question-bank',
   },
@@ -27,16 +29,13 @@ const MENULIST = [
 
 // 顶部tab映射
 const mapMenu = {
-  '/cms-supplier/share-index': 'shareIndex',
+  '/question-bank': 'questionBank',
-  '/cms-supplier/inter-list': 'interList',
-  '/cms-supplier/question-bank': 'questionBank',
-  '/cms-supplier/practice-questions': 'practiceQuestions',
 }
 class TopMenu extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      currentKey: 'shareIndex',
+      currentKey: 'questionBank',
     }
   }
 
@@ -52,9 +51,15 @@ class TopMenu extends Component {
    * @returns
    */
   changeMenu = (item) => () => {
+    if (item.key === "questionBank") {
+      return
+    } else {
+      return message.info("敬请期待")
+    }
+
     // 打开新窗口
     if (item.isOpenNewWindow) {
-      window.open('/cms-supplier' + item.route)
+      window.open(item.route)
       return
     }
     this.setState(

src/main.tsx

@@ -3,12 +3,33 @@ import './main.less'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import { BrowserRouter } from 'react-router-dom';
+import QuestionBank from '@views/question-bank';
+import UploadQuestions from '@views/upload-questions';
+import BrushQuestions from '@views/brush-questions'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      {
+        path: "question-bank",
+        element: <QuestionBank />,
+      },
+      {
+        path: "brush-question",
+        element: <BrushQuestions />,
+      },
+    ],
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <BrowserRouter basename='/'>
+    <RouterProvider router={router} />
-      <App />
-    </BrowserRouter>
   </React.StrictMode>
 )

src/router/index.ts

@@ -1,16 +1,22 @@
 
 import QuestionBank from '@views/question-bank';
 import UploadQuestions from '@views/upload-questions';
+import BrushQuestions from '@views/brush-questions'
 
 export default [
-    {
+    // {
-        path: '/question-bank',
+    //     path: '/question-bank',
-        exact: true,
+    //     exact: true,
-        component: QuestionBank,
+    //     component: QuestionBank,
-    },
+    // },
-    {
+    // {
-        path: '/upload-questions',
+    //     path: '/upload-questions',
-        exact: true,
+    //     exact: true,
-        component: UploadQuestions,
+    //     component: UploadQuestions,
-    },
+    // },
+    // {
+    //     path: '/brush-questions',
+    //     exact: true,
+    //     component: BrushQuestions,
+    // },
 ];

src/utils/request.ts

@@ -3,7 +3,7 @@ import { message } from 'antd';
 
 export const baseHttp = () => {
     const http = axios.create({
-        // baseURL: "/flow",
+        baseURL: "/subject",
         timeout: 5 * 60 * 1000, // request timeout
         withCredentials: true, // send cookies when cross-domain requests
         headers: {
@@ -15,7 +15,7 @@ export const baseHttp = () => {
 };
 
 export default function request(config, url) {
-    const baseURL = url || '/api';
+    const baseURL = url || '/subject';
     // 1.创建axios的实例
     const instance = axios.create({
         baseURL,

src/views/brush-questions/constant.ts

@@ -0,0 +1,9 @@
+export const good = {
+    0:'未点赞',
+    1:'已点赞',
+}
+
+export const collection={
+    0:'未收藏',
+    1:'已收藏',
+}

src/views/brush-questions/index.less

@@ -0,0 +1,160 @@
+
+.brush-questions-box {
+    width: 1439px;
+    margin: 0 auto;
+    // display: flex;
+    background-color: #fff;
+    padding: 20px 50px;
+    border-radius: 5px;
+    flex-direction: column;
+    overflow: auto;
+    .brush-questions-box,
+    .question-box {
+        // display: flex;
+        // flex: 1;
+        flex-direction: column;
+        overflow-y: auto;
+        background-color: #fff;
+        border-radius: 8px;
+        // position: relative;
+        .question,
+        .question-content {
+            display: flex;
+            // flex: 1;
+            .question-type,
+            .question-number {
+                display: flex;
+                flex: 1;
+                align-items: center;
+            }
+        }
+    }
+}
+// .answer-box{
+
+// }
+.question-box {
+    margin-bottom: 10px;
+}
+.question {
+    margin-bottom: 20px;
+}
+.question-type {
+    // padding-left: 50px;
+    color: rgba(60, 110, 238, 1) !important;
+    font-size: 16px;
+}
+.question-number {
+    justify-content: right;
+    // padding-right: 50px;
+    color: rgba(60, 110, 238, 1) !important;
+    font-size: 16px;
+    font-weight: 600;
+    // padding:2px 10px;
+}
+.question-content {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    // padding: 20px 0 20px 30px;
+    // border-bottom:1px dashed #000
+    line-height: 35px;
+    margin-top: 50px;
+    margin-bottom: 10px;
+    .difficulty {
+        margin-right: 10px;
+        padding: 0 10px;
+        border-radius: 4px;
+        background-color: rgba(60, 110, 238, 0.3) !important;
+    }
+}
+.reference-answer {
+    color: rgba(60, 110, 238, 0.8) !important;
+    font-size: 14px;
+    padding: 20px 0 10px 0px;
+}
+.answer-content {
+    background-color: rgba(60, 110, 238, 0.2) !important;
+    padding: 15px;
+    font-size: 14px;
+    line-height: 35px;
+    border-radius: 6px;
+    margin-bottom: 5px;
+}
+.answer-box {
+    border-radius: 0px;
+    border-top: 1px dashed #e4e4e4;
+    border-bottom: 1px dashed #e4e4e4;
+}
+.change-question-box {
+    display: flex;
+}
+
+.right {
+    display: flex;
+    flex: 1;
+    margin: 10px 0 10px 700px;
+}
+
+// .question-number-box{
+//     position:absolute;right:0px;
+// }
+// .right{
+//     position:absolute;right:0px;
+// }
+.jump-question {
+    margin: 0 auto;
+    text-align: center;
+}
+// .answer-box,.question-box{
+//     display: flex;
+//     flex: 1;
+//     overflow-y: auto;
+//     border-radius: 8px;
+//     // position: relative;
+//     background-color: rgb(84, 169, 248);
+//     font-size: 20px;
+//     height: auto;
+//     min-height:200px;
+// }
+.last,
+.next {
+    // background-color: rgba(60, 110, 238,1) !important;
+    margin: 0px 15px 15px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 110px;
+    height: 46px;
+    // color: white
+}
+// .question-type-box,.question-number-box {
+//     height: 200px;
+//     line-height: 200px;
+//     font-size: 30px;
+//     font-weight: bold;
+//     color: rgb(84, 169, 248);
+// }
+// .word{
+//     font-size: 20px;
+//     font-weight: bold;
+//     color: rgb(84, 169, 248);
+// }
+.last:active,
+.next:active {
+    background-color: rgba(60, 110, 238, 1) !important;
+}
+.number {
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    border-radius: 50%;
+    background-color: rgba(60, 110, 238, 1) !important;
+    color: white;
+    text-align: center;
+}
+.all-number {
+    color: #34495e;
+}
+.type {
+    padding: 2px 10px;
+}

src/views/brush-questions/index.tsx

@@ -0,0 +1,191 @@
+import { Pagination, Button, Modal, Input, Radio, message } from 'antd'
+import React, { Component, Fragment } from 'react'
+import { queryParse } from '@utils'
+import GoodCollectionError from '@components/good-collection-error'
+import './index.less'
+import req from '@utils/request'
+
+export default class BrushQuestions extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isGood: 0,
+      isCollection: 0,
+      index: 1,
+      question: [{
+        id: 1, labelNames: ["原理"], subjectName: 'JDK 和 JRE 有什么区别？', difficulty: 1,
+        subjectAnswer: `<p>JDK：Java Development Kit 的简称，Java 开发工具包，提供了 Java 的开发环境和运行环境。</p>
+          <p>JRE：Java Runtime Environment 的简称，Java 运行环境，为 Java 的运行提供了所需环境。</p>
+          <p>具体来说 JDK 其实包含了 JRE，同时还包含了编译 Java 源码的编译器 Javac，还包含了很多 Java 程序调试和分析的工具。</p>
+          <p>简单来说：如果你需要运行 Java 程序，只需安装 JRE 就可以了，如果你需要编写 Java 程序，需要安装 JDK。</p>` }],
+      // answer: '',
+      isModal: false, //是否显示纠错弹框
+      value: 1, //纠错类型对应值
+      inputValue: '', //纠错详情内容
+    }
+  }
+  pageIndex = 1
+  total = 0
+  assembleIds: string[] = [] // 选中的标签列表
+  difficulty = 0 //困难度（全部）
+  primaryCategoryId = '' //第一个大类id
+  grade: Record<string, string> = {
+    1: '初级',
+    2: '中级',
+    3: '高级',
+    4: '资深',
+    5: '专家',
+  }
+  goodCollectionError = GoodCollectionError | null
+  componentDidMount() {
+    // const urlParams = queryParse(this.props.location.search)
+    const urlParams = {
+      index: 1,
+      difficulty: 1,
+      primaryCategoryId: '1',
+      labelList: '1,2,3,4'
+    }
+    this.pageIndex = Number(urlParams.index)
+    this.difficulty = urlParams.difficulty //困难度（全部）
+    this.primaryCategoryId = urlParams.primaryCategoryId //第一个大类id
+    this.assembleIds = !!urlParams.labelList ? urlParams.labelList.split(',') : []
+    // this.getInterviewSubjectList()
+  }
+  async getInterviewSubjectList() {
+    let params = {
+      pageInfo: {
+        pageIndex: this.pageIndex,
+        pageSize: 1,
+      },
+      difficulty: this.difficulty,
+      primaryCategoryId: this.primaryCategoryId,
+      assembleIds: this.assembleIds,
+    }
+    return await req({
+      method: 'post',
+      data: params,
+      url: '/admin/question/subject/getSubjectList',
+    })
+      .then((res) => {
+        if (res.data && res.data?.pageList?.length > 0) {
+          this.total = res.data.pageInfo.total
+          this.setState(
+            {
+              question: res.data.pageList,
+            },
+            () => {
+              this.goodCollectionError.getDetail()
+            }
+          )
+        }
+      })
+      .catch((err) => console.log(err))
+  }
+
+  onChangePagination = async (pageIndex) => {
+    this.pageIndex = pageIndex
+    this.setState({ index: pageIndex })
+    // await this.getInterviewSubjectList()
+  }
+
+  handleNextQuestion = async (value) => {
+    let { index } = this.state
+    this.pageIndex += value
+    index += value
+    this.setState({
+      index: index,
+    })
+    // await this.getInterviewSubjectList()
+  }
+
+  render() {
+    const { index, question } = this.state
+    return (
+      <div className="brush-questions-box">
+        <div className="question-box">
+          <div className="question">
+            <div className="question-type">
+              <div className="number">{index}</div>
+              <div className="type">问答题</div>
+            </div>
+            {/* <div className="question-number">
+              <div className="now-number">{index}</div>
+              <div className="all-number">/{this.total}</div>
+            </div> */}
+          </div>
+        </div>
+        <Fragment>
+          {question.map((item, index) => {
+            return (
+              <div key={index}>
+                <div className="question-content">
+                  <div className="difficulty">
+                    {this.grade[item.difficulty]}-{item.labelNames.join('、')}
+                  </div>
+                  <div>{item.subjectName}</div>
+                </div>
+                <div className="answer-box">
+                  <div className="reference-answer">参考答案</div>
+                  <div
+                    className="answer-content wang-editor-style"
+                    dangerouslySetInnerHTML={{
+                      // __html: item.subjectAnswer,
+                      __html: item.subjectAnswer,
+                    }}
+                  ></div>
+                  <br />
+                </div>
+                <div className="change-question-box">
+                  <GoodCollectionError
+                    questionId={question[0].id}
+                    ref={(ref) => {
+                      this.goodCollectionError = ref
+                    }}
+                  />
+                  {/* <div className="right">
+                    <Button
+                      disabled={this.pageIndex <= 1 ? true : false}
+                      className="last"
+                      onClick={() => {
+                        this.handleNextQuestion(-1)
+                      }}
+                    >
+                      上一题
+                    </Button>
+
+                    <Button
+                      className="next"
+                      disabled={this.pageIndex >= this.total ? true : false}
+                      onClick={() => {
+                        this.handleNextQuestion(1)
+                      }}
+                    >
+                      下一题
+                    </Button>
+                  </div> */}
+                </div>
+              </div>
+            )
+          })}
+        </Fragment>
+
+        <div className="jump-question">
+          {this.total > 0 && (
+            <Pagination
+              style={{
+                padding: '24px 0',
+                textAlign: 'center',
+              }}
+              showQuickJumper
+              current={this.pageIndex}
+              defaultCurrent={this.pageIndex}
+              total={this.total}
+              defaultPageSize={1}
+              onChange={this.onChangePagination}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}

src/views/brush-questions/mock.js

@@ -0,0 +1,18 @@
+export const mockData = [
+    { id: 1, question: '我是问题1', answer: '我是答案1', isGood: 0, isCollection: 0, isComment: 0},
+    { id: 2, question: '我是问题2', answer: '我是答案2', isGood: 0, isCollection: 1, isComment: 0},
+    { id: 3, question: '我是问题3', answer: '我是答案3', isGood: 1, isCollection: 0, isComment: 0},
+    { id: 4, question: '我是问题4', answer: '我是答案4', isGood: 0, isCollection: 0, isComment: 1},
+    { id: 5, question: '我是问题5', answer: '我是答案5', isGood: 1, isCollection: 1, isComment: 0},
+    { id: 6, question: '我是问题6', answer: '我是答案6', isGood: 1, isCollection: 0, isComment: 1},
+    { id: 7, question: '我是问题7', answer: '我是答案7', isGood: 0, isCollection: 1, isComment: 1},
+    { id: 8, question: '我是问题8', answer: '我是答案8', isGood: 1, isCollection: 1, isComment: 1},
+    { id: 9, question: '我是问题9', answer: '我是答案9', isGood: 0, isCollection: 0, isComment: 0},
+    { id: 10, question: '我是问题10', answer: '我是答案10', isGood: 1, isCollection: 0, isComment: 0},
+    { id: 11, question: '我是问题11', answer: '我是答案11', isGood: 0, isCollection: 1, isComment: 0},
+    { id: 12, question: '我是问题12', answer: '我是答案12', isGood: 0, isCollection: 0, isComment: 1},
+    { id: 13, question: '我是问题13', answer: '我是答案13', isGood: 1, isCollection: 1, isComment: 0},
+    { id: 14, question: '我是问题14', answer: '我是答案14', isGood: 1, isCollection: 0, isComment: 1},
+    { id: 15, question: '我是问题15', answer: '我是答案15', isGood: 0, isCollection: 1, isComment: 1},
+    { id: 16, question: '我是问题16', answer: '我是答案16', isGood: 1, isCollection: 1, isComment: 1},
+]

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

@@ -3,6 +3,7 @@ import { Popover, Spin } from 'antd';
 import { debounce } from '@utils';
 import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
 import './index.less';
+import { message } from 'antd';
 
 const rankingBackImg = {
     0: imgObject.ranking1Img,
@@ -17,6 +18,8 @@ export default function RankingBox(props) {
             props.onHandleRanking && props.onHandleRanking(type);
         });
     const onJump = debounce(() => {
+        message.destroy()
+        return message.info('敬请期待')
         props.onHandleJump && props.onHandleJump();
     });
     return (

src/views/question-bank/constant.ts

@@ -57,19 +57,15 @@ export const filterDifficulty = [
 
 export const apiName = {
     /**
-     * 获取一级分类
+     * 查询分类
      */
-    getPrimaryCategoryInfo: '/admin/question/category/getPrimaryCategoryInfo',
+    queryPrimaryCategory: '/category/queryPrimaryCategory',
 
     /**
-     * 获取题目列表
+     * 查询大类下分类
      */
-    getInterviewSubjectList: '/admin/question/subject/getSubjectList',
+    queryCategoryByPrimary: '/category/queryCategoryByPrimary',
 
-    /**
-     * 获得贡献榜
-     */
-    getContributeList: '/admin/question/subject/getContributeList',
 };
 
 export const imgObject = {

src/views/question-bank/index.tsx

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+// import { Component } from 'react';
+import { useState, useEffect } from 'react'
 import QuestionList from '@components/question-list';
 import CategoryList from '@components/category-list';
 import ContributionList from './components/contribution-list';
@@ -6,172 +7,229 @@ import RankingList from './components/ranking-list'
 import { apiName } from './constant';
 import req from '@utils/request';
 import { Spin } from 'antd';
-import { mockTabList, mockDataList } from './mock'
+import { mockDataList } from './mock';
 import './index.less';
 
-export default class QuestionBank extends Component {
+const QuestionBank = () => {
-    constructor(props) {
+
-        super(props);
+
-        this.state = {
+    const [firstCategoryList, setFirstCategoryList] = useState([])
-            firstCategoryList: mockTabList || [],
+    const [questionList, setQuestionList] = useState(mockDataList)
-            questionList: mockDataList || [],
+    const [isShowSpin, setIsShowSpin] = useState(false)
-            isShowSpin: false,
+    const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
-        };
+    const [difficulty, setDiffculty] = useState(0); //困难度（全部）
-    }
+    const [total, setTotal] = useState(0); // 总条数
-    labelList = []; // 选中的标签列表
+    const [pageIndex, setPageIndex] = useState(1);
-    difficulty = 0; //困难度（全部）
+    const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
-    total = 0; // 总条数
-    pageIndex = 1;
-    primaryCategoryId = ''; //第一个大类id
 
-    componentDidMount() {
-        // this.getPrimaryCategoryInfo();
-        // console.log(this.props.route);
-    }
 
     /**
      * 获取一级分类数据
      */
-    getPrimaryCategoryInfo() {
+    const getPrimaryCategoryInfo = () => {
+        setIsShowSpin(true)
         req({
             method: 'post',
-            data: { subjectTypeList: [4] },
+            url: apiName.queryPrimaryCategory,
-            url: apiName.getPrimaryCategoryInfo,
+            data: { categoryType: 1 }
         })
-            .then((res) => {
+            .then((res: Record<string, any>) => {
                 if (res.data && res.data.length > 0) {
-                    this.primaryCategoryId = res.data[0].primaryCategoryId;
+                    setPromaryCategoryId(res.data[0].primaryCategoryId);
-                    this.setState(
+                    setFirstCategoryList(res.data)
-                        {
+                    setIsShowSpin(false)
-                            firstCategoryList: res.data,
-                            isShowSpin: false,
-                        },
-                        () => {
-                            this.getInterviewSubjectList();
-                        }
-                    );
                 } else {
-                    this.primaryCategoryId = '';
+                    setIsShowSpin(false)
-                    this.setState({
-                        isShowSpin: false,
-                    });
                 }
             })
-            .catch((err) => console.log(err));
+            .catch((err: string) => console.log(err));
     }
 
     /**
-     * 获取题目列表
+    * 切换一级分类
-     */
+    * @param {*} e
-    getInterviewSubjectList() {
+    */
-        let params = {
+    const onChangeCategory = (e: string) => {
-            pageInfo: {
+        setLabelList([])
-                pageIndex: this.pageIndex,
+        setPromaryCategoryId(e)
-                pageSize: 10,
+        setPageIndex(1)
-            },
-            difficulty: this.difficulty,
-            primaryCategoryId: this.primaryCategoryId,
-            assembleIds: this.labelList,
-        };
-        req({
-            method: 'post',
-            data: params,
-            url: apiName.getInterviewSubjectList,
-        })
-            .then((res) => {
-                if (res.data && res.data?.pageList?.length > 0) {
-                    this.total = res.data.pageInfo.total;
-                    this.setState({
-                        questionList: res.data.pageList,
-                        isShowSpin: false,
-                    });
-                } else {
-                    this.total = 0;
-                    this.setState({
-                        questionList: [],
-                        isShowSpin: false,
-                    });
-                }
-            })
-            .catch((err) => console.log(err));
-    }
-
-    /**
-     * 选择标签时，请求列表数据
-     * @param {*} primaryCategoryId 一级分类id
-     * @param {*} assembleIds 三级标签 assembleIds
-     */
-    onChangeLabel = (primaryCategoryId, assembleIds) => {
-        this.labelList = assembleIds;
-        this.primaryCategoryId = primaryCategoryId;
-        this.pageIndex = 1;
-        this.getInterviewSubjectList();
     };
 
     /**
-     * 切换一级分类
+    * 选择标签时，请求列表数据
-     * @param {*} e
+    * @param {*} primaryCategoryId 一级分类id
-     */
+    * @param {*} assembleIds 三级标签 assembleIds
-    onChangeCategory = (e) => {
+    */
-        this.labelList = [];
+    const onChangeLabel = (primaryCategoryId: string, assembleIds: string[]) => {
-        this.primaryCategoryId = e;
+        setLabelList(assembleIds)
-        this.pageIndex = 1;
+        setPromaryCategoryId(primaryCategoryId)
-        this.getInterviewSubjectList();
+        setPageIndex(1)
+        // this.getInterviewSubjectList();
     };
 
-    /**
+    useEffect(() => {
-     * 筛选列表数据
+        getPrimaryCategoryInfo()
-     * @param {*} id
+    }, [])
-     */
-    handleChangeSelect = (id) => {
-        this.difficulty = id;
-        this.pageIndex = 1;
-        this.getInterviewSubjectList();
-    };
 
-    /**
+    return (
-     * 分页功能
+        <div className="question-bank-box">
-     * @param {*} pageIndex 当前页码
+            <Spin spinning={isShowSpin}>
-     */
+                <div className="question-box">
-    onChangePagination = (pageIndex) => {
+                    <div className="category-list-box">
-        this.pageIndex = pageIndex;
+                        {firstCategoryList?.length > 0 && (
-        this.getInterviewSubjectList();
+                            <CategoryList
-    };
+                                onChangeCategory={onChangeCategory}
-
+                                categoryList={firstCategoryList}
-    render() {
+                                onChangeLabel={onChangeLabel}
-        const { firstCategoryList, questionList, isShowSpin } = this.state;
-        return (
-            <div className="question-bank-box">
-                <Spin spinning={isShowSpin}>
-                    <div className="question-box">
-                        <div className="category-list-box">
-                            {firstCategoryList?.length > 0 && (
-                                <CategoryList
-                                    onChangeCategory={this.onChangeCategory}
-                                    categoryList={firstCategoryList}
-                                    onChangeLabel={this.onChangeLabel}
-                                />
-                            )}
-                        </div>
-                        <div className="question-list-box">
-                            <QuestionList
-                                pageIndex={this.pageIndex}
-                                total={this.total}
-                                questionList={questionList}
-                                handleChangeSelect={this.handleChangeSelect}
-                                onChangePagination={this.onChangePagination}
-                                difficulty={this.difficulty}
-                                primaryCategoryId={this.primaryCategoryId}
-                                labelList={this.labelList}
                             />
-                        </div>
+                        )}
+                    </div>
+                    <div className="question-list-box">
+                        <QuestionList
+                            pageIndex={pageIndex}
+                            total={total}
+                            questionList={questionList}
+                            // handleChangeSelect={this.handleChangeSelect}
+                            // onChangePagination={this.onChangePagination}
+                            difficulty={difficulty}
+                            // primaryCategoryId={this.primaryCategoryId}
+                            labelList={labelList}
+                        />
                     </div>
-                </Spin>
-                <div className="ranking-box">
-                    <ContributionList />
-                    <RankingList />
                 </div>
+            </Spin>
+            <div className="ranking-box">
+                <ContributionList />
+                <RankingList />
             </div>
-        );
+        </div>
-    }
+    );
 }
+export default QuestionBank
+// class QuestionBank extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             firstCategoryList: [],
+//             questionList: [],
+//             isShowSpin: false,
+//         };
+//     }
+//     labelList = []; // 选中的标签列表
+//     difficulty = 0; //困难度（全部）
+//     total = 0; // 总条数
+//     pageIndex = 1;
+//     primaryCategoryId = ''; //第一个大类id
+
+//     componentDidMount() {
+//         // this.getPrimaryCategoryInfo();
+//         // console.log(this.props.route);
+//     }
+
+
+
+//     /**
+//      * 获取题目列表
+//      */
+//     getInterviewSubjectList() {
+//         let params = {
+//             pageInfo: {
+//                 pageIndex: this.pageIndex,
+//                 pageSize: 10,
+//             },
+//             difficulty: this.difficulty,
+//             primaryCategoryId: this.primaryCategoryId,
+//             assembleIds: this.labelList,
+//         };
+//         req({
+//             method: 'post',
+//             data: params,
+//             url: apiName.getInterviewSubjectList,
+//         })
+//             .then((res) => {
+//                 if (res.data && res.data?.pageList?.length > 0) {
+//                     this.total = res.data.pageInfo.total;
+//                     this.setState({
+//                         questionList: res.data.pageList,
+//                         isShowSpin: false,
+//                     });
+//                 } else {
+//                     this.total = 0;
+//                     this.setState({
+//                         questionList: [],
+//                         isShowSpin: false,
+//                     });
+//                 }
+//             })
+//             .catch((err) => console.log(err));
+//     }
+
+
+
+//     /**
+//      * 切换一级分类
+//      * @param {*} e
+//      */
+//     onChangeCategory = (e) => {
+//         this.labelList = [];
+//         this.primaryCategoryId = e;
+//         this.pageIndex = 1;
+//         this.getInterviewSubjectList();
+//     };
+
+//     /**
+//      * 筛选列表数据
+//      * @param {*} id
+//      */
+//     handleChangeSelect = (id) => {
+//         this.difficulty = id;
+//         this.pageIndex = 1;
+//         this.getInterviewSubjectList();
+//     };
+
+//     /**
+//      * 分页功能
+//      * @param {*} pageIndex 当前页码
+//      */
+//     onChangePagination = (pageIndex) => {
+//         this.pageIndex = pageIndex;
+//         this.getInterviewSubjectList();
+//     };
+
+//     render() {
+//         const { firstCategoryList, questionList, isShowSpin } = this.state;
+//         return (
+//             <div className="question-bank-box">
+//                 <Spin spinning={isShowSpin}>
+//                     <div className="question-box">
+//                         <div className="category-list-box">
+//                             {firstCategoryList?.length > 0 && (
+//                                 <CategoryList
+//                                     onChangeCategory={this.onChangeCategory}
+//                                     categoryList={firstCategoryList}
+//                                     onChangeLabel={this.onChangeLabel}
+//                                 />
+//                             )}
+//                         </div>
+//                         <div className="question-list-box">
+//                             <QuestionList
+//                                 pageIndex={this.pageIndex}
+//                                 total={this.total}
+//                                 questionList={questionList}
+//                                 handleChangeSelect={this.handleChangeSelect}
+//                                 onChangePagination={this.onChangePagination}
+//                                 difficulty={this.difficulty}
+//                                 primaryCategoryId={this.primaryCategoryId}
+//                                 labelList={this.labelList}
+//                             />
+//                         </div>
+//                     </div>
+//                 </Spin>
+//                 <div className="ranking-box">
+//                     <ContributionList />
+//                     <RankingList />
+//                 </div>
+//             </div>
+//         );
+//     }
+// }

vite.config.ts

@@ -13,5 +13,13 @@ export default defineConfig({
       '@components': path.resolve(__dirname, 'src/components')
     }
   },
-  plugins: [react()]
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/subject": {
+        target: "http://117.72.14.166:3010",
+        changeOrigin: true,
+      },
+    },
+  }
 })