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;