feat: 改造

src/views/personal-center/components/brush-question/index.jsx

@@ -0,0 +1,435 @@
+import { ClockCircleTwoTone, ContainerTwoTone, SnippetsTwoTone } from '@ant-design/icons'
+import { Button, Card, Checkbox, Pagination, Table } from 'antd'
+import React, { Component } from 'react'
+import './index.less'
+
+export default class BrushQuestion extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentKey: 'tab1', //选中的tab
+      lookFinish: false, //是否只看已完成，默认否
+      total: 9
+    }
+  }
+  pageIndex = 1
+  tabList = [
+    {
+      key: 'tab1',
+      tab: '试卷'
+    },
+    {
+      key: 'tab2',
+      tab: '错题集'
+    }
+  ]
+
+  columns = [
+    {
+      title: '题目',
+      dataIndex: 'question',
+      key: 'qusetion',
+      render: text => <a>{text}</a>
+    },
+    {
+      title: '知识点',
+      dataIndex: 'knowledge',
+      key: 'knowledge'
+    },
+    {
+      title: '来自',
+      dataIndex: 'from',
+      key: 'from'
+    },
+    {
+      title: () => <Checkbox onChange={this.onLookErrorChange}>只看已完成的</Checkbox>,
+      key: 'tags',
+      dataIndex: 'tags',
+      render: () => <Button type='primary'>查看详情</Button>
+    }
+  ]
+
+  data = [
+    {
+      key: '1',
+      question: '在哈希法存储中，冲突指的是 （ ）',
+      knowledge: '哈希',
+      from: '考卷1'
+      // tags: ['nice', 'developer'],
+    },
+    {
+      key: '2',
+      question: '在深度为5的满二叉树中，结点的个数为多少个？',
+      knowledge: '树',
+      from: '考卷2'
+      // tags: ['loser'],
+    }
+  ]
+
+  onTabChange = key => {
+    console.log('----', key)
+    this.setState({
+      currentKey: key
+    })
+  }
+  onLookChange = () => {
+    this.setState({
+      lookFinish: true
+    })
+  }
+  onLookErrorChange = key => {
+    console.log('----', key)
+  }
+  handleNext() {
+    console.log('再做一次')
+  }
+  handleLook() {
+    console.log('查看详情')
+  }
+  onChangePagination = pageIndex => {
+    this.pageIndex = pageIndex
+  }
+  render() {
+    const { currentKey, total } = this.state
+    return (
+      <div className='brush-question-component'>
+        <Card
+          style={{ width: '100%' }}
+          tabList={this.tabList}
+          bordered={false}
+          activeTabKey={currentKey}
+          onTabChange={key => {
+            this.onTabChange(key, 'key')
+          }}
+        >
+          {currentKey === 'tab1' && (
+            <div>
+              <div className='brush-question-component-tab1-head'>
+                <div className='brush-question-component-tab1-head-title'>
+                  <div className='brush-question-component-tab1-head-title-icon'>
+                    <SnippetsTwoTone twoToneColor='#FF0000' />
+                  </div>
+                  <div>练习的试卷（21）</div>
+                </div>
+                <div className='brush-question-component-tab1-head-filter'>
+                  <Checkbox onChange={this.onLookChange}>只看已完成的</Checkbox>
+                </div>
+              </div>
+              <div className='brush-question-component-tab1-body'>
+                <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                  <div className='brush-question-component-tab1-body-item'>
+                    <div style={{ backgroundColor: 'rgb(234, 235, 236)' }}>
+                      <div className='brush-question-component-tab1-body-label'>专项练习</div>
+                      <div className='brush-question-component-tab1-body-item-title'>
+                        计算机专业技能-网络基础专项练习
+                      </div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ClockCircleTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>完成时间：2021-12-13</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-content'>
+                      <div className='brush-question-component-tab1-body-item-content-icon'>
+                        <ContainerTwoTone twoToneColor='#AAAAAA' />
+                      </div>
+                      <div>得分：0</div>
+                    </div>
+                    <div className='brush-question-component-tab1-body-item-footer'>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleNext}
+                      >
+                        再做一次
+                      </div>
+                      <div
+                        className='brush-question-component-tab1-body-item-footer-button'
+                        onClick={this.handleLook}
+                      >
+                        查看详情
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='brush-question-component-tab1-page'>
+                  {total > 8 && (
+                    <Pagination
+                      style={{
+                        padding: '24px 0',
+                        textAlign: 'center'
+                      }}
+                      showQuickJumper
+                      current={this.pageIndex}
+                      defaultCurrent={1}
+                      total={total}
+                      defaultPageSize={8}
+                      onChange={this.onChangePagination}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+          {currentKey === 'tab2' && (
+            <div>
+              <div className='brush-question-component-tab2-head'>
+                <div className='brush-question-component-tab2-head-title'>
+                  <div className='brush-question-component-tab2-head-title-icon'>
+                    <SnippetsTwoTone twoToneColor='#FF0000' />
+                  </div>
+                  <div>历史错题总数（21）</div>
+                </div>
+                <div className='brush-question-component-tab2-head-button'>
+                  <Button type='primary'>错题组卷练习</Button>
+                </div>
+              </div>
+              <div className='brush-question-component-tab2-body'>
+                <Table columns={this.columns} dataSource={this.data} />
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+    )
+  }
+}

src/views/personal-center/components/brush-question/index.less

@@ -0,0 +1,97 @@
+.brush-question-component {
+  .brush-question-component-tab1-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 20px 0;
+    .brush-question-component-tab1-head-title {
+      display: flex;
+      color: #333;
+      font-size: 16px;
+      font-weight: 400;
+      .brush-question-component-tab1-head-title-icon {
+        margin-right: 8px;
+      }
+    }
+    .brush-question-component-tab1-head-filter {
+      font-weight: 400;
+    }
+  }
+  .brush-question-component-tab1-body {
+    padding: 0 50px;
+    // display: flex;
+    // flex-wrap: wrap;
+
+    .brush-question-component-tab1-body-item {
+      border-radius: 2px;
+      box-shadow: 0 6px 20px 0 #bababa;
+      cursor: pointer;
+      display: block;
+      height: 230px;
+      margin-bottom: 17px;
+      margin-right: 17px;
+      width: 216px;
+      transition: all 0.5s;
+      &:hover {
+        transform: scale(1.04);
+      }
+      &:hover .brush-question-component-tab1-body-item-footer {
+        display: flex;
+      }
+      .brush-question-component-tab1-body-label {
+        width: 76px;
+        height: 20px;
+        background-image: linear-gradient(136deg, #ffe324, #e7920f 100%, #ffb533 0);
+        box-shadow: 2px 0 2px 0 rgb(175, 130, 6);
+        position: relative;
+        top: -3%;
+        left: -8px;
+        text-align: center;
+      }
+      .brush-question-component-tab1-body-item-title {
+        background-color: rgb(234, 235, 236);
+        color: #333;
+        font-size: 14px;
+        font-weight: 700;
+        height: 80px;
+        // line-height: 50px;
+        overflow: auto;
+        padding: 20px 10px 0;
+        text-align: center;
+      }
+      .brush-question-component-tab1-body-item-content {
+        display: flex;
+        margin: 10px;
+        color: #000000a6;
+        .brush-question-component-tab1-body-item-content-icon {
+          margin-right: 5px;
+        }
+      }
+      .brush-question-component-tab1-body-item-footer {
+        display: none;
+        margin-top: 40px;
+
+        .brush-question-component-tab1-body-item-footer-button {
+          flex: 1;
+          text-align: center;
+          &:hover {
+            color: #3c6eee;
+          }
+        }
+      }
+    }
+  }
+  .brush-question-component-tab2-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 20px 0;
+    .brush-question-component-tab2-head-title {
+      display: flex;
+      color: #333;
+      font-size: 16px;
+      font-weight: 400;
+      .brush-question-component-tab2-head-title-icon {
+        margin-right: 8px;
+      }
+    }
+  }
+}

src/views/personal-center/components/collection-bag/index.jsx

@@ -0,0 +1,145 @@
+import { Card, Pagination, Spin } from 'antd'
+import React, { Component } from 'react'
+import { collectTabType } from '../../constant'
+import CollectionQuestion from '../collection-question'
+import EmptyBox from '../empty-box'
+import './index.less'
+const tabList = [
+  {
+    key: 'testQuestions',
+    tab: '收藏的试题'
+  }
+  //   {
+  //     key: 'posts',
+  //     tab: '收藏的帖子',
+  //   },
+]
+
+export default class CollectionBag extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentKey: collectTabType.testQuestions, // 选中的tab 默认选中第一个
+      collectionList: [],
+      isShowSpin: true,
+      isShowSkeleton: true
+    }
+  }
+
+  total = 0 // 总题数
+  pageIndex = 1
+  pageSize = 10
+
+  componentDidMount() {
+    this.getCollectionList()
+  }
+
+  /**
+   * 切换tab
+   * @param {*} key
+   */
+  onTabChange = key => {
+    this.setState(
+      {
+        currentKey: key
+      },
+      () => {
+        this.pageIndex = 1
+        this.getCollectionList()
+      }
+    )
+  }
+
+  /**
+   * 获取一级分类数据
+   */
+  getCollectionList() {
+    // JDreq({
+    //   method: 'post',
+    //   data: {
+    //     pageInfo: {
+    //       pageIndex: this.pageIndex,
+    //       pageSize: this.pageSize,
+    //     },
+    //   },
+    //   url: apiName.getCollectionList,
+    // })
+    //   .then((res) => {
+    //     if (res.data && res.data.pageList?.length > 0) {
+    //       this.total = res.data.pageInfo.total
+    //       this.setState({
+    //         collectionList: res.data.pageList,
+    //         isShowSpin: false,
+    //         isShowSkeleton: false,
+    //       })
+    //     } else {
+    //       this.total = 0
+    //       this.setState({
+    //         collectionList: [],
+    //         isShowSpin: false,
+    //       })
+    //     }
+    //   })
+    //   .catch((err) => console.log(err))
+  }
+
+  /**
+   * 分页
+   * @param {*} pageIndex
+   */
+  onChangePagination = pageIndex => {
+    this.pageIndex = pageIndex
+    this.getCollectionList()
+  }
+
+  render() {
+    const { currentKey, collectionList, isShowSpin } = this.state
+    return (
+      <div className='collection-bag-component'>
+        <Card
+          style={{ width: '100%' }}
+          tabList={tabList}
+          activeTabKey={currentKey}
+          onTabChange={key => {
+            this.onTabChange(key)
+          }}
+        >
+          <Spin spinning={isShowSpin}>
+            {collectionList?.length > 0 ? this.renderContent(currentKey) : <EmptyBox />}
+            {this.total > 10 && (
+              <Pagination
+                style={{
+                  padding: '24px 0',
+                  textAlign: 'center'
+                }}
+                showQuickJumper
+                current={this.pageIndex}
+                defaultCurrent={this.pageIndex}
+                total={this.total}
+                onChange={this.onChangePagination}
+              />
+            )}
+          </Spin>
+        </Card>
+      </div>
+    )
+  }
+
+  /**
+   * 渲染内容
+   * @param {*} type
+   * @returns
+   */
+  renderContent = type => {
+    const { collectionList } = this.state
+    switch (type) {
+      // 收藏的试题
+      case collectTabType.testQuestions:
+        return (
+          <div>
+            <CollectionQuestion collectionList={collectionList} collectionTotal={this.total} />
+          </div>
+        )
+    }
+  }
+}

