feat: 刷题页面

2023-10-09 00:41:35 +08:00
parent 05284248dd
commit 4ed48fbe2b
71 changed files with 10534 additions and 152 deletions
--- a/src/components/question-list/constant.js
+++ b/src/components/question-list/constant.js
@@ -0,0 +1,82 @@
+/**
+ * 难度等级
+ */
+export const gradeObject = {
+    1: {
+        color: 'rgba(60, 110, 238, 0.5)',
+        title: '初级',
+    },
+    2: {
+        color: 'rgba(60, 110, 238, 0.6)',
+        title: '中级',
+    },
+    3: {
+        color: 'rgba(60, 110, 238, 0.7)',
+        title: '高级',
+    },
+    4: {
+        color: 'rgba(60, 110, 238, 0.8)',
+        title: '资深',
+    },
+    5: {
+        color: 'rgba(60, 110, 238, 0.9)',
+        title: '专家',
+    },
+};
+
+/**
+ * 难度筛选
+ */
+export const filterDifficulty = [
+    {
+        id: 0,
+        title: '全部',
+    },
+    {
+        id: 2,
+        title: '初级',
+    },
+    {
+        id: 3,
+        title: '中级',
+    },
+    {
+        id: 4,
+        title: '高级',
+    },
+    {
+        id: 5,
+        title: '资深',
+    },
+];
+
+export const imgObject = {
+    clickImg:
+        'https://img13.360buyimg.com/imagetools/jfs/t1/222669/25/807/6590/617f4f06Eb2094586/64c39ce3769b8a16.png',
+    ranking1Img:
+        'https://img14.360buyimg.com/imagetools/jfs/t1/206730/39/7751/986/617f4fbaE4e23097a/aa94ca31a9c132b2.png',
+    ranking2Img:
+        'https://img10.360buyimg.com/imagetools/jfs/t1/156125/21/27968/948/617f4fbaEcf1da9a9/722ad0917497697a.png',
+    ranking3Img:
+        'https://img12.360buyimg.com/imagetools/jfs/t1/213197/17/2682/958/617f4fbbE06c277a9/03ef4c389c52ab8d.png',
+    timeline:
+        'https://img13.360buyimg.com/imagetools/jfs/t1/210387/35/7564/555/617f4fbbE0cb305c1/728913d21e650794.png',
+    backAllImg:
+        'https://img11.360buyimg.com/imagetools/jfs/t1/206213/24/13307/2603/617f4fc4E676d448d/622d5287fbf5a919.png',
+    dataImg:
+        'https://img12.360buyimg.com/imagetools/jfs/t1/207558/34/7606/3672/617f4fc4E1ca685fc/3953a92a6072fba4.png',
+    javaImg:
+        '../../views/imgs/javaImg.png',
+    npmImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/200551/24/15367/3145/617f4fc4Ea153dc2e/b4bbf2de8807f42d.png',
+    parallelComputingImg:
+        'https://img14.360buyimg.com/imagetools/jfs/t1/207198/23/7638/3037/617f4fc4E0e20ab9d/40197a6c79c5a33f.png',
+    springbootImg:
+        'https://img13.360buyimg.com/imagetools/jfs/t1/171775/10/24915/4127/617f4fc4Eeb3d356e/cfbfe8d7c3155047.png',
+    sqlImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/208027/11/7347/3074/617f4fc4Ef11e9495/1093903301db1d1d.png',
+    systemDesignImg:
+        'https://img12.360buyimg.com/imagetools/jfs/t1/206967/24/7622/3629/617f4fc4E60a188b3/cb659847c5d4232a.png',
+    algorithmImg:
+        'https://img14.360buyimg.com/imagetools/jfs/t1/215758/34/2633/4128/617f4fc4E5dcdab66/727be155858a06a5.png',
+    defaultImg:
+        'https://img13.360buyimg.com/imagetools/jfs/t1/155957/24/22934/2028/617a147cE8bcbb57a/7a4885e4ae99a895.png',
+};
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -0,0 +1,229 @@
+import React, { Component, Fragment } from "react";
+
+import { Tag, Table, Pagination, Input } from "antd";
+import { filterDifficulty, gradeObject, imgObject } from "./constant";
+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() { }
+
+
+  RandomNumBoth = (Min, Max) => {
+    //差值
+    const Range = Max - Min;
+    // 随机数
+    const Rand = Math.random();
+    return Min + Math.round(Rand * Range); //四舍五入 
+  }
+
+  /**
+   * 题目列表
+   */
+  questionColumns = [
+    {
+      title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}>
+        （当前
+        <span style={{ color: "rgba(0, 0, 0, 0.65)" }}> {100} </span>
+        道题）
+      </div></div>,
+      key: "questionNo",
+      align: "centlefter",
+      render: (item) => {
+        return (
+          <div className="question-info-container">
+            <div className="question-info-desc">
+              {item.questionTitle}
+
+            </div>
+            <div className="question-info-tags">
+              {item?.tags?.length > 0 &&
+                item.tags.map((tagsItem, index) => {
+                  return (
+                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[this.RandomNumBoth(0, 7)] }}>
+                      {tagsItem.name}
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: "难度",
+      dataIndex: "grade",
+      key: "grade",
+      align: "center",
+      filters: [
+        {
+          value: 0,
+          text: '全部',
+        },
+        {
+          value: 1,
+          text: '初级',
+        },
+        {
+          value: 2,
+          text: '中级',
+        },
+        {
+          value: 3,
+          text: '高级',
+        },
+        {
+          value: 4,
+          text: '资深',
+        },
+      ],
+      onFilter: (value, record) => {
+        return value === 0 ? record : record.grade === value
+      },
+      width: 90,
+      render: (key) => {
+        return (
+          <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
+        );
+      },
+    },
+  ];
+
+  /**
+   * 选择标签
+   * @param {*} id
+   */
+  handleChangeSelect = (id) => {
+    console.log(id);
+    let selectValue = "难度";
+    if (id != 0) {
+      filterDifficulty.forEach((item) => {
+        if (item.id == id) {
+          selectValue = item.id;
+        }
+      });
+    }
+    this.setState(
+      {
+        selectValue,
+      },
+      () => {
+        this.props.handleChangeSelect(id);
+      }
+    );
+  };
+
+  /**
+   * 进入详情
+   * @param {*} item
+   * @param {*} type
+   * @returns
+   */
+  onChangeAction = (item, index) => () => {
+    let { isNotToDetail, difficulty, primaryCategoryId, labelList, pageIndex } =
+      this.props;
+    !isNotToDetail &&
+      this.props.history.push(
+        splicingQuery("/brush-questions", {
+          id: item?.id,
+          index: index + (pageIndex - 1) * 10 + 1,
+          difficulty,
+          primaryCategoryId,
+          labelList,
+        })
+      );
+    if (!isNotToDetail) return;
+    this.toChangeSelectRows(item);
+  };
+
+  toChangeSelectRows = (record) => {
+    let newSelectedRows = [...this.props.selectRows];
+    const isHas = newSelectedRows.some((rowItem) => rowItem.id === record.id);
+    if (isHas) {
+      newSelectedRows = newSelectedRows.filter(
+        (rowItem) => rowItem.id !== record.id
+      );
+    } else {
+      newSelectedRows.push(record);
+    }
+    this.props.setSelectRows(newSelectedRows);
+  };
+
+  onChangePagination = (e) => {
+    this.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 { selectValue } = this.state;
+    const { total, isShowSearch, setSearchStr } = this.props;
+    return (
+      <div className="question-filter-container">
+        {isShowSearch && (
+          <Search
+            placeholder="请输入感兴趣的内容～"
+            onSearch={(value) => setSearchStr(value)}
+            style={{ width: 240 }}
+            allowClear
+            size="small"
+          />
+        )}
+      </div>
+    );
+  };
+}
+
+
+export default QuestionList;
--- a/src/components/question-list/index.less
+++ b/src/components/question-list/index.less
@@ -0,0 +1,82 @@
+.question-list-filter {
+    padding: 0px 6px 20px 9px;
+    background-color: #ffffff;
+    .question-filter-container {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding-right: 18px;
+        padding-left: 5px;
+        .question-filter-box {
+            display: flex;
+            font-size: 14px;
+            .question-filter-select {
+                margin-right: 4px;
+                color: #000;
+                font-weight: bold;
+                border: 0;
+                .ant-select-selection {
+                    border: 0;
+                }
+            }
+        }
+        .question-count-box {
+            color: rgba(0, 0, 0, 0.45);
+            .ant-btn {
+                margin-left: 16px;
+                width: 150px;
+                height: 34px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #fff;
+                background-color: #13b4ff;
+                border-color: #13b4ff;
+                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
+    .question-list-container {
+        .ant-table-tbody > tr > td {
+            // border-bottom: 0;
+            padding: 10px 4px 0 14px;
+        }
+        .ant-table-thead > tr > th {
+            background-color: #ffffff;
+            // border-bottom: 0;
+        }
+        .ant-table-row:hover {
+            cursor: pointer;
+        }
+        .ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters:hover:before {
+            // background-color: #fff;
+        }
+        .question-info-container {
+            .question-info-desc {
+                font-size: 14px;
+                line-height: 18px;
+                color: rgba(0, 0, 0, 0.85);
+                font-weight: 500;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .question-info-tags {
+                display: flex;
+                margin-top: 8px;
+                padding-bottom: 10px;
+                .question-info-tag {
+                    margin-right: 10px;
+                    padding: 0px 6px;
+                    font-size: 10px !important;
+                    border-radius: 4px;
+                    // @include font-color();
+                    // border: 1px solid rgba(60, 110, 238, 0.6);
+                }
+            }
+        }
+    }
+    .question-type-icon {
+        width: 24px;
+        height: 24px;
+    }
+}