feat: 联调

2023-11-12 17:27:54 +08:00
parent 35c973ccd0
commit 13f794caea
7 changed files with 208 additions and 192 deletions
--- a/src/components/category-list/index.jsx
+++ b/src/components/category-list/index.jsx
@@ -1,12 +1,6 @@
 import React, { Fragment, useEffect, useState } from 'react'

-import {
-  CaretDownOutlined,
-  CaretUpOutlined,
-  DownOutlined,
-  RightOutlined,
-  UpOutlined
-} from '@ant-design/icons'
+import { CaretDownOutlined, CaretUpOutlined, RightOutlined } from '@ant-design/icons'
 import req from '@utils/request'
 import { Divider, Modal, Spin } from 'antd'
 import _ from 'lodash'
@@ -283,7 +277,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                        )
                      })}
                    </div>
-                    {secondCategoryItem.children.length > 5 ? (
+                    {/* {secondCategoryItem.children.length > 5 ? (
                      <div
                        id={`second_id_${secondCategoryIndex}`}
                        className='second-category-item-status'
@@ -299,7 +293,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
                          {secondCategoryItem.isOpen ? <UpOutlined /> : <DownOutlined />}
                        </div>
                      </div>
-                    ) : null}
+                    ) : null} */}
                  </div>
                )}
              </div>
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -1,33 +1,40 @@
-import React, { Fragment, useState } from "react";
-import { Tag, Table, Input, Radio, Space, Button, Divider } from "antd";
-import { filterDifficulty, gradeObject } from "@constants";
-import { useNavigate } from "react-router-dom";
-import "./index.less";
+import { filterDifficulty, gradeObject } from '@constants'
+import { Button, Input, Radio, Space, Table, Tag } from 'antd'
+import React, { Fragment, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import './index.less'

-const { Search } = Input;
+const { Search } = Input

-const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff']
-
-
-const QuestionList = (props) => {
+const colors = [
+  '#ffffb8',
+  '#f4ffb8',
+  '#b5f5ec',
+  '#bae0ff',
+  '#d9f7be',
+  '#efdbff',
+  ' #ffd6e7',
+  '#d6e4ff'
+]

+const QuestionList = props => {
  const [difficuty, setDifficuty] = useState(0)
-  const navigate = useNavigate();
+  const navigate = useNavigate()

  const RandomNumBoth = (Min, Max) => {
    //差值
-    const Range = Max - Min;
+    const Range = Max - Min
    // 随机数
-    const Rand = Math.random();
-    return Min + Math.round(Rand * Range); //四舍五入 
+    const Rand = Math.random()
+    return Min + Math.round(Rand * Range) //四舍五入
  }

-  const handleSearch = (close) => {
+  const handleSearch = close => {
    props.changeDifficuty(difficuty)
    close()
  }

-  const changeDifficuty = (e) => {
+  const changeDifficuty = e => {
    setDifficuty(e.target.value)
  }

@@ -36,69 +43,88 @@ const QuestionList = (props) => {
   */
  const questionColumns = [
    {
-      title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}>
-        （当前
-        <span style={{ color: "rgba(0, 0, 0, 0.65)" }}> {props.total || 0} </span>
-        道题）
-      </div></div>,
-      key: "questionNo",
-      align: "centlefter",
+      title: (
+        <div style={{ display: 'flex' }}>
+          题目{' '}
+          <div
+            className='question-count-box'
+            style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}
+          >
+            （当前
+            <span style={{ color: 'rgba(0, 0, 0, 0.65)' }}> {props.total || 0} </span>
+            道题）
+          </div>
+        </div>
+      ),
+      key: 'questionNo',
+      align: 'centlefter',
      render: (item, record) => {
        return (
-          <div className="question-info-container">
-            <div className="question-info-desc">
-              {record.id}: {record.subjectName}
-            </div>
-            <div className="question-info-tags">
+          <div className='question-info-container'>
+            <div className='question-info-desc'>{record.subjectName}</div>
+            <div className='question-info-tags'>
              {item?.labelName?.length > 0 &&
-                item.labelName.map((tagsItem) => {
+                item.labelName.map(tagsItem => {
                  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}
                    </div>
-                  );
+                  )
                })}
            </div>
          </div>
-        );
-      },
+        )
+      }
    },
    {
-      title: "难度",
-      dataIndex: "subjectDifficult",
-      key: "subjectDifficult",
-      align: "center",
+      title: '难度',
+      dataIndex: 'subjectDifficult',
+      key: 'subjectDifficult',
+      align: 'center',
      filterDropdown: ({ close }) => (
-        <div style={{ padding: 16 }} onKeyDown={(e) => e.stopPropagation()}>
-          <div style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}>请选择</div>
-          <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>
-                })
-              }
+        <div style={{ padding: 16 }} onKeyDown={e => e.stopPropagation()}>
+          <div
+            style={{ textAlign: 'center', fontSize: '16px', fontWeight: 'bold', marginBottom: 10 }}
+          >
+            请选择
+          </div>
+          <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>
          </Radio.Group>

          <Button
            block
