feat: 退出\更新信息

2023-11-20 00:17:52 +08:00
parent 3218fccf7c
commit 4ff59f5eda
11 changed files with 217 additions and 98 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-VITE_API_HOST=http://117.72.14.166:5000
+VITE_API_HOST=http://117.72.14.166:3010
 VITE_IMG_HOST=http://117.72.14.166:9000
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import Header from '@views/header'
-import { memo, useEffect } from 'react'
+import { Suspense, memo, useEffect } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import './App.less'

@@ -25,7 +25,9 @@ const App = () => {
        className='content-box'
        style={{ width: location.pathname === '/login' ? '100%' : '1439px' }}
      >
-        <Outlet />
+        <Suspense fallback={<div></div>}>
+          <Outlet />
+        </Suspense>
      </div>
    </div>
  )
--- a/src/components/category-list/constant.js
+++ b/src/components/category-list/constant.js
@@ -1,15 +1,17 @@
-
 export const apiName = {
-    /**
-     * 获取二级和三级标签
-     */
-    getCategoryLabelInfo: '/admin/question/category/getCategoryLabelInfo',
+  /**
+   * 获取二级和三级标签
+   */
+  getCategoryLabelInfo: '/admin/question/category/getCategoryLabelInfo',

-    /**
-     * 查询大类下分类
-     */
-    queryCategoryByPrimary: '/category/queryCategoryByPrimary',
+  /**
+   * 查询大类下分类
+   */
+  queryCategoryByPrimary: '/category/queryCategoryByPrimary',

-    // 根据分类查标签
-    queryLabelByCategoryId: '/label/queryLabelByCategoryId'
-};
+  // 根据分类查标签
+  queryLabelByCategoryId: '/label/queryLabelByCategoryId',
+
+  // 查询分类及标签
+  queryCategoryAndLabel: '/category/queryCategoryAndLabel'
+}
--- a/src/components/category-list/index-new.jsx
+++ b/src/components/category-list/index-new.jsx
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,41 +1,38 @@
-
 import App from '@/App'
-import QuestionBank from '@views/question-bank';
-import UploadQuestions from '@views/upload-questions';
-import BrushQuestions from '@views/brush-questions'
-import Login from '@views/login'
-import UserInfo from '@views/user-info'
-import {
-    createBrowserRouter,
-} from "react-router-dom";
+import { lazy } from 'react'
+import { createBrowserRouter } from 'react-router-dom'

 const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <App />,
-        children: [
-            {
-                path: "question-bank",
-                element: <QuestionBank />,
-            },
-            {
-                path: "brush-question/:id",
-                element: <BrushQuestions />,
-            },
-            {
-                path: "upload-question",
-                element: <UploadQuestions />,
-            },
-            {
-                path: 'login',
-                element: <Login />
-            },
-            {
-                path: 'user-info',
-                element: <UserInfo />
-            }
-        ],
-    },
-]);
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        path: 'question-bank',
+        Component: lazy(() => import('@views/question-bank'))
+      },
+      {
+        path: 'brush-question/:id',
+        // element: <BrushQuestions />
+        Component: lazy(() => import('@views/brush-questions'))
+      },
+      {
+        path: 'upload-question',
+        // element: <UploadQuestions />
+        Component: lazy(() => import('@views/upload-questions'))
+      },
+      {
+        path: 'login',
+        // element: <Login />
+        Component: lazy(() => import('@views/login'))
+      },
+      {
+        path: 'user-info',
+        // element: <UserInfo />
+        Component: lazy(() => import('@views/user-info'))
+      }
+    ]
+  }
+])

 export default router
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,24 +1,12 @@
 import { message } from 'antd'
 import axios from 'axios'

