Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 用户信息页面

Browse Source
This commit is contained in:
landaiqing
2024-07-02 20:13:48 +08:00
parent fd0510c6af
commit fffa48f558
17 changed files with 341 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Main/Share/index.tsx Normal file
View File

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

38
src/components/Main/User/UserInfo/index.module.less Normal file
View File

@@ -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;
}

112
src/components/Main/User/UserInfo/index.tsx Normal file
View File

@@ -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;

13
src/components/Main/User/UserSetting/index.module.less Normal file
View File

@@ -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;
}

81
src/components/Main/User/UserSetting/index.tsx Normal file
View File

@@ -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;

7
src/components/Main/User/index.tsx
View File

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

2
src/router/modules/main/bucket/index.ts
View File

@@ -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;

2
src/router/modules/main/file/index.ts
View File

@@ -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;

2
src/router/modules/main/home/index.ts
View File

@@ -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;

11
src/router/modules/main/share/index.ts Normal file
View File

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

11
src/router/modules/main/user/index.ts
View File

@@ -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;

11
src/router/modules/main/userInfo/index.ts Normal file
View File

@@ -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;

11
src/router/modules/main/userSetting/index.ts Normal file
View File

@@ -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;

18
src/router/routes.ts
View File

@@ -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",
Component: MainUser,
path: "/main/user/info",
Component: MainUserInfo,
},
{
path: "/main/user/setting",
Component: MainUserSetting,
},
{
path: "/main/share",
Component: MainShare,
},
],
},

2
src/views/404/404.tsx
View File

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

22
src/views/Main/_defaultProps.tsx → src/views/Main/defaultSettings.tsx
View File

@@ -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 />,
},
],
},
],
},

36
src/views/Main/index.tsx
View File

@@ -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 "./_defaultProps";
import { Link, Outlet } from "react-router-dom";
export default () => {
const [pathname, setPathname] = useState("/mainRouter/homeRouter");
import defaultProps from "./defaultSettings.tsx";
import { Link, Outlet, useLocation } from "react-router-dom";
import logo from "@/assets/images/logo.png";
import { Suspense } from "react";
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={{
pathname,
}}
location={location}
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
style={{
height: "100vh",
minHeight: 800,
}}>
<ProCard>
<div>
<Outlet />
<Suspense>
<Outlet />
</Suspense>
</div>
</ProCard>
</PageContainer>
</ProLayout>
</div>
);
};
}