Skip to content

Commit c9a5cf6

Browse files
JASONPANGGOJASONPANGGO
committed
feat: add user page
1 parent 12801f6 commit c9a5cf6

File tree

10 files changed

+244
-73
lines changed

10 files changed

+244
-73
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/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 & 68 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,56 +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, top } = entity;
102-
103-
const category = TABS_MAP[_tab as TabType] || {
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-
{top ? (
127-
<Tag color="#5BD8A6">置顶</Tag>
128-
) : (
129-
<Tag color={category.color}>{category.name}</Tag>
130-
)}
131-
</Space>
132-
);
133-
},
134-
},
135-
title: {
136-
dataIndex: 'title',
137-
valueType: 'text',
138-
},
139-
actions: {
140-
render: (_, entity) => {
141-
const { last_reply_at } = entity;
142-
return dayjs(last_reply_at).fromNow();
143-
},
144-
},
145-
};
146-
14795
const renderFooter = () => {
14896
return (
14997
<div className={styles.footer}>
@@ -187,13 +135,9 @@ const TopicList: React.FC<Props> = (props) => {
187135

188136
return (
189137
<div>
190-
<ProList
191-
rowKey="id"
192-
showActions="always"
193-
dataSource={data.filter((item: any) => item?.author?.loginname)}
138+
<TopicItemList
194139
loading={loading}
195-
metas={metas}
196-
className={styles.list}
140+
dataSource={data.filter((item: any) => item?.author?.loginname)}
197141
toolbar={{
198142
menu: {
199143
type: 'tab',
@@ -208,14 +152,6 @@ const TopicList: React.FC<Props> = (props) => {
208152
},
209153
actions,
210154
}}
211-
onRow={(record) => {
212-
return {
213-
onClick: () => {
214-
console.log('onClick', record);
215-
history.push(`/topic/${record.id}`);
216-
},
217-
};
218-
}}
219155
/>
220156
<Divider type="horizontal" />
221157
{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)