-export const baseHttp = () => {
-  const http = axios.create({
-    baseURL: '/subject',
-    timeout: 5 * 60 * 1000, // request timeout
-    withCredentials: true, // send cookies when cross-domain requests
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8'
-    }
-  })
-
-  return http
-}
-
 export default function request(config, url) {
  // const navigate = useNavigate()
  const userInfoStorage = localStorage.getItem('userInfo')
  const userInfo = userInfoStorage ? JSON.parse(userInfoStorage) : {}
  const baseURL = url || '/subject/subject'
+  // const baseURL = url || '/subject'
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL,
--- a/src/views/header/index.tsx
+++ b/src/views/header/index.tsx
@@ -2,7 +2,8 @@ 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 { Dropdown, Input, message } from 'antd'
+import req from '@utils/request'
+import { Dropdown, Input, Modal, message } from 'antd'
 import { useNavigate } from 'react-router-dom'

 const { Search } = Input
@@ -42,10 +43,44 @@ const Header = () => {
    if (!userInfoStorage) {
      return message.info('请登录')
    }
-    if (e.key != 1) {
-      return message.info('敬请期待')
+    const { loginId } = JSON.parse(userInfoStorage)
+    switch (e.key) {
+      case '1':
+        navigate('/user-info')
+        break
+      case '4':
+        // 退出
+        Modal.confirm({
+          title: '退出提示',
+          content: '确定退出当前用户登录吗？',
+          okText: '确定',
+          cancelText: '取消',
+          onOk: () => {
+            req(
+              {
+                method: 'get',
+                url: '/user/logOut',
+                params: {
+                  userName: loginId
+                }
+              },
+              '/auth'
+            ).then(res => {
+              if (res.success) {
+                localStorage.removeItem('userInfo')
+                message.info('退出成功')
+                setTimeout(() => {
+                  navigate('/login')
+                }, 500)
+              }
+            })
+          }
+        })
+        break
+      default:
+        message.info('敬请期待')
+        break
    }
-    navigate('/user-info')
  }

  return (
@@ -62,15 +97,15 @@ const Header = () => {
        </div>
        <div className='head-navigator-user-box'>
          <div className='time-box'></div>
-          {/* {'/question-bank' == pathname && (
-						<div className="head-navigator-input-box">
-							<Search
-								placeholder="请输入感兴趣的内容～"
-								onSearch={(value) => console.log(value)}
-								style={{ width: 300, borderRadius: '10px' }}
-							/>
-						</div>
-					)} */}
+          {'/question-bank' == pathname && (
+            <div className='head-navigator-input-box'>
+              <Search
+                placeholder='请输入感兴趣的内容～'
+                onSearch={value => console.log(value)}
+                style={{ width: 300, borderRadius: '10px' }}
+              />
+            </div>
+          )}
          {/* <div className="head-navigator-bell"> */}
          {/* <Icon type="bell" /> */}
          {/* </div> */}
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -33,6 +33,8 @@ const Login = () => {
        setTimeout(() => {
          navigate('/question-bank')
        }, 1000)
+      } else {
+        message.error('登录失败，请重试')
      }
    })
  }
--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -181,7 +181,7 @@ const QuestionBank = () => {

          <div className='loading-more'>
            {questionList.length == 0
-              ? '暂无数据'
+              ? ''
              : loading && !finished
              ? '努力加载中...'
              : '我是有底线的（：'}
--- a/src/views/user-info/index.tsx
+++ b/src/views/user-info/index.tsx
@@ -1,30 +1,82 @@
 import Head from '@/imgs/head.jpg'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
 import req from '@utils/request'
-import { Button, Card, Col, Form, Input, Radio, Row, message } from 'antd'
-import { memo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Button, Card, Col, Form, Input, Radio, Row, Upload, message } from 'antd'
+import { memo, useEffect, useState } from 'react'

 import './index.less'

 const { TextArea } = Input
-const apiName = '/user/update'
+const apiName = {
+  update: '/user/update',
+  queryInfo: '/user/getUserInfo'
+}

 const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 10, offset: 1 }
 }

