feat: 用户信息页面

src/components/Main/Share/index.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import { FunctionComponent } from "react";
+
+const MainShare: FunctionComponent = () => {
+	return <div>分享</div>;
+};
+export default MainShare;

src/components/Main/User/UserInfo/index.module.less

@@ -0,0 +1,38 @@
+.user_info_header {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-image: url("@/assets/images/background.png") ;
+	background-size: cover;
+	border-radius: 10px;
+	height: 150px;
+	box-shadow: rgba(15, 15, 16, 0.18) 0px 10px 10px;;
+}
+.user_info_header_avatar {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+.user_info_header_name {
+	font-weight: bold;
+	color: #000000;
+}
+.user_info_header_desc {
+	width: 300px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+.user_info_center_content{
+	margin-top: 20px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+.user_info_bottom_content {
+	margin-top: 20px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}

src/components/Main/User/UserInfo/index.tsx

@@ -0,0 +1,112 @@
+/** @format */
+import { FunctionComponent } from "react";
+import { Avatar, Card, Empty, List } from "antd";
+import {
+	AntDesignOutlined,
+	BankOutlined,
+	BulbOutlined,
+	EnvironmentOutlined,
+} from "@ant-design/icons";
+import styles from "./index.module.less";
+import { ProCard } from "@ant-design/pro-components";
+import Meta from "antd/es/card/Meta";
+import gitee from "@/assets/icons/gitee.svg";
+import { Link } from "react-router-dom";
+
+const UserInfo: FunctionComponent = () => {
+	const data = [
+		{
+			title: "Ant Design Title 1",
+		},
+		{
+			title: "Ant Design Title 2",
+		},
+		{
+			title: "Ant Design Title 3",
+		},
+		{
+			title: "Ant Design Title 4",
+		},
+	];
+	return (
+		<>
+			<div className={styles.user_info_header}>
+				<div className={styles.user_info_header_avatar}>
+					<Avatar
+						size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+						icon={<AntDesignOutlined />}
+					/>
+					<span className={styles.user_info_header_name}>用户名</span>
+					<div className={styles.user_info_header_desc}>
+						<div>
+							<BulbOutlined /> 前端架构师
+						</div>
+						<div>
+							<EnvironmentOutlined /> 成都
+						</div>
+						<div>
+							<BankOutlined /> 成都市上城
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className={styles.user_info_center_content}>
+				<ProCard
+					bordered
+					style={{ maxWidth: "64%" }}
+					title="我的存储商"
+					boxShadow
+					extra={<Link to={"#"}>查看更多</Link>}>
+					<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
+						<Meta
+							avatar={<Avatar src={gitee} />}
+							title="Card title"
+							description="This is the description"
+						/>
+					</Card>
+				</ProCard>
+				<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
+					<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
+						<Meta
+							avatar={
+								<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
+							}
+							title="Card title"
+							description="This is the description"
+						/>
+					</Card>
+				</ProCard>
+			</div>
+			<div className={styles.user_info_bottom_content}>
+				<ProCard
+					bordered
+					style={{ maxWidth: "64%" }}
+					title="最近动态"
+					boxShadow
+					extra={<Link to={"#"}>查看更多</Link>}>
+					<List
+						itemLayout="horizontal"
+						dataSource={data}
+						renderItem={(item, index) => (
+							<List.Item>
+								<List.Item.Meta
+									avatar={
+										<Avatar
+											src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
+										/>
+									}
+									title={<a href="https://ant.design">{item.title}</a>}
+									description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+								/>
+							</List.Item>
+						)}
+					/>
+				</ProCard>
+				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
+					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+				</ProCard>
+			</div>
+		</>
+	);
+};
+export default UserInfo;

src/components/Main/User/UserSetting/index.module.less

@@ -0,0 +1,13 @@
+.user_setting_main{
+	display: flex;
+	flex-direction: column;
+	.user_setting_content{
+		margin-top: 20px;
+	}
+}
+.user_setting_header{
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+}

src/components/Main/User/UserSetting/index.tsx

@@ -0,0 +1,81 @@
+/** @format */
+import { FunctionComponent } from "react";
+import { ProCard } from "@ant-design/pro-components";
+import { AntDesignOutlined } from "@ant-design/icons";
+import { Avatar, Descriptions, DescriptionsProps, Tabs } from "antd";
+import styles from "./index.module.less";
+
+const UserSetting: FunctionComponent = () => {
+	const items: DescriptionsProps["items"] = [
+		{
+			key: "1",
+			label: "用户名",
+			children: "Zhou Maomao",
+		},
+		{
+			key: "2",
+			label: "账号ID",
+			children: "1810000000",
+		},
+		{
+			key: "3",
+			label: "注册时间",
+			children: "Hangzhou, Zhejiang",
+		},
+		{
+			key: "4",
+			label: "邮箱",
+			children: "landaiqing@126.com",
+		},
+		{
+			key: "5",
+			label: "手机号",
+			children: "13333333333333",
+		},
+	];
+
+	const TabItems = [
+		{
+			label: <span>基础信息</span>,
+			key: "baseInfo",
+			children: (
+				<div>
+					11111111111111111111111111111111111111111111111111111111111111111111111111111111
+				</div>
+			),
+		},
+		{
+			label: <span>安全设置</span>,
+			key: "security",
+		},
+	];
+	const onChange = (key: string) => {
+		console.log(key);
+	};
+	return (
+		<>
+			<div className={styles.user_setting_main}>
+				<ProCard boxShadow>
+					<div className={styles.user_setting_header}>
+						<Avatar
+							size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+							icon={<AntDesignOutlined />}
+						/>
+
+						<Descriptions
+							style={{ width: "80%", marginLeft: "50px" }}
+							items={items}
+							column={3}
+							size={"small"}></Descriptions>
+					</div>
+				</ProCard>
+				<div className={styles.user_setting_content}>
+					<ProCard boxShadow>
+						<Tabs onChange={onChange} type="card" items={TabItems}></Tabs>
+					</ProCard>
+				</div>
+			</div>
+		</>
+	);
+};
+export default UserSetting;

src/components/Main/User/index.tsx

@@ -1,7 +0,0 @@
-/** @format */
-import { FunctionComponent } from "react";
-
-const User: FunctionComponent = () => {
-	return <div>用户中心</div>;
-};
-export default User;

src/router/modules/main/bucket/index.ts

@@ -5,7 +5,7 @@ import { lazy } from "react";
 const MainBucket = lazy(
 	() =>
 		new Promise((resolve: any) => {
-			setTimeout(() => resolve(import("@/components/Main/Bucket")), 500);
+			resolve(import("@/components/Main/Bucket"));
 		}),
 );
 export default MainBucket;

src/router/modules/main/file/index.ts

@@ -5,7 +5,7 @@ import { lazy } from "react";
 const MainFile = lazy(
 	() =>
 		new Promise((resolve: any) => {
-			setTimeout(() => resolve(import("@/components/Main/File")), 500);
+			resolve(import("@/components/Main/File"));
 		}),
 );
 export default MainFile;

src/router/modules/main/home/index.ts

@@ -5,7 +5,7 @@ import { lazy } from "react";
 const MainHome = lazy(
 	() =>
 		new Promise((resolve: any) => {
-			setTimeout(() => resolve(import("@/components/Main/Home")), 500);
+			resolve(import("@/components/Main/Home"));
 		}),
 );
 export default MainHome;

src/router/modules/main/share/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainShare = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Share"));
+		}),
+);
+export default MainShare;

