Skip to content

Commit 087ee91

Browse files
thonatosthonatos
authored
feat: optimize (#28)
* chore: ignore env * feat: mod compoenent for antd * feat: remove pro-list & pro-table * feat: use external lib
1 parent 3226ff3 commit 087ee91

File tree

13 files changed

+235
-218
lines changed

13 files changed

+235
-218
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,6 @@ dist.zip
1818
/src/.umi
1919
/src/.umi-production
2020
/src/.umi-test
21-
/.env.local
21+
22+
# env
23+
.env.local

‎config/config.ts‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,43 +46,69 @@ export default defineConfig({
4646
},
4747

4848
// umi.js
49+
hash: true,
4950
singular: true,
5051

5152
fastRefresh: {},
52-
5353
mfsu: {},
54+
esbuild: {},
55+
webpack5: {},
56+
57+
nodeModulesTransform: {
58+
type: 'none',
59+
exclude: [],
60+
},
61+
62+
targets: {
63+
chrome: 79,
64+
firefox: false,
65+
safari: false,
66+
edge: false,
67+
ios: false,
68+
},
5469

5570
externals: {
5671
react: 'window.React',
57-
'react-dom': 'ReactDOM',
58-
antd: 'antd',
59-
dayjs: 'dayjs',
72+
'react-dom': 'window.ReactDOM',
73+
antd: 'window.antd',
74+
dayjs: 'window.dayjs',
75+
'@ant-design/icons': 'window.icons',
76+
'markdown-it': 'window.markdownit',
77+
'react-markdown-editor-lite': 'window.ReactMarkdownEditorLite',
6078
},
6179

6280
styles:
6381
process.env.NODE_ENV === 'development'
64-
? ['//unpkg.com/antd@4.x/dist/antd.css']
65-
: ['//unpkg.com/antd@4.x/dist/antd.min.css'],
82+
? [
83+
'//unpkg.com/antd@4.x/dist/antd.css',
84+
'//unpkg.com/react-markdown-editor-lite@1.x/lib/index.css',
85+
]
86+
: [
87+
'//unpkg.com/antd@4.x/dist/antd.min.css',
88+
'//unpkg.com/react-markdown-editor-lite@1.x/lib/index.css',
89+
],
6690

6791
scripts:
6892
process.env.NODE_ENV === 'development'
6993
? [
7094
'//unpkg.com/react@17.x/umd/react.development.js',
7195
'//unpkg.com/react-dom@17.x/umd/react-dom.development.js',
7296
'//unpkg.com/antd@4.x/dist/antd.js',
97+
'//unpkg.com/@ant-design/icons@4.x/dist/index.umd.js',
7398
'//unpkg.com/dayjs@1.x/dayjs.min.js',
99+
'//unpkg.com/markdown-it@8.x/dist/markdown-it.js',
100+
'//unpkg.com/react-markdown-editor-lite@1.x/lib/index.js',
74101
]
75102
: [
76103
'//unpkg.com/react@17.x/umd/react.production.min.js',
77104
'//unpkg.com/react-dom@17.x/umd/react-dom.production.min.js',
78105
'//unpkg.com/antd@4.x/dist/antd.min.js',
106+
'//unpkg.com/@ant-design/icons@4.x/dist/index.umd.min.js',
79107
'//unpkg.com/dayjs@1.x/dayjs.min.js',
108+
'//unpkg.com/markdown-it@8.x/dist/markdown-it.min.js',
109+
'//unpkg.com/react-markdown-editor-lite@1.x/lib/index.js',
80110
],
81111

82-
nodeModulesTransform: {
83-
type: 'none',
84-
},
85-
86112
antd: {},
87113

88114
theme: {
@@ -95,6 +121,8 @@ export default defineConfig({
95121

96122
layout: {},
97123

124+
locale: false,
125+
98126
qiankun: {
99127
master: {
100128
apps: [],

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,6 @@
6666
"@ant-design/icons": "^4.7.0",
6767
"@ant-design/pro-card": "^1.18.20",
6868
"@ant-design/pro-layout": "^6.32.1",
69-
"@ant-design/pro-list": "^1.21.12",
70-
"@ant-design/pro-table": "^2.61.9",
7169
"@semantic-release/changelog": "^6.0.1",
7270
"@types/dotenv": "^8.2.0",
7371
"@types/jest": "^27.4.0",

‎src/component/CommentList/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import Markdown from '@/component/Markdown';
66
import { Comment, Avatar, Divider } from 'antd';
77
import {
88
LikeFilled,
9-
EditFilled,
10-
DeleteFilled,
9+
// EditFilled,
10+
// DeleteFilled,
1111
CommentOutlined,
1212
} from '@ant-design/icons';
1313

@@ -53,8 +53,9 @@ const CommentList: React.FC<Props> = (props) => {
5353
onLike && onLike(data);
5454
}}
5555
/>,
56-
<EditFilled />,
57-
<DeleteFilled />,
56+
// access.admin
57+
// <EditFilled />,
58+
// <DeleteFilled />,
5859
<CommentOutlined
5960
onClick={() => {
6061
onReply && onReply(data);

‎src/component/Markdown/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import MarkdownIt from 'markdown-it';
33
import MdEditor from 'react-markdown-editor-lite';
4-
import 'react-markdown-editor-lite/lib/index.css';
4+
// import 'react-markdown-editor-lite/esm/index.less';
55

66
import * as styles from './index.less';
77

‎src/component/MessageList/index.tsx‎

Lines changed: 50 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,65 @@
11
import React from 'react';
22
import dayjs from 'dayjs';
3-
import { useHistory, Link } from 'umi';
4-
import { Space, Avatar, Tag } from 'antd';
5-
import { ListToolBarProps } from '@ant-design/pro-table';
6-
import ProList, { ProListMetas } from '@ant-design/pro-list';
3+
import { Link } from 'umi';
4+
import { Space, Avatar, Tag, List } from 'antd';
75

86
import { MESSAGE_TYPE_MAP, MessageType } from '@/constants';
97

108
import * as styles from './index.less';
119

12-
const MessageList: React.FC<Props> = ({
13-
dataSource,
14-
loading,
15-
toolbar,
16-
onClick,
17-
}) => {
18-
const metas: ProListMetas = {
19-
avatar: {
20-
dataIndex: 'author.avatar_url',
21-
render: (_, entity: MessageModel) => {
22-
const { type: _type, author } = entity;
23-
const type = MESSAGE_TYPE_MAP[_type as MessageType];
24-
const { loginname, avatar_url } = author;
25-
26-
return (
27-
<Space size={16}>
28-
<div
29-
style={{
30-
width: '200px',
31-
}}
32-
>
33-
<Link to={`/user/${loginname}`} className={styles.link}>
34-
<Space size={8}>
35-
<Avatar size="small" src={avatar_url} />
36-
<span>{loginname}</span>
37-
</Space>
38-
</Link>
39-
</div>
40-
41-
<Tag color={type.color}>{type.name}</Tag>
42-
</Space>
43-
);
44-
},
45-
},
46-
title: {
47-
dataIndex: 'title',
48-
valueType: 'text',
49-
render: (_, entity: MessageModel) => {
10+
const MessageList: React.FC<Props> = ({ dataSource, loading, onClick }) => {
11+
return (
12+
<List
13+
loading={loading}
14+
dataSource={dataSource}
15+
renderItem={(item) => {
5016
const {
5117
id: messageId,
18+
type: _type,
19+
create_at,
5220
topic: { id, title },
53-
} = entity;
21+
author: { loginname, avatar_url },
22+
} = item;
23+
24+
const type = MESSAGE_TYPE_MAP[_type as MessageType];
25+
5426
return (
55-
<Link
56-
to={`/topic/${id}`}
57-
className={styles.link}
58-
onClick={() => {
59-
onClick && onClick(messageId);
60-
}}
61-
>
62-
{title}
63-
</Link>
64-
);
65-
},
66-
},
67-
actions: {
68-
render: (_, entity: MessageModel) => {
69-
return dayjs(entity.create_at).fromNow();
70-
},
71-
},
72-
};
27+
<List.Item>
28+
<List.Item.Meta
29+
avatar={
30+
<Space size={16}>
31+
<div
32+
style={{
33+
width: '200px',
34+
}}
35+
>
36+
<Link to={`/user/${loginname}`} className={styles.link}>
37+
<Space size={8}>
38+
<Avatar size="small" src={avatar_url} />
39+
<span>{loginname}</span>
40+
</Space>
41+
</Link>
42+
</div>
7343

74-
return (
75-
<ProList
76-
rowKey="id"
77-
showActions="always"
78-
dataSource={dataSource}
79-
loading={loading}
80-
metas={metas}
81-
className={styles.list}
82-
toolbar={toolbar}
44+
<Tag color={type.color}>{type.name}</Tag>
45+
</Space>
46+
}
47+
title={
48+
<Link
49+
to={`/topic/${id}`}
50+
className={styles.link}
51+
onClick={() => {
52+
onClick && onClick(messageId);
53+
}}
54+
>
55+
{title}
56+
</Link>
57+
}
58+
/>
59+
<div>{dayjs(create_at).fromNow()}</div>
60+
</List.Item>
61+
);
62+
}}
8363
/>
8464
);
8565
};
@@ -89,6 +69,5 @@ export default MessageList;
8969
interface Props {
9070
dataSource?: MessageModel[];
9171
loading?: boolean;
92-
toolbar?: ListToolBarProps;
9372
onClick?: (id: string) => void;
9473
}

‎src/component/ModComponent/Calendar.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Dayjs } from 'dayjs';
2+
import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
3+
import generateCalendar from 'antd/es/calendar/generateCalendar';
4+
import 'antd/es/calendar/style';
5+
6+
const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
7+
8+
export default Calendar;

‎src/component/ModComponent/DatePicker.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Dayjs } from 'dayjs';
2+
import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
3+
import generatePicker from 'antd/es/date-picker/generatePicker';
4+
import 'antd/es/date-picker/style/index';
5+
6+
const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
7+
8+
export default DatePicker;

‎src/component/ModComponent/TimePicker.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Dayjs } from 'dayjs';
2+
import * as React from 'react';
3+
import DatePicker from './DatePicker';
4+
import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
5+
6+
export interface TimePickerProps
7+
extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
8+
9+
const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
10+
return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
11+
});
12+
13+
TimePicker.displayName = 'TimePicker';
14+
15+
export default TimePicker;

‎src/component/ModComponent/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Calendar from './Calendar';
2+
import DatePicker from './DatePicker';
3+
import TimePicker from './TimePicker';
4+
5+
export { Calendar, DatePicker, TimePicker };

0 commit comments

Comments
 (0)