+const beforeUpload = (file: RcFile) => {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+  if (!isJpgOrPng) {
+    message.error('You can only upload JPG/PNG file!')
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) {
+    message.error('Image must smaller than 2MB!')
+  }
+  return isJpgOrPng && isLt2M
+}
+
+interface UserInfo {
+  nickName?: string
+  phone?: string
+  email?: string
+  sex?: string | number
+  introduce?: string
+}
+
+const Sex: Record<string, any> = {
+  1: '男',
+  2: '女'
+}
+
 const UserInfo = () => {
+  const userInfoStorage = localStorage.getItem('userInfo')
+  const { loginId = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
+
  const [form] = Form.useForm()
  const [editFlag, setEditFlag] = useState(false)
  const [loading, setLoading] = useState(false)
-  const navigate = useNavigate()
+  const [userInfo, setUserInfo] = useState<UserInfo>({})
+
+  const getUserInfo = async () => {
+    req(
+      {
+        method: 'post',
+        url: apiName.queryInfo,
+        data: {
+          userName: loginId
+        }
+      },
+      '/auth'
+    ).then(res => {
+      if (res?.success && res?.data) {
+        setUserInfo(res.data)
+        form.setFieldsValue(res.data)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (loginId) {
+      getUserInfo()
+    }
+  }, [loginId])

  const onFinish = () => {
    setLoading(true)
-    const userInfoStorage = localStorage.getItem('userInfo')
-    const { loginId = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
    const values = form.getFieldsValue()
    if (!Object.values(values).filter(Boolean).length) {
      setLoading(false)
@@ -37,7 +89,7 @@ const UserInfo = () => {
    req(
      {
        method: 'post',
-        url: apiName,
+        url: apiName.update,
        data: { ...params }
      },
      '/auth'
@@ -46,11 +98,13 @@ const UserInfo = () => {
        if (res.success) {
          message.success('更新成功')
          setTimeout(() => {
-            navigate('/question-bank')
-          }, 1000)
+            getUserInfo()
+            setLoading(false)
+            setEditFlag(false)
+          }, 500)
+        } else {
+          setLoading(false)
        }
-        setLoading(false)
-        setEditFlag(false)
      })
      .catch(() => {
        message.error('更新失败')
@@ -58,6 +112,10 @@ const UserInfo = () => {
      })
  }

+  const handleChange = info => {
+    console.log(info)
+  }
+
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
@@ -71,9 +129,33 @@ const UserInfo = () => {
        <Form {...layout} colon={false} form={form}>
          <Row>
            <Col span={16}>
-              <Form.Item label='用户头像'>
+              {editFlag ? (
+                <Form.Item label='用户头像' name='avatar'>
+                  <Upload
+                    name='uploadFile'
+                    listType='picture-card'
+                    className='avatar-uploader'
+                    accept='image/*'
+                    showUploadList={false}
+                    action='http://117.72.14.166:4000/upload'
+                    data={{
+                      bucket: 'jichi',
+                      objectName: 'icon'
+                    }}
+                    // beforeUpload={beforeUpload}
+                    onChange={handleChange}
+                  >
+                    {uploadButton}
+                  </Upload>
+                </Form.Item>
+              ) : (
+                <Form.Item label='用户头像'>
+                  <img className='user-info_header' src={Head} />
+                </Form.Item>
+              )}
+              {/* <Form.Item label='用户头像'>
                <img className='user-info_header' src={Head} />
-              </Form.Item>
+              </Form.Item> */}
            </Col>
            <Col span={16}>
              {editFlag ? (
@@ -82,7 +164,7 @@ const UserInfo = () => {
                </Form.Item>
              ) : (
                <Form.Item label='用户昵称'>
-                  <>暂无</>
+                  <>{userInfo.nickName || ''}</>
                </Form.Item>
              )}
            </Col>
@@ -96,7 +178,7 @@ const UserInfo = () => {
                </Form.Item>
              ) : (
                <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
-                  <>未知</>
+                  <>{userInfo.sex ? Sex[userInfo.sex] : '未知'}</>
                </Form.Item>
              )}
            </Col>
@@ -107,7 +189,7 @@ const UserInfo = () => {
                </Form.Item>
              ) : (
                <Form.Item label='手机号码'>
-                  <>暂无</>
+                  <>{userInfo.phone || ''}</>
                </Form.Item>
              )}
            </Col>
@@ -121,7 +203,7 @@ const UserInfo = () => {
                </Form.Item>
              ) : (
                <Form.Item label='邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱'>
-                  <>暂无</>
+                  <>{userInfo.email || ''}</>
                </Form.Item>
              )}
            </Col>
@@ -132,7 +214,7 @@ const UserInfo = () => {
                </Form.Item>
              ) : (
                <Form.Item label='个人简介'>
-                  <>这个人很懒，什么也没有留下。。。。</>
+                  <>{userInfo.introduce || '这个人很懒，什么也没有留下。。。。'}</>
                </Form.Item>
              )}
            </Col>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,22 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig, loadEnv } from 'vite'
+
 const path = require('path')

 // https://vitejs.dev/config/
 export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return defineConfig({
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vendor: ['react', 'react-dom', 'react-router-dom'],
+            common: ['axios', 'lodash', 'pubsub-js', 'wangeditor']
+          }
+        }
+      }
+    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),