Skip to content

Commit c1c41d3

Browse files
ChenlingasMxjaywcjlove
ChenlingasMx
authored and
jaywcjlove
committed
fix:team团队页面调用github用户信息接口
1 parent d140274 commit c1c41d3

File tree

2 files changed

+87
-63
lines changed

2 files changed

+87
-63
lines changed

‎website/src/pages/team/index.module.less‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@
33
background: #fff;
44
padding:23px;
55
}
6-
6+
.header {
7+
padding: 40px;
8+
background: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ);
9+
background-size: cover;
10+
}
711
.avatar {
12+
background:blue;
813
margin-left: 24px ;
914
margin-bottom: 24px;
1015
a {
@@ -14,19 +19,32 @@
1419
margin-left: 5px;
1520
}
1621
}
17-
1822
img {
1923
margin-right: 12px;
20-
width: 51px;
24+
width: 31px;
2125
border-radius: 50px;
2226
}
2327
}
2428

25-
.center {
29+
.font {
30+
font-size: 20px;
31+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
32+
font-weight: 500;
33+
}
34+
35+
// 头像和名字横向布局
36+
.flex_column {
2637
display: flex;
2738
align-items: center;
2839
justify-items: center;
29-
// flex-direction: column;
40+
}
41+
42+
// 头像列表纵向布局
43+
.flex_column_avatar {
44+
display: flex;
45+
align-items: flex-start;
46+
justify-items: center;
47+
flex-direction: column;
3048
}
3149

3250

‎website/src/pages/team/index.tsx‎

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,64 @@
1-
import React from 'react';
21
import { DefaultProps } from '../../';
32
import styles from './index.module.less';
43
import FooterTitle from '../../component/Footer'
5-
import { Layout, Row, Col } from 'uiw';
6-
const { Footer, Content, Header } = Layout;
4+
import { Layout, Row, Col, Loader } from 'uiw';
5+
import { useFetch } from '../../hook/useFetch'
6+
const { Footer, Content } = Layout;
7+
8+
79

810
export default function Team(props: DefaultProps) {
11+
912
const developInfo = [
10-
{ userName: "jaywcjlove", name: "小弟调调™", id: 1 },
11-
{ userName: "xingyuefeng", name: "xyf", id: 2 },
12-
{ userName: "ChenlingasMx", name: "Chenling", id: 3 },
13-
{ userName: "matuancc", name: "cc", id: 4 },
14-
{ userName: "yaochuxia", name: "yaochuxia", id: 5 },
15-
{ userName: "wj0990", name: "wangjie", id: 6 },
13+
{ userName: "jaywcjlove", id: 1 },
14+
{ userName: "xingyuefeng", id: 2 },
15+
{ userName: "ChenlingasMx", id: 3 },
16+
{ userName: "matuancc", id: 4 },
17+
{ userName: "yaochuxia", id: 5 },
18+
{ userName: "wj0990", id: 6 },
1619
]
1720
const designInfo = [
18-
{ userName: "jaywcjlove", name: "小弟调调™", id: 1 },
19-
{ userName: "matuancc", name: "cc", id: 4 },
20-
{ userName: "yaochuxia", name: "yaochuxia", id: 5 },
21+
{ userName: "jaywcjlove", id: 1 },
22+
{ userName: "matuancc", id: 2 },
23+
{ userName: "yaochuxia", id: 3 },
2124
]
2225
const documentInfo = [
23-
{ userName: "jaywcjlove", name: "小弟调调™", id: 1 },
24-
{ userName: "ChenlingasMx", name: "Chenling", id: 3 },
26+
{ userName: "jaywcjlove", id: 1 },
27+
{ userName: "ChenlingasMx", id: 2 },
2528
]
2629
return (
2730
<Layout>
28-
<Header style={{ background: "#fff" }}>
29-
<div>
30-
<span style={{ color: "#697b8c", fontSize: 16, fontWeight: 500 }}>UIW Mobile RN 一个基于 React Native 的 UI 组件库</span>
31-
</div>
32-
</Header>
31+
<header className={styles.header}>
32+
<div style={{ fontSize: 36, fontWeight: 500 }}>UIW Mobile</div>
33+
<div style={{ color: "#697b8c", fontSize: 18, fontWeight: 500 }}>RN 一个基于 React Native 的 UI 组件库</div>
34+
</header>
3335
<Content>
34-
<Row justify="flex-start">
35-
<Col className={styles.warpper}>
36-
<div style={{ display: "flex", justifyItems: 'center', alignItems: "flex-start", flexDirection: 'column' }}>
37-
<h4 style={{ fontSize: 20, fontFamily: "fantasy", fontWeight: 500 }}>开发</h4>
38-
<AvatarList avatarInfo={developInfo} />
39-
</div>
40-
</Col>
41-
<Col className={styles.warpper}>
42-
<div style={{ display: "flex", justifyItems: 'center', alignItems: "flex-start", flexDirection: 'column' }}>
43-
<h4 style={{ fontSize: 20, fontFamily: "fantasy", fontWeight: 500 }}>设计</h4>
44-
<AvatarList avatarInfo={designInfo} />
45-
</div>
46-
</Col>
47-
<Col className={styles.warpper}>
48-
<div style={{ display: "flex", justifyItems: 'center', alignItems: "flex-start", flexDirection: 'column' }}>
49-
<h4 style={{ fontSize: 20, fontFamily: "fantasy", fontWeight: 500 }}>文档</h4>
50-
<AvatarList avatarInfo={documentInfo} />
51-
</div>
52-
</Col>
53-
</Row>
36+
<Row justify="flex-start">
37+
<Col className={styles.warpper}>
38+
<div className={styles.flex_column_avatar}>
39+
<h4 className={styles.font}>开发</h4>
40+
{
41+
developInfo.map(itm => <div key={itm.id}><AvatarList userName={itm.userName} /></div>)
42+
}
43+
</div>
44+
</Col>
45+
<Col className={styles.warpper}>
46+
<div className={styles.flex_column_avatar}>
47+
<h4 className={styles.font}>设计</h4>
48+
{
49+
designInfo.map(itm => <div key={itm.id}><AvatarList userName={itm.userName} /></div>)
50+
}
51+
</div>
52+
</Col>
53+
<Col className={styles.warpper}>
54+
<div className={styles.flex_column_avatar}>
55+
<h4 className={styles.font}>文档</h4>
56+
{
57+
documentInfo.map(itm => <div key={itm.id}><AvatarList userName={itm.userName} /></div>)
58+
}
59+
</div>
60+
</Col>
61+
</Row>
5462
</Content>
5563
<Footer>
5664
< FooterTitle />
@@ -59,30 +67,28 @@ export default function Team(props: DefaultProps) {
5967
);
6068
}
6169

70+
71+
6272
type PropsDeafult = {
63-
avatarInfo: Array<{
64-
userName: string;
65-
name: string;
66-
id: number
67-
}>
73+
userName: string
6874
}
6975

7076
function AvatarList(props: PropsDeafult) {
71-
const { avatarInfo = [] } = props
77+
const { userName } = props
78+
const res: any = useFetch(`https://api.github.com/users/${userName}`)
79+
if (!res) {
80+
return <span />
81+
}
7282
return (
73-
<div className={styles.flex_item}>
74-
{
75-
avatarInfo.map(item =>
76-
<span className={styles.avatar} key={item.id}>
77-
<div className={styles.center}>
78-
<a href={`https://github.com/${item.userName}`} target="__blank">
79-
<img src={`https://avatars.githubusercontent.com/${item.userName}`} alt={item.name} />
80-
</a>
81-
<span style={{ fontSize: 18 }}>{item.name}</span>
82-
</div>
83-
</span>
84-
)
85-
}
83+
<div>
84+
<span className={styles.avatar}>
85+
<div className={styles.flex_column}>
86+
<a href={`https://github.com/${userName}`} target="__blank">
87+
<img src={`https://avatars.githubusercontent.com/${userName}`} alt={res?.response?.name} />
88+
</a>
89+
<a href={`https://github.com/${userName}`} style={{ fontSize: 18, color: "#697b8c" }}>{res?.response?.name}</a>
90+
</div>
91+
</span>
8692
</div>
8793
)
8894
}

0 commit comments

Comments
 (0)