QingYu-Club/qing-yu-club-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加二级分类及标签

Browse Source
This commit is contained in:
秋水浮尘
2023-10-17 01:25:19 +08:00
parent 7ba8d52bfe
commit 5214648d90
9 changed files with 392 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.tsx
View File

@@ -1,4 +1,4 @@
import React, { Component, useEffect } from 'react';
import { useEffect, memo } from 'react';
import './App.less';
import { useLocation, useNavigate, Outlet } from 'react-router-dom';
import PubSub from 'pubsub-js';
@@ -8,29 +8,10 @@ import Head from '@views/imgs/head.jpg'
import TopMenu from '@components/top-menu'
const { Search } = Input;
class NavTop extends Component {
constructor(props) {
super(props);
this.state = {
userName: '',
intervieweEamil: '',
headImg: '',
isShowTimer: false,
};
}
timerRef = React.createRef();
componentDidMount() {
PubSub.subscribe('handleToRender', () => {
this.setState({});
});
}
render() {
let { headImg, isShowTimer } = this.state;
const NavTop = () => {
const { pathname } = window.location;
return (
<div className="head-navigator-box">
<div className="head-navigator">
@@ -67,8 +48,7 @@ class NavTop extends Component {
</div>
</div>
</div>
);
}
)
}
const App = () => {
@@ -87,4 +67,4 @@ const App = () => {
)
}
export default App
export default memo(App)

18
src/components/category-list/constant.js
View File

@@ -8,23 +8,23 @@ export const filterDifficulty = [
},
{
id: 1,
title: 'T4',
title: '初级',
},
{
id: 2,
title: 'T5',
title: '中级',
},
{
id: 3,
title: 'T6',
title: '高级',
},
{
id: 4,
title: 'T7',
title: '资深',
},
{
id: 5,
title: 'T8',
title: '专家',
},
];
@@ -33,6 +33,14 @@ export const apiName = {
* 获取二级和三级标签
*/
getCategoryLabelInfo: '/admin/question/category/getCategoryLabelInfo',
/**
* 查询大类下分类
*/
queryCategoryByPrimary: '/category/queryCategoryByPrimary',
// 根据分类查标签
queryLabelByCategoryId: '/label/queryLabelByCategoryId'
};
export const imgObject = {

298
src/components/category-list/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react';
import React, { Component, Fragment, useState, useEffect } from 'react';
import {
RightOutlined,
@@ -8,7 +8,7 @@ import {
CaretUpOutlined,
} from '@ant-design/icons';
import req from '@utils/request';
import { Divider } from 'antd';
import { Divider, Spin } from 'antd';
import _ from 'lodash';
import './index.less';
import { apiName, imgObject } from './constant';
@@ -30,12 +30,263 @@ export const categoryBackImg = {
const categoryShowCount = 4;
export default class CategoryList extends Component {
const cacheMap = {}
const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
const [secondCategoryList, setSecondCategoryList] = useState([])
const [currentActive, setCurrentActive] = useState(categoryList[0])
const [isPutAway, setIsPutAway] = useState(true)
const [loading, setLoading] = useState(false)
const getLabels = (id) => {
return new Promise(resolve => {
req({
method: 'post',
url: apiName.queryLabelByCategoryId,
data: { categoryId: id }
}).then(res => {
if (cacheMap[id]) {
resolve(cacheMap[id])
} else {
cacheMap[id] = res.data
resolve(res.data)
}
})
})
}
// 获取大类下分类
const getCategoryByPrimary = () => {
req({
method: 'post',
url: apiName.queryCategoryByPrimary,
data: { categoryType: 2, parentId: currentActive.id }
}).then(async res => {
let list = res.data
for (let i = 0; i < list.length; i++) {
list[i].children = await getLabels(list[i].id)
}
setSecondCategoryList(_.cloneDeep(list))
})
}
useEffect(() => {
if (primaryCategoryId) {
getCategoryByPrimary()
}
}, [primaryCategoryId])
/**
* 切换一级分类
* @param {*} item
* @returns
*/
const onChangeCategory = (item) => () => {
if (currentActive.id === item.id) {
return;
}
setCurrentActive(item)
props.onChangeCategory(item);
};
/**
* 一级分类模块
* @returns
*/
const renderFirstContainer = () => {
return (
<div className="first-category-list">
{categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
return (
<div
className={`first-category-item ${categoryModuleItem.id === currentActive.id &&
'first-category-item-active'
}`}
key={`first_category_${categoryModuleItem.id}`}
style={{
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
}}
onClick={onChangeCategory(categoryModuleItem)}>
<div className="first-category-item-title">
{categoryModuleItem.categoryName}
</div>
<div className="first-category-item-count">
{categoryModuleItem.count || 50}道题
</div>
</div>
);
})}
{categoryList.length > 7 && (
<div className="first-category-more">
更多
<RightOutlined />
</div>
)}
</div>
);
};
/**
* 选择标签-支持单选（多选）
* @param {*} categoryId 一级分类id
* @param {*} secondCategoryIndex 二级分类对象index
* @param {*} thirdCategoryIndex 三级标签index
* @param {*} active 三级标签当前的选中状态
* @returns
*/
const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => {
const list = _.cloneDeep(secondCategoryList)
_.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
setSecondCategoryList(list)
};
/**
* 展开/收起
* @param {*} secondCategoryIndex
* @returns
*/
const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
return
let { secondCategoryList } = this.state;
_.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
this.setState({
secondCategoryList,
});
};
/**
* 展开/收起
*/
const onChangePutAway = () => {
return
let { isPutAway } = this.state;
this.setState({
isPutAway: !isPutAway,
});
};
/**
* 二级分类模块
* @returns
*/
const renderSecondContainer = () => {
return (
<Spin spinning={loading}>
<div className="second-category-list">
{secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => {
return (
<div
style={{
display:
secondCategoryIndex >= categoryShowCount && isPutAway
? 'none'
: 'flex',
}}
className="second-category-item"
key={`second_category_${secondCategoryItem.id}`}>
<div className="second-category-item-title">
{secondCategoryItem.categoryName}：
</div>
{secondCategoryItem?.children?.length > 0 && (
<div className="second-category-item-box">
<div
style={{
height: secondCategoryItem.isOpen ? 'auto' : 43,
}}
className="second-category-item-list"
id={`id_${secondCategoryIndex}`}>
{secondCategoryItem.children.map(
(thirdCategoryItem, thirdCategoryIndex) => {
return (
<div
className={`third-category-item ${thirdCategoryItem.active
? 'third-category-item-active'
: ''
}`}
key={`third_category_${thirdCategoryItem.id}`}
onClick={onChangeLabel(
secondCategoryIndex,
thirdCategoryIndex,
(thirdCategoryItem.active || false)
)}>
{thirdCategoryItem.labelName}·
{thirdCategoryItem.subjectCount || 0}
</div>
);
}
)}
</div>
<div
id={`second_id_${secondCategoryIndex}`}
className="second-category-item-status"
onClick={onChangeOpenStatus(
secondCategoryIndex,
secondCategoryItem.isOpen
)}>
<div className="second-category-item-type" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? '收起' : '展开'}
</div>
<div className="second-category-item-icon" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? (
<UpOutlined />
) : (
<DownOutlined />
)}
</div>
</div>
</div>
)}
</div>
);
})}
{secondCategoryList?.length >= categoryShowCount && (
<Divider
onClick={onChangePutAway}
dashed
style={{
marginTop: 10,
fontSize: 13,
}}>
{isPutAway ? '展开' : '收起'}
{isPutAway ? (
<CaretDownOutlined style={{ marginLeft: 4 }} />
) : (
<CaretUpOutlined style={{ marginLeft: 4 }} />
)}
</Divider>
)}
</div>
</Spin>
);
};
return (
<div className="category-box">
<Fragment>{categoryList?.length && renderFirstContainer()}</Fragment>
<Fragment>
{secondCategoryList?.length > 0 && renderSecondContainer()}
</Fragment>
{/* {!this.props.isHideSec && (
<Fragment>
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
</Fragment>
)} */}
</div>
)
}
export default CategoryList
class CategoryList1 extends Component {
constructor(props) {
super(props);
this.state = {
secondCategoryList: [],
currentActive: '',
currentActive: null,
isPutAway: true, // 是否收起 默认收起状态
};
}
@@ -49,7 +300,7 @@ export default class CategoryList extends Component {
*/
initCategoryList() {
const { categoryList, primaryCategoryId } = this.props;
let currentActive = primaryCategoryId ?? categoryList[0].primaryCategoryId;
let currentActive = primaryCategoryId ?? categoryList[0];
this.props.onChangeCategory(currentActive);
this.getSecondCategoryList(currentActive);
}
@@ -61,8 +312,8 @@ export default class CategoryList extends Component {
const { categoryListMap } = this.props;
// 调用接口返回二级三级数据
let params = {
primaryCategoryId: currentActive,
subjectTypeList: [4],
parentId: currentActive.id,
categoryType: 2,
};
req({
method: 'post',
@@ -210,28 +461,13 @@ export default class CategoryList extends Component {
});
};
render() {
const { categoryList } = this.props;
const { secondCategoryList } = this.state;
return (
<div className="category-box">
<Fragment>{categoryList?.length > 0 && this.renderFirstContainer()}</Fragment>
{!this.props.isHideSec && (
<Fragment>
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
</Fragment>
)}
</div>
);
}
/**
* 一级分类模块
* @returns
*/
renderFirstContainer = () => {
const { categoryList } = this.props;
const { currentActive } = this.state;
return (
<div className="first-category-list">
{categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
@@ -240,7 +476,7 @@ export default class CategoryList extends Component {
className={`first-category-item ${categoryModuleItem.primaryCategoryId === currentActive &&
'first-category-item-active'
}`}
key={`first_category_${categoryModuleItem.primaryCategoryId}`}
key={`first_category_${categoryModuleItem.id}`}
style={{
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
}}
@@ -358,5 +594,19 @@ export default class CategoryList extends Component {
</div>
);
};
render() {
const { categoryList } = this.props;
const { secondCategoryList } = this.state;
return (
<div className="category-box">
<Fragment>{categoryList?.length > 0 && this.renderFirstContainer()}</Fragment>
{!this.props.isHideSec && (
<Fragment>
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
</Fragment>
)}
</div>
);
}
}

26
src/components/category-list/index.less
View File

@@ -91,16 +91,30 @@
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 4px;
// @mixin box-backgroundColor($alpha: 1) {
// background-color: rgba(60, 110, 238, $alpha) !important;
// }
// @mixin box-border($width: 1px, $style: solid, $alpha: 1) {
// border: $width $style rgba(60, 110, 238, $alpha) !important;
// }
// @mixin font-color($alpha: 1) {
// color: rgba(60, 110, 238, $alpha) !important;
// }
&:hover {
@include box-backgroundColor(0.1);
@include box-border();
@include font-color();
background-color: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
color: rgba(60, 110, 238, 1)
}
}
.third-category-item-active {
@include box-backgroundColor(0.1);
@include box-border();
@include font-color();
// @include box-backgroundColor(0.1);
// @include box-border();
// @include font-color();
background-color: rgba(60, 110, 238, 0.1);
border: 1px solid rgba(60, 110, 238, 1);
color: rgba(60, 110, 238, 1)
}
}
.second-category-item-status {

49
src/components/top-menu/index.jsx
View File

@@ -1,6 +1,6 @@
import { message } from 'antd';
import React, { Component } from 'react'
import { useLocation } from 'react-router-dom';
import React, { Component, useState, memo } from 'react'
import { useLocation, useNavigate } from 'react-router-dom';
import './index.less'
// 顶部tab
const MENULIST = [
@@ -12,7 +12,7 @@ const MENULIST = [
{
key: 'prictiseQuestion',
title: '练题',
route: '/question-bank',
route: '/brush-question',
},
{
key: 'practiceQuestions',
@@ -31,49 +31,27 @@ const MENULIST = [
const mapMenu = {
'/question-bank': 'questionBank',
}
class TopMenu extends Component {
constructor(props) {
super(props)
this.state = {
currentKey: 'questionBank',
}
}
componentDidMount() {
// this.setState({
// currentKey: mapMenu[this.props.currentRoute] || '',
// })
}
const TopMenu = () => {
const [currentKey, setCurrentKey] = useState('questionBank')
const location = useLocation()
const navigate = useNavigate()
/**
* 切换item
* @param {*} item
* @returns
*/
changeMenu = (item) => () => {
const changeMenu = (item) => () => {
if (item.key === "questionBank") {
return
if (location.pathname === '/question-bank') return
navigate('/question-bank')
} else {
return message.info("敬请期待")
}
// 打开新窗口
if (item.isOpenNewWindow) {
window.open(item.route)
return
}
this.setState(
{
currentKey: item.key,
},
() => {
this.props.history.push(item.route)
}
)
}
render() {
const { currentKey } = this.state
return (
<div className="top-menu-list">
{MENULIST.map((item, index) => {
@@ -81,7 +59,7 @@ class TopMenu extends Component {
<div
className={`top-menu-item ${currentKey === item.key ? 'top-menu-item-active' : ''}`}
key={item.key + index}
onClick={this.changeMenu(item)}
onClick={changeMenu(item)}
>
<div className="top-menu-text">{item.title}</div>
<div className={`top-menu-line ${currentKey === item.key ? 'top-menu-line-active' : ''}`}></div>
@@ -90,7 +68,6 @@ class TopMenu extends Component {
})}
</div>
)
}
}
export default TopMenu
export default memo(TopMenu)

1
src/main.tsx
View File

@@ -1,5 +1,4 @@
import './main.less'
import React from 'react'
import ReactDOM from 'react-dom/client'
import router from '@/router'

159
src/views/question-bank/index.tsx
View File

@@ -1,5 +1,5 @@
// import { Component } from 'react';
import { useState, useEffect } from 'react'
import { useState, useEffect, memo } from 'react'
import QuestionList from '@components/question-list';
import CategoryList from '@components/category-list';
import ContributionList from './components/contribution-list';
@@ -12,9 +12,8 @@ import './index.less';
const QuestionBank = () => {
const [firstCategoryList, setFirstCategoryList] = useState([])
const [questionList, setQuestionList] = useState(mockDataList)
const [questionList, setQuestionList] = useState([])
const [isShowSpin, setIsShowSpin] = useState(false)
const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
const [difficulty, setDiffculty] = useState(0); //困难度（全部）
@@ -46,30 +45,13 @@ const QuestionBank = () => {
})
}
// 获取大类下分类
const getCategoryByPrimary = () => {
req({
method: 'post',
url: apiName.queryCategoryByPrimary,
data: { categoryType: 1, parentId: 1 }
}).then(res => {
console.log(res)
})
}
useEffect(() => {
if (primaryCategoryId) {
getCategoryByPrimary()
}
}, [primaryCategoryId])
/**
* 切换一级分类
* @param {*} e
*/
const onChangeCategory = (e: string) => {
const onChangeCategory = (item: Record<string, any>) => {
setLabelList([])
setPromaryCategoryId(e)
setPromaryCategoryId(item.id)
setPageIndex(1)
};
@@ -82,11 +64,12 @@ const QuestionBank = () => {
setLabelList(assembleIds)
setPromaryCategoryId(primaryCategoryId)
setPageIndex(1)
// this.getInterviewSubjectList();
};
useEffect(() => {
if (!primaryCategoryId) {
getPrimaryCategoryInfo()
}
}, [])
return (
@@ -99,6 +82,7 @@ const QuestionBank = () => {
onChangeCategory={onChangeCategory}
categoryList={firstCategoryList}
onChangeLabel={onChangeLabel}
primaryCategoryId={primaryCategoryId}
/>
)}
</div>
@@ -123,131 +107,4 @@ const QuestionBank = () => {
</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>
// );
// }
// }
export default memo(QuestionBank)

14
src/views/upload-questions/components/kind-editor/index.jsx
View File

@@ -1,11 +1,19 @@
import React, { Component } from 'react';
import React, { Component, useRef } from 'react';
import './index.less';
import Editor from 'wangeditor';
const defaultValueHead = `<div style='font-size:14px !important;line-height:22px !important;margin-bottom: -15px !important;word-break: break-word !important;'>`;
const defaultValueFoot = '</div>';
// const KindEditor = () => {
// const menuRef = useRef()
// const bodyRef = useRef()
// const editor = new Editor()
// }
export default class KindEditor extends Component {
defaultValueHead = `<div style='font-size:14px !important;line-height:22px !important;margin-bottom: -15px !important;word-break: break-word !important;'>`;
defaultValueFoot = '</div>';
editor = Editor;
constructor(props) {

4
src/views/upload-questions/constant.js
View File

@@ -3,9 +3,9 @@
*/
export const apiName = {
/**
* 获取一级/二级分类
* 获取一级
*/
getInterviewCategory: '/admin/question/category/getCategory',
queryPrimaryCategory: '/subject/category/queryPrimaryCategory',
/**
* 获取三级分类标签