From 31faa8ccb8296f3743df89a0f3dde043ffbc9176 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Fri, 27 Jul 2018 15:54:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=A1=E7=89=87=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E3=80=81=E6=90=9C=E7=B4=A2=E8=A1=A8=E6=A0=BC;?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7vue-antd-ui=E7=89=88=E6=9C=AC=E8=87=B3v1.0.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  2 +-
 src/components/layout/RouterLayout.vue | 13 ++++
 src/components/list/ArticleList.vue    | 19 ++++++
 src/components/list/CardList.vue       | 94 ++++++++++++++++++++++++++
 src/components/list/SearchLayout.vue   | 47 +++++++++++++
 src/router/index.js                    | 32 ++++++---
 yarn.lock                              | 22 +++++-
 7 files changed, 214 insertions(+), 15 deletions(-)
 create mode 100644 src/components/layout/RouterLayout.vue
 create mode 100644 src/components/list/ArticleList.vue
 create mode 100644 src/components/list/CardList.vue
 create mode 100644 src/components/list/SearchLayout.vue

diff --git a/package.json b/package.json
index 237bff4..661851e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "moment": "^2.22.2",
     "viser-vue": "^2.2.5",
     "vue": "^2.5.2",
-    "vue-antd-ui": "^0.7.0",
+    "vue-antd-ui": "^1.0.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/components/layout/RouterLayout.vue b/src/components/layout/RouterLayout.vue
new file mode 100644
index 0000000..c92b9eb
--- /dev/null
+++ b/src/components/layout/RouterLayout.vue
@@ -0,0 +1,13 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'RouterLayout'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/list/ArticleList.vue b/src/components/list/ArticleList.vue
new file mode 100644
index 0000000..c144e40
--- /dev/null
+++ b/src/components/list/ArticleList.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <a-card style="" :bordered="false">
+
+    </a-card>
+  </div>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+export default {
+  name: 'ArticleList',
+  components: {ACard}
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/list/CardList.vue b/src/components/list/CardList.vue
new file mode 100644
index 0000000..f3d4999
--- /dev/null
+++ b/src/components/list/CardList.vue
@@ -0,0 +1,94 @@
+<template>
+  <div >
+    <a-list
+      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
+      :dataSource="dataSource"
+    >
+      <a-list-item slot="renderItem" slot-scope="item, index">
+        <template v-if="item === null">
+          <a-button class="new-btn" type="dashed">
+            <a-icon type="plus" />新增产品
+          </a-button>
+        </template>
+        <template v-else>
+          <a-card :hoverable="true">
+            <a-card-meta :title="item.title" :description="item.content">
+              <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" />
+              <div slot="description">{{item.content}}</div>
+            </a-card-meta>
+            <ul class="ant-card-actions" slot="actions">
+              <li><a >操作一</a></li>
+              <li><a >操作二</a></li>
+            </ul>
+          </a-card>
+        </template>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+import AList from 'vue-antd-ui/es/list/index'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import ACard from 'vue-antd-ui/es/card/Card'
+import ACardMeta from 'vue-antd-ui/es/card/Meta'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import AButton from 'vue-antd-ui/es/button/button'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+
+const dataSource = []
+
+for (let i = 0; i < 11  ; i++) {
+  dataSource.push({
+    title: 'Alipay',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+    content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
+  })
+}
+dataSource.push(null)
+export default {
+  name: 'CardList',
+  components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
+  data () {
+    return {
+      dataSource
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .card-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+  }
+  .ant-card-actions{
+    background: #f7f9fa;
+    li{
+      float: left;
+      text-align: center;
+      margin: 12px 0;
+      color: rgba(0, 0, 0, 0.45);
+      width: 50%;
+      a{
+        color: rgba(0,0,0,.45);
+        line-height: 22px;
+        display: inline-block;
+        width: 100%;
+      }
+      a:hover{
+        color: #1890ff;
+      }
+    }
+    li:not(:last-child) {
+      border-right: 1px solid #e8e8e8;
+    }
+  }
+  .new-btn{
+    background-color: #fff;
+    border-radius: 2px;
+    width: 100%;
+    height: 188px;
+  }
+</style>
diff --git a/src/components/list/SearchLayout.vue b/src/components/list/SearchLayout.vue
new file mode 100644
index 0000000..b0446ec
--- /dev/null
+++ b/src/components/list/SearchLayout.vue
@@ -0,0 +1,47 @@
+<template>
+    <div>
+      <div class="search-head">
+        <div class="search-input">
+          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
+        </div>
+        <div style="padding: 0 24px">
+          <a-tabs tabBarStyle="margin: 0">
+            <a-tab-pane tab="文章" key="1"></a-tab-pane>
+            <a-tab-pane tab="应用" key="2"></a-tab-pane>
+            <a-tab-pane tab="项目" key="3"></a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+      <div class="search-content">
+        <router-view />
+      </div>
+    </div>
+</template>
+
+<script>
+import AInput from 'vue-antd-ui/es/input/Input'
+import AInputGroup from 'vue-antd-ui/es/input/Group'
+import AButton from 'vue-antd-ui/es/button/button'
+import AInputSearch from 'vue-antd-ui/es/input/Search'
+import ATabs from 'vue-antd-ui/es/tabs'
+
+const ATabPane = ATabs.TabPane
+
+export default {
+  name: 'SearchLayout',
+  components: {ATabPane, ATabs, AInputSearch, AButton, AInputGroup, AInput}
+}
+</script>
+
+<style lang="less" scoped>
+  .search-head{
+    background-color: #fff;
+    margin: -25px -24px -24px;
+    .search-input{
+      text-align: center;
+    }
+  }
+  .search-content{
+    margin-top: 48px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index a33371d..61b643c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,7 +6,6 @@ import NotFound from '@/components/exception/404'
 import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
 import PageLayout from '@/components/layout/PageLayout'
-import CommonPageLayout from '@/components/layout/CommonPageLayout'
 import BasicForm from '@/components/form/BasicForm'
 import StepForm from '@/components/form/stepForm/StepForm'
 import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
@@ -14,6 +13,9 @@ import Success from '@/components/result/Success'
 import Error from '@/components/result/Error'
 import QueryList from '@/components/list/QueryList'
 import StandardList from '@/components/list/StandardList'
+import CardList from '@/components/list/CardList'
+import SearchLayout from '@/components/list/SearchLayout'
+import ArticleList from '@/components/list/ArticleList'
 
 Vue.use(Router)
 
@@ -54,32 +56,40 @@ export default new Router({
     {
       path: '/list',
       name: '列表页',
-      component: CommonPageLayout,
+      component: PageLayout,
       icon: 'table',
       children: [
         {
-          path: '/form/query',
+          path: '/list/query',
           name: '查询表格',
           component: QueryList,
           icon: 'none'
         },
         {
-          path: '/form/primary',
+          path: '/list/primary',
           name: '标准表格',
           component: StandardList,
           icon: 'none'
         },
         {
-          path: '/form/card',
+          path: '/list/card',
           name: '卡片表格',
-          component: NotFound,
+          component: CardList,
           icon: 'none'
         },
         {
-          path: '/form/search',
+          path: '/list/search',
           name: '搜索表格',
-          component: NotFound,
-          icon: 'none'
+          component: SearchLayout,
+          icon: 'none',
+          children: [
+            {
+              path: '/list/search/article',
+              name: '文章',
+              component: ArticleList,
+              icon: 'none'
+            }
+          ]
         }
       ]
     },
@@ -87,7 +97,7 @@ export default new Router({
       path: '/detail',
       name: '详情页',
       icon: 'profile',
-      component: CommonPageLayout,
+      component: PageLayout,
       children: [
         {
           path: '/detail/basic',
@@ -107,7 +117,7 @@ export default new Router({
       path: '/result',
       name: '结果页',
       icon: 'check-circle-o',
-      component: CommonPageLayout,
+      component: PageLayout,
       children: [
         {
           path: '/result/success',
diff --git a/yarn.lock b/yarn.lock
index 249d14f..fbce72a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4780,6 +4780,12 @@ json2module@^0.0.3:
   dependencies:
     rw "^1.3.2"
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "http://registry.npm.taobao.org/json2mq/download/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@3.3.2, json3@^3.3.2:
   version "3.3.2"
   resolved "http://registry.npm.taobao.org/json3/download/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
@@ -6854,6 +6860,10 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7440,6 +7450,10 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "http://registry.npm.taobao.org/string-convert/download/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.taobao.org/string-length/download/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -8013,9 +8027,9 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-antd-ui@^0.7.0:
-  version "0.7.0"
-  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-0.7.0.tgz#816b98f0ff595066cf928f5af6fa0aea67e04b76"
+vue-antd-ui@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.0.tgz#b7fd61c3b3c9f3334f313a34a28e58e5a0e3ff8d"
   dependencies:
     add-dom-event-listener "^1.0.2"
     array-tree-filter "^2.1.0"
@@ -8029,9 +8043,11 @@ vue-antd-ui@^0.7.0:
     dom-scroll-into-view "^1.2.1"
     enquire.js "^2.1.6"
     is-negative-zero "^2.0.0"
+    json2mq "^0.2.0"
     lodash "^4.17.5"
     moment "^2.21.0"
     omit.js "^1.0.0"
+    resize-observer-polyfill "^1.5.0"
     shallow-equal "^1.0.0"
     shallowequal "^1.0.2"
     warning "^3.0.0"