From 7befb78ba5ff288d87bfd01c5fb2e7eac8bc780d Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Sun, 5 Aug 2018 23:54:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=87=E7=AB=A0=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E3=80=81=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8=E3=80=81?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/FormRow.vue               |  51 +++++++++
 .../list/Search/ApplicationList.vue           | 105 +++++++++++++++++-
 src/components/list/Search/ArticleList.vue    |  67 ++++++++++-
 src/components/list/Search/ProjectList.vue    |  45 +++++++-
 src/components/list/Search/SearchForm.vue     |  98 ++++++++++++----
 src/components/list/Search/SearchLayout.vue   |   1 -
 6 files changed, 328 insertions(+), 39 deletions(-)
 create mode 100644 src/components/form/FormRow.vue

diff --git a/src/components/form/FormRow.vue b/src/components/form/FormRow.vue
new file mode 100644
index 0000000..364c902
--- /dev/null
+++ b/src/components/form/FormRow.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="form-row">
+    <div class="label">
+      <span>{{label}}</span>
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormRow',
+  props: ['label']
+}
+</script>
+
+<style lang="less" scoped>
+  .form-row{
+    display: flex;
+    border-bottom: 1px dashed #e8e8e8;
+    margin-bottom: 16px;
+    .label {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 14px;
+      margin-right: 24px;
+      flex: 0 0 auto;
+      text-align: right;
+      & > span {
+        display: inline-block;
+        height: 39px;
+        line-height: 39px;
+        &:after {
+          content: '：';
+        }
+      }
+    }
+    .content {
+      flex: 1 1 0;
+      :global {
+        .ant-form-item:last-child {
+          margin-right: 0;
+        }
+        .ant-form-item {
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/list/Search/ApplicationList.vue b/src/components/list/Search/ApplicationList.vue
index ca1e2f8..fe3e684 100644
--- a/src/components/list/Search/ApplicationList.vue
+++ b/src/components/list/Search/ApplicationList.vue
@@ -1,21 +1,114 @@
 <template>
   <div>
     <search-form />
-    <a-card :bordered="false">
-      contentB
-    </a-card>
+    <a-list
+      :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
+    >
+      <a-list-item style="padding: 0 12px" :key="n" v-for="n in 12">
+        <a-card>
+          <a-card-meta title="Angular">
+            <a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" size="small" />
+          </a-card-meta>
+          <ul class="actions" slot="actions">
+            <a-tooltip class="tool"  title="下载">
+              <a-icon type="download" />
+            </a-tooltip>
+            <a-tooltip class="tool"  title="编辑">
+              <a-icon type="edit" />
+            </a-tooltip>
+            <a-tooltip class="tool"  title="分享">
+              <a-icon type="share-alt" />
+            </a-tooltip>
+            <a-dropdown class="tool">
+              <a-icon type="ellipsis" />
+            </a-dropdown>
+          </ul>
+          <div class="content">
+            <div>
+              <p>活跃用户</p>
+              <p>18万</p>
+            </div>
+            <div>
+              <p>新增用户</p>
+              <p>1,338</p>
+            </div>
+          </div>
+        </a-card>
+      </a-list-item>
+    </a-list>
   </div>
 </template>
 
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
 import SearchForm from './SearchForm'
+import AList from 'vue-antd-ui/es/list'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import ACardMeta from 'vue-antd-ui/es/card/Meta'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+import ADropdown from 'vue-antd-ui/es/dropdown'
 export default {
   name: 'ApplicationList',
-  components: {SearchForm, ACard}
+  components: {ADropdown, AIcon, ATooltip, AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .clearfix() {
+    zoom: 1;
+    &:before,
+    &:after {
+      content: ' ';
+      display: table;
+    }
+    &:after {
+      clear: both;
+      visibility: hidden;
+      font-size: 0;
+      height: 0;
+    }
+  }
+  .content {
+    .clearfix();
+    margin-top: 16px;
+    margin-left: 40px;
+    & > div {
+      position: relative;
+      text-align: left;
+      float: left;
+      width: 50%;
+      p {
+        line-height: 32px;
+        font-size: 24px;
+        margin: 0;
+      }
+      p:first-child {
+        color: rgba(0,0,0,.45);
+        font-size: 12px;
+        line-height: 20px;
+        margin-bottom: 4px;
+      }
+    }
+  }
+  .actions{
+    border-top: 1px solid #e8e8e8;
+    background: #f5f8fa;
+    zoom: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    height: 38px;
+    .tool{
+      width: 25%;
+      float: left;
+      text-align: center;
+      margin: 12px 0;
+      color: rgba(0,0,0,.45);
+    }
+    .tool:not(:last-child) {
+      border-right: 1px solid #e8e8e8;
+    }
+  }
 </style>
diff --git a/src/components/list/Search/ArticleList.vue b/src/components/list/Search/ArticleList.vue
index c1e9859..94576f3 100644
--- a/src/components/list/Search/ArticleList.vue
+++ b/src/components/list/Search/ArticleList.vue
@@ -2,7 +2,32 @@
   <div>
     <search-form />
     <a-card :bordered="false">
-      contentA
+      <a-list itemLayout="vertical">
+        <a-list-item :key="n" v-for="n in 10">
+          <a-list-item-meta title="Alipay">
+            <div slot="description">
+              <a-tag >Ant Design</a-tag>
+              <a-tag >设计语言</a-tag>
+              <a-tag >蚂蚁金服</a-tag>
+            </div>
+          </a-list-item-meta>
+          <div class="content">
+            <div class="detail">
+              段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
+              ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
+            </div>
+            <div class="author">
+              <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
+              <a>ICZER</a>发布在
+              <a href="https://github.com/iczer">https://github.com/iczer</a>
+              <em>2018-08-05 22:23</em>
+            </div>
+          </div>
+          <span slot="actions"><a-icon style="margin-right: 8px" type="star-o" />156</span>
+          <span slot="actions"><a-icon style="margin-right: 8px" type="like-o" />1435</span>
+          <span slot="actions"><a-icon style="margin-right: 8px" type="message" />4</span>
+        </a-list-item>
+      </a-list>
     </a-card>
   </div>
 </template>
@@ -10,12 +35,46 @@
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
 import SearchForm from './SearchForm'
+import AList from 'vue-antd-ui/es/list'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import ATag from 'vue-antd-ui/es/tag/Tag'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+
+const AListItemMeta = AListItem.Meta
 export default {
   name: 'ArticleList',
-  components: {SearchForm, ACard}
+  components: {AIcon, ATag, AAvatar, AListItem, AListItemMeta, AList, SearchForm, ACard}
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .extra{
+    width: 272px;
+    height: 1px;
+  }
+  .content {
+    .detail {
+      line-height: 22px;
+      max-width: 720px;
+    }
+    .author {
+      color: rgba(0,0,0,.45);
+      margin-top: 16px;
+      line-height: 22px;
+      & > :global(.ant-avatar) {
+          vertical-align: top;
+          margin-right: 8px;
+          width: 20px;
+          height: 20px;
+          position: relative;
+          top: 1px;
+        }
+      & > em {
+          color: rgba(0,0,0,.25);
+          font-style: normal;
+          margin-left: 16px;
+        }
+    }
+  }
 </style>
diff --git a/src/components/list/Search/ProjectList.vue b/src/components/list/Search/ProjectList.vue
index 31b20d5..ec36f29 100644
--- a/src/components/list/Search/ProjectList.vue
+++ b/src/components/list/Search/ProjectList.vue
@@ -1,21 +1,54 @@
 <template>
   <div>
     <search-form />
-    <a-card :bordered="false">
-      contentC
-    </a-card>
+    <a-list
+      :grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }'
+    >
+      <a-list-item :key="n" v-for="n in 8" style="padding: 0 12px">
+        <a-card>
+          <img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
+          <a-card-meta title="Ant Design">
+            <div slot="description">
+              城镇中有那么多的酒馆，她却偏偏走进了我的酒馆
+            </div>
+          </a-card-meta>
+          <div class="content">
+            <span>4小时前</span>
+            <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+          </div>
+        </a-card>
+      </a-list-item>
+    </a-list>
   </div>
 </template>
 
 <script>
 import ACard from 'vue-antd-ui/es/card/Card'
 import SearchForm from './SearchForm'
+import AList from 'vue-antd-ui/es/list'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import ACardMeta from 'vue-antd-ui/es/card/Meta'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
 export default {
   name: 'ProjectList',
-  components: {SearchForm, ACard}
+  components: {AAvatar, ACardMeta, AListItem, AList, SearchForm, ACard}
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .content{
+    display: flex;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+    height: 20px;
+    & > span {
+      color: rgba(0,0,0,.45);
+      flex: 1;
+      font-size: 12px;
+    }
+    .avatarList {
+      flex: 0 1 auto;
+    }
+  }
 </style>
diff --git a/src/components/list/Search/SearchForm.vue b/src/components/list/Search/SearchForm.vue
index 4b32320..bc7ee07 100644
--- a/src/components/list/Search/SearchForm.vue
+++ b/src/components/list/Search/SearchForm.vue
@@ -1,26 +1,68 @@
 <template>
   <a-card :bordered="false" class="search-form">
-    <a-form>
-      <a-form-item
-        label="所属类目"
-      >
-        <tag-select>
-          <tag-select-option>类目一</tag-select-option>
-          <tag-select-option>类目二</tag-select-option>
-          <tag-select-option>类目三</tag-select-option>
-          <tag-select-option>类目四</tag-select-option>
-          <tag-select-option>类目五</tag-select-option>
-          <tag-select-option>类目六</tag-select-option>
-          <tag-select-option>类目七</tag-select-option>
-          <tag-select-option>类目八</tag-select-option>
-          <tag-select-option>类目九</tag-select-option>
-          <tag-select-option>类目十</tag-select-option>
-          <tag-select-option>类目十一</tag-select-option>
-          <tag-select-option>类目十二</tag-select-option>
-          <tag-select-option>类目十三</tag-select-option>
-          <tag-select-option>类目十四</tag-select-option>
-        </tag-select>
-      </a-form-item>
+    <a-form :autoFormCreate="(form) => {this.form = form;this.form.getFieldDecorator('owner',{initialValue: ['1', '2']})}">
+      <form-row label="所属类目">
+        <a-form-item>
+          <tag-select>
+            <tag-select-option>类目一</tag-select-option>
+            <tag-select-option>类目二</tag-select-option>
+            <tag-select-option>类目三</tag-select-option>
+            <tag-select-option>类目四</tag-select-option>
+            <tag-select-option>类目五</tag-select-option>
+            <tag-select-option>类目六</tag-select-option>
+            <tag-select-option>类目七</tag-select-option>
+            <tag-select-option>类目八</tag-select-option>
+            <tag-select-option>类目九</tag-select-option>
+            <tag-select-option>类目十</tag-select-option>
+            <tag-select-option>类目十一</tag-select-option>
+            <tag-select-option>类目十二</tag-select-option>
+            <tag-select-option>类目十三</tag-select-option>
+            <tag-select-option>类目十四</tag-select-option>
+            <tag-select-option>类目十五</tag-select-option>
+            <tag-select-option>类目十六</tag-select-option>
+          </tag-select>
+        </a-form-item>
+      </form-row>
+      <form-row label="owner" style="padding-bottom: 11px">
+        <a-form-item
+          fieldDecoratorId="owner"
+          initialValue="['1', '2']"
+        >
+          <a-select mode="multiple" style="max-width: 286px">
+            <a-select-option value="3">我自己</a-select-option>
+            <a-select-option value="1">吴家豪</a-select-option>
+            <a-select-option value="2">周星星</a-select-option>
+            <a-select-option value="4">李宁</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a @click="lookMyself">只看自己的</a>
+      </form-row>
+      <form-row label="其他选项">
+        <a-row>
+          <a-col :span="8">
+            <a-form-item
+              label="活跃用户"
+              :labelCol="{span: 6}"
+              :wrapperCol="{span: 12}"
+            >
+              <a-select placeholder="不限">
+                <a-select-option value="1">周星星</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item
+              label="好评度"
+              :labelCol="{span: 6}"
+              :wrapperCol="{span: 12}"
+            >
+              <a-select placeholder="不限">
+                <a-select-option value="1">优秀</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </form-row>
     </a-form>
   </a-card>
 </template>
@@ -31,12 +73,24 @@ import AForm from 'vue-antd-ui/es/form/Form'
 import AFormItem from 'vue-antd-ui/es/form/FormItem'
 import AInput from 'vue-antd-ui/es/input/Input'
 import TagSelect from '../../tool/TagSelect'
+import FormRow from '../../form/FormRow'
+import ASelect from 'vue-antd-ui/es/select/index'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import ACol from 'vue-antd-ui/es/grid/Col'
 
 const TagSelectOption = TagSelect.Option
+const ASelectOption = ASelect.Option
 
 export default {
   name: 'SearchForm',
-  components: {TagSelectOption, TagSelect, AInput, AFormItem, AForm, ACard}
+  components: {ACol, ARow, ASelectOption, ASelect, FormRow, TagSelectOption, TagSelect, AInput, AFormItem, AForm, ACard},
+  methods: {
+    lookMyself () {
+      this.form.setFieldsValue({
+        owner: '3'
+      })
+    }
+  }
 }
 </script>
 
diff --git a/src/components/list/Search/SearchLayout.vue b/src/components/list/Search/SearchLayout.vue
index ee38b7e..9ac31a7 100644
--- a/src/components/list/Search/SearchLayout.vue
+++ b/src/components/list/Search/SearchLayout.vue
@@ -46,7 +46,6 @@ export default {
   },
   methods: {
     navigate (key) {
-      this.activeKey = key
       switch (key) {
         case '1':
           this.$router.push('/list/search/article')