feat: 个人信息

src/views/header/index.tsx

@@ -0,0 +1,97 @@
+import { Input, Dropdown, message } from 'antd';
+import Logo from '@/imgs/logo.jpg'
+import Head from '@/imgs/head.jpg'
+import TopMenu from '@components/top-menu'
+import { UserOutlined, HeartOutlined, LikeOutlined, LoginOutlined } from '@ant-design/icons'
+
+const { Search } = Input;
+
+const menuItems = [
+	{
+		label: '个人中心',
+		key: 1,
+		icon: <UserOutlined style={{ fontSize: '16px' }} />
+	},
+	{
+		label: '我的收藏',
+		key: 2,
+		icon: <HeartOutlined style={{ fontSize: '16px' }} />
+	}, {
+		label: '我的点赞',
+		key: 3,
+		icon: <LikeOutlined style={{ fontSize: '16px' }} />
+	},
+	{
+		type: 'divider',
+	},
+	{
+		label: '退出',
+		key: 4,
+		icon: <LoginOutlined style={{ fontSize: '16px' }} />
+	}
+]
+
+const Header = () => {
+	const { pathname } = window.location;
+
+
+	const handleMenuClick = e => {
+		console.log(e)
+		if (e.key != 1) {
+			return message.info('敬请期待')
+		}
+	}
+
+	return (
+		<div className="head-navigator-box">
+			<div className="head-navigator">
+				<div className="head-navigator-left">
+					<div
+						className="head-navigator-logo"
+						onClick={() =>
+							(window.location.href = '/question-bank')
+						}>
+						<img src={Logo} style={{ height: 50 }} />
+					</div>
+					<TopMenu />
+				</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>
+					)}
+					<div className="head-navigator-bell">
+						{/* <Icon type="bell" /> */}
+					</div>
+					<div className="head-navigator-user-img">
+						<Dropdown
+							menu={{
+								items: menuItems,
+								onClick: handleMenuClick,
+							}}
+							placement="bottom"
+							trigger={['click']}
+							destroyPopupOnHide
+							overlayStyle={{
+								width: '150px'
+							}}
+						>
+							<img
+								src={Head}
+								style={{ width: 36, height: 36 }}
+							/>
+						</Dropdown>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+export default Header

src/views/login/index.tsx

@@ -0,0 +1,8 @@
+
+const Login = () => {
+    return (<div>
+        login
+    </div>)
+}
+
+export default Login

src/views/question-bank/constant.ts

@@ -1,4 +1,4 @@
-import JavaImg from '@views/imgs/javaImg.png'
+// import JavaImg from '@views/imgs/javaImg.png'
 /**
  * 难度等级
  */
@@ -73,7 +73,7 @@ export const apiName = {
 
 export const imgObject = {
     clickImg:
-        'https://img13.360buyimg.com/imagetools/jfs/t1/222669/25/807/6590/617f4f06Eb2094586/64c39ce3769b8a16.png',
+        'http://117.72.14.166:9000/jichi/icon/%E7%83%AD%E9%97%A8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231102%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231102T153146Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e6b8cdb3231b1c3d7114212cb9278ecc17cf6d4ec0f759ea0200e04156d4c8b7',
     ranking1Img:
         'https://img12.360buyimg.com/imagetools/jfs/t1/110906/3/22471/3750/6214a3bfE392596cf/122c9e4b30948682.png',
     ranking2Img:
@@ -88,7 +88,7 @@ export const imgObject = {
         'https://img11.360buyimg.com/imagetools/jfs/t1/206213/24/13307/2603/617f4fc4E676d448d/622d5287fbf5a919.png',
     dataImg:
         'https://img12.360buyimg.com/imagetools/jfs/t1/207558/34/7606/3672/617f4fc4E1ca685fc/3953a92a6072fba4.png',
-    javaImg: JavaImg,
+    // javaImg: JavaImg,
     npmImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/200551/24/15367/3145/617f4fc4Ea153dc2e/b4bbf2de8807f42d.png',
     parallelComputingImg:
         'https://img14.360buyimg.com/imagetools/jfs/t1/207198/23/7638/3037/617f4fc4E0e20ab9d/40197a6c79c5a33f.png',

src/views/user-info/index.less

@@ -0,0 +1,4 @@
+.user-info-box{
+    background-color: white;
+    height: 100%;
+}

src/views/user-info/index.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { Form, Row, Col, Input, Button, Card } from 'antd'
+
+import './index.less'
+
+const layout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 10, offset: 1 }
+}
+
+const UserInfo = () => {
+
+    const [editFields, setEditFields] = useState<Record<string, any>>({
+        nickName: false,
+        gender: false,
+        introduce: false,
+        birth: false
+    })
+
+    const changeEditFields = (field: string) => {
+        setEditFields({
+            ...editFields,
+            [field]: !editFields[field]
+        })
+    }
+
+    return <div className='user-info-box'>
+        <Card title='基本信息'>
+            <Form {...layout} colon={false}>
+                <Row >
+                    <Col span={16}>
+                        <Form.Item label='用户昵称'>
+                            {editFields.nickName ? <Input placeholder='请输入昵称' /> : <>
+                                昵称
+                            </>}
+                        </Form.Item>
+                    </Col>
+                    <Col span={16}>
+                        <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'>
+                            <Input />
+                        </Form.Item>
+                    </Col>
+                    <Col span={16}>
+                        <Form.Item label='个人简介'>
+                            <Input />
+                        </Form.Item>
+                    </Col>
+                    <Col span={16}>
+                        <Form.Item label='出生日期'>
+                            <Input />
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Card>
+
+    </div>
+}
+
+export default UserInfo