Skip to content

Commit f9b3756

Browse files
sendyasendya
committed
feat: list/article page
1 parent 6f62f0b commit f9b3756

File tree

9 files changed

+445
-33
lines changed

9 files changed

+445
-33
lines changed

‎src/components/ArticleListContent/ArticleListContent.vue

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div class="antd-pro-components-article-list-content-index-listContent">
3+
<div class="description">
4+
<slot>
5+
{{ description }}
6+
</slot>
7+
</div>
8+
<div class="extra">
9+
<a-avatar :src="avatar" size="small" />
10+
<a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
11+
<em>{{ updateAt | moment }}</em>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'ArticleListContent',
19+
props: {
20+
prefixCls: {
21+
type: String,
22+
default: 'antd-pro-components-article-list-content-index-listContent'
23+
},
24+
description: {
25+
type: String,
26+
default: ''
27+
},
28+
owner: {
29+
type: String,
30+
required: true
31+
},
32+
avatar: {
33+
type: String,
34+
required: true
35+
},
36+
href: {
37+
type: String,
38+
required: true
39+
},
40+
updateAt: {
41+
type: String,
42+
required: true
43+
}
44+
}
45+
}
46+
</script>
47+
48+
<style lang="less" scoped>
49+
@import '../index.less';
50+
51+
.antd-pro-components-article-list-content-index-listContent {
52+
.description {
53+
max-width: 720px;
54+
line-height: 22px;
55+
}
56+
.extra {
57+
margin-top: 16px;
58+
color: @text-color-secondary;
59+
line-height: 22px;
60+
61+
& /deep/ .ant-avatar {
62+
position: relative;
63+
top: 1px;
64+
width: 20px;
65+
height: 20px;
66+
margin-right: 8px;
67+
vertical-align: top;
68+
}
69+
70+
& > em {
71+
margin-left: 16px;
72+
color: @disabled-color;
73+
font-style: normal;
74+
}
75+
}
76+
}
77+
78+
@media screen and (max-width: @screen-xs) {
79+
.antd-pro-components-article-list-content-index-listContent {
80+
.extra {
81+
& > em {
82+
display: block;
83+
margin-top: 8px;
84+
margin-left: 0;
85+
}
86+
}
87+
}
88+
}
89+
</style>

‎src/components/ArticleListContent/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ArticleListContent from './ArticleListContent'
2+
3+
export default ArticleListContent

