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-11-12 16:54:55 +08:00
parent 8a9d22e0aa
commit 5a17d2da74
14 changed files with 744 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1,2 +1,2 @@
VITE_API_HOST=http://117.72.10.84:3010 VITE_API_HOST=http://117.72.10.84:5000
VITE_IMG_HOST=http://117.72.14.166:9000 VITE_IMG_HOST=http://117.72.14.166:9000

3
src/App.less
View File

@@ -20,9 +20,10 @@
-moz-user-select: none; /* Firefox */ -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */ user-select: none; /* Non-prefixed version, currently not supported by any browser */
.content-box{ .content-box {
width: 1439px; width: 1439px;
margin: 0 auto; margin: 0 auto;
overflow: auto;
} }
} }

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

@@ -1,35 +1,33 @@
import React, { Fragment, useState, useEffect } from 'react'; import React, { Fragment, useEffect, useState } from 'react'
import { import {
RightOutlined,
UpOutlined,
DownOutlined,
CaretDownOutlined, CaretDownOutlined,
CaretUpOutlined, CaretUpOutlined,
} from '@ant-design/icons'; DownOutlined,
import req from '@utils/request'; RightOutlined,
import { Divider, Spin, Modal } from 'antd'; UpOutlined
import _ from 'lodash'; } from '@ant-design/icons'
import './index.less'; import req from '@utils/request'
import { apiName } from './constant'; import { Divider, Modal, Spin } from 'antd'
import { imgObject } from '@constants' import _ from 'lodash'
import { apiName } from './constant'
import './index.less'
/** /**
* 大分类中的背景图 * 大分类中的背景图颜色
*/ */
export const categoryBackImg = { const categoryBackColor = {
0: imgObject.backAllImg, 0: '#23b2ff',
1: imgObject.dataImg, 1: '#ea7d4d',
2: imgObject.javaImg, 2: '#e93532',
3: imgObject.npmImg, 3: '#343d71',
4: imgObject.parallelComputingImg, 4: '#dc4ad6',
5: imgObject.springbootImg, 5: '#72b633',
6: imgObject.sqlImg, 6: '#9047de',
7: imgObject.systemDesignImg, 7: '#dc4077'
8: imgObject.algorithmImg, }
};
const categoryShowCount = 4; const categoryShowCount = 4
const cacheMap = {} const cacheMap = {}
@@ -38,11 +36,11 @@ const cacheMap = {}
* @param {*} total * @param {*} total
* @returns * @returns
*/ */
const formatTotal = (total) => { const formatTotal = total => {
if (total >= 10000) { if (total >= 10000) {
return Math.floor(total / 10000) + 'W+'; return Math.floor(total / 10000) + 'W+'
} }
return total; return total
} }
const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => { const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
@@ -53,8 +51,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
const [currentLabelIndex, setCurrentLabelIndex] = useState([]) const [currentLabelIndex, setCurrentLabelIndex] = useState([])
const [openMoreFlag, setOpenMoreFlag] = useState(false) const [openMoreFlag, setOpenMoreFlag] = useState(false)
const getLabels = id => {
const getLabels = (id) => {
return new Promise(resolve => { return new Promise(resolve => {
req({ req({
method: 'post', method: 'post',
@@ -97,20 +94,18 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
} }
}, [primaryCategoryId]) }, [primaryCategoryId])
/** /**
* 切换一级分类 * 切换一级分类
* @param {*} item * @param {*} item
* @returns * @returns
*/ */
const onChangeCategory = (item) => () => { const onChangeCategory = item => () => {
if (currentActive.id === item.id) { if (currentActive.id === item.id) {
return; return
} }
setCurrentActive(item) setCurrentActive(item)
props.onChangeCategory(item); props.onChangeCategory(item)
}; }
/** /**
* 一级分类模块 * 一级分类模块
@@ -118,56 +113,52 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
*/ */
const renderFirstContainer = () => { const renderFirstContainer = () => {
return ( return (
<div className="first-category-list"> <div className='first-category-list'>
{categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => { {categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
return ( return (
<div <div
className={`first-category-item ${categoryModuleItem.id === currentActive.id && className={`first-category-item ${
'first-category-item-active' categoryModuleItem.id === currentActive.id && 'first-category-item-active'
}`} }`}
key={`first_category_${categoryModuleItem.id}`} key={`first_category_${categoryModuleItem.id}`}
style={{ style={{
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`, backgroundColor: `${categoryBackColor[categoryModuleIndex]}`
}} }}
onClick={onChangeCategory(categoryModuleItem)}> onClick={onChangeCategory(categoryModuleItem)}
<div className="first-category-item-title"> >
{categoryModuleItem.categoryName} <div className='first-category-item-title'>{categoryModuleItem.categoryName}</div>
<div className='first-category-item-count'>{categoryModuleItem.count || 50}道题</div>
</div> </div>
<div className="first-category-item-count"> )
{categoryModuleItem.count || 50}道题
</div>
</div>
);
})} })}
{categoryList.length > 7 && ( {categoryList.length > 7 && (
<div className="first-category-more" onClick={() => setOpenMoreFlag(true)}> <div className='first-category-more' onClick={() => setOpenMoreFlag(true)}>
更多 更多
<RightOutlined /> <RightOutlined />
</div> </div>
)} )}
</div> </div>
); )
}; }
/** /**
* 点击更多的分类项 * 点击更多的分类项
* @param {*} id * @param {*} id
* @returns * @returns
*/ */
const onChangeCategoryMore = (cur) => () => { const onChangeCategoryMore = cur => () => {
setOpenMoreFlag(false) setOpenMoreFlag(false)
setCurrentActive(cur) setCurrentActive(cur)
let list = [...categoryList].reduce((pre, item) => { let list = [...categoryList].reduce((pre, item) => {
if (item.id !== cur.id) { if (item.id !== cur.id) {
pre.push(item); pre.push(item)
} else { } else {
pre.unshift(item); pre.unshift(item)
}
return pre
}, [])
props.onChangeCategoryMore && props.onChangeCategoryMore(cur.id, list)
} }
return pre;
}, []);
props.onChangeCategoryMore && props.onChangeCategoryMore(cur.id, list);
};
/** /**
* 更多分类 * 更多分类
@@ -175,31 +166,27 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
*/ */
const renderMoreBox = () => { const renderMoreBox = () => {
return ( return (
<div className="first-category-more-list"> <div className='first-category-more-list'>
{categoryList.slice(7).map((categoryModuleItem, categoryModuleIndex) => { {categoryList.slice(7).map((categoryModuleItem, categoryModuleIndex) => {
return ( return (
<div <div
className="first-category-item" className='first-category-item'
key={`first_more_category_${categoryModuleItem.id}`} key={`first_more_category_${categoryModuleItem.id}`}
style={{ style={{
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`, backgroundColor: `${categoryBackColor[categoryModuleIndex]}`
}} }}
onClick={onChangeCategoryMore( onClick={onChangeCategoryMore(categoryModuleItem)}
categoryModuleItem
)}
> >
<div className="first-category-item-title"> <div className='first-category-item-title'>{categoryModuleItem.categoryName}</div>
{categoryModuleItem.categoryName} <div className='first-category-item-count'>
</div>
<div className="first-category-item-count">
{formatTotal(categoryModuleItem.subjectCount)}道题 {formatTotal(categoryModuleItem.subjectCount)}道题
</div> </div>
</div> </div>
); )
})} })}
</div> </div>
); )
}; }
/** /**
* 选择标签-支持单选（多选） * 选择标签-支持单选（多选）
@@ -210,7 +197,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
* @returns * @returns
*/ */
const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => { const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => {
const { isMultipleChoice } = props; const { isMultipleChoice } = props
const list = _.cloneDeep(secondCategoryList) const list = _.cloneDeep(secondCategoryList)
if (isMultipleChoice) { if (isMultipleChoice) {
// 三级标签支持多选 // 三级标签支持多选
@@ -225,8 +212,11 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
setCurrentLabelIndex([secondCategoryIndex, thirdCategoryIndex]) setCurrentLabelIndex([secondCategoryIndex, thirdCategoryIndex])
setSecondCategoryList(list) setSecondCategoryList(list)
} }
props.onChangeLabel(_.get(list, [secondCategoryIndex, 'id']), _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id'])) props.onChangeLabel(
}; _.get(list, [secondCategoryIndex, 'id']),
_.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id'])
)
}
/** /**
* 展开/收起 * 展开/收起
@@ -235,16 +225,16 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
*/ */
const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => { const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
const _list = _.cloneDeep(secondCategoryList) const _list = _.cloneDeep(secondCategoryList)
_.set(_list, [secondCategoryIndex, 'isOpen'], !isOpen); _.set(_list, [secondCategoryIndex, 'isOpen'], !isOpen)
setSecondCategoryList(_list) setSecondCategoryList(_list)
}; }
/** /**
* 展开/收起 * 展开/收起
*/ */
const onChangePutAway = () => { const onChangePutAway = () => {
setIsPutAway(!isPutAway) setIsPutAway(!isPutAway)
}; }
/** /**
* 二级分类模块 * 二级分类模块
@@ -253,74 +243,67 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
const renderSecondContainer = () => { const renderSecondContainer = () => {
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="second-category-list"> <div className='second-category-list'>
{secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => { {secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => {
return ( return (
<div <div
style={{ style={{
display: display: secondCategoryIndex >= categoryShowCount && isPutAway ? 'none' : 'flex'
secondCategoryIndex >= categoryShowCount && isPutAway
? 'none'
: 'flex',
}} }}
className="second-category-item" className='second-category-item'
key={`second_category_${secondCategoryItem.id}`}> key={`second_category_${secondCategoryItem.id}`}
<div className="second-category-item-title"> >
<div className='second-category-item-title'>
{secondCategoryItem.categoryName}： {secondCategoryItem.categoryName}：
</div> </div>
{secondCategoryItem?.children?.length > 0 && ( {secondCategoryItem?.children?.length > 0 && (
<div className="second-category-item-box"> <div className='second-category-item-box'>
<div <div
style={{ style={{
height: secondCategoryItem.isOpen ? 'auto' : 43, height: secondCategoryItem.isOpen ? 'auto' : 43
}} }}
className="second-category-item-list" className='second-category-item-list'
id={`id_${secondCategoryIndex}`}> id={`id_${secondCategoryIndex}`}
{secondCategoryItem.children.map( >
(thirdCategoryItem, thirdCategoryIndex) => { {secondCategoryItem.children.map((thirdCategoryItem, thirdCategoryIndex) => {
return ( return (
<div <div
className={`third-category-item ${thirdCategoryItem.active className={`third-category-item ${
? 'third-category-item-active' thirdCategoryItem.active ? 'third-category-item-active' : ''
: ''
}`} }`}
key={`third_category_${thirdCategoryItem.id}`} key={`third_category_${thirdCategoryItem.id}`}
onClick={onChangeLabel( onClick={onChangeLabel(
secondCategoryIndex, secondCategoryIndex,
thirdCategoryIndex, thirdCategoryIndex,
(thirdCategoryItem.active || false) thirdCategoryItem.active || false
)}> )}
>
{thirdCategoryItem.labelName} {thirdCategoryItem.labelName}
</div> </div>
); )
} })}
)}
</div> </div>
{ {secondCategoryItem.children.length > 5 ? (
secondCategoryItem.children.length > 5 ? <div <div
id={`second_id_${secondCategoryIndex}`} id={`second_id_${secondCategoryIndex}`}
className="second-category-item-status" className='second-category-item-status'
onClick={onChangeOpenStatus( onClick={onChangeOpenStatus(
secondCategoryIndex, secondCategoryIndex,
(secondCategoryItem.isOpen || false) secondCategoryItem.isOpen || false
)}> )}
<div className="second-category-item-type" style={{ fontSize: 12 }}> >
<div className='second-category-item-type' style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? '收起' : '展开'} {secondCategoryItem.isOpen ? '收起' : '展开'}
</div> </div>
<div className="second-category-item-icon" style={{ fontSize: 12 }}> <div className='second-category-item-icon' style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? ( {secondCategoryItem.isOpen ? <UpOutlined /> : <DownOutlined />}
<UpOutlined />
) : (
<DownOutlined />
)}
</div> </div>
</div> : null </div>
} ) : null}
</div> </div>
)} )}
</div> </div>
); )
})} })}
{secondCategoryList?.length >= categoryShowCount && ( {secondCategoryList?.length >= categoryShowCount && (
<Divider <Divider
@@ -330,7 +313,8 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
marginTop: 10, marginTop: 10,
fontSize: 13, fontSize: 13,
cursor: 'pointer' cursor: 'pointer'
}}> }}
>
{isPutAway ? '展开' : '收起'} {isPutAway ? '展开' : '收起'}
{isPutAway ? ( {isPutAway ? (
<CaretDownOutlined style={{ marginLeft: 4 }} /> <CaretDownOutlined style={{ marginLeft: 4 }} />
@@ -341,16 +325,13 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
)} )}
</div> </div>
</Spin> </Spin>
)
); }
};
return ( return (
<div className="category-box"> <div className='category-box'>
<Fragment>{categoryList?.length && renderFirstContainer()}</Fragment> <Fragment>{categoryList?.length && renderFirstContainer()}</Fragment>
<Fragment> <Fragment>{secondCategoryList?.length > 0 && renderSecondContainer()}</Fragment>
{secondCategoryList?.length > 0 && renderSecondContainer()}
</Fragment>
{/* {!this.props.isHideSec && ( {/* {!this.props.isHideSec && (
<Fragment> <Fragment>
{secondCategoryList?.length > 0 && this.renderSecondContainer()} {secondCategoryList?.length > 0 && this.renderSecondContainer()}
@@ -361,7 +342,8 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
footer={null} footer={null}
closable={true} closable={true}
centered centered
onCancel={() => setOpenMoreFlag(false)}> onCancel={() => setOpenMoreFlag(false)}
>
{renderMoreBox()} {renderMoreBox()}
</Modal> </Modal>
</div> </div>
@@ -369,5 +351,3 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
} }
export default CategoryList export default CategoryList

62
src/constants/index.ts
View File

@@ -5,29 +5,29 @@ const host = import.meta.env.VITE_IMG_HOST
export const filterDifficulty = [ export const filterDifficulty = [
{ {
id: 0, id: 0,
title: '全部', title: '全部'
}, },
{ {
id: 1, id: 1,
title: '初级', title: '初级'
}, },
{ {
id: 2, id: 2,
title: '中级', title: '中级'
}, },
{ {
id: 3, id: 3,
title: '高级', title: '高级'
}, },
{ {
id: 4, id: 4,
title: '资深', title: '资深'
}, },
{ {
id: 5, id: 5,
title: '专家', title: '专家'
}, }
]; ]
/** /**
* 难度等级 * 难度等级
@@ -35,54 +35,28 @@ export const filterDifficulty = [
export const gradeObject = { export const gradeObject = {
1: { 1: {
color: 'rgba(60, 110, 238, 0.5)', color: 'rgba(60, 110, 238, 0.5)',
title: '初级', title: '初级'
}, },
2: { 2: {
color: 'rgba(60, 110, 238, 0.6)', color: 'rgba(60, 110, 238, 0.6)',
title: '中级', title: '中级'
}, },
3: { 3: {
color: 'rgba(60, 110, 238, 0.7)', color: 'rgba(60, 110, 238, 0.7)',
title: '高级', title: '高级'
}, },
4: { 4: {
color: 'rgba(60, 110, 238, 0.8)', color: 'rgba(60, 110, 238, 0.8)',
title: '资深', title: '资深'
}, },
5: { 5: {
color: 'rgba(60, 110, 238, 0.9)', color: 'rgba(60, 110, 238, 0.9)',
title: '专家', title: '专家'
}, }
}; }
export const imgObject = { export const imgObject = {
clickImg: clickImg:
host + '/jichi/icon/%E7%83%AD%E9%97%A8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231102%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231102T153146Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e6b8cdb3231b1c3d7114212cb9278ecc17cf6d4ec0f759ea0200e04156d4c8b7', host +
ranking1Img: '/jichi/icon/%E7%83%AD%E9%97%A8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231102%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231102T153146Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e6b8cdb3231b1c3d7114212cb9278ecc17cf6d4ec0f759ea0200e04156d4c8b7'
'https://img12.360buyimg.com/imagetools/jfs/t1/110906/3/22471/3750/6214a3bfE392596cf/122c9e4b30948682.png', }
ranking2Img:
'https://img13.360buyimg.com/imagetools/jfs/t1/211695/8/12987/4360/6214a3bfEd4679fde/4f3c55783bb9119c.png',
ranking3Img:
'https://img10.360buyimg.com/imagetools/jfs/t1/175261/19/28428/4566/6214a3bfE476e1b0f/ea59084c55001c06.png',
rankingImg:
'https://img11.360buyimg.com/imagetools/jfs/t1/167264/35/27633/603/6214a3bfEf8feff1d/8d833235e6bc468d.png',
timeline:
'https://img13.360buyimg.com/imagetools/jfs/t1/210387/35/7564/555/617f4fbbE0cb305c1/728913d21e650794.png',
backAllImg:
'https://img11.360buyimg.com/imagetools/jfs/t1/206213/24/13307/2603/617f4fc4E676d448d/622d5287fbf5a919.png',
dataImg:
'https://img12.360buyimg.com/imagetools/jfs/t1/207558/34/7606/3672/617f4fc4E1ca685fc/3953a92a6072fba4.png',
javaImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/213752/24/2703/4803/617f4fc4E037da291/5f8050641d4d73d2.png',
npmImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/200551/24/15367/3145/617f4fc4Ea153dc2e/b4bbf2de8807f42d.png',
parallelComputingImg:
'https://img14.360buyimg.com/imagetools/jfs/t1/207198/23/7638/3037/617f4fc4E0e20ab9d/40197a6c79c5a33f.png',
springbootImg:
'https://img13.360buyimg.com/imagetools/jfs/t1/171775/10/24915/4127/617f4fc4Eeb3d356e/cfbfe8d7c3155047.png',
sqlImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/208027/11/7347/3074/617f4fc4Ef11e9495/1093903301db1d1d.png',
systemDesignImg:
'https://img12.360buyimg.com/imagetools/jfs/t1/206967/24/7622/3629/617f4fc4E60a188b3/cb659847c5d4232a.png',
algorithmImg:
'https://img14.360buyimg.com/imagetools/jfs/t1/215758/34/2633/4128/617f4fc4E5dcdab66/727be155858a06a5.png',
defaultImg:
'https://img13.360buyimg.com/imagetools/jfs/t1/155957/24/22934/2028/617a147cE8bcbb57a/7a4885e4ae99a895.png',
};

BIN
src/imgs/ranking1Img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/imgs/ranking2Img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/imgs/ranking3Img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/imgs/rankingImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 603 B

61
src/utils/request.ts
View File

@@ -1,24 +1,25 @@
import axios from 'axios'; import { message } from 'antd'
import { message, Modal } from 'antd'; import axios from 'axios'
import { useLocation, useNavigate } from 'react-router-dom';
export const baseHttp = () => { export const baseHttp = () => {
const http = axios.create({ const http = axios.create({
baseURL: "/subject", baseURL: '/subject',
timeout: 5 * 60 * 1000, // request timeout timeout: 5 * 60 * 1000, // request timeout
withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
headers: { headers: {
'Content-Type': 'application/json; charset=utf-8', 'Content-Type': 'application/json; charset=utf-8'
}, }
}); })
return http; return http
}; }
export default function request(config, url) { export default function request(config, url) {
console.log(config, url, 'config url')
// const navigate = useNavigate() // const navigate = useNavigate()
const userInfoStorage = localStorage.getItem('userInfo')
const baseURL = url || '/subject'; const userInfo = userInfoStorage ? JSON.parse(userInfoStorage) : {}
const baseURL = url || '/subject/subject'
// 1.创建axios的实例 // 1.创建axios的实例
const instance = axios.create({ const instance = axios.create({
baseURL, baseURL,
@@ -26,41 +27,45 @@ export default function request(config, url) {
withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
headers: { headers: {
'Content-Type': 'application/json; charset=utf-8', 'Content-Type': 'application/json; charset=utf-8',
}, [userInfo.tokenName]: 'jichi ' + userInfo.tokenValue
}); }
})
// 2.axios的拦截器 // 2.axios的拦截器
// 2.1.请求拦截的作用 // 2.1.请求拦截的作用
instance.interceptors.request.use( instance.interceptors.request.use(
(config) => { config => {
return config; return config
}, },
(err) => { err => {
console.log(err); console.log(err)
} }
); )
// 2.2.响应拦截 // 2.2.响应拦截
instance.interceptors.response.use( instance.interceptors.response.use(
(res) => { res => {
let { code } = res.data; let { code } = res.data
if (code === 500) { if (code === 500) {
message.error(res.data.message); message.error(res.data.message)
} }
return res.data; if (code === 401) {
window.location.replace('/login')
}
return res.data
}, },
(err) => { err => {
let { status } = err?.response ?? {}; let { status } = err?.response ?? {}
if (status === 401 || !status) { if (status === 401 || !status) {
message.info('页面异常') message.info('页面异常')
window.location.replace('/login') window.location.replace('/login')
} else if (status === 500 || status === 503) { } else if (status === 500 || status === 503) {
message.error('服务器错误'); message.error('服务器错误')
} }
return Promise.reject(err); return Promise.reject(err)
} }
); )
// 3.发送真正的网络请求 // 3.发送真正的网络请求
return instance(config); return instance(config)
} }

14
src/views/login/index.less
View File

@@ -1,35 +1,39 @@
.login-box{ .login-box {
width: 100%; width: 100%;
height: calc(100% - 100px); height: calc(100% - 100px);
background: url(../../imgs/login_bg.jpg) no-repeat 50%; background: url(../../imgs/login_bg.jpg) no-repeat 50%;
background-size: cover; background-size: cover;
min-height: 600px; min-height: 600px;
position: relative; position: relative;
.login-container-inner{ .login-container-inner {
background: transparent; background: transparent;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
height: 534px; height: 534px;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
clear: both; clear: both;
max-width: 1520px; max-width: 1520px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
.notes{ .notes {
color: white; color: white;
max-width: 400px; max-width: 400px;
line-height: 30px; line-height: 30px;
} }
.qrcode-box{ .qrcode-box {
width: 400px; width: 400px;
height: 500px; height: 500px;
background: white; background: white;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
.qrcode-desc {
padding: 20px 0;
line-height: 30px;
}
} }
} }
} }

49
src/views/login/index.tsx
View File

@@ -1,45 +1,70 @@
import { useState } from 'react'
import { Input, Button, Space } from 'antd'
import LoginQrcode from '@imgs/login_qrcode.jpg' import LoginQrcode from '@imgs/login_qrcode.jpg'
import req from '@utils/request'; import req from '@utils/request'
import { Button, Input, Space, message } from 'antd'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.less' import './index.less'
const loginApiName = '/user/doLogin' const loginApiName = '/user/doLogin'
const Login = () => { const Login = () => {
const [validCode, setValidCode] = useState('') const [validCode, setValidCode] = useState('')
const navigate = useNavigate()
const changeCode = e => { const changeCode = e => {
setValidCode(e.target.value) setValidCode(e.target.value)
} }
const doLogin = () => { const doLogin = () => {
console.log(validCode)
if (!validCode) return if (!validCode) return
req({ req(
{
method: 'get', method: 'get',
url: loginApiName, url: loginApiName,
data: { validCode } params: { validCode }
},
'/auth'
).then(res => {
if (res.success && res.data) {
message.success('登录成功')
localStorage.setItem('userInfo', JSON.stringify(res.data))
setTimeout(() => {
navigate('/question-bank')
}, 1000)
}
}) })
} }
return (<div className="login-box"> return (
<div className='login-box'>
<div className='login-container-inner'> <div className='login-container-inner'>
<div className='notes'>LeNet-5 诞生 <div className='notes'>
1998 年 11 月，早期经典卷积神经网络 LeNet-5 诞生。杨立昆、莱昂·伯托等发表经典论文“Gradient-Based Learning Applied to Document Recognition”，文章总结了应用于手写字符识别的各种模型并进行了比对，结果显示卷积神经网络表现超群。</div> LeNet-5 诞生 1998 年 11 月，早期经典卷积神经网络 LeNet-5
诞生。杨立昆、莱昂·伯托等发表经典论文“Gradient-Based Learning Applied to Document
Recognition”，文章总结了应用于手写字符识别的各种模型并进行了比对，结果显示卷积神经网络表现超群。
</div>
<div className='qrcode-box'> <div className='qrcode-box'>
<div className='qrcode-desc'>
<p>微信扫码关注公众号</p>
<p>获取验证码登录</p>
</div>
<div className='qrcode-img'> <div className='qrcode-img'>
<img src={LoginQrcode} alt="" /> <img src={LoginQrcode} alt='' />
</div> </div>
<div className='qrcode-form'> <div className='qrcode-form'>
<Space> <Space>
<Input maxLength={3} placeholder='验证码' onChange={changeCode} value={validCode} /> <Input maxLength={3} placeholder='验证码' onChange={changeCode} value={validCode} />
<Button type='primary' ghost onClick={doLogin}>登录</Button> <Button type='primary' ghost onClick={doLogin}>
登录
</Button>
</Space> </Space>
</div> </div>
</div> </div>
</div> </div>
</div>) </div>
)
} }
export default Login export default Login

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

@@ -1,20 +1,23 @@
import React from 'react' import ClickImg from '@/imgs/clickImg.png'
import { Popover, Spin } from 'antd' import Ranking1Img from '@/imgs/ranking1Img.png'
import Ranking2Img from '@/imgs/ranking2Img.png'
import Ranking3Img from '@/imgs/ranking3Img.png'
import RankingImg from '@/imgs/rankingImg.png'
import { debounce } from '@utils' import { debounce } from '@utils'
import { RankingTypeText, RankingTypeBtnText } from '../../constant' import { Popover, Spin, message } from 'antd'
import React from 'react'
import { RankingTypeBtnText, RankingTypeText } from '../../constant'
import './index.less' import './index.less'
import { message } from 'antd'
import { imgObject } from '@constants'
const rankingBackImg = { const rankingBackImg = {
0: imgObject.ranking1Img, 0: Ranking1Img,
1: imgObject.ranking2Img, 1: Ranking2Img,
2: imgObject.ranking3Img, 2: Ranking3Img
} }
export default function RankingBox(props) { export default function RankingBox(props) {
const { isLoading = false, currentActive, rankingType, contributionList } = props const { isLoading = false, currentActive, rankingType, contributionList } = props
const onChangeRanking = (index) => const onChangeRanking = index =>
debounce(() => { debounce(() => {
props.onHandleRanking && props.onHandleRanking(index) props.onHandleRanking && props.onHandleRanking(index)
}) })
@@ -36,17 +39,19 @@ export default function RankingBox(props) {
let rankingList = contributionList || [] let rankingList = contributionList || []
return ( return (
<div className="ranking-list-box"> <div className='ranking-list-box'>
<div className="ranking-list-header"> <div className='ranking-list-header'>
<div className="ranking-list-title">{RankingTypeText[rankingType]}</div> <div className='ranking-list-title'>{RankingTypeText[rankingType]}</div>
<div className="ranking-list-btns"> <div className='ranking-list-btns'>
{tabList.length > 0 && {tabList.length > 0 &&
tabList.map((item, index) => { tabList.map((item, index) => {
return ( return (
<div <div
key={`${rankingType}_${item.key}`} key={`${rankingType}_${item.key}`}
onClick={onChangeRanking(index)} onClick={onChangeRanking(index)}
className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`} className={`ranking-list-btn ${
currentActive === index ? 'ranking-list-btn-active' : ''
}`}
> >
{item.tab} {item.tab}
</div> </div>
@@ -55,56 +60,52 @@ export default function RankingBox(props) {
</div> </div>
</div> </div>
<Spin spinning={isLoading}> <Spin spinning={isLoading}>
<div className="ranking-list"> <div className='ranking-list'>
{rankingList?.length > 0 && {rankingList?.length > 0 &&
rankingList.map((item, index) => { rankingList.map((item, index) => {
return ( return (
<div className="ranking-item" key={item.id}> <div className='ranking-item' key={item.id}>
<div className="ranking-left"> <div className='ranking-left'>
<div <div
className="ranking-icon" className='ranking-icon'
style={{ style={{
backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : imgObject.rankingImg})`, backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : RankingImg})`
}} }}
> >
{index > 2 && index + 1} {index > 2 && index + 1}
</div> </div>
<div className="ranking-head-img"> <div className='ranking-head-img'>
<img src={item.headImg} className="ranking-head-icon" /> <img src={item.headImg} className='ranking-head-icon' />
</div> </div>
<Popover <Popover
title={ title={<div>{item.name}</div>}
<div>
{item.name}
</div>
}
content={ content={
<div className="tooltip-info"> <div className='tooltip-info'>
<div>{item.name}</div> <div>{item.name}</div>
{/* <div>{item.organizationFullName}</div> */} {/* <div>{item.organizationFullName}</div> */}
</div> </div>
} }
> >
<div className="ranking-info"> <div className='ranking-info'>
<div className="ranking-name">{item.name}</div> <div className='ranking-name'>{item.name}</div>
{/* <div className="ranking-department">{item.organizationName}</div> */} {/* <div className="ranking-department">{item.organizationName}</div> */}
</div> </div>
</Popover> </Popover>
</div> </div>
<div className="ranking-right">🔥 {item.count}</div> <div className='ranking-right'>🔥 {item.count}</div>
</div> </div>
) )
})} })}
</div> </div>
</Spin> </Spin>
<div className="ranking-btn-go" onClick={onJump}> <div className='ranking-btn-go' onClick={onJump}>
<div <div
className="ranking-btn-go-icon" className='ranking-btn-go-icon'
style={{ style={{
backgroundImage: `url(${imgObject.clickImg})`, backgroundImage: `url(${ClickImg})`
}} }}
></div> ></div>
<div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div> <div className='ranking-btn-text'>{RankingTypeBtnText[rankingType]}</div>
</div> </div>
</div> </div>
) )

