期贤
3 years ago
43 changed files with 136 additions and 507 deletions
@ -1,12 +1,6 @@ |
|||||
import { createStyles } from 'antd-style'; |
import { createStyles } from 'antd-style'; |
||||
|
|
||||
const useStyles = createStyles(() => { |
const useStyles = createStyles(() => { |
||||
return { |
return {}; |
||||
'clearfix()': { |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
}); |
||||
export default useStyles; |
export default useStyles; |
||||
|
|||||
@ -1,12 +1,6 @@ |
|||||
import { createStyles } from 'antd-style'; |
import { createStyles } from 'antd-style'; |
||||
|
|
||||
const useStyles = createStyles(() => { |
const useStyles = createStyles(() => { |
||||
return { |
return {}; |
||||
'clearfix()': { |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
}); |
||||
export default useStyles; |
export default useStyles; |
||||
|
|||||
@ -1,12 +1,6 @@ |
|||||
import { createStyles } from 'antd-style'; |
import { createStyles } from 'antd-style'; |
||||
|
|
||||
const useStyles = createStyles(() => { |
const useStyles = createStyles(() => { |
||||
return { |
return {}; |
||||
'clearfix()': { |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
}); |
||||
export default useStyles; |
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'; |
import { createStyles } from 'antd-style'; |
||||
|
|
||||
const useStyles = createStyles(() => { |
const useStyles = createStyles(() => { |
||||
return { |
return {}; |
||||
'clearfix()': { |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { clear: 'both', height: '0', fontSize: '0', visibility: 'hidden' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
}); |
||||
export default useStyles; |
export default useStyles; |
||||
|
|||||
Loading…
Reference in new issue