-            size="small"
-            type="primary"
+            size='small'
+            type='primary'
            style={{ marginTop: 12 }}
            onClick={() => handleSearch(close)}
          >
            确定
          </Button>
-        </div>),
+        </div>
+      ),
      width: 90,
-      render: (key) => {
-        return (
-          <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
-        );
-      },
-    },
-  ];
+      render: key => {
+        return <Tag color={gradeObject?.[key]?.color}>{gradeObject?.[key]?.title}</Tag>
+      }
+    }
+  ]

  /**
   * 进入详情
@@ -106,61 +132,57 @@ const QuestionList = (props) => {
   * @param {*} type
   * @returns
   */
-  const onChangeAction = (item) => () => {
-    navigate("/brush-question/" + item.id)
+  const onChangeAction = item => () => {
+    navigate('/brush-question/' + item.id)
    // let { isNotToDetail } = props;
    // !isNotToDetail &&
    // if (!isNotToDetail) return;
-  };
-
+  }

  /**
   * 过滤框-搜索框-模块
   * @returns
   */
  const renderFilterContainer = () => {
-    const { total, isShowSearch, setSearchStr } = props;
+    const { total, isShowSearch, setSearchStr } = props
    return (
-      <div className="question-filter-container">
+      <div className='question-filter-container'>
        {isShowSearch && (
          <Search
-            placeholder="请输入感兴趣的内容～"
-            onSearch={(value) => setSearchStr(value)}
+            placeholder='请输入感兴趣的内容～'
+            onSearch={value => setSearchStr(value)}
            style={{ width: 240 }}
            allowClear
-            size="small"
+            size='small'
          />
        )}
      </div>
-    );
-  };
+    )
+  }

-  const { questionList, isHideSelect } = props;
+  const { questionList, isHideSelect } = props

  return (
    <Fragment>
-      <div className="question-list-filter">
+      <div className='question-list-filter'>
        {!isHideSelect && renderFilterContainer()}
-        <div className="question-list-container">
+        <div className='question-list-container'>
          <Table
            onRow={(record, index) => {
              return {
-                onClick: onChangeAction(record, index), // 点击行
-              };
+                onClick: onChangeAction(record, index) // 点击行
+              }
            }}
            columns={questionColumns}
            dataSource={questionList}
-            rowKey="id"
+            rowKey='id'
            pagination={false}
-            rowClassName="question-table-row"
+            rowClassName='question-table-row'
          />
        </div>
      </div>
    </Fragment>
-  );
-
-
+  )
 }