src/router/modules/main/user/index.ts

@@ -1,11 +0,0 @@
-/** @format */
-
-import { lazy } from "react";
-
-const MainUser = lazy(
-	() =>
-		new Promise((resolve: any) => {
-			setTimeout(() => resolve(import("@/components/Main/User")), 500);
-		}),
-);
-export default MainUser;

src/router/modules/main/userInfo/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainUserInfo = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/User/UserInfo"));
+		}),
+);
+export default MainUserInfo;

src/router/modules/main/userSetting/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainUserSetting = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/User/UserSetting"));
+		}),
+);
+export default MainUserSetting;

src/router/routes.ts

@@ -13,7 +13,9 @@ import Home from "@/router/modules/home";
 import MainHome from "@/router/modules/main/home";
 import MainBucket from "@/router/modules/main/bucket";
 import MainFile from "@/router/modules/main/file";
-import MainUser from "@/router/modules/main/user";
+import MainUserInfo from "@/router/modules/main/userInfo";
+import MainUserSetting from "@/router/modules/main/userSetting";
+import MainShare from "@/router/modules/main/share";
 
 const routes: RouteObject[] = [
 	{
@@ -25,7 +27,7 @@ const routes: RouteObject[] = [
 		Component: (props) => ComponentLoading(Register, props),
 	},
 	{
-		path: "/404",
+		path: "*",
 		Component: (props) => ComponentLoading(NoFound, props),
 	},
 	{
@@ -54,8 +56,16 @@ const routes: RouteObject[] = [
 				Component: MainFile,
 			},
 			{
-				path: "/main/user",
+				path: "/main/user/info",
-				Component: MainUser,
+				Component: MainUserInfo,
+			},
+			{
+				path: "/main/user/setting",
+				Component: MainUserSetting,
+			},
+			{
+				path: "/main/share",
+				Component: MainShare,
 			},
 		],
 	},

src/views/404/404.tsx

@@ -6,7 +6,7 @@ import { Button, Result } from "antd";
 export default () => {
 	const navigate = useNavigate();
 	const goBack = () => {
-		navigate(-2);
+		navigate(-1);
 	};
 
 	return (

src/views/Main/defaultSettings.tsx

@@ -8,7 +8,7 @@ export default {
 		routes: [
 			{
 				path: "main/home",
-				name: "首 页",
+				name: "仪表盘",
 				icon: <SmileFilled />,
 			},
 			{
@@ -22,9 +22,27 @@ export default {
 				icon: <SmileFilled />,
 			},
 			{
-				path: "main/user",
+				path: "main/share",
+				name: "分享圈",
+				icon: <SmileFilled />,
+			},
+			{
+				path: "/",
 				name: "个人中心",
 				icon: <SmileFilled />,
+				routes: [
+					{
+						index: true,
+						path: "main/user/info",
+						name: "用户信息",
+						icon: <SmileFilled />,
+					},
+					{
+						path: "main/user/setting",
+						name: "用户设置",
+						icon: <SmileFilled />,
+					},
+				],
 			},
 		],
 	},

src/views/Main/index.tsx

@@ -2,13 +2,13 @@
 
 import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons";
 import { PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
-import { useState } from "react";
+import defaultProps from "./defaultSettings.tsx";
-import defaultProps from "./_defaultProps";
+import { Link, Outlet, useLocation } from "react-router-dom";
-import { Link, Outlet } from "react-router-dom";
+import logo from "@/assets/images/logo.png";
-
+import { Suspense } from "react";
-export default () => {
-	const [pathname, setPathname] = useState("/mainRouter/homeRouter");
 
+export default function Layout() {
+	const location: any = useLocation();
 	return (
 		<div
 			id="test-pro-layout"
@@ -16,6 +16,11 @@ export default () => {
 				height: "100vh",
 			}}>
 			<ProLayout
+				logo={logo}
+				layout={"mix"}
+				// contentWidth={"Fluid"}
+				menu={{ defaultOpenAll: true, hideMenuWhenCollapsed: false }}
+				title={"五味子云存储"}
 				siderWidth={216}
 				menuItemRender={(menuItemProps, defaultDom) => {
 					if (menuItemProps.isUrl || !menuItemProps.path) {
@@ -24,15 +29,14 @@ export default () => {
 					return <Link to={menuItemProps.path}>{defaultDom}</Link>;
 				}}
 				{...defaultProps}
-				location={{
+				location={location}
-					pathname,
-				}}
 				avatarProps={{
 					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
 					title: "七妮妮",
 					size: "small",
 				}}
-				actionsRender={(props) => {
+				actionsRender={(props: any) => {
+					// eslint-disable-next-line react/prop-types
 					if (props.isMobile) return [];
 					return [
 						<InfoCircleFilled key="InfoCircleFilled" />,
@@ -41,17 +45,15 @@ export default () => {
 					];
 				}}>
 				<PageContainer>
-					<ProCard
+					<ProCard>
-						style={{
-							height: "100vh",
-							minHeight: 800,
-						}}>
 						<div>
-							<Outlet />
+							<Suspense>
+								<Outlet />
+							</Suspense>
 						</div>
 					</ProCard>
 				</PageContainer>
 			</ProLayout>
 		</div>
 	);
-};
+}