67
src/views/user-info/index.tsx
View File

@@ -1,10 +1,14 @@
import Head from '@/imgs/head.jpg' import Head from '@/imgs/head.jpg'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons' import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Card, Col, Form, Input, Radio, Row } from 'antd' import req from '@utils/request'
import { Button, Card, Col, Form, Input, Radio, Row, message } from 'antd'
import { memo, useState } from 'react' import { memo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.less' import './index.less'
const { TextArea } = Input const { TextArea } = Input
const apiName = '/user/update'
const layout = { const layout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
@@ -15,9 +19,43 @@ const UserInfo = () => {
const [form] = Form.useForm() const [form] = Form.useForm()
const [editFlag, setEditFlag] = useState(false) const [editFlag, setEditFlag] = useState(false)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const navigate = useNavigate()
const onFinish = values => { const onFinish = () => {
console.log(values) setLoading(true)
const userInfoStorage = localStorage.getItem('userInfo')
const { loginId = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
const values = form.getFieldsValue()
if (!Object.values(values).filter(Boolean).length) {
setLoading(false)
return
}
const params = {
userName: loginId,
...values
}
req(
{
method: 'post',
url: apiName,
data: { ...params }
},
'/auth'
)
.then(res => {
if (res.success) {
message.success('更新成功')
setTimeout(() => {
navigate('/question-bank')
}, 1000)
}
setLoading(false)
setEditFlag(false)
})
.catch(() => {
message.error('更新失败')
setLoading(false)
})
} }
const uploadButton = ( const uploadButton = (
@@ -50,10 +88,7 @@ const UserInfo = () => {
</Col> </Col>
<Col span={16}> <Col span={16}>
{editFlag ? ( {editFlag ? (
<Form.Item <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='sex'>
label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'
name='gender'
>
<Radio.Group> <Radio.Group>
<Radio value={1}>男</Radio> <Radio value={1}>男</Radio>
<Radio value={2}>女</Radio> <Radio value={2}>女</Radio>
@@ -65,6 +100,17 @@ const UserInfo = () => {
</Form.Item> </Form.Item>
)} )}
</Col> </Col>
<Col span={16}>
{editFlag ? (
<Form.Item label='手机号码' name='phone'>
<Input placeholder='请输入手机号码' />
</Form.Item>
) : (
<Form.Item label='手机号码'>
<>暂无</>
</Form.Item>
)}
</Col>
<Col span={16}> <Col span={16}>
{editFlag ? ( {editFlag ? (
<Form.Item <Form.Item
@@ -95,7 +141,12 @@ const UserInfo = () => {
<Form.Item wrapperCol={{ offset: 5 }}> <Form.Item wrapperCol={{ offset: 5 }}>
{editFlag ? ( {editFlag ? (
<> <>
<Button type='primary' style={{ marginRight: '20px' }} onClick={onFinish}> <Button
type='primary'
style={{ marginRight: '20px' }}
onClick={onFinish}
loading={loading}
>
保存 保存
</Button> </Button>
<Button onClick={() => setEditFlag(false)}>取消</Button> <Button onClick={() => setEditFlag(false)}>取消</Button>

16
vite.config.ts
View File

@@ -1,10 +1,10 @@
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
import { defineConfig, loadEnv } from 'vite'
const path = require('path') const path = require('path')
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default ({ mode }) => { export default ({ mode }) => {
const env = loadEnv(mode, process.cwd()); const env = loadEnv(mode, process.cwd())
return defineConfig({ return defineConfig({
resolve: { resolve: {
alias: { alias: {
@@ -14,17 +14,21 @@ export default ({ mode }) => {
'@utils': path.resolve(__dirname, 'src/utils'), '@utils': path.resolve(__dirname, 'src/utils'),
'@components': path.resolve(__dirname, 'src/components'), '@components': path.resolve(__dirname, 'src/components'),
'@imgs': path.resolve(__dirname, 'src/imgs'), '@imgs': path.resolve(__dirname, 'src/imgs'),
'@constants': path.resolve(__dirname, 'src/constants'), '@constants': path.resolve(__dirname, 'src/constants')
} }
}, },
plugins: [react()], plugins: [react()],
server: { server: {
proxy: { proxy: {
"/subject": { '/subject': {
target: env.VITE_API_HOST, target: env.VITE_API_HOST,
changeOrigin: true, changeOrigin: true
},
}, },
'/auth': {
target: env.VITE_API_HOST,
changeOrigin: true
}
}
} }
}) })
} }