-
-export default QuestionList;
+export default QuestionList
--- a/src/components/top-menu/index.jsx
+++ b/src/components/top-menu/index.jsx
@@ -1,38 +1,37 @@
-import { message } from 'antd';
-import React, { useState, memo, useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom';
+import { message } from 'antd'
+import React, { memo, useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 import './index.less'
 // 顶部tab
 const MENULIST = [
  {
    key: 'questionBank',
    title: '刷题',
-    route: '/question-bank',
+    route: '/question-bank'
  },
  {
    key: 'prictiseQuestion',
    title: '练题',
-    route: '/brush-question',
+    route: '/brush-question'
  },
  {
    key: 'practiceQuestions',
    title: '鸡圈',
-    route: '/practice-questions',
+    route: '/practice-questions'
  },
  {
    key: 'interList',
    title: '模拟面试',
-    route: '/inter-list',
-  },
+    route: '/inter-list'
+  }
 ]

 // 顶部tab映射
 const mapMenu = {
-  '/question-bank': 'questionBank',
+  '/question-bank': 'questionBank'
 }

 const TopMenu = () => {
-
  const [currentKey, setCurrentKey] = useState('questionBank')
  const location = useLocation()
  const navigate = useNavigate()
@@ -44,26 +43,29 @@ const TopMenu = () => {
    } else {
      setCurrentKey('')
    }
-  }, [location.pathname]);
-
+  }, [location.pathname])

  /**
   * 切换item
   * @param {*} item
   * @returns
   */
