From 5a17d2da74ed4c0d2e313fa182114123661045c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=8B=E6=B0=B4=E6=B5=AE=E5=B0=98?= <18510549872@163.comm> Date: Sun, 12 Nov 2023 16:54:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- src/App.less | 213 +++--- src/components/category-list/index.jsx | 670 +++++++++--------- src/constants/index.ts | 126 ++-- src/imgs/ranking1Img.png | Bin 0 -> 3750 bytes src/imgs/ranking2Img.png | Bin 0 -> 4360 bytes src/imgs/ranking3Img.png | Bin 0 -> 4566 bytes src/imgs/rankingImg.png | Bin 0 -> 603 bytes src/utils/request.ts | 119 ++-- src/views/login/index.less | 70 +- src/views/login/index.tsx | 89 ++- .../components/ranking-box/index.jsx | 69 +- src/views/user-info/index.tsx | 67 +- vite.config.ts | 16 +- 14 files changed, 744 insertions(+), 699 deletions(-) create mode 100644 src/imgs/ranking1Img.png create mode 100644 src/imgs/ranking2Img.png create mode 100644 src/imgs/ranking3Img.png create mode 100644 src/imgs/rankingImg.png diff --git a/.env.development b/.env.development index 204eaff..6a06899 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,2 @@ -VITE_API_HOST=http://117.72.10.84:3010 -VITE_IMG_HOST=http://117.72.14.166:9000 \ No newline at end of file +VITE_API_HOST=http://117.72.10.84:5000 +VITE_IMG_HOST=http://117.72.14.166:9000 diff --git a/src/App.less b/src/App.less index cb96a0e..8b051e6 100644 --- a/src/App.less +++ b/src/App.less @@ -1,159 +1,160 @@ @import '@assets/base.less'; .app-main { - display: flex; - flex-direction: row; - border-radius: 4px; + display: flex; + flex-direction: row; + border-radius: 4px; + margin: 0 auto; + position: absolute; + min-width: 1439px; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #f3f4f6; + padding: 66px 16px 32px; + overflow: hidden; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently not supported by any browser */ + .content-box { + width: 1439px; margin: 0 auto; - position: absolute; - min-width: 1439px; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #f3f4f6; - padding: 66px 16px 32px; - overflow: hidden; - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently not supported by any browser */ - .content-box{ - width: 1439px; - margin: 0 auto; - } + overflow: auto; + } } .header-navigator { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 50px; - min-width: 1439px; - background-color: #fff; - border-radius: 4px; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 50px; + min-width: 1439px; + background-color: #fff; + border-radius: 4px; } .nav-title { - display: flex; - justify-content: space-between; - cursor: pointer; - width: 1407px; - margin: 0 auto; - line-height: 50px; - color: #1890ff; - font-size: 24px; - // font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", 微软雅黑, - // Arial, sans-serif; + display: flex; + justify-content: space-between; + cursor: pointer; + width: 1407px; + margin: 0 auto; + line-height: 50px; + color: #1890ff; + font-size: 24px; + // font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", 微软雅黑, + // Arial, sans-serif; } .header-navigator .user { - width: 36px; - height: 36px; - float: right; - /* background: #1890ff; */ - border-radius: 50%; - color: #fff; - margin-top: 7px; - line-height: 36px; - text-align: center; - font-size: 16px; - overflow: hidden; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); + width: 36px; + height: 36px; + float: right; + /* background: #1890ff; */ + border-radius: 50%; + color: #fff; + margin-top: 7px; + line-height: 36px; + text-align: center; + font-size: 16px; + overflow: hidden; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); } .jump-box { - font-size: 14px; - margin-right: 20px; + font-size: 14px; + margin-right: 20px; } .info-time-box { - display: flex; + display: flex; } .time-box { - margin-top: 8px; - margin-right: 120px; + margin-top: 8px; + margin-right: 120px; } .head-navigator-box { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 50px; - background-color: #fff; - border-radius: 4px; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 50px; + background-color: #fff; + border-radius: 4px; } .head-navigator { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 auto; - width: 1435px; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; + width: 1435px; } .head-navigator-left { - display: flex; - align-items: center; + display: flex; + align-items: center; } .head-navigator-logo { - margin-right: 20px; - // line-height: 50px; - cursor: pointer; - color: #1890ff; - font-size: 24px; - // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, - // Arial, sans-serif; + margin-right: 20px; + // line-height: 50px; + cursor: pointer; + color: #1890ff; + font-size: 24px; + // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, + // Arial, sans-serif; } .head-navigator-select-box { - display: flex; - justify-content: space-between; - align-items: center; - width: 500px; + display: flex; + justify-content: space-between; + align-items: center; + width: 500px; } .head-navigator-menu-box { - display: flex; + display: flex; } .head-navigator-menu-box .ant-menu-horizontal { - border-bottom: 0; + border-bottom: 0; } .ant-menu-horizontal > .ant-menu-item, .ant-menu-horizontal > .ant-menu-submenu { - padding: 0px; - margin: 0 12px; + padding: 0px; + margin: 0 12px; } .head-navigator-input-box { - margin-right: 24px; + margin-right: 24px; } .head-navigator-input-box .ant-input { - border-radius: 16px; + border-radius: 16px; } .head-navigator-user-box { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .head-navigator-bell { - display: flex; - justify-content: center; - align-items: center; - margin-right: 24px; - width: 28px; - height: 28px; - border-radius: 50%; - cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + margin-right: 24px; + width: 28px; + height: 28px; + border-radius: 50%; + cursor: pointer; } .head-navigator-bell:hover { - background-color: rgba(0, 10, 32, 0.03); + background-color: rgba(0, 10, 32, 0.03); } .head-navigator-user-img { - width: 36px; - height: 36px; - color: #fff; - cursor: pointer; - border-radius: 50%; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); + width: 36px; + height: 36px; + color: #fff; + cursor: pointer; + border-radius: 50%; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); } diff --git a/src/components/category-list/index.jsx b/src/components/category-list/index.jsx index 02a68ac..efec0c5 100644 --- a/src/components/category-list/index.jsx +++ b/src/components/category-list/index.jsx @@ -1,373 +1,353 @@ -import React, { Fragment, useState, useEffect } from 'react'; +import React, { Fragment, useEffect, useState } from 'react' import { - RightOutlined, - UpOutlined, - DownOutlined, - CaretDownOutlined, - CaretUpOutlined, -} from '@ant-design/icons'; -import req from '@utils/request'; -import { Divider, Spin, Modal } from 'antd'; -import _ from 'lodash'; -import './index.less'; -import { apiName } from './constant'; -import { imgObject } from '@constants' + CaretDownOutlined, + CaretUpOutlined, + DownOutlined, + RightOutlined, + UpOutlined +} from '@ant-design/icons' +import req from '@utils/request' +import { Divider, Modal, Spin } from 'antd' +import _ from 'lodash' +import { apiName } from './constant' +import './index.less' /** - * 大分类中的背景图 + * 大分类中的背景图颜色 */ -export const categoryBackImg = { - 0: imgObject.backAllImg, - 1: imgObject.dataImg, - 2: imgObject.javaImg, - 3: imgObject.npmImg, - 4: imgObject.parallelComputingImg, - 5: imgObject.springbootImg, - 6: imgObject.sqlImg, - 7: imgObject.systemDesignImg, - 8: imgObject.algorithmImg, -}; +const categoryBackColor = { + 0: '#23b2ff', + 1: '#ea7d4d', + 2: '#e93532', + 3: '#343d71', + 4: '#dc4ad6', + 5: '#72b633', + 6: '#9047de', + 7: '#dc4077' +} -const categoryShowCount = 4; +const categoryShowCount = 4 const cacheMap = {} /** - * 上万后展示 W+ - * @param {*} total - * @returns - */ -const formatTotal = (total) => { - if (total >= 10000) { - return Math.floor(total / 10000) + 'W+'; - } - return total; + * 上万后展示 W+ + * @param {*} total + * @returns + */ +const formatTotal = total => { + if (total >= 10000) { + return Math.floor(total / 10000) + 'W+' + } + return total } const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => { - const [secondCategoryList, setSecondCategoryList] = useState([]) - const [currentActive, setCurrentActive] = useState(categoryList[0]) - const [isPutAway, setIsPutAway] = useState(true) - const [loading, setLoading] = useState(false) - const [currentLabelIndex, setCurrentLabelIndex] = useState([]) - const [openMoreFlag, setOpenMoreFlag] = useState(false) + const [secondCategoryList, setSecondCategoryList] = useState([]) + const [currentActive, setCurrentActive] = useState(categoryList[0]) + const [isPutAway, setIsPutAway] = useState(true) + const [loading, setLoading] = useState(false) + const [currentLabelIndex, setCurrentLabelIndex] = useState([]) + const [openMoreFlag, setOpenMoreFlag] = useState(false) - - const getLabels = (id) => { - return new Promise(resolve => { - req({ - method: 'post', - url: apiName.queryLabelByCategoryId, - data: { categoryId: id } - }).then(res => { - if (cacheMap[id]) { - resolve(cacheMap[id]) - } else { - cacheMap[id] = res.data - resolve(res.data) - } - }) - }) - } - - // 获取大类下分类 - const getCategoryByPrimary = () => { - req({ - method: 'post', - url: apiName.queryCategoryByPrimary, - data: { categoryType: 2, parentId: currentActive.id } - }).then(async res => { - let list = res.data - for (let i = 0; i < list.length; i++) { - list[i].children = await getLabels(list[i].id) - if (i === 0 && list[i].children.length) { - list[i].children[0].active = true - } - } - setSecondCategoryList(_.cloneDeep(list)) - setCurrentLabelIndex([0, 0]) - props.onChangeLabel(_.get(list, [0, 'id']), _.get(list, [0, 'children', 0, 'id'])) - }) - } - - useEffect(() => { - if (primaryCategoryId) { - getCategoryByPrimary() - } - }, [primaryCategoryId]) - - - - /** - * 切换一级分类 - * @param {*} item - * @returns - */ - const onChangeCategory = (item) => () => { - if (currentActive.id === item.id) { - return; - } - setCurrentActive(item) - props.onChangeCategory(item); - }; - - /** - * 一级分类模块 - * @returns - */ - const renderFirstContainer = () => { - return ( -
Q%F=ChMrvS)KQ#G*zaCQKELJx2Z#U;fkr6bHPu*EjmZcEVGsh>
zVoeTV%^Z6bmC8}IdQ?5iAx(_i*HXTyldpL^Y=q#d{~J_MS1f8aVGRU=qH;N-Q{a=G
z22)5f 微信扫码关注公众号 获取验证码登录Hih}w|$s-Et>m(%
-
+
+