期贤
3 years ago
2 changed files with 228 additions and 0 deletions
@ -0,0 +1,226 @@ |
|||||
|
import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons'; |
||||
|
import { useRequest } from '@umijs/max'; |
||||
|
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd'; |
||||
|
import type { FC } from 'react'; |
||||
|
import React from 'react'; |
||||
|
import ArticleListContent from './components/ArticleListContent'; |
||||
|
import StandardFormRow from './components/StandardFormRow'; |
||||
|
import TagSelect from './components/TagSelect'; |
||||
|
import type { ListItemDataType } from './data.d'; |
||||
|
import { queryFakeList } from './service'; |
||||
|
import useStyles from './style.style'; |
||||
|
|
||||
|
const { Option } = Select; |
||||
|
const FormItem = Form.Item; |
||||
|
|
||||
|
const pageSize = 5; |
||||
|
|
||||
|
const Articles: FC = () => { |
||||
|
const [form] = Form.useForm(); |
||||
|
|
||||
|
const { styles } = useStyles(); |
||||
|
|
||||
|
const { data, reload, loading, loadMore, loadingMore } = useRequest( |
||||
|
() => { |
||||
|
return queryFakeList({ |
||||
|
count: pageSize, |
||||
|
}); |
||||
|
}, |
||||
|
{ |
||||
|
loadMore: true, |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
const list = data?.list || []; |
||||
|
|
||||
|
const setOwner = () => { |
||||
|
form.setFieldsValue({ |
||||
|
owner: ['wzj'], |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const owners = [ |
||||
|
{ |
||||
|
id: 'wzj', |
||||
|
name: '我自己', |
||||
|
}, |
||||
|
{ |
||||
|
id: 'wjh', |
||||
|
name: '吴家豪', |
||||
|
}, |
||||
|
{ |
||||
|
id: 'zxx', |
||||
|
name: '周星星', |
||||
|
}, |
||||
|
{ |
||||
|
id: 'zly', |
||||
|
name: '赵丽颖', |
||||
|
}, |
||||
|
{ |
||||
|
id: 'ym', |
||||
|
name: '姚明', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const IconText: React.FC<{ |
||||
|
type: string; |
||||
|
text: React.ReactNode; |
||||
|
}> = ({ type, text }) => { |
||||
|
switch (type) { |
||||
|
case 'star-o': |
||||
|
return ( |
||||
|
<span> |
||||
|
<StarOutlined style={{ marginRight: 8 }} /> |
||||
|
{text} |
||||
|
</span> |
||||
|
); |
||||
|
case 'like-o': |
||||
|
return ( |
||||
|
<span> |
||||
|
<LikeOutlined style={{ marginRight: 8 }} /> |
||||
|
{text} |
||||
|
</span> |
||||
|
); |
||||
|
case 'message': |
||||
|
return ( |
||||
|
<span> |
||||
|
<MessageOutlined style={{ marginRight: 8 }} /> |
||||
|
{text} |
||||
|
</span> |
||||
|
); |
||||
|
default: |
||||
|
return null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
wrapperCol: { |
||||
|
xs: { span: 24 }, |
||||
|
sm: { span: 24 }, |
||||
|
md: { span: 12 }, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
const loadMoreDom = list.length > 0 && ( |
||||
|
<div style={{ textAlign: 'center', marginTop: 16 }}> |
||||
|
<Button onClick={loadMore} style={{ paddingLeft: 48, paddingRight: 48 }}> |
||||
|
{loadingMore ? ( |
||||
|
<span> |
||||
|
<LoadingOutlined /> 加载中... |
||||
|
</span> |
||||
|
) : ( |
||||
|
'加载更多' |
||||
|
)} |
||||
|
</Button> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Card bordered={false}> |
||||
|
<Form |
||||
|
layout="inline" |
||||
|
form={form} |
||||
|
initialValues={{ |
||||
|
owner: ['wjh', 'zxx'], |
||||
|
}} |
||||
|
onValuesChange={reload} |
||||
|
> |
||||
|
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> |
||||
|
<FormItem name="category"> |
||||
|
<TagSelect expandable> |
||||
|
<TagSelect.Option value="cat1">类目一</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat2">类目二</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat3">类目三</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat4">类目四</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat5">类目五</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat6">类目六</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat7">类目七</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat8">类目八</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat9">类目九</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat10">类目十</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat11">类目十一</TagSelect.Option> |
||||
|
<TagSelect.Option value="cat12">类目十二</TagSelect.Option> |
||||
|
</TagSelect> |
||||
|
</FormItem> |
||||
|
</StandardFormRow> |
||||
|
<StandardFormRow title="owner" grid> |
||||
|
<FormItem name="owner" noStyle> |
||||
|
<Select mode="multiple" placeholder="选择 owner" style={{ minWidth: '6rem' }}> |
||||
|
{owners.map((owner) => ( |
||||
|
<Option key={owner.id} value={owner.id}> |
||||
|
{owner.name} |
||||
|
</Option> |
||||
|
))} |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
<a className={styles.selfTrigger} onClick={setOwner}> |
||||
|
只看自己的 |
||||
|
</a> |
||||
|
</StandardFormRow> |
||||
|
<StandardFormRow title="其它选项" grid last> |
||||
|
<Row gutter={16}> |
||||
|
<Col xl={8} lg={10} md={12} sm={24} xs={24}> |
||||
|
<FormItem {...formItemLayout} label="活跃用户" name="user"> |
||||
|
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}> |
||||
|
<Option value="lisa">李三</Option> |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
</Col> |
||||
|
<Col xl={8} lg={10} md={12} sm={24} xs={24}> |
||||
|
<FormItem {...formItemLayout} label="好评度" name="rate"> |
||||
|
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}> |
||||
|
<Option value="good">优秀</Option> |
||||
|
</Select> |
||||
|
</FormItem> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
</StandardFormRow> |
||||
|
</Form> |
||||
|
</Card> |
||||
|
<Card |
||||
|
style={{ marginTop: 24 }} |
||||
|
bordered={false} |
||||
|
bodyStyle={{ padding: '8px 32px 32px 32px' }} |
||||
|
> |
||||
|
<List<ListItemDataType> |
||||
|
size="large" |
||||
|
loading={loading} |
||||
|
rowKey="id" |
||||
|
itemLayout="vertical" |
||||
|
loadMore={loadMoreDom} |
||||
|
dataSource={list} |
||||
|
renderItem={(item) => ( |
||||
|
<List.Item |
||||
|
key={item.id} |
||||
|
actions={[ |
||||
|
<IconText key="star" type="star-o" text={item.star} />, |
||||
|
<IconText key="like" type="like-o" text={item.like} />, |
||||
|
<IconText key="message" type="message" text={item.message} />, |
||||
|
]} |
||||
|
extra={<div className={styles.listItemExtra} />} |
||||
|
> |
||||
|
<List.Item.Meta |
||||
|
title={ |
||||
|
<a className={styles.listItemMetaTitle} href={item.href}> |
||||
|
{item.title} |
||||
|
</a> |
||||
|
} |
||||
|
description={ |
||||
|
<span> |
||||
|
<Tag>Ant Design</Tag> |
||||
|
<Tag>设计语言</Tag> |
||||
|
<Tag>蚂蚁金服</Tag> |
||||
|
</span> |
||||
|
} |
||||
|
/> |
||||
|
<ArticleListContent data={item} /> |
||||
|
</List.Item> |
||||
|
)} |
||||
|
/> |
||||
|
</Card> |
||||
|
</> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Articles; |
||||
Loading…
Reference in new issue