src/views/personal-center/components/collection-bag/index.less

@@ -0,0 +1,16 @@
+.collection-bag-component {
+  .collection-bag-component-tab1-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 20px 0;
+    .collection-bag-component-tab1-head-title {
+      display: flex;
+      color: #333;
+      font-size: 16px;
+      font-weight: 400;
+      .collection-bag-component-tab1-head-title-icon {
+        margin-right: 8px;
+      }
+    }
+  }
+}

src/views/personal-center/components/collection-question/index.jsx

@@ -0,0 +1,103 @@
+import { SnippetsTwoTone } from '@ant-design/icons'
+import { debounce, splicingQuery } from '@utils'
+import React, { Component } from 'react'
+
+import './index.less'
+
+class CollectionQuestion extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isModalVisible: false //对话框默认不可见
+    }
+  }
+
+  handleCancelCollection = () => {
+    console.log('取消收藏')
+    this.setState({
+      isModalVisible: true
+    })
+  }
+
+  handleCancel = () => {
+    // console.log('点了取消');
+    this.setState({
+      isModalVisible: false
+    })
+  }
+
+  handleOk = () => {
+    console.log('点了确认')
+    this.setState({
+      isModalVisible: false
+    })
+  }
+  handleJump = id =>
+    debounce(() => {
+      this.props.history.push(
+        splicingQuery('good-collection-question', {
+          subjectType: 4,
+          subjectId: id
+        })
+      )
+    })
+
+  render() {
+    const { collectionList, collectionTotal } = this.props
+    const { isModalVisible } = this.state
+    return (
+      <div className='collection-bag-component-tab1-body'>
+        <div className='collection-bag-component-tab1-head-title'>
+          <div className='collection-bag-component-tab1-head-title-icon'>
+            <SnippetsTwoTone twoToneColor='#FF0000' />
+          </div>
+          <div>收藏的题目({collectionTotal})</div>
+        </div>
+        {collectionList.map(item => {
+          return (
+            <div
+              className='collection-bag-component-tab1-body-item'
+              key={`collection_question_${item.id}`}
+            >
+              <div className='collection-bag-component-tab1-body-item-question'>
+                <span
+                  className='collection-bag-component-tab1-body-item-question-content'
+                  onClick={this.handleJump(item.id)}
+                >
+                  {item.subjectName}
+                </span>
+              </div>
+              {/* <div className="collection-bag-component-tab1-body-item-foot">
+                <span
+                  className="collection-bag-component-tab1-body-item-foot-button"
+                  onClick={this.handleCancelCollection}
+                >
+                  取消收藏
+                </span>
+                <Modal
+                  title="提示"
+                  visible={isModalVisible}
+                  cancelText="取消"
+                  okText="确认"
+                  onOk={this.handleOk}
+                  onCancel={this.handleCancel}
+                >
+                  <p
+                    style={{
+                      fontSize: '17px',
+                      textAlign: 'center',
+                    }}
+                  >
+                    确认取消收藏吗？
+                  </p>
+                </Modal>
+              </div> */}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+export default CollectionQuestion

src/views/personal-center/components/collection-question/index.less

@@ -0,0 +1,44 @@
+.collection-bag-component-tab1-body {
+  padding: 0 20px 20px 20px;
+  .collection-bag-component-tab1-head-title {
+    display: flex;
+    color: #333;
+    font-size: 16px;
+    font-weight: 400;
+    .collection-bag-component-tab1-head-title-icon {
+      margin-right: 8px;
+    }
+  }
+  .collection-bag-component-tab1-body-item {
+    margin: 10px 0;
+    overflow: auto;
+    position: relative;
+    clear: both;
+    // height: 60px;
+    border-bottom: 1px solid #e5e5e5;
+
+    .collection-bag-component-tab1-body-item-question {
+      font-size: 14px;
+      line-height: 1.8;
+      .collection-bag-component-tab1-body-item-question-content {
+        width: 600px;
+        cursor: pointer;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        &:hover {
+          color: #3c6eee;
+        }
+      }
+    }
+    .collection-bag-component-tab1-body-item-foot {
+      margin-top: 10px;
+      float: right;
+      .collection-bag-component-tab1-body-item-foot-button {
+        cursor: pointer;
+        color: #3c6eee;
+      }
+    }
+  }
+}

src/views/personal-center/components/empty-box/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import './index.less'
+export default function EmptyBox() {
+  return (
+    <div className='empty-box'>
+      <img
+        src='https://img11.360buyimg.com/imagetools/jfs/t1/161028/16/25609/6746/61a08d83E06659dfa/e6418acdab948134.png'
+        className='empty-inco'
+      />
+      <span className='empty-text'>这里什么也没有哦～</span>
+    </div>
+  )
+}

src/views/personal-center/components/empty-box/index.less

@@ -0,0 +1,17 @@
+.empty-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 100px 0;
+  .empty-inco {
+    width: 100px;
+    height: 100px;
+  }
+  .empty-text {
+    margin-top: 20px;
+    color: #b2bac2;
+    font-weight: 500;
+    font-size: 14px;
+  }
+}

src/views/personal-center/components/good-bag/index.jsx

@@ -0,0 +1,139 @@
+import { Card, Pagination, Spin } from 'antd'
+import React, { Component } from 'react'
+import { goodTabType } from '../../constant'
+import EmptyBox from '../empty-box'
+import GoodQuestion from '../good-question'
+import './index.less'
+const tabList = [
+  {
+    key: 'testQuestions',
+    tab: '点赞的试题'
+  }
+  //   {
+  //     key: 'posts',
+  //     tab: '点赞的帖子',
+  //   },
+]
+
+export default class GoodBag extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentKey: goodTabType.testQuestions, // 选中的tab 默认选中第一个
+      goodList: [],
+      isShowSpin: true
+    }
+  }
+
+  total = 0 // 总题数
+  pageIndex = 1
+  pageSize = 10
+
+  componentDidMount() {
+    this.getGoodList()
+  }
+
+  /**
+   * 切换tab
+   * @param {*} key
+   */
+  onTabChange = key => {
+    this.setState(
+      {
+        currentKey: key
+      },
+      () => {
+        this.pageIndex = 1
+        this.getGoodList()
+      }
+    )
+  }
+
+  /**
+   * 获取一级分类数据
+   */
+  getGoodList() {
+    // JDreq({
+    //   method: 'post',
+    //   data: {
+    //     pageInfo: {
+    //       pageIndex: this.pageIndex,
+    //       pageSize: this.pageSize,
+    //     },
+    //   },
+    //   url: apiName.getGoodList,
+    // })
+    //   .then((res) => {
+    //     if (res.data && res.data.pageList?.length > 0) {
+    //       this.total = res.data.pageInfo.total
+    //       this.setState({
+    //         goodList: res.data.pageList,
+    //         isShowSpin: false,
+    //       })
+    //     } else {
+    //       this.total = 0
+    //       this.setState({
+    //         goodList: [],
+    //         isShowSpin: false,
+    //       })
+    //     }
+    //   })
+    //   .catch((err) => console.log(err))
+  }
+
+  /**
+   * 分页
+   * @param {*} pageIndex
+   */
+  onChangePagination = pageIndex => {
+    this.pageIndex = pageIndex
+    this.getGoodList()
+  }
+
+  render() {
+    const { currentKey, goodList, isShowSpin } = this.state
+    return (
+      <div className='good-bag-component'>
+        <Card
+          style={{ width: '100%' }}
+          tabList={tabList}
+          activeTabKey={currentKey}
+          onTabChange={key => {
+            this.onTabChange(key)
+          }}
+        >
+          <Spin spinning={isShowSpin}>
+            {goodList?.length > 0 ? this.renderContent(currentKey) : <EmptyBox />}
+            {this.total > 10 && (
+              <Pagination
+                style={{
+                  padding: '24px 0',
+                  textAlign: 'center'
+                }}
+                showQuickJumper
+                current={this.pageIndex}
+                defaultCurrent={this.pageIndex}
+                total={this.total}
+                onChange={this.onChangePagination}
+              />
+            )}
+          </Spin>
+        </Card>
+      </div>
+    )
+  }
+
+  /**
+   * 渲染内容
+   * @param {*} type
+   * @returns
+   */
+  renderContent = type => {
+    const { goodList } = this.state
+    switch (type) {
+      // 收藏的试题
+      case goodTabType.testQuestions:
+        return <GoodQuestion goodList={goodList} goodTotal={this.total} />
+    }
+  }
+}

src/views/personal-center/components/good-bag/index.less

@@ -0,0 +1,16 @@
+.good-bag-component {
+  .good-bag-component-tab1-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 20px 0;
+    .good-bag-component-tab1-head-title {
+      display: flex;
+      color: #333;
+      font-size: 16px;
+      font-weight: 400;
+      .good-bag-component-tab1-head-title-icon {
+        margin-right: 8px;
+      }
+    }
+  }
+}

src/views/personal-center/components/good-question/index.jsx

@@ -0,0 +1,97 @@
+import { SnippetsTwoTone } from '@ant-design/icons'
+import { debounce, splicingQuery } from '@utils'
+import React, { Component } from 'react'
+
+import './index.less'
+
+class GoodQuestion extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isModalVisible: false //对话框默认不可见
+    }
+  }
+
+  handleCancelGood = () => {
+    console.log('取消点赞')
+    this.setState({
+      isModalVisible: true
+    })
+  }
+
+  handleCancel = () => {
+    // console.log('点了取消');
+    this.setState({
+      isModalVisible: false
+    })
+  }
+
+  handleOk = () => {
+    console.log('点了确认')
+    this.setState({
+      isModalVisible: false
+    })
+  }
+  handleJump = id =>
+    debounce(() => {
+      this.props.history.push(
+        splicingQuery('good-collection-question', {
+          subjectType: 4,
+          subjectId: id
+        })
+      )
+    })
+
+  render() {
+    const { goodList, goodTotal } = this.props
+    const { isModalVisible } = this.state
+    return (
+      <div className='good-bag-component-tab1-body'>
+        <div className='good-bag-component-tab1-head-title'>
+          <div className='good-bag-component-tab1-head-title-icon'>
+            <SnippetsTwoTone twoToneColor='#FF0000' />
+          </div>
+          <div>点赞的题目（{goodTotal}）</div>
+        </div>
+        {goodList.map(item => {
+          return (
+            <div className='good-bag-component-tab1-body-item' key={`good_question_${item.id}`}>
+              <div className='good-bag-component-tab1-body-item-question'>
+                <span
+                  className='good-bag-component-tab1-body-item-question-content'
+                  onClick={this.handleJump(item.id)}
+                >
+                  {item.subjectName}
+                </span>
+              </div>
+              {/* <div className="good-bag-component-tab1-body-item-foot">
+                <span className="good-bag-component-tab1-body-item-foot-button" onClick={this.handleCancelGood}>
+                  取消点赞
+                </span>
+                <Modal
+                  title="提示"
+                  visible={isModalVisible}
+                  cancelText="取消"
+                  okText="确认"
+                  onOk={this.handleOk}
+                  onCancel={this.handleCancel}
+                >
+                  <p
+                    style={{
+                      fontSize: '17px',
+                      textAlign: 'center',
+                    }}
+                  >
+                    确认取消点赞吗？
+                  </p>
+                </Modal>
+              </div> */}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+export default GoodQuestion

src/views/personal-center/components/good-question/index.less

@@ -0,0 +1,44 @@
+.good-bag-component-tab1-body {
+  padding: 0 20px 20px 20px;
+  .good-bag-component-tab1-head-title {
+    display: flex;
+    color: #333;
+    font-size: 16px;
+    font-weight: 400;
+    .good-bag-component-tab1-head-title-icon {
+      margin-right: 8px;
+    }
+  }
+  .good-bag-component-tab1-body-item {
+    margin: 10px 0;
+    overflow: auto;
+    position: relative;
+    clear: both;
+    // height: 60px;
+    border-bottom: 1px solid #e5e5e5;
+
+    .good-bag-component-tab1-body-item-question {
+      font-size: 14px;
+      line-height: 1.8;
+      .good-bag-component-tab1-body-item-question-content {
+        width: 600px;
+        cursor: pointer;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        &:hover {
+          color: #3c6eee;
+        }
+      }
+    }
+    .good-bag-component-tab1-body-item-foot {
+      margin-top: 10px;
+      float: right;
+      .good-bag-component-tab1-body-item-foot-button {
+        cursor: pointer;
+        color: #3c6eee;
+      }
+    }
+  }
+}

src/views/personal-center/constant.js

@@ -0,0 +1,19 @@
+export const apiName = {
+  /**
+   * 获取收藏数据
+   */
+  getCollectionList: '/admin/question/collect/list',
+  getGoodList: 'admin/question/thump/list',
+}
+
+// 收藏-tab类型
+export const collectTabType = {
+  testQuestions: 'testQuestions', //试题
+  posts: 'posts', //帖子
+}
+
+// 点赞-tab类型
+export const goodTabType = {
+  testQuestions: 'testQuestions', //试题
+  posts: 'posts', //帖子
+}

src/views/personal-center/index.jsx

@@ -0,0 +1,160 @@
+import { IdcardOutlined, LikeTwoTone, MailOutlined, StarTwoTone } from '@ant-design/icons'
+import { Menu } from 'antd'
+import React, { Component } from 'react'
+// import JDreq from '@common/JDreq'
+import PubSub from 'pubsub-js'
+// import headLog from './headLog.png'
+import CollectionBag from './components/collection-bag'
+import GoodBag from './components/good-bag'
+import './index.less'
+
+export default class PersonalCenter extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentKeyMap: 0, //选中的menu
+      userName: '', //姓名
+      intervieweEamil: '', //邮箱
+      headImg: '', //头像
+      department: '', //部门
+      practiceAmount: 0, //练题数
+      inputAmount: 0, //录题数
+      goodAmount: 0, //点赞数
+      collectionAmount: 0, //收藏数
+      subMenuList: []
+    }
+  }
+  personList = {
+    // 0: '刷题',
+    0: '收藏',
+    1: '点赞'
+  }
+  componentDidMount() {
+    // JDreq({
+    //   method: 'post',
+    //   url: 'admin/person/home/getPersonInfo'
+    // }).then(res => {
+    //   this.setState(
+    //     {
+    //       userName: res.data?.name ?? '',
+    //       intervieweEamil: res.data?.email ?? '',
+    //       headImg: res.data?.headImg ?? '',
+    //       department: res.data?.departmentName ?? '',
+    //       goodAmount: res.data?.thumpCount ?? 0,
+    //       collectionAmount: res.data?.collectCount ?? 0,
+    //       practiceAmount: res.data?.practiceCount ?? 0,
+    //       inputAmount: res.data?.subjectCount ?? 0
+    //     },
+    //     () => {
+    //       window.localStorage.setItem('interviewName', res.data?.name ?? 'XXX')
+    //       window.localStorage.setItem('interviewEamil', res.data?.email ?? 'XXX')
+    //     }
+    //   )
+    // })
+    PubSub.subscribe('handleToRender', () => {
+      this.setState({})
+    })
+  }
+  /**
+   * 切换菜单
+   * @param {*} e
+   */
+  handleClick = e => {
+    console.log('--------', e)
+    //截取_后的字符
+    let index = e.keyPath[0].lastIndexOf('_')
+    let index2 = e.keyPath[0].substring(index + 1, e.keyPath[0].length)
+    //
+    console.log('index2>>>>', index2)
+    this.setState({
+      currentKeyMap: Number(index2)
+    })
+  }
+  render() {
+    let {
+      headImg,
+      userName,
+      intervieweEamil,
+      department,
+      goodAmount,
+      collectionAmount,
+      practiceAmount,
+      inputAmount
+    } = this.state
+    const { currentKeyMap } = this.state
+    return (
+      <div className='personal-center-box'>
+        <div className='personal-center-introduction'>
+          <div className='personal-center-introduction-detail'>
+            <div className='personal-center-introduction-detail-headImg'>
+              <img src={headImg} style={{ width: 60, height: 60, borderRadius: '50%' }} />
+            </div>
+            <div className='personal-center-introduction-detail-text'>
+              <div className='personal-center-introduction-detail-name'>{userName}</div>
+              <div className='personal-center-introduction-detail-information'>
+                <span className='personal-center-introduction-detail-information-content'>
+                  <IdcardOutlined style={{ color: 'blue', marginRight: '3px' }} />
+                  {/* 部门：{department} */}
+                </span>
+                <span className='personal-center-introduction-detail-information-content'>
+                  <MailOutlined style={{ color: 'blue', marginRight: '3px' }} />
+                  {/* 邮箱：{intervieweEamil} */}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className='personal-center-introduction-result'>
+            <div className='personal-center-introduction-result-item'>
+              <div className='personal-center-introduction-result-item-number'>
+                {practiceAmount}
+              </div>
+              <div>练题</div>
+            </div>
+            <div className='personal-center-introduction-result-item'>
+              <div className='personal-center-introduction-result-item-number'>{inputAmount}</div>
+              <div>录题</div>
+            </div>
+            <div className='personal-center-introduction-result-item'>
+              <div className='personal-center-introduction-result-item-number'>{goodAmount}</div>
+              <div>点赞</div>
+            </div>
+            <div className='personal-center-introduction-result-item'>
+              <div className='personal-center-introduction-result-item-number'>
+                {collectionAmount}
+              </div>
+              <div>收藏</div>
+            </div>
+          </div>
+        </div>
+        <div className='personal-center-content'>
+          <div className='personal-center-content-left'>
+            <Menu
+              mode='inline'
+              onClick={this.handleClick}
+              style={{ width: 256 }}
+              defaultSelectedKeys={['personList_0']}
+            >
+              {/* <Menu.Item key={`personList_0`}>
+                <MailOutlined style={{ color: 'rgb(171,214,97)' }} />
+                <span>{this.personList[0]}</span>
+              </Menu.Item> */}
+              <Menu.Item key={`personList_0`}>
+                <StarTwoTone twoToneColor='rgb(252,132,67)' />
+                <span>{this.personList[0]}</span>
+              </Menu.Item>
+              <Menu.Item key={`personList_1`}>
+                <LikeTwoTone twoToneColor='#99bbff' />
+                <span>{this.personList[1]}</span>
+              </Menu.Item>
+            </Menu>
+          </div>
+          <div className='personal-center-content-right'>
+            {/* {currentKeyMap === 0 && <BrushQuestion />} */}
+            {currentKeyMap === 0 && <CollectionBag />}
+            {currentKeyMap === 1 && <GoodBag />}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/views/personal-center/index.less

@@ -0,0 +1,68 @@
+.personal-center-box {
+  margin: 0 auto;
+  width: 1439px;
+  // padding: 20px 50px;
+  border-radius: 5px;
+  overflow: auto;
+  .personal-center-introduction {
+    background-color: #fff;
+    border-radius: 3px;
+    height: 100px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    .personal-center-introduction-detail {
+      margin-left: 50px;
+      padding-top: 20px;
+      display: flex;
+      .personal-center-introduction-detail-headImg {
+        margin-right: 20px;
+        align-items: center;
+      }
+      .personal-center-introduction-detail-text {
+        .personal-center-introduction-detail-name {
+          color: #3c6eee;
+          font-weight: 570;
+        }
+        .personal-center-introduction-detail-information {
+          margin: 15px 0;
+          .personal-center-introduction-detail-information-content {
+            margin-right: 15px;
+          }
+        }
+      }
+    }
+    .personal-center-introduction-result {
+      margin-right: 50px;
+      padding-top: 30px;
+      display: flex;
+      .personal-center-introduction-result-item {
+        text-align: center;
+        padding-right: 10px;
+        .personal-center-introduction-result-item-number {
+          font-weight: 570;
+          color: #3c6eee;
+        }
+      }
+    }
+  }
+  .personal-center-content {
+    display: flex;
+    align-items: flex-start;
+    .personal-center-content-left {
+      background-color: #fff;
+      overflow-y: auto;
+      border-radius: 3px;
+      width: 300px;
+      height: 720px;
+    }
+    .personal-center-content-right {
+      background-color: #fff;
+      flex-direction: column;
+      overflow: auto;
+      border-radius: 4px;
+      margin: 0 0 0 10px;
+      width: 100%;
+    }
+  }
+}

src/views/personal-center/mock.js

@@ -0,0 +1,58 @@
+export const getCollectionList = {
+  pageInfo: {
+    pageSize: 10,
+    totalPage: 2,
+    pageIndex: 1,
+    total: 12,
+    firstPage: true,
+    lastPage: false,
+    startRecord: 0,
+    endRecord: 10,
+  },
+  pageList: [
+    {
+      id: 1717,
+      subjectName: '说说 React组件开发中关于作用域的常见问题。',
+    },
+    {
+      id: 1710,
+      subjectName: '概述一下 React中的事件处理逻辑。',
+    },
+    {
+      id: 1706,
+      subjectName: 'React中Diff算法的原理是什么？',
+    },
+    {
+      id: 1698,
+      subjectName: 'shouldComponentUpdate有什么用？为什么它很重要？',
+    },
+    {
+      id: 1695,
+      subjectName: '在哪个生命周期中你会发出Ajax请求？为什么？',
+    },
+    {
+      id: 1692,
+      subjectName: '类组件和函数组件之间的区别是什么？',
+    },
+    {
+      id: 1691,
+      subjectName: '详细解释 React 组件的生命周期方法？',
+    },
+    {
+      id: 1689,
+      subjectName: '什么是 Props?',
+    },
+    {
+      id: 1579,
+      subjectName: '横竖屏切换的Activity 生命周期变化？',
+    },
+    {
+      id: 1578,
+      subjectName: '谈下MVC ，MVP，MVVM',
+    },
+    {
+      id: 1532,
+      subjectName: 'get 和post 请求在缓存方面的区别是什么？',
+    },
+  ],
+}