@@ -97,7 +132,50 @@ const Header = () => {
-
+ {
+ return (
+
{'/question-bank' == pathname && (
{
/>
)}
- {/*
{text}
+ },
+ {
+ title: '知识点',
+ dataIndex: 'knowledge',
+ key: 'knowledge'
+ },
+ {
+ title: '来自',
+ dataIndex: 'from',
+ key: 'from'
+ },
+ {
+ title: () => 只看已完成的 ,
+ key: 'tags',
+ dataIndex: 'tags',
+ render: () =>
+ }
+ ]
+
+ 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 (
+
+
+ {discoverItems.map(item => {
+ return (
+
+
+ )
+ }}
+ >
+
+ goPath(item)}>
+ {item.key === 'wechat' ? (
+ <>
+ {
+ return (
+
+
+ ) : (
+ <>
+
+ )
+ })}
+
+ 
+
+ )
+ }}
+ >
+ {item.title}
+ {item.subTitle}
+ {item.title}
+ {item.subTitle}
+
+ )}
+ */}
- {/*
*/}
+ {
+ this.onTabChange(key, 'key')
+ }}
+ >
+ {currentKey === 'tab1' && (
+
+
+ )
+ }
+}
diff --git a/src/views/personal-center/components/brush-question/index.less b/src/views/personal-center/components/brush-question/index.less
new file mode 100644
index 0000000..054c27e
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/views/personal-center/components/collection-bag/index.jsx b/src/views/personal-center/components/collection-bag/index.jsx
new file mode 100644
index 0000000..0788853
--- /dev/null
+++ b/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 (
+
+
+ )}
+ {currentKey === 'tab2' && (
+
+
+
+
+
+
+ 练习的试卷（21）
+
+ 只看已完成的
+
+
+
+
+
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+
+
+
+ 专项练习
+
+ 计算机专业技能-网络基础专项练习
+
+
+
+
+
+ 完成时间：2021-12-13
+
+
+
+
+ 得分：0
+
+
+
+ 再做一次
+
+
+ 查看详情
+
+
+ {total > 8 && (
+
+
+
+ )}
+
+
+
+
+
+
+ 历史错题总数（21）
+
+
+
+
+
+
+
+ {
+ this.onTabChange(key)
+ }}
+ >
+
+ {collectionList?.length > 0 ? this.renderContent(currentKey) :
+
+
+ )
+ }
+
+ /**
+ * 渲染内容
+ * @param {*} type
+ * @returns
+ */
+ renderContent = type => {
+ const { collectionList } = this.state
+ switch (type) {
+ // 收藏的试题
+ case collectTabType.testQuestions:
+ return (
+
+
+ )
+ }
+ }
+}
diff --git a/src/views/personal-center/components/collection-bag/index.less b/src/views/personal-center/components/collection-bag/index.less
new file mode 100644
index 0000000..bd2f029
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/views/personal-center/components/collection-question/index.jsx b/src/views/personal-center/components/collection-question/index.jsx
new file mode 100644
index 0000000..6c206e9
--- /dev/null
+++ b/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 (
+
+
+ )
+ }
+}
+
+export default CollectionQuestion
diff --git a/src/views/personal-center/components/collection-question/index.less b/src/views/personal-center/components/collection-question/index.less
new file mode 100644
index 0000000..012dfe5
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/views/personal-center/components/empty-box/index.jsx b/src/views/personal-center/components/empty-box/index.jsx
new file mode 100644
index 0000000..0980c6c
--- /dev/null
+++ b/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 (
+
+
+ {collectionList.map(item => {
+ return (
+
+
+ 收藏的题目({collectionTotal})
+
+
+ )
+ })}
+
+
+ {item.subjectName}
+
+
+ {/*
+
+ 取消收藏
+
+
+
+
*/}
+ + 确认取消收藏吗？ +
+
+ 
+ 这里什么也没有哦～
+
+ )
+}
diff --git a/src/views/personal-center/components/empty-box/index.less b/src/views/personal-center/components/empty-box/index.less
new file mode 100644
index 0000000..06e6958
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/views/personal-center/components/good-bag/index.jsx b/src/views/personal-center/components/good-bag/index.jsx
new file mode 100644
index 0000000..666c996
--- /dev/null
+++ b/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 (
+
+ 这里什么也没有哦～
+
+ {
+ this.onTabChange(key)
+ }}
+ >
+
+ {goodList?.length > 0 ? this.renderContent(currentKey) :
+
+
+ )
+ }
+
+ /**
+ * 渲染内容
+ * @param {*} type
+ * @returns
+ */
+ renderContent = type => {
+ const { goodList } = this.state
+ switch (type) {
+ // 收藏的试题
+ case goodTabType.testQuestions:
+ return
+
+ )
+ }
+}
+
+export default GoodQuestion
diff --git a/src/views/personal-center/components/good-question/index.less b/src/views/personal-center/components/good-question/index.less
new file mode 100644
index 0000000..06dc739
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/views/personal-center/constant.js b/src/views/personal-center/constant.js
new file mode 100644
index 0000000..ec45fd9
--- /dev/null
+++ b/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', //帖子
+}
diff --git a/src/views/personal-center/headLog.png b/src/views/personal-center/headLog.png
new file mode 100644
index 0000000..dcd7ead
Binary files /dev/null and b/src/views/personal-center/headLog.png differ
diff --git a/src/views/personal-center/index.jsx b/src/views/personal-center/index.jsx
new file mode 100644
index 0000000..954675a
--- /dev/null
+++ b/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 (
+
+
+ {goodList.map(item => {
+ return (
+
+
+ 点赞的题目（{goodTotal}）
+
+
+ )
+ })}
+
+
+ {item.subjectName}
+
+
+ {/*
+
+ 取消点赞
+
+
+
+
*/}
+ + 确认取消点赞吗？ +
+
+
+ )
+ }
+}
diff --git a/src/views/personal-center/index.less b/src/views/personal-center/index.less
new file mode 100644
index 0000000..9c0577e
--- /dev/null
+++ b/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%;
+ }
+ }
+}
diff --git a/src/views/personal-center/mock.js b/src/views/personal-center/mock.js
new file mode 100644
index 0000000..fffe02a
--- /dev/null
+++ b/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 请求在缓存方面的区别是什么？',
+ },
+ ],
+}
diff --git a/src/views/question-bank/components/contribution-list/index.jsx b/src/views/question-bank/components/contribution-list/index.jsx
index 1e513ce..3355ace 100644
--- a/src/views/question-bank/components/contribution-list/index.jsx
+++ b/src/views/question-bank/components/contribution-list/index.jsx
@@ -67,12 +67,12 @@ const ContributionList = props => {
).then(res => {
if (res.success && res.data) {
if (res.data.includes('subject:add')) {
- navigate('/upload-questions')
+ window.open('/upload-question')
} else {
- message.info('敬请期待')
+ message.info('暂无权限')
}
} else {
- message.info('敬请期待')
+ message.info('暂无权限')
}
})
}
diff --git a/src/views/upload-questions/components/brief-questions/index.less b/src/views/upload-questions/components/brief-questions/index.less
index 56be9d8..8ded137 100644
--- a/src/views/upload-questions/components/brief-questions/index.less
+++ b/src/views/upload-questions/components/brief-questions/index.less
@@ -1,58 +1,58 @@
.brief-questions-container {
- width: 1000px;
+ // width: 1000px;
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ padding-top: 36px;
+ .brief-questions-title {
display: flex;
align-items: center;
- padding: 0 24px;
- padding-top: 36px;
- .brief-questions-title {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- width: 140px;
- line-height: 40px;
- font-size: 16px;
- color: rgba(51, 51, 51, 1);
- &:before {
- display: inline-block;
- margin-right: 4px;
- margin-top: 1px;
- color: #f5222d;
- font-size: 16px;
- content: '*';
- }
+ justify-content: flex-end;
+ width: 140px;
+ line-height: 40px;
+ font-size: 16px;
+ color: rgba(51, 51, 51, 1);
+ &:before {
+ display: inline-block;
+ margin-right: 4px;
+ margin-top: 1px;
+ color: #f5222d;
+ font-size: 16px;
+ content: '*';
}
- .brief-questions-main {
- width: 100%;
- // 题目输入框
- .brief-questions-input {
- height: 48px;
- }
+ }
+ .brief-questions-main {
+ width: 100%;
+ // 题目输入框
+ .brief-questions-input {
+ height: 48px;
}
+ }
}
.brief-questions-btns-container {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin: 20px auto;
+ width: 952px;
+ .brief-questions-btn {
display: flex;
- justify-content: flex-end;
align-items: center;
- margin: 20px auto;
- width: 952px;
- .brief-questions-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 150px;
- height: 40px;
- font-size: 16px;
- cursor: pointer;
- border: 1px solid #d9d9d9;
- border-radius: 10px;
- }
- .brief-questions-submit {
- margin-left: 40px;
- background-color: #4390f7;
- color: #fff;
- border: 1px solid #4390f7;
- }
- .brief-questions-disabled-submit {
- opacity: 0.5;
- }
+ justify-content: center;
+ width: 150px;
+ height: 40px;
+ font-size: 16px;
+ cursor: pointer;
+ border: 1px solid #d9d9d9;
+ border-radius: 10px;
+ }
+ .brief-questions-submit {
+ margin-left: 40px;
+ background-color: #4390f7;
+ color: #fff;
+ border: 1px solid #4390f7;
+ }
+ .brief-questions-disabled-submit {
+ opacity: 0.5;
+ }
}
diff --git a/src/views/upload-questions/components/upload-left-layout/index.less b/src/views/upload-questions/components/upload-left-layout/index.less
index 082e544..206c7cc 100644
--- a/src/views/upload-questions/components/upload-left-layout/index.less
+++ b/src/views/upload-questions/components/upload-left-layout/index.less
@@ -18,8 +18,6 @@
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(208, 212, 222, 1);
border-radius: 12px;
- &:hover {
- }
}
.upload-left-layout-item-active {
color: rgba(60, 110, 238, 1);
diff --git a/src/views/upload-questions/index.less b/src/views/upload-questions/index.less
index 9a944e5..e3af76d 100644
--- a/src/views/upload-questions/index.less
+++ b/src/views/upload-questions/index.less
@@ -1,20 +1,20 @@
.upload-questions-box {
- position: relative;
- margin: 0 auto;
- width: 1439px;
- overflow-y: auto;
- border-radius: 5px;
- height: calc(100vh - 90px);
- .ant-card-head {
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- padding: 0 48px;
- z-index: 10;
- background-color: #fff;
- }
- .ant-card-body {
- display: flex;
- }
+ position: relative;
+ margin: 0 auto;
+ width: 1439px;
+ overflow-y: auto;
+ border-radius: 5px;
+ height: calc(100vh - 100px);
+ .ant-card-head {
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 0 48px;
+ z-index: 10;
+ background-color: #fff;
+ }
+ .ant-card-body {
+ display: flex;
+ }
}
diff --git a/src/views/upload-questions/index.tsx b/src/views/upload-questions/index.tsx
index 52f87ca..5090e98 100644
--- a/src/views/upload-questions/index.tsx
+++ b/src/views/upload-questions/index.tsx
@@ -1,49 +1,66 @@
-import React, { Component } from 'react';
-import { Card } from 'antd';
-import SingleBox from './pages/single-box';
-import BatchleBox from './pages/batch-box';
-import './index.less';
+import req from '@utils/request'
+import { Card, message } from 'antd'
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import BatchleBox from './pages/batch-box'
+import SingleBox from './pages/single-box'
+
+import './index.less'
const tabList = [
- {
- key: 'singleBox',
- tab: '单题录入',
- },
- // {
- // key: 'batchBox',
- // tab: '批量导入',
- // },
-];
-export default class UploadQuestions extends Component {
- constructor(props) {
- super(props);
- this.state = { currentKey: 'singleBox' };
- }
+ {
+ key: 'singleBox',
+ tab: '单题录入'
+ }
+]
+const UploadQuestions = () => {
+ const [currentKey, setCurrentKey] = useState('singleBox')
+ const navigate = useNavigate()
- contentList = {
- singleBox:
+
+
+
+
+ 
+
+
+
+ {userName}
+
+
+
+
+
+
+
+
+ {practiceAmount}
+
+ 练题
+
+
+ {inputAmount}
+ 录题
+
+
+ {goodAmount}
+ 点赞
+
+
+
+ {collectionAmount}
+
+ 收藏
+
+
+
+
+
+
+ {/* {currentKeyMap === 0 &&
+
- {
- this.onTabChange(key, 'key');
- }}>
- {this.contentList[currentKey]}
-
-
- );
+ useEffect(() => {
+ const userInfoStorage = localStorage.getItem('userInfo')
+ if (!userInfoStorage) {
+ return message.info('请登录')
}
+ const { loginId } = JSON.parse(userInfoStorage)
+ req(
+ {
+ method: 'get',
+ url: '/permission/getPermission',
+ params: {
+ userName: loginId
+ }
+ },
+ '/auth'
+ ).then(res => {
+ if (res.success && res.data) {
+ if (!res.data.includes('subject:add')) {
+ message.info('暂无权限')
+ navigate('/question-bank')
+ }
+ }
+ })
+ }, [])
+
+ const contentList = {
+ singleBox:
+ {
+ setCurrentKey(key)
+ }}
+ >
+ {contentList[currentKey]}
+
+
+ )
}
+
+export default UploadQuestions
diff --git a/src/views/upload-questions/pages/single-box/index.jsx b/src/views/upload-questions/pages/single-box/index.jsx
index 6d1e360..c755dd3 100644
--- a/src/views/upload-questions/pages/single-box/index.jsx
+++ b/src/views/upload-questions/pages/single-box/index.jsx
@@ -1,64 +1,65 @@
-import React, { Component } from 'react';
-import UploadLeftLayout from '../../components/upload-left-layout';
-import BriefQuestions from '../../components/brief-questions';
-import SingleQuestions from '../../components/single-questions';
-import MultipleQuestions from '../../components/multiple-questions';
-import JudgeQuestions from '../../components/judge-questions';
-import { uploadLayout } from '../../constant';
-import './index.less';
+import React, { Component } from 'react'
+import BriefQuestions from '../../components/brief-questions'
+import JudgeQuestions from '../../components/judge-questions'
+import MultipleQuestions from '../../components/multiple-questions'
+import SingleQuestions from '../../components/single-questions'
+import UploadLeftLayout from '../../components/upload-left-layout'
+import { uploadLayout } from '../../constant'
+
+import './index.less'
export default class SingleBox extends Component {
- constructor(props) {
- super(props);
- this.state = {
- layoutList: uploadLayout,
- currentIndex: 0,
- };
+ constructor(props) {
+ super(props)
+ this.state = {
+ layoutList: uploadLayout,
+ currentIndex: 0
}
- /**
- * 切换题型
- * @param {*} id
- */
- onChangeQuestionsType = (layoutIndex) => {
- let { layoutList, currentIndex } = this.state;
- if (currentIndex === layoutIndex) {
- return;
- }
- let list = layoutList.map((item, index) => {
- let flag = false;
- if (layoutIndex === index) {
- flag = true;
- }
- return {
- ...item,
- active: flag,
- };
- });
- this.setState({
- layoutList: list,
- currentIndex: layoutIndex,
- });
- };
-
- render() {
- const { currentIndex, layoutList } = this.state;
- return (
-
-
- );
+ }
+ /**
+ * 切换题型
+ * @param {*} id
+ */
+ onChangeQuestionsType = layoutIndex => {
+ let { layoutList, currentIndex } = this.state
+ if (currentIndex === layoutIndex) {
+ return
}
+ let list = layoutList.map((item, index) => {
+ let flag = false
+ if (layoutIndex === index) {
+ flag = true
+ }
+ return {
+ ...item,
+ active: flag
+ }
+ })
+ this.setState({
+ layoutList: list,
+ currentIndex: layoutIndex
+ })
+ }
- changeReander = (i) => {
- switch (i) {
- case 0:
- return {this.changeReander(currentIndex)}
-
+
+ )
+ }
+
+ changeReander = i => {
+ switch (i) {
+ case 0:
+ return {this.changeReander(currentIndex)}
+