feat: 个人中心

2023-11-11 23:23:35 +08:00
parent eef18cf769
commit 8a9d22e0aa
7 changed files with 222 additions and 205 deletions
--- 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
--- 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 (
          <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: [
-        {
-          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 }) => (
+        <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"
+            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>
--- 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}
                            </Tooltip>
                        ) : (
-                            tagElem
+                            <div key={item.id}>
+                                {tagElem}
+                            </div>
                        );
                    })}
                {inputVisible && (
--- 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 {
--- 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;
+            }
        }
    }

--- 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<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,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 (
        <div className="question-bank-box">
-            <Spin spinning={isShowSpin}>
-                <div className="question-box">
+            <div className='mask-box' onScroll={scrollHandler}>
+                <div className="question-box" >
                    <div className="category-list-box">
                        {firstCategoryList?.length > 0 && (
                            <CategoryList
@@ -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>
-            </Spin>
+            </div>
            <div className="ranking-box">
                <RankingList />
                <ContributionList />
@@ -157,4 +195,5 @@ const QuestionBank = () => {
        </div>
    );
 }
+
 export default memo(QuestionBank)
--- 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 = (
-        <div>
-            {loading ? <LoadingOutlined /> : <PlusOutlined />}
-            <div style={{ marginTop: 8 }}>点击上传</div>
-        </div>
-    );
-
-    return <div className='user-info-box'>
-        <Card title='基本信息'>
-            <Form {...layout} colon={false} onFinish={onFinish} 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> : <>
-                                <img className='user-info_header' src={Head} />
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='用户昵称' name='nickName'>
-                            {editFlag ? <Input placeholder='请输入昵称' /> : <>
-                                暂无
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='gender'>
-                            {editFlag ? <Radio.Group>
-                                <Radio value={1}>男</Radio>
-                                <Radio value={2}>女</Radio>
-                            </Radio.Group> : <>
-                                未知
-                            </>}
-                        </Form.Item>
-                    </Col>
-                    <Col span={16}>
-                        <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱' name='email'>
-                            {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>
+  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={form}>
+          <Row>
+            <Col span={16}>
+              <Form.Item label='用户头像'>
+                <img className='user-info_header' src={Head} />
+              </Form.Item>
+            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item label='用户昵称' name='nickName'>
+                  <Input placeholder='请输入昵称' />
+                </Form.Item>
+              ) : (
+                <Form.Item label='用户昵称'>
+                  <>暂无</>
+                </Form.Item>
+              )}
+            </Col>
+            <Col span={16}>
+              {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>
+                </Form.Item>
+              ) : (
+                <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
+                  <>未知</>
+                </Form.Item>
+              )}
+            </Col>
+            <Col span={16}>
+              {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'>
+                  <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' style={{ marginRight: '20px' }} onClick={onFinish}>
+                      保存
+                    </Button>
+                    <Button onClick={() => setEditFlag(false)}>取消</Button>
+                  </>
+                ) : (
+                  <Button type='primary' onClick={() => setEditFlag(true)}>
+                    编辑
+                  </Button>
+                )}
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Card>
+    </div>
+  )
 }

-export default UserInfo
+export default memo(UserInfo)