feat: 增加登录

src/App.tsx

@@ -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>

src/components/category-list/constant.js

@@ -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',
-};

src/components/category-list/index.jsx

@@ -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'
 
 /**
  * 大分类中的背景图

src/components/question-list/index.jsx

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

src/constants/index.ts

@@ -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:
+    javaImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/213752/24/2703/4803/617f4fc4E037da291/5f8050641d4d73d2.png',
-    // '../../views/imgs/javaImg.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',
-};
+};

src/views/header/index.tsx

@@ -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 (

src/views/login/index.less

@@ -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;
+        }
+    }
+}

src/views/login/index.tsx

@@ -1,7 +1,13 @@
+import './index.less'
+
 
 const Login = () => {
-    return (<div>
+    return (<div className="login-box">
-        login
+        <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>)
 }
 

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

@@ -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,

src/views/question-bank/constant.ts

@@ -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',
-};
-
 /**
  * 模块类型
  */

src/views/user-info/index.less

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

src/views/user-info/index.tsx

@@ -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>>({
+    const onFinish = (values) => {
-        nickName: false,
+        console.log(values)
-        gender: false,
-        introduce: false,
-        birth: false
-    })
-
-    const changeEditFields = (field: string) => {
-        setEditFields({
-            ...editFields,
-            [field]: !editFields[field]
-        })
     }
 
+    const uploadButton = (
+        <div>
+            {loading ? <LoadingOutlined /> : <PlusOutlined />}
+            <div style={{ marginTop: 8 }}>点击上传</div>
+        </div>
+    );
+
     return <div className='user-info-box'>
         <Card title='基本信息'>
-            <Form {...layout} colon={false}>
+            <Form {...layout} colon={false} onFinish={onFinish} form={form}>
-                <Row >
+                <Row>
                     <Col span={16}>
-                        <Form.Item label='用户昵称'>
+                        <Form.Item label='用户头像' name='upload' valuePropName="fileList">
-                            {editFields.nickName ? <Input placeholder='请输入昵称' /> : <>
+                            {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;别'>
+                        <Form.Item label='用户昵称' name='nickName'>
-                            <Input />
+                            {editFlag ? <Input placeholder='请输入昵称' /> : <>
+                                暂无
+                            </>}
                         </Form.Item>
                     </Col>
                     <Col span={16}>
-                        <Form.Item label='个人简介'>
+                        <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='gender'>
-                            <Input />
+                            {editFlag ? <Radio.Group>
+                                <Radio value={1}>男</Radio>
+                                <Radio value={2}>女</Radio>
+                            </Radio.Group> : <>
+                                未知
+                            </>}
                         </Form.Item>
                     </Col>
                     <Col span={16}>
-                        <Form.Item label='出生日期'>
+                        <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱' name='email'>
-                            <Input />
+                            {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>
 }
 

vite.config.ts

@@ -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()],