期贤
3 years ago
43 changed files with 136 additions and 507 deletions
@ -1,12 +1,6 @@ |
|||
import { createStyles } from 'antd-style'; |
|||
|
|||
const useStyles = createStyles(() => { |
|||
return { |
|||
'clearfix()': { |
|||
zoom: '1', |
|||
'&::before, &::after': { display: 'table', content: "' '" }, |
|||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|||
}, |
|||
}; |
|||
return {}; |
|||
}); |
|||
export default useStyles; |
|||
|
|||
@ -1,12 +1,6 @@ |
|||
import { createStyles } from 'antd-style'; |
|||
|
|||
const useStyles = createStyles(() => { |
|||
return { |
|||
'clearfix()': { |
|||
zoom: '1', |
|||
'&::before, &::after': { display: 'table', content: "' '" }, |
|||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|||
}, |
|||
}; |
|||
return {}; |
|||
}); |
|||
export default useStyles; |
|||
|
|||
@ -1,12 +1,6 @@ |
|||
import { createStyles } from 'antd-style'; |
|||
|
|||
const useStyles = createStyles(() => { |
|||
return { |
|||
'clearfix()': { |
|||
zoom: '1', |
|||
'&::before, &::after': { display: 'table', content: "' '" }, |
|||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|||
}, |
|||
}; |
|||
return {}; |
|||
}); |
|||
export default useStyles; |
|||
|
|||
@ -1,270 +0,0 @@ |
|||
import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons'; |
|||
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd'; |
|||
import type { FC } from 'react'; |
|||
import React from 'react'; |
|||
import { useRequest } from '@umijs/max'; |
|||
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 { styles } = useStyles(); |
|||
const [form] = Form.useForm(); |
|||
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; |
|||
@ -1,12 +1,6 @@ |
|||
import { createStyles } from 'antd-style'; |
|||
|
|||
const useStyles = createStyles(() => { |
|||
return { |
|||
'clearfix()': { |
|||
zoom: '1', |
|||
'&::before, &::after': { display: 'table', content: "' '" }, |
|||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|||
}, |
|||
}; |
|||
return {}; |
|||
}); |
|||
export default useStyles; |
|||
|
|||
Loading…
Reference in new issue