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 17:27:54 +08:00
parent 35c973ccd0
commit 13f794caea
7 changed files with 208 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,6 @@
import React, { Fragment, useEffect, useState } from 'react' import React, { Fragment, useEffect, useState } from 'react'
import { import { CaretDownOutlined, CaretUpOutlined, RightOutlined } from '@ant-design/icons'
CaretDownOutlined,
CaretUpOutlined,
DownOutlined,
RightOutlined,
UpOutlined
} from '@ant-design/icons'
import req from '@utils/request' import req from '@utils/request'
import { Divider, Modal, Spin } from 'antd' import { Divider, Modal, Spin } from 'antd'
import _ from 'lodash' import _ from 'lodash'
@@ -283,7 +277,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
) )
})} })}
</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'
@@ -299,7 +293,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
{secondCategoryItem.isOpen ? <UpOutlined /> : <DownOutlined />} {secondCategoryItem.isOpen ? <UpOutlined /> : <DownOutlined />}
</div> </div>
</div> </div>
) : null} ) : null} */}
</div> </div>
)} )}
</div> </div>

182
src/components/question-list/index.jsx
View File

@@ -1,33 +1,40 @@
import React, { Fragment, useState } from "react"; import { filterDifficulty, gradeObject } from '@constants'
import { Tag, Table, Input, Radio, Space, Button, Divider } from "antd"; import { Button, Input, Radio, Space, Table, Tag } from 'antd'
import { filterDifficulty, gradeObject } from "@constants"; import React, { Fragment, useState } from 'react'
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom'
import "./index.less"; import './index.less'
const { Search } = Input; const { Search } = Input
const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff'] const colors = [
'#ffffb8',
'#f4ffb8',
const QuestionList = (props) => { '#b5f5ec',
'#bae0ff',
'#d9f7be',
'#efdbff',
' #ffd6e7',
'#d6e4ff'
]
const QuestionList = props => {
const [difficuty, setDifficuty] = useState(0) const [difficuty, setDifficuty] = useState(0)
const navigate = useNavigate(); const navigate = useNavigate()
const RandomNumBoth = (Min, Max) => { const RandomNumBoth = (Min, Max) => {
//差值 //差值
const Range = Max - Min; const Range = Max - Min
// 随机数 // 随机数
const Rand = Math.random(); const Rand = Math.random()
return Min + Math.round(Rand * Range); //四舍五入 return Min + Math.round(Rand * Range) //四舍五入
} }
const handleSearch = (close) => { const handleSearch = close => {
props.changeDifficuty(difficuty) props.changeDifficuty(difficuty)
close() close()
} }
const changeDifficuty = (e) => { const changeDifficuty = e => {
setDifficuty(e.target.value) setDifficuty(e.target.value)
} }
@@ -36,69 +43,88 @@ const QuestionList = (props) => {
*/ */
const questionColumns = [ const questionColumns = [
{ {
title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}> title: (
（当前 <div style={{ display: 'flex' }}>
<span style={{ color: "rgba(0, 0, 0, 0.65)" }}> {props.total || 0} </span> 题目{' '}
道题） <div
</div></div>, className='question-count-box'
key: "questionNo", style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}
align: "centlefter", >
（当前
<span style={{ color: 'rgba(0, 0, 0, 0.65)' }}> {props.total || 0} </span>
道题）
</div>
</div>
),
key: 'questionNo',
align: 'centlefter',
render: (item, record) => { render: (item, record) => {
return ( return (
<div className="question-info-container"> <div className='question-info-container'>
<div className="question-info-desc"> <div className='question-info-desc'>{record.subjectName}</div>
{record.id}: {record.subjectName} <div className='question-info-tags'>
</div>
<div className="question-info-tags">
{item?.labelName?.length > 0 && {item?.labelName?.length > 0 &&
item.labelName.map((tagsItem) => { item.labelName.map(tagsItem => {
return ( return (
<div className="question-info-tag" key={tagsItem} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}> <div
className='question-info-tag'
key={tagsItem}
style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}
>
{tagsItem} {tagsItem}
</div> </div>
); )
})} })}
</div> </div>
</div> </div>
); )
}, }
}, },
{ {
title: "难度", title: '难度',
dataIndex: "subjectDifficult", dataIndex: 'subjectDifficult',
key: "subjectDifficult", key: 'subjectDifficult',
align: "center", align: 'center',
filterDropdown: ({ close }) => ( filterDropdown: ({ close }) => (
<div style={{ padding: 16 }} onKeyDown={(e) => e.stopPropagation()}> <div style={{ padding: 16 }} onKeyDown={e => e.stopPropagation()}>
<div style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}>请选择</div> <div
<Radio.Group style={{ width: '100%', textAlign: 'center' }} value={difficuty} onChange={changeDifficuty}> style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}
<Space direction="vertical"> >
{ 请选择
filterDifficulty.map(item => { </div>
return <Radio value={item.id} key={item.id}>{item.title}</Radio> <Radio.Group
}) style={{ width: '100%', textAlign: 'center' }}
} value={difficuty}
onChange={changeDifficuty}
>
<Space direction='vertical'>
{filterDifficulty.map(item => {
return (
<Radio value={item.id} key={item.id}>
{item.title}
</Radio>
)
})}
</Space> </Space>
</Radio.Group> </Radio.Group>
<Button <Button
block block
size="small" size='small'
type="primary" type='primary'
style={{ marginTop: 12 }} style={{ marginTop: 12 }}
onClick={() => handleSearch(close)} onClick={() => handleSearch(close)}
> >
确定 确定
</Button> </Button>
</div>), </div>
),
width: 90, width: 90,
render: (key) => { render: key => {
return ( return <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
<Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag> }
); }
}, ]
},
];
/** /**
* 进入详情 * 进入详情
@@ -106,61 +132,57 @@ const QuestionList = (props) => {
* @param {*} type * @param {*} type
* @returns * @returns
*/ */
const onChangeAction = (item) => () => { const onChangeAction = item => () => {
navigate("/brush-question/" + item.id) navigate('/brush-question/' + item.id)
// let { isNotToDetail } = props; // let { isNotToDetail } = props;
// !isNotToDetail && // !isNotToDetail &&
// if (!isNotToDetail) return; // if (!isNotToDetail) return;
}; }
/** /**
* 过滤框-搜索框-模块 * 过滤框-搜索框-模块
* @returns * @returns
*/ */
const renderFilterContainer = () => { const renderFilterContainer = () => {
const { total, isShowSearch, setSearchStr } = props; const { total, isShowSearch, setSearchStr } = props
return ( return (
<div className="question-filter-container"> <div className='question-filter-container'>
{isShowSearch && ( {isShowSearch && (
<Search <Search
placeholder="请输入感兴趣的内容～" placeholder='请输入感兴趣的内容～'
onSearch={(value) => setSearchStr(value)} onSearch={value => setSearchStr(value)}
style={{ width: 240 }} style={{ width: 240 }}
allowClear allowClear
size="small" size='small'
/> />
)} )}
</div> </div>
); )
}; }
const { questionList, isHideSelect } = props; const { questionList, isHideSelect } = props
return ( return (
<Fragment> <Fragment>
<div className="question-list-filter"> <div className='question-list-filter'>
{!isHideSelect && renderFilterContainer()} {!isHideSelect && renderFilterContainer()}
<div className="question-list-container"> <div className='question-list-container'>
<Table <Table
onRow={(record, index) => { onRow={(record, index) => {
return { return {
onClick: onChangeAction(record, index), // 点击行 onClick: onChangeAction(record, index) // 点击行
}; }
}} }}
columns={questionColumns} columns={questionColumns}
dataSource={questionList} dataSource={questionList}
rowKey="id" rowKey='id'
pagination={false} pagination={false}
rowClassName="question-table-row" rowClassName='question-table-row'
/> />
</div> </div>
</div> </div>
</Fragment> </Fragment>
); )
} }
export default QuestionList
export default QuestionList;

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

