Skip to content

Commit 706e647

Browse files
thonatosthonatos
authored
Merge pull request #3 from JASONPANGGO/feat/init
feat: add user page
2 parents 3405109 + c9a5cf6 commit 706e647

File tree

12 files changed

+265
-70
lines changed

12 files changed

+265
-70
lines changed

‎config/routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ const routes: IRoute[] = [
4545
exact: true,
4646
component: '@/page/topic/detail',
4747
},
48+
{
49+
path: '/user/:loginname',
50+
exact: true,
51+
component: '@/page/user/',
52+
},
4853
],
4954
},
5055

‎src/constants/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const TABS_MAP = {
1111
},
1212
ask: {
1313
name: '问答',
14-
color: '#5BD8A6',
14+
color: '#999',
1515
},
1616
job: {
1717
name: '招聘',
@@ -21,6 +21,10 @@ export const TABS_MAP = {
2121
name: '客户端测试',
2222
color: 'green',
2323
},
24+
dev: {
25+
name: '客户端测试',
26+
color: 'green',
27+
},
2428
};
2529

2630
export type TabType = keyof typeof TABS_MAP;

‎src/layout/index.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,29 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
6363
};
6464
}
6565

66+
if (location.pathname.match(/\/user\/(.*)/g)) {
67+
const loginname = location.pathname.split('/').pop();
68+
69+
headerConfig = {
70+
title: null,
71+
breadcrumb: {
72+
itemRender: (route: { path: string; breadcrumbName: string }) => {
73+
return <Link to={route.path}>{route.breadcrumbName}</Link>;
74+
},
75+
routes: [
76+
{
77+
path: '/',
78+
breadcrumbName: '主页',
79+
},
80+
{
81+
path: location.pathname,
82+
breadcrumbName: loginname,
83+
},
84+
],
85+
},
86+
};
87+
}
88+
6689
return (
6790
<PageContainer header={headerConfig}>
6891
<ProCard gutter={16} bordered={false} ghost>

‎src/page/topic/component/CommentList/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CommentList: React.FC<Props> = (props) => {
3434
const { list, onReply, replyRender } = props;
3535
const tree = unflatten(list);
3636

37-
const ComentDetail: React.FC<{
37+
const CommentDetail: React.FC<{
3838
data: Node;
3939
}> = ({ data }) => {
4040
const { id, author, content, create_at, children } = data;
@@ -69,7 +69,7 @@ const CommentList: React.FC<Props> = (props) => {
6969
{replyRender(id)}
7070

7171
{children?.map((item) => (
72-
<ComentDetail key={`detail-${id}-${item.id}`} data={item} />
72+
<CommentDetail key={`detail-${id}-${item.id}`} data={item} />
7373
))}
7474
</Comment>
7575
</Fragment>
@@ -79,7 +79,7 @@ const CommentList: React.FC<Props> = (props) => {
7979
return (
8080
<div className={styles.list}>
8181
{tree.map((item) => (
82-
<ComentDetail key={`list-${item.id}`} data={item} />
82+
<CommentDetail key={`list-${item.id}`} data={item} />
8383
))}
8484
</div>
8585
);

‎src/page/topic/component/SubTitle.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React from 'react';
22
import dayjs from 'dayjs';
33

4-
import { Avatar, Divider, Space } from 'antd';
4+
import { Avatar, Divider, Space, Button } from 'antd';
5+
import { Link } from 'umi';
56

67
const SubTitle: React.FC<Props> = (props) => {
78
const { author, create_at, visit_count, reply_count } = props;
89
return (
910
<Space size={0} split={<Divider type="vertical"></Divider>}>
10-
<Avatar size="small" src={author.avatar_url} alt={author.loginname} />
11+
<Link to={`/user/${author.loginname}`}>
12+
<Avatar size="small" src={author.avatar_url} alt={author.loginname} />
13+
</Link>
1114
<span>发布：{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}</span>
1215
<span>浏览：{visit_count}</span>
1316
<span>回复：{reply_count}</span>

‎src/page/topic/component/TopicItemList/index.less‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.list {
2+
:global {
3+
.ant-card {
4+
padding: 0;
5+
> .ant-card-body {
6+
padding: 0;
7+
}
8+
}
9+
}
10+
}

‎src/page/topic/component/TopicItemList/index.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { TABS_MAP, TabType } from '@/constants';
2+
import ProList, { ProListMetas } from '@ant-design/pro-list';
3+
import { Space, Avatar, Tag } from 'antd';
4+
import React from 'react';
5+
import dayjs from 'dayjs';
6+
import { useHistory } from 'umi';
7+
import { ListToolBarProps } from '@ant-design/pro-table';
8+
import * as styles from './index.less';
9+
10+
const TopicItemList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
11+
const history = useHistory();
12+
13+
const metas: ProListMetas = {
14+
avatar: {
15+
dataIndex: 'author.avatar_url',
16+
render: (_, entity) => {
17+
const { tab: _tab, author, reply_count, visit_count, top } = entity;
18+
19+
const category = TABS_MAP[_tab as TabType];
20+
21+
const renderReplyVisit = () =>
22+
typeof visit_count === 'number' && (
23+
<div
24+
style={{
25+
width: '96px',
26+
padding: '0 8px',
27+
}}
28+
>
29+
<span
30+
style={{
31+
color: '#9e78c0',
32+
}}
33+
>
34+
{reply_count}
35+
</span>
36+
/<span>{visit_count}</span>
37+
</div>
38+
);
39+
40+
return (
41+
<Space>
42+
<Avatar size="small" src={author.avatar_url} />
43+
{renderReplyVisit()}
44+
{top ? (
45+
<Tag color="#5BD8A6">置顶</Tag>
46+
) : (
47+
category && <Tag color={category.color}>{category.name}</Tag>
48+
)}
49+
</Space>
50+
);
51+
},
52+
},
53+
title: {
54+
dataIndex: 'title',
55+
valueType: 'text',
56+
},
57+
actions: {
58+
render: (_, entity) => {
59+
const { last_reply_at } = entity;
60+
return dayjs(last_reply_at).fromNow();
61+
},
62+
},
63+
};
64+
65+
return (
66+
<ProList
67+
rowKey="id"
68+
showActions="always"
69+
dataSource={dataSource}
70+
loading={loading}
71+
metas={metas}
72+
className={styles.list}
73+
toolbar={toolbar}
74+
onRow={(record) => {
75+
return {
76+
onClick: () => {
77+
history.push(`/topic/${record.id}`);
78+
},
79+
};
80+
}}
81+
/>
82+
);
83+
};
84+
85+
export default TopicItemList;
86+
87+
interface Props {
88+
dataSource?: any[];
89+
loading?: boolean;
90+
toolbar?: ListToolBarProps;
91+
}

‎src/page/topic/index.tsx‎

Lines changed: 4 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import React, { useEffect } from 'react';
2-
import dayjs from 'dayjs';
32

43
import { useHistory, useAccess } from 'umi';
5-
import { Avatar, Tag, Space, Divider, Button } from 'antd';
4+
import { Divider, Button } from 'antd';
65
import { useRequest, useReactive } from 'ahooks';
7-
import { ProListMetas } from '@ant-design/pro-list';
8-
import ProList from '@ant-design/pro-list';
96
import { ReloadOutlined, EditOutlined } from '@ant-design/icons';
107

118
import { TABS_MAP } from '@/constants';
129
import type { TabType } from '@/constants';
1310

1411
import * as API from '@/service/topic';
1512
import * as styles from './index.less';
13+
import TopicItemList from '@/page/topic/component/TopicItemList';
1614

1715
interface Props {}
1816

@@ -94,52 +92,6 @@ const TopicList: React.FC<Props> = (props) => {
9492
};
9593
}, [loading]);
9694

97-
const metas: ProListMetas = {
98-
avatar: {
99-
dataIndex: 'author.avatar_url',
100-
render: (_, entity) => {
101-
const { tab: _tab, author, reply_count, visit_count } = entity;
102-
103-
const category = TABS_MAP[_tab as keyof typeof TABS_MAP] || {
104-
color: '#777',
105-
name: '未知',
106-
};
107-
108-
return (
109-
<Space>
110-
<Avatar size="small" src={author.avatar_url} />
111-
<div
112-
style={{
113-
width: '96px',
114-
padding: '0 8px',
115-
}}
116-
>
117-
<span
118-
style={{
119-
color: '#9e78c0',
120-
}}
121-
>
122-
{reply_count}
123-
</span>
124-
/<span>{visit_count}</span>
125-
</div>
126-
<Tag color={category.color}>{category.name}</Tag>
127-
</Space>
128-
);
129-
},
130-
},
131-
title: {
132-
dataIndex: 'title',
133-
valueType: 'text',
134-
},
135-
actions: {
136-
render: (_, entity) => {
137-
const { last_reply_at } = entity;
138-
return dayjs(last_reply_at).fromNow();
139-
},
140-
},
141-
};
142-
14395
const renderFooter = () => {
14496
return (
14597
<div className={styles.footer}>
@@ -183,13 +135,9 @@ const TopicList: React.FC<Props> = (props) => {
183135

184136
return (
185137
<div>
186-
<ProList
187-
rowKey="id"
188-
showActions="always"
189-
dataSource={data.filter((item: any) => item?.author?.loginname)}
138+
<TopicItemList
190139
loading={loading}
191-
metas={metas}
192-
className={styles.list}
140+
dataSource={data.filter((item: any) => item?.author?.loginname)}
193141
toolbar={{
194142
menu: {
195143
type: 'tab',
@@ -204,14 +152,6 @@ const TopicList: React.FC<Props> = (props) => {
204152
},
205153
actions,
206154
}}
207-
onRow={(record) => {
208-
return {
209-
onClick: () => {
210-
console.log('onClick', record);
211-
history.push(`/topic/${record.id}`);
212-
},
213-
};
214-
}}
215155
/>
216156
<Divider type="horizontal" />
217157
{renderFooter()}

‎src/page/user/index.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.createAt {
2+
color: #bfbfbf;
3+
padding: 16px 0;
4+
}

0 commit comments

Comments
 (0)