feat: 退出\更新信息

.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

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>
   )

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

src/router/index.tsx

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

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,

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) {
+    const { loginId } = JSON.parse(userInfoStorage)
-      return message.info('敬请期待')
+    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 && (
+          {'/question-bank' == pathname && (
-						<div className="head-navigator-input-box">
+            <div className='head-navigator-input-box'>
-							<Search
+              <Search
-								placeholder="请输入感兴趣的内容～"
+                placeholder='请输入感兴趣的内容～'
-								onSearch={(value) => console.log(value)}
+                onSearch={value => console.log(value)}
-								style={{ width: 300, borderRadius: '10px' }}
+                style={{ width: 300, borderRadius: '10px' }}
-							/>
+              />
-						</div>
+            </div>
-					)} */}
+          )}
           {/* <div className="head-navigator-bell"> */}
           {/* <Icon type="bell" /> */}
           {/* </div> */}

src/views/login/index.tsx

@@ -33,6 +33,8 @@ const Login = () => {
         setTimeout(() => {
           navigate('/question-bank')
         }, 1000)
+      } else {
+        message.error('登录失败，请重试')
       }
     })
   }

src/views/question-bank/index.tsx

@@ -181,7 +181,7 @@ const QuestionBank = () => {
 
           <div className='loading-more'>
             {questionList.length == 0
-              ? '暂无数据'
+              ? ''
               : loading && !finished
               ? '努力加载中...'
               : '我是有底线的（：'}

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 { Button, Card, Col, Form, Input, Radio, Row, Upload, message } from 'antd'
-import { memo, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 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')
+            getUserInfo()
-          }, 1000)
+            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>

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'),