‎src/components/StandardFormRow/StandardFormRow.vue

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div :class="[prefixCls, lastCls, blockCls, gridCls]">
3+
<div v-if="title" class="antd-pro-components-standard-form-row-index-label">
4+
<span>{{ title }}</span>
5+
</div>
6+
<div class="antd-pro-components-standard-form-row-index-content">
7+
<slot></slot>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
const classes = [
14+
'antd-pro-components-standard-form-row-index-standardFormRowBlock',
15+
'antd-pro-components-standard-form-row-index-standardFormRowGrid',
16+
'antd-pro-components-standard-form-row-index-standardFormRowLast'
17+
]
18+
export default {
19+
name: 'StandardFormRow',
20+
props: {
21+
prefixCls: {
22+
type: String,
23+
default: 'antd-pro-components-standard-form-row-index-standardFormRow'
24+
},
25+
title: {
26+
type: String,
27+
default: undefined
28+
},
29+
last: {
30+
type: Boolean
31+
},
32+
block: {
33+
type: Boolean
34+
},
35+
grid: {
36+
type: Boolean
37+
}
38+
},
39+
computed: {
40+
lastCls () {
41+
return this.last ? classes[2] : null
42+
},
43+
blockCls () {
44+
return this.block ? classes[0] : null
45+
},
46+
gridCls () {
47+
return this.grid ? classes[1] : null
48+
}
49+
}
50+
}
51+
</script>
52+
53+
<style lang="less" scoped>
54+
@import '../index.less';
55+
56+
.antd-pro-components-standard-form-row-index-standardFormRow {
57+
display: flex;
58+
margin-bottom: 16px;
59+
padding-bottom: 16px;
60+
border-bottom: 1px dashed @border-color-split;
61+
62+
/deep/ .ant-form-item {
63+
margin-right: 24px;
64+
}
65+
/deep/ .ant-form-item-label label {
66+
margin-right: 0;
67+
color: @text-color;
68+
}
69+
/deep/ .ant-form-item-label,
70+
.ant-form-item-control {
71+
padding: 0;
72+
line-height: 32px;
73+
}
74+
75+
.antd-pro-components-standard-form-row-index-label {
76+
flex: 0 0 auto;
77+
margin-right: 24px;
78+
color: @heading-color;
79+
font-size: @font-size-base;
80+
text-align: right;
81+
& > span {
82+
display: inline-block;
83+
height: 32px;
84+
line-height: 32px;
85+
&::after {
86+
content: '：';
87+
}
88+
}
89+
}
90+
91+
.antd-pro-components-standard-form-row-index-content {
92+
flex: 1 1 0;
93+
/deep/ .ant-form-item:last-child {
94+
margin-right: 0;
95+
}
96+
}
97+
98+
&.antd-pro-components-standard-form-row-index-standardFormRowLast {
99+
margin-bottom: 0;
100+
padding-bottom: 0;
101+
border: none;
102+
}
103+
104+
&.antd-pro-components-standard-form-row-index-standardFormRowBlock {
105+
/deep/ .ant-form-item,
106+
div.ant-form-item-control-wrapper {
107+
display: block;
108+
}
109+
}
110+
111+
&.antd-pro-components-standard-form-row-index-standardFormRowGrid {
112+
/deep/ .ant-form-item,
113+
div.ant-form-item-control-wrapper {
114+
display: block;
115+
}
116+
/deep/ .ant-form-item-label {
117+
float: left;
118+
}
119+
}
120+
}
121+
122+
</style>

‎src/components/StandardFormRow/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import StandardFormRow from './StandardFormRow'
2+
3+
export default StandardFormRow

‎src/components/index.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import Result from '@/components/Result'
2626
import IconSelector from '@/components/IconSelector'
2727
import TagSelect from '@/components/TagSelect'
2828
import ExceptionPage from '@/components/Exception'
29+
import StandardFormRow from '@/components/StandardFormRow'
30+
import ArticleListContent from '@/components/ArticleListContent'
2931

3032
export {
3133
AvatarList,
@@ -54,5 +56,7 @@ export {
5456
Result,
5557
ExceptionPage,
5658
IconSelector,
57-
TagSelect
59+
TagSelect,
60+
StandardFormRow,
61+
ArticleListContent
5862
}

‎src/mock/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'tr
1010
require('./services/manage')
1111
require('./services/other')
1212
require('./services/tagCloud')
13+
require('./services/article')
1314

1415
Mock.setup({
1516
timeout: 800 // setter delay time

‎src/mock/services/article.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Mock from 'mockjs2'
2+
import { builder } from '../util'
3+
4+
const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
5+
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
6+
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
7+
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
8+
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
9+
]
10+
const owner = [
11+
'付小小',
12+
'吴加好',
13+
'周星星',
14+
'林东东',
15+
'曲丽丽'
16+
]
17+
18+
const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。'
19+
const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
20+
const href = 'https://ant.design'
21+
22+
const article = () => {
23+
const data = []
24+
for (let i = 0; i < 5; i++) {
25+
const tmpKey = i + 1
26+
const num = parseInt(Math.random() * (4 + 1), 10)
27+
data.push({
28+
id: tmpKey,
29+
avatar: avatar[num],
30+
owner: owner[num],
31+
content: content,
32+
star: Mock.mock('@integer(1, 999)'),
33+
percent: Mock.mock('@integer(1, 999)'),
34+
like: Mock.mock('@integer(1, 999)'),
35+
message: Mock.mock('@integer(1, 999)'),
36+
description: description,
37+
href: href,
38+
title: 'Alipay',
39+
updatedAt: Mock.mock('@datetime')
40+
})
41+
}
42+
return builder(data)
43+
}
44+
45+
Mock.mock(/\/list\/article/, 'get', article)

0 commit comments

Comments
 (0)