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-09 00:29:43 +08:00
parent a635d71a3c
commit 25f1c269cd
16 changed files with 157 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -12,9 +12,9 @@ const App = () => {
}
}, [location])
return (
<div className="app-main">
<div className="app-main" style={{ padding: location.pathname === '/login' ? '66px 0 0' : '66px 16px 32px' }}>
<Header />
<div className='content-box'>
<div className='content-box' style={{ width: location.pathname === '/login' ? '100%' : '1439px' }}>
<Outlet />
</div>
</div>

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

@@ -1,32 +1,3 @@
/**
* 难度筛选
*/
export const filterDifficulty = [
{
id: 0,
title: '全部',
},
{
id: 1,
title: '初级',
},
{
id: 2,
title: '中级',
},
{
id: 3,
title: '高级',
},
{
id: 4,
title: '资深',
},
{
id: 5,
title: '专家',
},
];
export const apiName = {
/**
@@ -42,34 +13,3 @@ export const apiName = {
// 根据分类查标签
queryLabelByCategoryId: '/label/queryLabelByCategoryId'
};
export const imgObject = {
clickImg:
'../../views/imgs/clickImg.png',
ranking1Img:
'https://img14.360buyimg.com/imagetools/jfs/t1/206730/39/7751/986/617f4fbaE4e23097a/aa94ca31a9c132b2.png',
ranking2Img:
'https://img10.360buyimg.com/imagetools/jfs/t1/156125/21/27968/948/617f4fbaEcf1da9a9/722ad0917497697a.png',
ranking3Img:
'https://img12.360buyimg.com/imagetools/jfs/t1/213197/17/2682/958/617f4fbbE06c277a9/03ef4c389c52ab8d.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',
};

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

@@ -1,4 +1,4 @@
import React, { Component, Fragment, useState, useEffect } from 'react';
import React, { Fragment, useState, useEffect } from 'react';
import {
RightOutlined,
@@ -11,7 +11,8 @@ import req from '@utils/request';
import { Divider, Spin, Modal } from 'antd';
import _ from 'lodash';
import './index.less';
import { apiName, imgObject } from './constant';
import { apiName } from './constant';
import { imgObject } from '@constants'
/**
* 大分类中的背景图

0
src/components/layout/index.less
View File

0
src/components/layout/index.tsx
View File

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

@@ -1,8 +1,7 @@
import React, { Component, Fragment, useState } from "react";
import { Tag, Table, Pagination, Input } from "antd";
import { filterDifficulty, gradeObject } from "./constant";
import React, { Fragment, useState } from "react";
import { Tag, Table, Input } from "antd";
import { filterDifficulty, gradeObject } from "@constants";
import { useNavigate } from "react-router-dom";
import { splicingQuery } from "@utils";
import "./index.less";
const { Search } = Input;

71
src/components/question-list/constant.js → src/constants/index.ts
View File

@@ -1,3 +1,33 @@
/**
* 难度筛选
*/
export const filterDifficulty = [
{
id: 0,
title: '全部',
},
{
id: 1,
title: '初级',
},
{
id: 2,
title: '中级',
},
{
id: 3,
title: '高级',
},
{
id: 4,
title: '资深',
},
{
id: 5,
title: '专家',
},
];
/**
* 难度等级
*/
@@ -24,49 +54,24 @@ export const gradeObject = {
},
};
/**
* 难度筛选
*/
export const filterDifficulty = [
{
id: 0,
title: '全部',
},
{
id: 2,
title: '初级',
},
{
id: 3,
title: '中级',
},
{
id: 4,
title: '高级',
},
{
id: 5,
title: '资深',
},
];
export const imgObject = {
clickImg:
'https://img13.360buyimg.com/imagetools/jfs/t1/222669/25/807/6590/617f4f06Eb2094586/64c39ce3769b8a16.png',
'http://117.72.14.166:9000/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',
ranking1Img:
'https://img14.360buyimg.com/imagetools/jfs/t1/206730/39/7751/986/617f4fbaE4e23097a/aa94ca31a9c132b2.png',
'https://img12.360buyimg.com/imagetools/jfs/t1/110906/3/22471/3750/6214a3bfE392596cf/122c9e4b30948682.png',
ranking2Img:
'https://img10.360buyimg.com/imagetools/jfs/t1/156125/21/27968/948/617f4fbaEcf1da9a9/722ad0917497697a.png',
'https://img13.360buyimg.com/imagetools/jfs/t1/211695/8/12987/4360/6214a3bfEd4679fde/4f3c55783bb9119c.png',
ranking3Img:
'https://img12.360buyimg.com/imagetools/jfs/t1/213197/17/2682/958/617f4fbbE06c277a9/03ef4c389c52ab8d.png',
'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:
// '../../views/imgs/javaImg.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',
@@ -79,4 +84,4 @@ export const imgObject = {
'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/login_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 565 KiB

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

@@ -3,6 +3,7 @@ import Logo from '@/imgs/logo.jpg'
import Head from '@/imgs/head.jpg'
import TopMenu from '@components/top-menu'
import { UserOutlined, HeartOutlined, LikeOutlined, LoginOutlined } from '@ant-design/icons'
import { useNavigate } from "react-router-dom";
const { Search } = Input;
@@ -33,13 +34,14 @@ const menuItems = [
const Header = () => {
const { pathname } = window.location;
const navigate = useNavigate()
const handleMenuClick = e => {
console.log(e)
if (e.key != 1) {
return message.info('敬请期待')
}
navigate('/user-info')
}
return (

33
src/views/login/index.less Normal file
View File

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

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

@@ -1,7 +1,13 @@
import './index.less'
const Login = () => {
return (<div>
login
return (<div className="login-box">
<div className='login-container-inner'>
<div className='notes'>LeNet-5 诞生
1998 年 11 月，早期经典卷积神经网络 LeNet-5 诞生。杨立昆、莱昂·伯托等发表经典论文“Gradient-Based Learning Applied to Document Recognition”，文章总结了应用于手写字符识别的各种模型并进行了比对，结果显示卷积神经网络表现超群。</div>
<div className='qrcode'>12312123</div>
</div>
</div>)
}

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

@@ -1,9 +1,10 @@
import React from 'react'
import { Popover, Spin } from 'antd'
import { debounce } from '@utils'
import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant'
import { RankingTypeText, RankingTypeBtnText } from '../../constant'
import './index.less'
import { message } from 'antd'
import { imgObject } from '@constants'
const rankingBackImg = {
0: imgObject.ranking1Img,

88
src/views/question-bank/constant.ts
View File

@@ -1,59 +1,3 @@
// import JavaImg from '@views/imgs/javaImg.png'
/**
* 难度等级
*/
export const gradeObject = {
1: {
color: 'rgba(60, 110, 238, 0.7)',
title: '初级',
},
2: {
color: 'rgba(60, 110, 238, 0.7)',
title: '中级',
},
3: {
color: 'rgba(60, 110, 238, 0.7)',
title: '高级',
},
4: {
color: 'rgba(60, 110, 238, 0.7)',
title: '资深',
},
5: {
color: 'rgba(60, 110, 238, 0.7)',
title: '专家',
},
};
/**
* 难度筛选
*/
export const filterDifficulty = [
{
id: 0,
title: '全部',
},
{
id: 1,
title: '初级',
},
{
id: 2,
title: '中级',
},
{
id: 3,
title: '高级',
},
{
id: 4,
title: '资深',
},
{
id: 5,
title: '专家',
},
];
export const apiName = {
/**
@@ -71,38 +15,6 @@ export const apiName = {
};
export const imgObject = {
clickImg:
'http://117.72.14.166:9000/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',
ranking1Img:
'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: JavaImg,
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',
};
/**
* 模块类型
*/

4
src/views/user-info/index.less
View File

@@ -1,4 +1,8 @@
.user-info-box{
background-color: white;
height: 100%;
.user-info_header{
width: 64px;
height: 64px;
}
}

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

@@ -1,59 +1,92 @@
import { useState } from 'react'
import { Form, Row, Col, Input, Button, Card } from 'antd'
import { Form, Row, Col, Input, Button, Card, Radio, DatePicker, ConfigProvider, Upload } from 'antd'
import Head from '@/imgs/head.jpg'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import './index.less'
const { TextArea } = Input
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 10, offset: 1 }
}
const UserInfo = () => {
const [form] = Form.useForm()
const [editFlag, setEditFlag] = useState(false)
const [loading, setLoading] = useState(false)
const [editFields, setEditFields] = useState<Record<string, any>>({
nickName: false,
gender: false,
introduce: false,
birth: false
})
const changeEditFields = (field: string) => {
setEditFields({
...editFields,
[field]: !editFields[field]
})
const onFinish = (values) => {
console.log(values)
}
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>点击上传</div>
</div>
);
return <div className='user-info-box'>
<Card title='基本信息'>
<Form {...layout} colon={false}>
<Row >
<Form {...layout} colon={false} onFinish={onFinish} form={form}>
<Row>
<Col span={16}>
<Form.Item label='用户昵称'>
{editFields.nickName ? <Input placeholder='请输入昵称' /> : <>
昵称
<Form.Item label='用户头像' name='upload' valuePropName="fileList">
{editFlag ? <Upload listType="picture-card" name="avatar">
{/* {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} */}
{uploadButton}
</Upload> : <>
<img className='user-info_header' src={Head} />
</>}
</Form.Item>
</Col>
<Col span={16}>
<Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
<Input />
<Form.Item label='用户昵称' name='nickName'>
{editFlag ? <Input placeholder='请输入昵称' /> : <>
暂无
</>}
</Form.Item>
</Col>
<Col span={16}>
<Form.Item label='个人简介'>
<Input />
<Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='gender'>
{editFlag ? <Radio.Group>
<Radio value={1}>男</Radio>
<Radio value={2}>女</Radio>
</Radio.Group> : <>
未知
</>}
</Form.Item>
</Col>
<Col span={16}>
<Form.Item label='出生日期'>
<Input />
<Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱' name='email'>
{editFlag ? <Input placeholder='请输入邮箱' /> : <>
暂无
</>}
</Form.Item>
</Col>
<Col span={16}>
<Form.Item label='个人简介' name='introduce'>
{editFlag ? <TextArea placeholder='请输入个人简介' maxLength={500} showCount /> : <>
这个人很懒，什么也没有留下。。。。
</>}
</Form.Item>
</Col>
<Col span={16}>
<Form.Item wrapperCol={{ offset: 5 }}>
{
editFlag ? <>
<Button type='primary' htmlType='submit' style={{ marginRight: '20px' }}>保存</Button>
<Button onClick={() => setEditFlag(false)}>取消</Button>
</> : <Button type='primary' onClick={() => setEditFlag(true)}>编辑</Button>
}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
</div>
}

4
vite.config.ts
View File

@@ -10,7 +10,9 @@ export default defineConfig({
'@assets': path.resolve(__dirname, 'src/assets'),
'@views': path.resolve(__dirname, 'src/views'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@components': path.resolve(__dirname, 'src/components')
'@components': path.resolve(__dirname, 'src/components'),
'@imgs': path.resolve(__dirname, 'src/imgs'),
'@constants': path.resolve(__dirname, 'src/constants'),
}
},
plugins: [react()],