feat: list/article page

src/components/ArticleListContent/ArticleListContent.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="antd-pro-components-article-list-content-index-listContent">
+    <div class="description">
+      <slot>
+        {{ description }}
+      </slot>
+    </div>
+    <div class="extra">
+      <a-avatar :src="avatar" size="small" />
+      <a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
+      <em>{{ updateAt | moment }}</em>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleListContent',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'antd-pro-components-article-list-content-index-listContent'
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    owner: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: String,
+      required: true
+    },
+    href: {
+      type: String,
+      required: true
+    },
+    updateAt: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../index.less';
+
+.antd-pro-components-article-list-content-index-listContent {
+  .description {
+    max-width: 720px;
+    line-height: 22px;
+  }
+  .extra {
+    margin-top: 16px;
+    color: @text-color-secondary;
+    line-height: 22px;
+
+    & /deep/ .ant-avatar {
+      position: relative;
+      top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
+    }
+
+    & > em {
+      margin-left: 16px;
+      color: @disabled-color;
+      font-style: normal;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .antd-pro-components-article-list-content-index-listContent {
+    .extra {
+      & > em {
+        display: block;
+        margin-top: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+</style>

src/components/ArticleListContent/index.js

@@ -0,0 +1,3 @@
+import ArticleListContent from './ArticleListContent'
+
+export default ArticleListContent

src/components/StandardFormRow/StandardFormRow.vue

@@ -0,0 +1,122 @@
+<template>
+  <div :class="[prefixCls, lastCls, blockCls, gridCls]">
+    <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
+      <span>{{ title }}</span>
+    </div>
+    <div class="antd-pro-components-standard-form-row-index-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const classes = [
+  'antd-pro-components-standard-form-row-index-standardFormRowBlock',
+  'antd-pro-components-standard-form-row-index-standardFormRowGrid',
+  'antd-pro-components-standard-form-row-index-standardFormRowLast'
+]
+export default {
+  name: 'StandardFormRow',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'antd-pro-components-standard-form-row-index-standardFormRow'
+    },
+    title: {
+      type: String,
+      default: undefined
+    },
+    last: {
+      type: Boolean
+    },
+    block: {
+      type: Boolean
+    },
+    grid: {
+      type: Boolean
+    }
+  },
+  computed: {
+    lastCls () {
+      return this.last ? classes[2] : null
+    },
+    blockCls () {
+      return this.block ? classes[0] : null
+    },
+    gridCls () {
+      return this.grid ? classes[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../index.less';
+
+.antd-pro-components-standard-form-row-index-standardFormRow {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
+
+  /deep/ .ant-form-item {
+    margin-right: 24px;
+  }
+  /deep/ .ant-form-item-label label {
+    margin-right: 0;
+    color: @text-color;
+  }
+  /deep/ .ant-form-item-label,
+  .ant-form-item-control {
+    padding: 0;
+    line-height: 32px;
+  }
+
+  .antd-pro-components-standard-form-row-index-label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: right;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      &::after {
+        content: '：';
+      }
+    }
+  }
+
+  .antd-pro-components-standard-form-row-index-content {
+    flex: 1 1 0;
+    /deep/ .ant-form-item:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowLast {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border: none;
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
+    /deep/ .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+  }
+
+  &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
+      /deep/ .ant-form-item,
+      div.ant-form-item-control-wrapper {
+        display: block;
+      }
+      /deep/ .ant-form-item-label {
+        float: left;
+      }
+  }
+}
+
+</style>

src/components/StandardFormRow/index.js

@@ -0,0 +1,3 @@
+import StandardFormRow from './StandardFormRow'
+
+export default StandardFormRow

src/components/index.js

@@ -26,6 +26,8 @@ import Result from '@/components/Result'
 import IconSelector from '@/components/IconSelector'
 import TagSelect from '@/components/TagSelect'
 import ExceptionPage from '@/components/Exception'
+import StandardFormRow from '@/components/StandardFormRow'
+import ArticleListContent from '@/components/ArticleListContent'
 
 export {
   AvatarList,
@@ -54,5 +56,7 @@ export {
   Result,
   ExceptionPage,
   IconSelector,
-  TagSelect
+  TagSelect,
+  StandardFormRow,
+  ArticleListContent
 }

src/mock/index.js

@@ -10,6 +10,7 @@ if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'tr
   require('./services/manage')
   require('./services/other')
   require('./services/tagCloud')
+  require('./services/article')
 
   Mock.setup({
     timeout: 800 // setter delay time

src/mock/services/article.js

@@ -0,0 +1,45 @@
+import Mock from 'mockjs2'
+import { builder } from '../util'
+
+const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
+]
+const owner = [
+  '付小小',
+  '吴加好',
+  '周星星',
+  '林东东',
+  '曲丽丽'
+]
+
+const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。'
+const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
+const href = 'https://ant.design'
+
+const article = () => {
+  const data = []
+  for (let i = 0; i < 5; i++) {
+    const tmpKey = i + 1
+    const num = parseInt(Math.random() * (4 + 1), 10)
+    data.push({
+      id: tmpKey,
+      avatar: avatar[num],
+      owner: owner[num],
+      content: content,
+      star: Mock.mock('@integer(1, 999)'),
+      percent: Mock.mock('@integer(1, 999)'),
+      like: Mock.mock('@integer(1, 999)'),
+      message: Mock.mock('@integer(1, 999)'),
+      description: description,
+      href: href,
+      title: 'Alipay',
+      updatedAt: Mock.mock('@datetime')
+    })
+  }
+  return builder(data)
+}
+
+Mock.mock(/\/list\/article/, 'get', article)