feat: 个人中心

.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

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 (
           <div className="question-info-container">
             <div className="question-info-desc">
-              {record.subjectName}
-
+              {record.id}: {record.subjectName}
             </div>
             <div className="question-info-tags">
               {item?.labelName?.length > 0 &&
@@ -62,31 +68,29 @@ const QuestionList = (props) => {
       dataIndex: "subjectDifficult",
       key: "subjectDifficult",
       align: "center",
-      filters: [
+      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">
               {
-          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
-      },
+                filterDifficulty.map(item => {
+                  return <Radio value={item.id} key={item.id}>{item.title}</Radio>
+                })
+              }
+            </Space>
+          </Radio.Group>
+
+          <Button
+            block
+            size="small"
+            type="primary"
+            style={{ marginTop: 12 }}
+            onClick={() => handleSearch(close)}
+          >
+            确定
+          </Button>
+        </div>),
       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 (
     <Fragment>
@@ -193,20 +153,7 @@ const QuestionList = (props) => {
             rowKey="id"
             pagination={false}
             rowClassName="question-table-row"
-
           />
-          {/* {total > 10 && (
-            <Pagination
-              style={{
-                padding: "24px 0",
-                textAlign: "center",
-              }}
-              showQuickJumper
-              defaultCurrent={pageIndex}
-              total={total}
-              onChange={onChangePagination}
-            />
-          )} */}
         </div>
       </div>
     </Fragment>

src/components/tags-editor/index.jsx

@@ -258,7 +258,9 @@ export default class TagsEditor extends Component {
                                 {tagElem}
                             </Tooltip>
                         ) : (
-                            tagElem
+                            <div key={item.id}>
+                                {tagElem}
+                            </div>
                         );
                     })}
                 {inputVisible && (

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 {

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

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<Record<string, any>[]>([])
     const [questionList, setQuestionList] = useState([])
-    const [isShowSpin, setIsShowSpin] = useState(false)
     const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
-    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,9 +129,33 @@ 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 (
         <div className="question-bank-box">
-            <Spin spinning={isShowSpin}>
+            <div className='mask-box' onScroll={scrollHandler}>
                 <div className="question-box" >
                     <div className="category-list-box">
                         {firstCategoryList?.length > 0 && (
@@ -141,15 +174,20 @@ const QuestionBank = () => {
                             pageIndex={pageIndex}
                             total={total}
                             questionList={questionList}
-                            // handleChangeSelect={this.handleChangeSelect}
-                            // onChangePagination={this.onChangePagination}
-                            difficulty={difficulty}
-                            // primaryCategoryId={this.primaryCategoryId}
+                            changeDifficuty={changeDifficuty}
                             labelList={labelList}
                         />
                     </div>
+
+                    <div className='loading-more'>{
+                        questionList.length == 0
+                            ? "暂无数据"
+                            : loading && !finished
+                                ? "努力加载中..."
+                                : "我是有底线的（："
+                    }</div>
+                </div>
             </div>
-            </Spin>
             <div className="ranking-box">
                 <RankingList />
                 <ContributionList />
@@ -157,4 +195,5 @@ const QuestionBank = () => {
         </div>
     );
 }
+
 export default memo(QuestionBank)

src/views/user-info/index.tsx

@@ -1,8 +1,7 @@
-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
@@ -17,7 +16,7 @@ const UserInfo = () => {
   const [editFlag, setEditFlag] = useState(false)
   const [loading, setLoading] = useState(false)
 
-    const onFinish = (values) => {
+  const onFinish = values => {
     console.log(values)
   }
 
@@ -26,68 +25,93 @@ const UserInfo = () => {
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
       <div style={{ marginTop: 8 }}>点击上传</div>
     </div>
-    );
+  )
 
-    return <div className='user-info-box'>
+  return (
+    <div className='user-info-box'>
       <Card title='基本信息'>
-            <Form {...layout} colon={false} onFinish={onFinish} form={form}>
+        <Form {...layout} colon={false} form={form}>
           <Row>
             <Col span={16}>
-                        <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> : <>
+              <Form.Item label='用户头像'>
                 <img className='user-info_header' src={Head} />
-                            </>}
               </Form.Item>
             </Col>
             <Col span={16}>
+              {editFlag ? (
                 <Form.Item label='用户昵称' name='nickName'>
-                            {editFlag ? <Input placeholder='请输入昵称' /> : <>
-                                暂无
-                            </>}
+                  <Input placeholder='请输入昵称' />
                 </Form.Item>
+              ) : (
+                <Form.Item label='用户昵称'>
+                  <>暂无</>
+                </Form.Item>
+              )}
             </Col>
             <Col span={16}>
-                        <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='gender'>
-                            {editFlag ? <Radio.Group>
+              {editFlag ? (
+                <Form.Item
+                  label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'
+                  name='gender'
+                >
+                  <Radio.Group>
                     <Radio value={1}>男</Radio>
                     <Radio value={2}>女</Radio>
-                            </Radio.Group> : <>
-                                未知
-                            </>}
+                  </Radio.Group>
                 </Form.Item>
+              ) : (
+                <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
+                  <>未知</>
+                </Form.Item>
+              )}
             </Col>
             <Col span={16}>
-                        <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱' name='email'>
-                            {editFlag ? <Input placeholder='请输入邮箱' /> : <>
-                                暂无
-                            </>}
+              {editFlag ? (
+                <Form.Item
+                  label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱'
+                  name='email'
+                >
+                  <Input placeholder='请输入邮箱' />
                 </Form.Item>
+              ) : (
+                <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱'>
+                  <>暂无</>
+                </Form.Item>
+              )}
             </Col>
             <Col span={16}>
+              {editFlag ? (
                 <Form.Item label='个人简介' name='introduce'>
-                            {editFlag ? <TextArea placeholder='请输入个人简介' maxLength={500} showCount /> : <>
-                                这个人很懒，什么也没有留下。。。。
-                            </>}
+                  <TextArea placeholder='请输入个人简介' maxLength={500} showCount />
                 </Form.Item>
+              ) : (
+                <Form.Item label='个人简介'>
+                  <>这个人很懒，什么也没有留下。。。。</>
+                </Form.Item>
+              )}
             </Col>
 
             <Col span={16}>
               <Form.Item wrapperCol={{ offset: 5 }}>
-                            {
-                                editFlag ? <>
-                                    <Button type='primary' htmlType='submit' style={{ marginRight: '20px' }}>保存</Button>
+                {editFlag ? (
+                  <>
+                    <Button type='primary' style={{ marginRight: '20px' }} onClick={onFinish}>
+                      保存
+                    </Button>
                     <Button onClick={() => setEditFlag(false)}>取消</Button>
-                                </> : <Button type='primary' onClick={() => setEditFlag(true)}>编辑</Button>
-                            }
+                  </>
+                ) : (
+                  <Button type='primary' onClick={() => setEditFlag(true)}>
+                    编辑
+                  </Button>
+                )}
               </Form.Item>
             </Col>
           </Row>
         </Form>
       </Card>
     </div>
+  )
 }
 
-export default UserInfo
+export default memo(UserInfo)