-  const changeMenu = (item) => () => {
-    if (item.key === "questionBank") {
+  const changeMenu = item => () => {
+    const userInfoStorage = localStorage.getItem('userInfo')
+    if (!userInfoStorage) {
+      return message.info('请登录')
+    }
+    if (item.key === 'questionBank') {
      if (location.pathname === '/question-bank') return
      navigate('/question-bank')
      setCurrentKey(item.key)
    } else {
-      return message.info("敬请期待")
+      return message.info('敬请期待')
    }
  }

  return (
-    <div className="top-menu-list">
+    <div className='top-menu-list'>
      {MENULIST.map((item, index) => {
        return (
          <div
@@ -71,8 +73,10 @@ const TopMenu = () => {
            key={item.key + index}
            onClick={changeMenu(item)}
          >
-            <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-text'>{item.title}</div>
+            <div
+              className={`top-menu-line ${currentKey === item.key ? 'top-menu-line-active' : ''}`}
+            ></div>
          </div>
        )
      })}
--- a/src/imgs/login_bg.jpg
+++ b/src/imgs/login_bg.jpg
--- a/src/views/header/index.tsx
+++ b/src/views/header/index.tsx
@@ -1,64 +1,68 @@
-import { Input, Dropdown, message } from 'antd';
-import Logo from '@/imgs/logo.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 { UserOutlined, HeartOutlined, LikeOutlined, LoginOutlined } from '@ant-design/icons'
-import { useNavigate } from "react-router-dom";
+import { Dropdown, Input, message } from 'antd'
+import { useNavigate } from 'react-router-dom'

-const { Search } = Input;
+const { Search } = Input

 const menuItems = [
-	{
-		label: '个人中心',
-		key: 1,
-		icon: <UserOutlined style={{ fontSize: '16px' }} />
-	},
-	{
-		label: '我的收藏',
-		key: 2,
-		icon: <HeartOutlined style={{ fontSize: '16px' }} />
-	}, {
-		label: '我的点赞',
-		key: 3,
-		icon: <LikeOutlined style={{ fontSize: '16px' }} />
-	},
-	{
-		type: 'divider',
-	},
-	{
-		label: '退出',
-		key: 4,
-		icon: <LoginOutlined style={{ fontSize: '16px' }} />
-	}
+  {
+    label: '个人中心',
+    key: 1,
+    icon: <UserOutlined style={{ fontSize: '16px' }} />
+  },
+  {
+    label: '我的收藏',
+    key: 2,
+    icon: <HeartOutlined style={{ fontSize: '16px' }} />
+  },
+  {
+    label: '我的点赞',
+    key: 3,
+    icon: <LikeOutlined style={{ fontSize: '16px' }} />
+  },
+  {
+    type: 'divider'
+  },
+  {
+    label: '退出',
+    key: 4,
+    icon: <LoginOutlined style={{ fontSize: '16px' }} />
+  }
 ]

 const Header = () => {
-	const { pathname } = window.location;
-	const navigate = useNavigate()
+  const { pathname } = window.location
+  const navigate = useNavigate()

-	const handleMenuClick = e => {
-		if (e.key != 1) {
-			return message.info('敬请期待')
-		}
-		navigate('/user-info')
-	}
+  const handleMenuClick = e => {
+    const userInfoStorage = localStorage.getItem('userInfo')
+    if (!userInfoStorage) {
+      return message.info('请登录')
+    }
+    if (e.key != 1) {
+      return message.info('敬请期待')
+    }
+    navigate('/user-info')
+  }

-	return (
-		<div className="head-navigator-box">
-			<div className="head-navigator">
-				<div className="head-navigator-left">
-					<div
-						className="head-navigator-logo"
-						onClick={() =>
-							(window.location.href = '/question-bank')
-						}>
-						<img src={Logo} style={{ height: 50 }} />
-					</div>
-					<TopMenu />
-				</div>
-				<div className="head-navigator-user-box">
-					<div className="time-box"></div>
-					{/* {'/question-bank' == pathname && (
+  return (
+    <div className='head-navigator-box'>
+      <div className='head-navigator'>
+        <div className='head-navigator-left'>
+          <div
+            className='head-navigator-logo'
+            onClick={() => (window.location.href = '/question-bank')}
+          >
+            <img src={Logo} style={{ height: 50 }} />
+          </div>
+          <TopMenu />
+        </div>
+        <div className='head-navigator-user-box'>
+          <div className='time-box'></div>
+          {/* {'/question-bank' == pathname && (
 						<div className="head-navigator-input-box">
 							<Search
 								placeholder="请输入感兴趣的内容～"
@@ -67,32 +71,28 @@ const Header = () => {
 							/>
 						</div>
 					)} */}
-					{/* <div className="head-navigator-bell"> */}
-					{/* <Icon type="bell" /> */}
-					{/* </div> */}
-					<div className="head-navigator-user-img">
-						<Dropdown
-							menu={{
-								items: menuItems,
-								onClick: handleMenuClick,
-							}}
-							placement="bottom"
-							trigger={['click']}
-							destroyPopupOnHide
-							overlayStyle={{
-								width: '150px'
-							}}
-						>
-							<img
-								src={Head}
-								style={{ width: 36, height: 36 }}
-							/>
-						</Dropdown>
-
-					</div>
-				</div>
-			</div>
-		</div>
-	)
+          {/* <div className="head-navigator-bell"> */}
+          {/* <Icon type="bell" /> */}
+          {/* </div> */}
+          <div className='head-navigator-user-img'>
+            <Dropdown
+              menu={{
+                items: menuItems,
+                onClick: handleMenuClick
+              }}
+              placement='bottom'
+              trigger={['click']}
+              destroyPopupOnHide
+              overlayStyle={{
+                width: '150px'
+              }}
+            >
+              <img src={Head} style={{ width: 36, height: 36 }} />
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 export default Header
--- a/src/views/login/index.less
+++ b/src/views/login/index.less
@@ -1,6 +1,6 @@
 .login-box {
  width: 100%;
-  height: calc(100% - 100px);
+  height: 100%;
  background: url(../../imgs/login_bg.jpg) no-repeat 50%;
  background-size: cover;
  min-height: 600px;
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -40,11 +40,7 @@ const 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='notes'></div>
        <div className='qrcode-box'>
          <div className='qrcode-desc'>
            <p>微信扫码关注公众号</p>