@@ -1,38 +1,37 @@
import { message } from 'antd'; import { message } from 'antd'
import React, { useState, memo, useEffect } from 'react' import React, { memo, useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom'
import './index.less' import './index.less'
// 顶部tab // 顶部tab
const MENULIST = [ const MENULIST = [
{ {
key: 'questionBank', key: 'questionBank',
title: '刷题', title: '刷题',
route: '/question-bank', route: '/question-bank'
}, },
{ {
key: 'prictiseQuestion', key: 'prictiseQuestion',
title: '练题', title: '练题',
route: '/brush-question', route: '/brush-question'
}, },
{ {
key: 'practiceQuestions', key: 'practiceQuestions',
title: '鸡圈', title: '鸡圈',
route: '/practice-questions', route: '/practice-questions'
}, },
{ {
key: 'interList', key: 'interList',
title: '模拟面试', title: '模拟面试',
route: '/inter-list', route: '/inter-list'
}, }
] ]
// 顶部tab映射 // 顶部tab映射
const mapMenu = { const mapMenu = {
'/question-bank': 'questionBank', '/question-bank': 'questionBank'
} }
const TopMenu = () => { const TopMenu = () => {
const [currentKey, setCurrentKey] = useState('questionBank') const [currentKey, setCurrentKey] = useState('questionBank')
const location = useLocation() const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
@@ -44,26 +43,29 @@ const TopMenu = () => {
} else { } else {
setCurrentKey('') setCurrentKey('')
} }
}, [location.pathname]); }, [location.pathname])
/** /**
* 切换item * 切换item
* @param {*} item * @param {*} item
* @returns * @returns
*/ */
const changeMenu = (item) => () => { const changeMenu = item => () => {
if (item.key === "questionBank") { const userInfoStorage = localStorage.getItem('userInfo')
if (!userInfoStorage) {
return message.info('请登录')
}
if (item.key === 'questionBank') {
if (location.pathname === '/question-bank') return if (location.pathname === '/question-bank') return
navigate('/question-bank') navigate('/question-bank')
setCurrentKey(item.key) setCurrentKey(item.key)
} else { } else {
return message.info("敬请期待") return message.info('敬请期待')
} }
} }
return ( return (
<div className="top-menu-list"> <div className='top-menu-list'>
{MENULIST.map((item, index) => { {MENULIST.map((item, index) => {
return ( return (
<div <div
@@ -71,8 +73,10 @@ const TopMenu = () => {
key={item.key + index} key={item.key + index}
onClick={changeMenu(item)} onClick={changeMenu(item)}
> >
<div className="top-menu-text">{item.title}</div> <div className='top-menu-text'>{item.title}</div>
<div className={`top-menu-line ${currentKey === item.key ? 'top-menu-line-active' : ''}`}></div> <div
className={`top-menu-line ${currentKey === item.key ? 'top-menu-line-active' : ''}`}
></div>
</div> </div>
) )
})} })}

BIN
src/imgs/login_bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

158
src/views/header/index.tsx
View File

@@ -1,64 +1,68 @@
import { Input, Dropdown, message } from 'antd';
import Logo from '@/imgs/logo.jpg'
import Head from '@/imgs/head.jpg' import Head from '@/imgs/head.jpg'
import Logo from '@/imgs/logo.jpg'
import { HeartOutlined, LikeOutlined, LoginOutlined, UserOutlined } from '@ant-design/icons'
import TopMenu from '@components/top-menu' import TopMenu from '@components/top-menu'
import { UserOutlined, HeartOutlined, LikeOutlined, LoginOutlined } from '@ant-design/icons' import { Dropdown, Input, message } from 'antd'
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom'
const { Search } = Input; const { Search } = Input
const menuItems = [ const menuItems = [
{ {
label: '个人中心', label: '个人中心',
key: 1, key: 1,
icon: <UserOutlined style={{ fontSize: '16px' }} /> icon: <UserOutlined style={{ fontSize: '16px' }} />
}, },
{ {
label: '我的收藏', label: '我的收藏',
key: 2, key: 2,
icon: <HeartOutlined style={{ fontSize: '16px' }} /> icon: <HeartOutlined style={{ fontSize: '16px' }} />
}, { },
label: '我的点赞', {
key: 3, label: '我的点赞',
icon: <LikeOutlined style={{ fontSize: '16px' }} /> key: 3,
}, icon: <LikeOutlined style={{ fontSize: '16px' }} />
{ },
type: 'divider', {
}, type: 'divider'
{ },
label: '退出', {
key: 4, label: '退出',
icon: <LoginOutlined style={{ fontSize: '16px' }} /> key: 4,
} icon: <LoginOutlined style={{ fontSize: '16px' }} />
}
] ]
const Header = () => { const Header = () => {
const { pathname } = window.location; const { pathname } = window.location
const navigate = useNavigate() const navigate = useNavigate()
const handleMenuClick = e => { const handleMenuClick = e => {
if (e.key != 1) { const userInfoStorage = localStorage.getItem('userInfo')
return message.info('敬请期待') if (!userInfoStorage) {
} return message.info('请登录')
navigate('/user-info') }
} if (e.key != 1) {
return message.info('敬请期待')
}
navigate('/user-info')
}
return ( return (
<div className="head-navigator-box"> <div className='head-navigator-box'>
<div className="head-navigator"> <div className='head-navigator'>
<div className="head-navigator-left"> <div className='head-navigator-left'>
<div <div
className="head-navigator-logo" className='head-navigator-logo'
onClick={() => onClick={() => (window.location.href = '/question-bank')}
(window.location.href = '/question-bank') >
}> <img src={Logo} style={{ height: 50 }} />
<img src={Logo} style={{ height: 50 }} /> </div>
</div> <TopMenu />
<TopMenu /> </div>
</div> <div className='head-navigator-user-box'>
<div className="head-navigator-user-box"> <div className='time-box'></div>
<div className="time-box"></div> {/* {'/question-bank' == pathname && (
{/* {'/question-bank' == pathname && (
<div className="head-navigator-input-box"> <div className="head-navigator-input-box">
<Search <Search
placeholder="请输入感兴趣的内容～" placeholder="请输入感兴趣的内容～"
@@ -67,32 +71,28 @@ const Header = () => {
/> />
</div> </div>
)} */} )} */}
{/* <div className="head-navigator-bell"> */} {/* <div className="head-navigator-bell"> */}
{/* <Icon type="bell" /> */} {/* <Icon type="bell" /> */}
{/* </div> */} {/* </div> */}
<div className="head-navigator-user-img"> <div className='head-navigator-user-img'>
<Dropdown <Dropdown
menu={{ menu={{
items: menuItems, items: menuItems,
onClick: handleMenuClick, onClick: handleMenuClick
}} }}
placement="bottom" placement='bottom'
trigger={['click']} trigger={['click']}
destroyPopupOnHide destroyPopupOnHide
overlayStyle={{ overlayStyle={{
width: '150px' width: '150px'
}} }}
> >
<img <img src={Head} style={{ width: 36, height: 36 }} />
src={Head} </Dropdown>
style={{ width: 36, height: 36 }} </div>
/> </div>
</Dropdown> </div>
</div>
</div> )
</div>
</div>
</div>
)
} }
export default Header export default Header

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

@@ -1,6 +1,6 @@
.login-box { .login-box {
width: 100%; width: 100%;
height: calc(100% - 100px); height: 100%;
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;

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

@@ -40,11 +40,7 @@ const Login = () => {
return ( return (
<div className='login-box'> <div className='login-box'>
<div className='login-container-inner'> <div className='login-container-inner'>
<div className='notes'> <div className='notes'></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'> <div className='qrcode-desc'>
<p>微信扫码关注公众号</p> <p>微信扫码关注公众号</p>