From 8a9d22e0aa04daba256007f4edc10dd1939e0665 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: Sat, 11 Nov 2023 23:23:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- src/components/question-list/index.jsx | 137 ++++++------------- src/components/tags-editor/index.jsx | 4 +- src/views/brush-questions/index.less | 2 +- src/views/question-bank/index.less | 7 +- src/views/question-bank/index.tsx | 95 +++++++++---- src/views/user-info/index.tsx | 180 ++++++++++++++----------- 7 files changed, 222 insertions(+), 205 deletions(-) diff --git a/.env.development b/.env.development index 3a55d35..204eaff 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,2 @@ -VITE_API_HOST1=http://117.72.14.166:3010 +VITE_API_HOST=http://117.72.10.84:3010 VITE_IMG_HOST=http://117.72.14.166:9000 \ No newline at end of file diff --git a/src/components/question-list/index.jsx b/src/components/question-list/index.jsx index 51d2dd7..c720fc9 100644 --- a/src/components/question-list/index.jsx +++ b/src/components/question-list/index.jsx @@ -1,8 +1,9 @@ import React, { Fragment, useState } from "react"; -import { Tag, Table, Input } from "antd"; +import { Tag, Table, Input, Radio, Space, Button, Divider } from "antd"; import { filterDifficulty, gradeObject } from "@constants"; import { useNavigate } from "react-router-dom"; import "./index.less"; + const { Search } = Input; const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff'] @@ -10,12 +11,9 @@ const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff' const QuestionList = (props) => { - - const [selectValue, setSelectValue] = useState('难度') + const [difficuty, setDifficuty] = useState(0) const navigate = useNavigate(); - - const RandomNumBoth = (Min, Max) => { //差值 const Range = Max - Min; @@ -24,6 +22,15 @@ const QuestionList = (props) => { return Min + Math.round(Rand * Range); //四舍五入 } + const handleSearch = (close) => { + props.changeDifficuty(difficuty) + close() + } + + const changeDifficuty = (e) => { + setDifficuty(e.target.value) + } + /** * 题目列表 */ @@ -40,8 +47,7 @@ const QuestionList = (props) => { return (
- {record.subjectName} - + {record.id}: {record.subjectName}
{item?.labelName?.length > 0 && @@ -62,31 +68,29 @@ const QuestionList = (props) => { dataIndex: "subjectDifficult", key: "subjectDifficult", align: "center", - filters: [ - { - value: 0, - text: '全部', - }, - { - value: 1, - text: '初级', - }, - { - value: 2, - text: '中级', - }, - { - value: 3, - text: '高级', - }, - { - value: 4, - text: '资深', - }, - ], - onFilter: (value, record) => { - return value === 0 ? record : record.subjectDifficult === value - }, + filterDropdown: ({ close }) => ( +
e.stopPropagation()}> +
请选择
+ + + { + filterDifficulty.map(item => { + return {item.title} + }) + } + + + + +
), width: 90, render: (key) => { return ( @@ -96,62 +100,19 @@ const QuestionList = (props) => { }, ]; - /** - * 选择标签 - * @param {*} id - */ - const handleChangeSelect = (id) => { - let selectValue = "难度"; - if (id != 0) { - filterDifficulty.forEach((item) => { - if (item.id == id) { - selectValue = item.id; - } - }); - } - setSelectValue(selectValue) - props.handleChangeSelect(id); - }; - /** * 进入详情 * @param {*} item * @param {*} type * @returns */ - const onChangeAction = (item, index) => () => { - let { isNotToDetail, difficulty, primaryCategoryId, labelList, pageIndex } = - props; - !isNotToDetail && navigate("/brush-question/" + item.id) - // this.props.history.push( - // splicingQuery("/brush-questions", { - // id: item?.id, - // index: index + (pageIndex - 1) * 10 + 1, - // difficulty, - // primaryCategoryId, - // labelList, - // }) - // ); - if (!isNotToDetail) return; - toChangeSelectRows(item); + const onChangeAction = (item) => () => { + navigate("/brush-question/" + item.id) + // let { isNotToDetail } = props; + // !isNotToDetail && + // if (!isNotToDetail) return; }; - const toChangeSelectRows = (record) => { - let newSelectedRows = [...props.selectRows]; - const isHas = newSelectedRows.some((rowItem) => rowItem.id === record.id); - if (isHas) { - newSelectedRows = newSelectedRows.filter( - (rowItem) => rowItem.id !== record.id - ); - } else { - newSelectedRows.push(record); - } - props.setSelectRows(newSelectedRows); - }; - - const onChangePagination = (e) => { - props.onChangePagination(e); - }; /** * 过滤框-搜索框-模块 @@ -174,8 +135,7 @@ const QuestionList = (props) => { ); }; - const { questionList, total, pageIndex, isHideSelect, isMultiple } = - props; + const { questionList, isHideSelect } = props; return ( @@ -193,20 +153,7 @@ const QuestionList = (props) => { rowKey="id" pagination={false} rowClassName="question-table-row" - /> - {/* {total > 10 && ( - - )} */}
diff --git a/src/components/tags-editor/index.jsx b/src/components/tags-editor/index.jsx index 944e6d6..e9db5ad 100644 --- a/src/components/tags-editor/index.jsx +++ b/src/components/tags-editor/index.jsx @@ -258,7 +258,9 @@ export default class TagsEditor extends Component { {tagElem} ) : ( - tagElem +
+ {tagElem} +
); })} {inputVisible && ( diff --git a/src/views/brush-questions/index.less b/src/views/brush-questions/index.less index 0aff1f0..11e445d 100644 --- a/src/views/brush-questions/index.less +++ b/src/views/brush-questions/index.less @@ -80,7 +80,7 @@ line-height: 35px; border-radius: 6px; margin-bottom: 5px; - height: 500px; + max-height: 500px; overflow-y: scroll; } .answer-box { diff --git a/src/views/question-bank/index.less b/src/views/question-bank/index.less index bb59503..6229a89 100644 --- a/src/views/question-bank/index.less +++ b/src/views/question-bank/index.less @@ -6,7 +6,7 @@ border-radius: 5px; height: calc(100vh - 90px); overflow-y: scroll; - .ant-spin-nested-loading { + .mask-box { flex: 1; overflow-y: auto; border-radius: 8px; @@ -20,6 +20,11 @@ .question-list-box { margin-top: 1px; } + .loading-more{ + background-color: white; + text-align: center; + padding-bottom: 15px; + } } } diff --git a/src/views/question-bank/index.tsx b/src/views/question-bank/index.tsx index b70bf5d..5436e6f 100644 --- a/src/views/question-bank/index.tsx +++ b/src/views/question-bank/index.tsx @@ -1,39 +1,32 @@ -// import { Component } from 'react'; import { useState, useEffect, memo } from 'react' -// import { useSearchParams } from 'react-router-dom' import QuestionList from '@components/question-list'; import CategoryList from '@components/category-list'; import ContributionList from './components/contribution-list'; import RankingList from './components/practice-list' import { apiName } from './constant'; import req from '@utils/request'; -import { Spin } from 'antd'; import './index.less'; const QuestionBank = () => { const [firstCategoryList, setFirstCategoryList] = useState[]>([]) const [questionList, setQuestionList] = useState([]) - const [isShowSpin, setIsShowSpin] = useState(false) const [labelList, setLabelList] = useState(); // 选中的标签列表 - const [difficulty, setDiffculty] = useState(0); //困难度（全部） + const [difficulty, setDiffculty] = useState(''); //困难度（全部） const [total, setTotal] = useState(0); // 总条数 const [pageIndex, setPageIndex] = useState(0); const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id const [secondCategoryId, setSecondCategoryId] = useState('') - // let [searchParams, setSearchParams] = useSearchParams(); - // const changeUrlParam = () => { - // // console.log(searchParams.size) - // setSearchParams({ id: 1 }) - // // window.history.pushState({}, '0', window.location.href + '?url=' + '参数'); - // } + const [loading, setLoading] = useState(false) + const [finished, setFinished] = useState(false) + const [switchFlag, setSwitchFlag] = useState(false) + /** * 获取大类分类 */ const getPrimaryCategoryInfo = () => { - setIsShowSpin(true) req({ method: 'post', url: apiName.queryPrimaryCategory, @@ -47,8 +40,6 @@ const QuestionBank = () => { }) .catch((err: string) => { console.log(err) - }).finally(() => { - setIsShowSpin(false) }) } @@ -60,8 +51,8 @@ const QuestionBank = () => { setLabelList('') setPromaryCategoryId(item.id) setQuestionList([]) - setPageIndex(1) setTotal(0) + setPageIndex(1) }; @@ -73,24 +64,43 @@ const QuestionBank = () => { const onChangeLabel = (secondCategoryId: any, assembleIds: string) => { setSecondCategoryId(secondCategoryId) setLabelList(assembleIds) + setQuestionList([]) + setTotal(0) setPageIndex(1) }; const queryQuestionList = () => { + setLoading(true) const params = { pageNo: pageIndex, - pageSize: 10, + pageSize: 20, labelId: labelList, categoryId: secondCategoryId, - // subjectDifficult: 1 + subjectDifficult: difficulty || '' } req({ method: 'post', url: apiName.getSubjectPage, data: params }).then(res => { - setTotal(res.data.total) - setQuestionList(res.data.result) + setLoading(false) + let lastList = [...questionList] + const { total, result } = res.data + if (result.length) { + lastList = lastList.concat(result) + setQuestionList(lastList) + setTotal(total) + if (result.length < 20 || lastList.length >= total) { + setFinished(true) + } else { + setFinished(false) + setSwitchFlag(false) + } + } + }).catch(err => { + console.log(err) + }).finally(() => { + setLoading(false) }) } @@ -102,10 +112,9 @@ const QuestionBank = () => { useEffect(() => { if (labelList && secondCategoryId) { - // setSearchParams({ second: secondCategoryId, label: labelList }) queryQuestionList() } - }, [labelList, pageIndex, secondCategoryId]) + }, [labelList, pageIndex, secondCategoryId, difficulty]) /** * 更多分类切换 @@ -120,10 +129,34 @@ const QuestionBank = () => { setTotal(0) } + const scrollHandler = e => { + let scrollTop = e.target.scrollTop; // listBox 滚动条向上卷曲出去的长度，随滚动变化 + let clientHeight = e.target.clientHeight; // listBox 的视口可见高度，固定不变 + let scrollHeight = e.target.scrollHeight; // listBox 的整体高度，随数据加载变化 + let saveHeight = 30; // 安全距离，距离底部XX时，触发加载 + let tempVal = scrollTop + clientHeight + saveHeight; + // 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载 + // 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发 + if (tempVal >= scrollHeight) { + if (!finished && !switchFlag) { + // 数据加载未结束 && 未加锁 + setPageIndex(pageIndex + 1) + } + setSwitchFlag(true) + } + } + + const changeDifficuty = cur => { + if (cur === difficulty) return + setPageIndex(1) + setDiffculty(cur) + setQuestionList([]) + } + return (
- -
+
+
{firstCategoryList?.length > 0 && ( { pageIndex={pageIndex} total={total} questionList={questionList} - // handleChangeSelect={this.handleChangeSelect} - // onChangePagination={this.onChangePagination} - difficulty={difficulty} - // primaryCategoryId={this.primaryCategoryId} + changeDifficuty={changeDifficuty} labelList={labelList} />
+ +
{ + questionList.length == 0 + ? "暂无数据" + : loading && !finished + ? "努力加载中..." + : "我是有底线的（：" + }
- +
@@ -157,4 +195,5 @@ const QuestionBank = () => {
); } + export default memo(QuestionBank) diff --git a/src/views/user-info/index.tsx b/src/views/user-info/index.tsx index ccc0aca..92105c1 100644 --- a/src/views/user-info/index.tsx +++ b/src/views/user-info/index.tsx @@ -1,93 +1,117 @@ -import { useState } from 'react' -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 { Button, Card, Col, Form, Input, Radio, Row } from 'antd' +import { memo, useState } from 'react' import './index.less' const { TextArea } = Input const layout = { - labelCol: { span: 4 }, - wrapperCol: { span: 10, offset: 1 } + 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 [form] = Form.useForm() + const [editFlag, setEditFlag] = useState(false) + const [loading, setLoading] = useState(false) - const onFinish = (values) => { - console.log(values) - } + const onFinish = values => { + console.log(values) + } - const uploadButton = ( -
- {loading ? : } -
点击上传
-
- ); - - return
- -
- - - - {editFlag ? - {/* {imageUrl ? avatar : uploadButton} */} - {uploadButton} - : <> - - } - - - - - {editFlag ? : <> - 暂无 - } - - - - - {editFlag ? - 男 - 女 - : <> - 未知 - } - - - - - {editFlag ? : <> - 暂无 - } - - - - - {editFlag ?