From 821a2f81d65bbac4bbaab29b505bc9c8d8b1bfca Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 3 Nov 2020 17:58:17 +0800
Subject: [PATCH] docs(Contact): split demo and document (#7484)

---
 src/contact-card/README.md                    | 192 ++++-------------
 src/contact-card/README.zh-CN.md              | 196 ++++--------------
 src/contact-card/demo/index.vue               | 125 ++---------
 .../test/__snapshots__/demo.spec.js.snap      |  52 +----
 src/contact-card/test/index.spec.js           | 154 ++------------
 src/contact-edit/README.md                    |  73 +++++++
 src/contact-edit/README.zh-CN.md              |  77 +++++++
 src/contact-edit/demo/index.vue               |  50 +++++
 .../test/__snapshots__/demo.spec.js.snap      |  35 ++++
 src/contact-edit/test/demo.spec.js            |   4 +
 src/contact-edit/test/index.spec.js           |  77 +++++++
 src/contact-list/README.md                    |  89 ++++++++
 src/contact-list/README.zh-CN.md              |  93 +++++++++
 src/contact-list/demo/index.vue               |  88 ++++++++
 .../test/__snapshots__/demo.spec.js.snap      |  31 +++
 .../test/__snapshots__/index.spec.js.snap     |   2 +-
 src/contact-list/test/demo.spec.js            |   4 +
 src/contact-list/test/index.spec.js           |  34 +++
 vant.config.js                                |  20 +-
 19 files changed, 814 insertions(+), 582 deletions(-)
 create mode 100644 src/contact-edit/README.md
 create mode 100644 src/contact-edit/README.zh-CN.md
 create mode 100644 src/contact-edit/demo/index.vue
 create mode 100644 src/contact-edit/test/__snapshots__/demo.spec.js.snap
 create mode 100644 src/contact-edit/test/demo.spec.js
 create mode 100644 src/contact-edit/test/index.spec.js
 create mode 100644 src/contact-list/README.md
 create mode 100644 src/contact-list/README.zh-CN.md
 create mode 100644 src/contact-list/demo/index.vue
 create mode 100644 src/contact-list/test/__snapshots__/demo.spec.js.snap
 rename src/{contact-card => contact-list}/test/__snapshots__/index.spec.js.snap (95%)
 create mode 100644 src/contact-list/test/demo.spec.js
 create mode 100644 src/contact-list/test/index.spec.js

diff --git a/src/contact-card/README.md b/src/contact-card/README.md
index 1b2b91dff..cc84a4253 100644
--- a/src/contact-card/README.md
+++ b/src/contact-card/README.md
@@ -4,120 +4,57 @@
 
 ```js
 import Vue from 'vue';
-import { ContactCard, ContactList, ContactEdit } from 'vant';
+import { ContactCard } from 'vant';
 
 Vue.use(ContactCard);
-Vue.use(ContactList);
-Vue.use(ContactEdit);
 ```
 
 ## Usage
 
-### Basic Usage
+### Add Contact
 
 ```html
-<!-- Contact Card -->
-<van-contact-card
-  :type="cardType"
-  :name="currentContact.name"
-  :tel="currentContact.tel"
-  @click="showList = true"
-/>
-
-<!-- Contact List -->
-<van-popup v-model="showList" position="bottom">
-  <van-contact-list
-    v-model="chosenContactId"
-    :list="list"
-    @add="onAdd"
-    @edit="onEdit"
-    @select="onSelect"
-  />
-</van-popup>
-
-<!-- Contact Edit -->
-<van-popup v-model="showEdit" position="bottom">
-  <van-contact-edit
-    :contact-info="editingContact"
-    :is-edit="isEdit"
-    @save="onSave"
-    @delete="onDelete"
-  />
-</van-popup>
+<van-contact-card type="add" @click="onAdd" />
 ```
 
 ```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    onAdd() {
+      Toast('add');
+    },
+  },
+};
+```
+
+### Edit Contact
+
+```html
+<van-contact-card
+  type="edit"
+  :name="currentContact.name"
+  :tel="currentContact.tel"
+  @click="onEdit"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [
-        {
-          name: 'John Snow',
-          tel: '13000000000',
-          id: 0,
-        },
-      ],
+      currentContact: {
+        name: 'John Snow',
+        tel: '13000000000',
+      },
     };
   },
-
-  computed: {
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
-    },
-  },
-
   methods: {
-    // add contact
-    onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
-    },
-
-    // edit contact
-    onEdit(item) {
-      this.isEdit = true;
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    // select contact
-    onSelect() {
-      this.showList = false;
-    },
-
-    // save contact
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-
-      if (this.isEdit) {
-        this.list = this.list.map((item) =>
-          item.id === info.id ? info : item
-        );
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    // delete contact
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter((item) => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
+    onEdit() {
+      Toast('edit');
     },
   },
 };
@@ -136,62 +73,17 @@ export default {
 
 ## API
 
-### ContactCard Props
+### Props
 
-| Attribute | Description                | Type     | Default            |
-| --------- | -------------------------- | -------- | ------------------ |
-| type      | Can be set to `add` `edit` | _string_ | `add`              |
-| name      | Name                       | _string_ | -                  |
-| tel       | Phone                      | _string_ | -                  |
-| add-text  | Add card text              | _string_ | `Add contact info` |
+| Attribute | Description          | Type     | Default            |
+| --------- | -------------------- | -------- | ------------------ |
+| type      | Can be set to `edit` | _string_ | `add`              |
+| name      | Name                 | _string_ | -                  |
+| tel       | Phone                | _string_ | -                  |
+| add-text  | Add card text        | _string_ | `Add contact info` |
 
-### ContactCard Events
+### Events
 
 | Event | Description            | Arguments      |
 | ----- | ---------------------- | -------------- |
 | click | Triggered when clicked | _event: Event_ |
-
-### ContactList Props
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| v-model | Id of chosen contact | _number \| string_ | - |
-| list | Contact list | _Contact[]_ | `[]` |
-| add-text | Add button text | _string_ | `Add new contact` |
-| default-tag-text `v2.3.0` | Default tag text | _string_ | - |
-
-### ContactList Events
-
-| Event  | Description                      | Arguments                   |
-| ------ | -------------------------------- | --------------------------- |
-| add    | Triggered when click add button  | -                           |
-| edit   | Triggered when click edit button | item: contact object，index |
-| select | Triggered when select contact    | item: contact object        |
-
-### ContactEdit Props
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| contact-info | Contact Info | _object_ | `[]` |
-| is-edit | Whether is editing | _boolean_ | `false` |
-| is-saving | Whether to show save button loading status | _boolean_ | `false` |
-| is-deleting | Whether to show delete button loading status | _boolean_ | `false` |
-| tel-validator | The method to validate tel | _(tel: string) => boolean_ | - |
-| show-set-default `v2.3.0` | Whether to show default contact switch | _boolean_ | `false` |
-| set-default-label `v2.3.0` | default contact switch label | _string_ | - |
-
-### ContactEdit Events
-
-| Event  | Description                        | Arguments             |
-| ------ | ---------------------------------- | --------------------- |
-| save   | Triggered when click save button   | content：contact info |
-| delete | Triggered when click delete button | content：contact info |
-
-### Data Structure of Contact
-
-| key       | Description        | Type               |
-| --------- | ------------------ | ------------------ |
-| id        | ID                 | _number \| string_ |
-| name      | Name               | _string_           |
-| tel       | Phone              | _string_           |
-| isDefault | Is default contact | _boolean_          |
diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md
index ed9e441af..6b3f994b9 100644
--- a/src/contact-card/README.zh-CN.md
+++ b/src/contact-card/README.zh-CN.md
@@ -1,127 +1,64 @@
-# Contact 联系人
+# ContactCard 联系人卡片
 
 ### 介绍
 
-通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
+以卡片的形式展示联系人信息。
 
 ### 引入
 
 ```js
 import Vue from 'vue';
-import { ContactCard, ContactList, ContactEdit } from 'vant';
+import { ContactCard } from 'vant';
 
 Vue.use(ContactCard);
-Vue.use(ContactList);
-Vue.use(ContactEdit);
 ```
 
 ## 代码演示
 
-### 基础用法
+### 添加联系人
 
 ```html
-<!-- 联系人卡片 -->
-<van-contact-card
-  :type="cardType"
-  :name="currentContact.name"
-  :tel="currentContact.tel"
-  @click="showList = true"
-/>
-
-<!-- 联系人列表 -->
-<van-popup v-model="showList" position="bottom">
-  <van-contact-list
-    v-model="chosenContactId"
-    :list="list"
-    @add="onAdd"
-    @edit="onEdit"
-    @select="onSelect"
-  />
-</van-popup>
-
-<!-- 联系人编辑 -->
-<van-popup v-model="showEdit" position="bottom">
-  <van-contact-edit
-    :contact-info="editingContact"
-    :is-edit="isEdit"
-    @save="onSave"
-    @delete="onDelete"
-  />
-</van-popup>
+<van-contact-card type="add" @click="onAdd" />
 ```
 
 ```js
+import { Toast } from 'vant';
+
+export default {
+  methods: {
+    onAdd() {
+      Toast('新增');
+    },
+  },
+};
+```
+
+### 编辑联系人
+
+```html
+<van-contact-card
+  type="edit"
+  :name="currentContact.name"
+  :tel="currentContact.tel"
+  @click="onEdit"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [
-        {
-          name: '张三',
-          tel: '13000000000',
-          id: 0,
-        },
-      ],
+      currentContact: {
+        name: '张三',
+        tel: '13000000000',
+      },
     };
   },
-
-  computed: {
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
-    },
-  },
-
   methods: {
-    // 添加联系人
-    onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
-    },
-
-    // 编辑联系人
-    onEdit(item) {
-      this.isEdit = true;
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    // 选中联系人
-    onSelect() {
-      this.showList = false;
-    },
-
-    // 保存联系人
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-
-      if (this.isEdit) {
-        this.list = this.list.map((item) =>
-          item.id === info.id ? info : item
-        );
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    // 删除联系人
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter((item) => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
+    onEdit() {
+      Toast('编辑');
     },
   },
 };
@@ -135,62 +72,17 @@ export default {
 
 ## API
 
-### ContactCard Props
+### Props
 
-| 参数     | 说明                        | 类型     | 默认值               |
-| -------- | --------------------------- | -------- | -------------------- |
-| type     | 类型，可选值为 `add` `edit` | _string_ | `add`                |
-| name     | 联系人姓名                  | _string_ | -                    |
-| tel      | 联系人手机号                | _string_ | -                    |
-| add-text | 添加时的文案提示            | _string_ | `添加订单联系人信息` |
+| 参数     | 说明                      | 类型     | 默认值       |
+| -------- | ------------------------- | -------- | ------------ |
+| type     | 卡片类型，可选值为 `edit` | _string_ | `add`        |
+| name     | 联系人姓名                | _string_ | -            |
+| tel      | 联系人手机号              | _string_ | -            |
+| add-text | 添加时的文案提示          | _string_ | `添加联系人` |
 
-### ContactCard Events
+### Events
 
 | 事件名 | 说明       | 回调参数       |
 | ------ | ---------- | -------------- |
 | click  | 点击时触发 | _event: Event_ |
-
-### ContactList Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| v-model | 当前选中联系人的 id | _number \| string_ | - |
-| list | 联系人列表 | _Contact[]_ | `[]` |
-| add-text | 新建按钮文案 | _string_ | `新建联系人` |
-| default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - |
-
-### ContactList Events
-
-| 事件名 | 说明                   | 回调参数                          |
-| ------ | ---------------------- | --------------------------------- |
-| add    | 点击新增按钮时触发     | -                                 |
-| edit   | 点击编辑按钮时触发     | item: 当前联系人对象，index: 索引 |
-| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
-
-### ContactEdit Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| contact-info | 联系人信息 | _object_ | `[]` |
-| is-edit | 是否为编辑联系人 | _boolean_ | `false` |
-| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
-| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
-| tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - |
-| show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` |
-| set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - |
-
-### ContactEdit Events
-
-| 事件名 | 说明               | 回调参数          |
-| ------ | ------------------ | ----------------- |
-| save   | 点击保存按钮时触发 | content：表单内容 |
-| delete | 点击删除按钮时触发 | content：表单内容 |
-
-### Contact 数据结构
-
-| 键名      | 说明                 | 类型               |
-| --------- | -------------------- | ------------------ |
-| id        | 每位联系人的唯一标识 | _number \| string_ |
-| name      | 联系人姓名           | _string_           |
-| tel       | 联系人手机号         | _number \| string_ |
-| isDefault | 是否为默认联系人     | _boolean_          |
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index c1968e315..b128eda89 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -1,41 +1,23 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
+    <demo-block :title="t('addContact')">
+      <van-contact-card type="add" @click="onAdd" />
+    </demo-block>
+
+    <demo-block :title="t('editContact')">
       <van-contact-card
-        :type="cardType"
+        type="edit"
         :name="currentContact.name"
         :tel="currentContact.tel"
-        @click="showList = true"
+        @click="onEdit"
       />
-
-      <van-popup v-model="showList" position="bottom" :lazy-render="false">
-        <van-contact-list
-          v-model="chosenContactId"
-          :list="list"
-          :default-tag-text="t('defaultTagText')"
-          @add="onAdd"
-          @edit="onEdit"
-          @select="onSelect"
-        />
-      </van-popup>
-
-      <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
-        <van-contact-edit
-          show-set-default
-          :set-default-label="t('defaultLabel')"
-          :contact-info="editingContact"
-          :is-edit="isEdit"
-          @save="onSave"
-          @delete="onDelete"
-        />
-      </van-popup>
     </demo-block>
 
     <demo-block :title="t('uneditable')">
       <van-contact-card
         type="edit"
-        :name="mockContact.name"
-        :tel="mockContact.tel"
+        :name="currentContact.name"
+        :tel="currentContact.tel"
         :editable="false"
       />
     </demo-block>
@@ -43,104 +25,43 @@
 </template>
 
 <script>
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
+      add: '新增',
+      edit: '编辑',
       name: '张三',
-      defaultLabel: '设为默认联系人',
-      defaultTagText: '默认',
+      addContact: '添加联系人',
+      editContact: '编辑联系人',
     },
     'en-US': {
+      add: 'Add',
+      edit: 'Edit',
       name: 'John Snow',
-      defaultLabel: 'Set as the default contact',
-      defaultTagText: 'default',
+      addContact: 'Add Contact',
+      editContact: 'Edit Contact',
     },
   },
 
-  data() {
-    return {
-      chosenContactId: null,
-      editingContact: {},
-      showList: false,
-      showEdit: false,
-      isEdit: false,
-      list: [],
-    };
-  },
-
   computed: {
-    mockContact() {
+    currentContact() {
       return {
         name: this.t('name'),
         tel: '13000000000',
-        id: 0,
-        isDefault: 1,
       };
     },
-
-    cardType() {
-      return this.chosenContactId !== null ? 'edit' : 'add';
-    },
-
-    currentContact() {
-      const id = this.chosenContactId;
-      return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
-    },
-  },
-
-  created() {
-    this.list.push(this.mockContact);
   },
 
   methods: {
     onAdd() {
-      this.editingContact = { id: this.list.length };
-      this.isEdit = false;
-      this.showEdit = true;
+      Toast(this.t('add'));
     },
 
-    onEdit(item) {
-      this.isEdit = true;
-      this.showEdit = true;
-      this.editingContact = item;
-    },
-
-    onSelect() {
-      this.showList = false;
-    },
-
-    onSave(info) {
-      this.showEdit = false;
-      this.showList = false;
-
-      if (this.isEdit) {
-        this.list = this.list.map((item) =>
-          item.id === info.id ? info : item
-        );
-      } else {
-        this.list.push(info);
-      }
-      this.chosenContactId = info.id;
-    },
-
-    onDelete(info) {
-      this.showEdit = false;
-      this.list = this.list.filter((item) => item.id !== info.id);
-      if (this.chosenContactId === info.id) {
-        this.chosenContactId = null;
-      }
+    onEdit() {
+      Toast(this.t('edit'));
     },
   },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-contact-card {
-  .van-popup {
-    height: 100%;
-    background-color: @background-color;
-  }
-}
-</style>
diff --git a/src/contact-card/test/__snapshots__/demo.spec.js.snap b/src/contact-card/test/__snapshots__/demo.spec.js.snap
index ac19a8cda..080c4b76f 100644
--- a/src/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/src/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -8,49 +8,15 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
-      <div class="van-contact-list">
-        <div role="radiogroup" class="van-radio-group van-contact-list__group">
-          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
-              <!----></i>
-            <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
-            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-              <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                  <!----></i></div>
-            </div>
-          </div>
-        </div>
-        <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
-            <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
-          </button></div>
-      </div>
-    </div>
-    <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
-      <div class="van-contact-edit">
-        <div class="van-contact-edit__fields">
-          <div class="van-cell van-field">
-            <div class="van-cell__title van-field__label"><span>张三</span></div>
-            <div class="van-cell__value van-field__value">
-              <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
-            </div>
-          </div>
-          <div class="van-cell van-field">
-            <div class="van-cell__title van-field__label"><span>电话</span></div>
-            <div class="van-cell__value van-field__value">
-              <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
-            </div>
-          </div>
-        </div>
-        <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
-          <div class="van-cell__title"><span>设为默认联系人</span></div>
-          <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
-            <div class="van-switch__node"></div>
-          </div>
-        </div>
-        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
-            <div class="van-button__content"><span class="van-button__text">保存</span></div>
-          </button></div>
-      </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"><i class="van-icon van-icon-contact van-cell__left-icon">
+        <!----></i>
+      <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+        <div>张三：张三</div>
+        <div>电话：13000000000</div>
+      </div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
     </div>
   </div>
   <div>
diff --git a/src/contact-card/test/index.spec.js b/src/contact-card/test/index.spec.js
index 7fb160c7a..b21628e7f 100644
--- a/src/contact-card/test/index.spec.js
+++ b/src/contact-card/test/index.spec.js
@@ -1,143 +1,33 @@
 import ContactCard from '..';
-import ContactList from '../../contact-list';
-import ContactEdit from '../../contact-edit';
-import { mount, later } from '../../../test';
+import { mount } from '../../../test';
 
-const contactInfo = {
-  name: 'test',
-  tel: '123123213',
-};
-
-describe('ContactCard', () => {
-  test('click event', () => {
-    const click = jest.fn();
-    const wrapper = mount(ContactCard, {
-      context: {
-        on: {
-          click,
-        },
+test('should emit click event after clicking the ContactCard', () => {
+  const click = jest.fn();
+  const wrapper = mount(ContactCard, {
+    context: {
+      on: {
+        click,
       },
-    });
-
-    wrapper.trigger('click');
-    expect(click).toHaveBeenCalledTimes(1);
+    },
   });
 
-  test('not editable', () => {
-    const click = jest.fn();
-    const wrapper = mount(ContactCard, {
-      propsData: {
-        editable: false,
-      },
-      context: {
-        on: {
-          click,
-        },
-      },
-    });
-
-    wrapper.trigger('click');
-    expect(click).toHaveBeenCalledTimes(0);
-  });
+  wrapper.trigger('click');
+  expect(click).toHaveBeenCalledTimes(1);
 });
 
-describe('ContactList', () => {
-  test('render', () => {
-    const wrapper = mount(ContactList, {
-      propsData: {
-        list: [contactInfo],
+test('should not emit click event after clicking the uneditable ContactCard', () => {
+  const click = jest.fn();
+  const wrapper = mount(ContactCard, {
+    propsData: {
+      editable: false,
+    },
+    context: {
+      on: {
+        click,
       },
-    });
-    expect(wrapper).toMatchSnapshot();
+    },
   });
 
-  test('select event', () => {
-    const onSelect = jest.fn();
-    const wrapper = mount(ContactList, {
-      propsData: {
-        list: [contactInfo],
-      },
-      context: {
-        on: {
-          select: onSelect,
-        },
-      },
-    });
-
-    wrapper.find('.van-radio__icon').trigger('click');
-
-    expect(onSelect).toHaveBeenCalled();
-  });
-});
-
-describe('ContactEdit', () => {
-  const createComponent = () => {
-    const wrapper = mount(ContactEdit, {
-      propsData: {
-        contactInfo,
-      },
-    });
-
-    const button = wrapper.find('.van-button');
-    const field = wrapper.findAll('.van-field__control');
-    const { errorInfo, data } = wrapper.vm;
-    return {
-      wrapper,
-      data,
-      field,
-      button,
-      errorInfo,
-    };
-  };
-
-  test('valid name', () => {
-    const { data, field, button, errorInfo } = createComponent();
-
-    // name empty
-    data.name = '';
-    button.trigger('click');
-    expect(errorInfo.name).toBeTruthy();
-    field.at(0).trigger('focus');
-    expect(errorInfo.name).toBeFalsy();
-  });
-
-  test('valid tel', () => {
-    const { data, field, button, errorInfo, wrapper } = createComponent();
-    data.tel = '';
-    button.trigger('click');
-    expect(errorInfo.tel).toBeTruthy();
-    field.at(1).trigger('focus');
-    expect(errorInfo.tel).toBeFalsy();
-
-    data.tel = '13000000000';
-    button.trigger('click');
-    expect(errorInfo.tel).toBeFalsy();
-    expect(wrapper.emitted('save')[0][0]).toEqual({
-      name: 'test',
-      tel: '13000000000',
-    });
-  });
-
-  test('watch contact info', () => {
-    const wrapper = mount(ContactEdit);
-    wrapper.setProps({ contactInfo: { name: '123' } });
-    expect(wrapper.vm.data.name).toEqual('123');
-  });
-
-  test('delete contact', async () => {
-    const wrapper = mount(ContactEdit, {
-      propsData: {
-        isEdit: true,
-      },
-    });
-
-    const deleteButton = wrapper.findAll('.van-button').at(1);
-    deleteButton.trigger('click');
-
-    await later();
-    document.querySelector('.van-dialog__confirm').click();
-
-    await later();
-    expect(wrapper.emitted('delete')).toBeTruthy();
-  });
+  wrapper.trigger('click');
+  expect(click).toHaveBeenCalledTimes(0);
 });
diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md
new file mode 100644
index 000000000..6a323dbaf
--- /dev/null
+++ b/src/contact-edit/README.md
@@ -0,0 +1,73 @@
+# ContactEdit
+
+### Install
+
+```js
+import Vue from 'vue';
+import { ContactEdit } from 'vant';
+
+Vue.use(ContactEdit);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-contact-edit
+  is-edit
+  show-set-default
+  :contact-info="editingContact"
+  set-default-label="Set as the default contact"
+  @save="onSave"
+  @delete="onDelete"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      editingContact: {},
+    };
+  },
+  methods: {
+    onSave(contactInfo) {
+      Toast('Save');
+    },
+    onDelete(contactInfo) {
+      Toast('Delete');
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| contact-info | Contact Info | _Contact_ | `[]` |
+| is-edit | Whether is editing | _boolean_ | `false` |
+| is-saving | Whether to show save button loading status | _boolean_ | `false` |
+| is-deleting | Whether to show delete button loading status | _boolean_ | `false` |
+| tel-validator | The method to validate tel | _(tel: string) => boolean_ | - |
+| show-set-default `v2.3.0` | Whether to show default contact switch | _boolean_ | `false` |
+| set-default-label `v2.3.0` | default contact switch label | _string_ | - |
+
+### Events
+
+| Event  | Description                        | Arguments             |
+| ------ | ---------------------------------- | --------------------- |
+| save   | Triggered when click save button   | content：contact info |
+| delete | Triggered when click delete button | content：contact info |
+
+### Data Structure of Contact
+
+| key  | Description | Type     |
+| ---- | ----------- | -------- |
+| name | Name        | _string_ |
+| tel  | Phone       | _string_ |
diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md
new file mode 100644
index 000000000..1e24b2fca
--- /dev/null
+++ b/src/contact-edit/README.zh-CN.md
@@ -0,0 +1,77 @@
+# ContactEdit 联系人编辑
+
+### 介绍
+
+编辑并保存联系人信息。
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { ContactEdit } from 'vant';
+
+Vue.use(ContactEdit);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-contact-edit
+  is-edit
+  show-set-default
+  :contact-info="editingContact"
+  set-default-label="设为默认联系人"
+  @save="onSave"
+  @delete="onDelete"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      editingContact: {},
+    };
+  },
+  methods: {
+    onSave(contactInfo) {
+      Toast('保存');
+    },
+    onDelete(contactInfo) {
+      Toast('删除');
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| contact-info | 联系人信息 | _Contact_ | `{}` |
+| is-edit | 是否为编辑联系人 | _boolean_ | `false` |
+| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
+| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
+| tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - |
+| show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` |
+| set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - |
+
+### Events
+
+| 事件名 | 说明               | 回调参数          |
+| ------ | ------------------ | ----------------- |
+| save   | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+
+### Contact 数据结构
+
+| 键名 | 说明         | 类型               |
+| ---- | ------------ | ------------------ |
+| name | 联系人姓名   | _string_           |
+| tel  | 联系人手机号 | _number \| string_ |
diff --git a/src/contact-edit/demo/index.vue b/src/contact-edit/demo/index.vue
new file mode 100644
index 000000000..6c947cfe5
--- /dev/null
+++ b/src/contact-edit/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-contact-edit
+        is-edit
+        show-set-default
+        :contact-info="editingContact"
+        :set-default-label="t('defaultLabel')"
+        @save="onSave"
+        @delete="onDelete"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      defaultLabel: '设为默认联系人',
+    },
+    'en-US': {
+      defaultLabel: 'Set as the default contact',
+    },
+  },
+
+  data() {
+    return {
+      editingContact: {},
+    };
+  },
+
+  methods: {
+    onSave() {
+      this.$toast(this.t('save'));
+    },
+    onDelete() {
+      this.$toast(this.t('delete'));
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.demo-contact-edit {
+  .van-doc-demo-block__title {
+    padding-bottom: 0;
+  }
+}
+</style>
diff --git a/src/contact-edit/test/__snapshots__/demo.spec.js.snap b/src/contact-edit/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..c185ae53b
--- /dev/null
+++ b/src/contact-edit/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-contact-edit">
+      <div class="van-contact-edit__fields">
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>姓名</span></div>
+          <div class="van-cell__value van-field__value">
+            <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
+          </div>
+        </div>
+        <div class="van-cell van-field">
+          <div class="van-cell__title van-field__label"><span>电话</span></div>
+          <div class="van-cell__value van-field__value">
+            <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
+        <div class="van-cell__title"><span>设为默认联系人</span></div>
+        <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+          <div class="van-switch__node"></div>
+        </div>
+      </div>
+      <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">保存</span></div>
+        </button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
+          <div class="van-button__content"><span class="van-button__text">删除</span></div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/contact-edit/test/demo.spec.js b/src/contact-edit/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/contact-edit/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/contact-edit/test/index.spec.js b/src/contact-edit/test/index.spec.js
new file mode 100644
index 000000000..150ba2723
--- /dev/null
+++ b/src/contact-edit/test/index.spec.js
@@ -0,0 +1,77 @@
+import ContactEdit from '..';
+import { mount, later } from '../../../test';
+
+const contactInfo = {
+  name: 'test',
+  tel: '123123213',
+};
+
+const createComponent = () => {
+  const wrapper = mount(ContactEdit, {
+    propsData: {
+      contactInfo,
+    },
+  });
+
+  const button = wrapper.find('.van-button');
+  const field = wrapper.findAll('.van-field__control');
+  const { errorInfo, data } = wrapper.vm;
+  return {
+    wrapper,
+    data,
+    field,
+    button,
+    errorInfo,
+  };
+};
+
+test('should validate contact name before submit form', () => {
+  const { data, field, button, errorInfo } = createComponent();
+
+  // name empty
+  data.name = '';
+  button.trigger('click');
+  expect(errorInfo.name).toBeTruthy();
+  field.at(0).trigger('focus');
+  expect(errorInfo.name).toBeFalsy();
+});
+
+test('should validate contact tel before submit form', () => {
+  const { data, field, button, errorInfo, wrapper } = createComponent();
+  data.tel = '';
+  button.trigger('click');
+  expect(errorInfo.tel).toBeTruthy();
+  field.at(1).trigger('focus');
+  expect(errorInfo.tel).toBeFalsy();
+
+  data.tel = '13000000000';
+  button.trigger('click');
+  expect(errorInfo.tel).toBeFalsy();
+  expect(wrapper.emitted('save')[0][0]).toEqual({
+    name: 'test',
+    tel: '13000000000',
+  });
+});
+
+test('should watch contact info', () => {
+  const wrapper = mount(ContactEdit);
+  wrapper.setProps({ contactInfo: { name: '123' } });
+  expect(wrapper.vm.data.name).toEqual('123');
+});
+
+test('should allow deleting contact', async () => {
+  const wrapper = mount(ContactEdit, {
+    propsData: {
+      isEdit: true,
+    },
+  });
+
+  const deleteButton = wrapper.findAll('.van-button').at(1);
+  deleteButton.trigger('click');
+
+  await later();
+  document.querySelector('.van-dialog__confirm').click();
+
+  await later();
+  expect(wrapper.emitted('delete')).toBeTruthy();
+});
diff --git a/src/contact-list/README.md b/src/contact-list/README.md
new file mode 100644
index 000000000..b61defc8a
--- /dev/null
+++ b/src/contact-list/README.md
@@ -0,0 +1,89 @@
+# ContactList
+
+### Install
+
+```js
+import Vue from 'vue';
+import { ContactList } from 'vant';
+
+Vue.use(ContactList);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-contact-list
+  v-model="chosenContactId"
+  :list="list"
+  default-tag-text="default"
+  @add="onAdd"
+  @edit="onEdit"
+  @select="onSelect"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      chosenContactId: '1',
+      list: [
+        {
+          id: '1',
+          name: 'John Snow',
+          tel: '13000000000',
+          isDefault: true,
+        },
+        {
+          id: '2',
+          name: 'Ned Stark',
+          tel: '1310000000',
+        },
+      ],
+    };
+  },
+  methods: {
+    onAdd() {
+      Toast('Add');
+    },
+    onEdit(contact) {
+      Toast('Edit' + contact.id);
+    },
+    onSelect(contact) {
+      Toast('Select' + contact.id);
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Id of chosen contact | _number \| string_ | - |
+| list | Contact list | _Contact[]_ | `[]` |
+| add-text | Add button text | _string_ | `Add new contact` |
+| default-tag-text `v2.3.0` | Default tag text | _string_ | - |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| add | Triggered when click add button | - |
+| edit | Triggered when click edit button | _contact: Contact，index: number_ |
+| select | Triggered when select contact | _contact: Contact, index: number_ |
+
+### Data Structure of Contact
+
+| key       | Description        | Type               |
+| --------- | ------------------ | ------------------ |
+| id        | ID                 | _number \| string_ |
+| name      | Name               | _string_           |
+| tel       | Phone              | _string_           |
+| isDefault | Is default contact | _boolean_          |
diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md
new file mode 100644
index 000000000..9be5cf312
--- /dev/null
+++ b/src/contact-list/README.zh-CN.md
@@ -0,0 +1,93 @@
+# ContactList 联系人列表
+
+### 介绍
+
+展示联系人列表。
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { ContactList } from 'vant';
+
+Vue.use(ContactList);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-contact-list
+  v-model="chosenContactId"
+  :list="list"
+  default-tag-text="默认"
+  @add="onAdd"
+  @edit="onEdit"
+  @select="onSelect"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      chosenContactId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          isDefault: true,
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+        },
+      ],
+    };
+  },
+  methods: {
+    onAdd() {
+      Toast('新增');
+    },
+    onEdit(contact) {
+      Toast('编辑' + contact.id);
+    },
+    onSelect(contact) {
+      Toast('选择' + contact.id);
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前选中联系人的 id | _number \| string_ | - |
+| list | 联系人列表 | _Contact[]_ | `[]` |
+| add-text | 新建按钮文案 | _string_ | `新建联系人` |
+| default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - |
+
+### Events
+
+| 事件名 | 说明                   | 回调参数                          |
+| ------ | ---------------------- | --------------------------------- |
+| add    | 点击新增按钮时触发     | -                                 |
+| edit   | 点击编辑按钮时触发     | _contact: Contact，index: number_ |
+| select | 切换选中的联系人时触发 | _contact: Contact，index: number_ |
+
+### Contact 数据结构
+
+| 键名      | 说明                 | 类型               |
+| --------- | -------------------- | ------------------ |
+| id        | 每位联系人的唯一标识 | _number \| string_ |
+| name      | 联系人姓名           | _string_           |
+| tel       | 联系人手机号         | _number \| string_ |
+| isDefault | 是否为默认联系人     | _boolean_          |
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
new file mode 100644
index 000000000..a106b1f02
--- /dev/null
+++ b/src/contact-list/demo/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-contact-list
+        v-model="chosenContactId"
+        :list="t('list')"
+        :default-tag-text="t('defaultTagText')"
+        @add="onAdd"
+        @edit="onEdit"
+        @select="onSelect"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      add: '新增',
+      edit: '编辑',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          isDefault: true,
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+        },
+      ],
+      select: '选择',
+      defaultTagText: '默认',
+    },
+    'en-US': {
+      add: 'Add',
+      edit: 'Edit',
+      list: [
+        {
+          id: '1',
+          name: 'John Snow',
+          tel: '13000000000',
+          isDefault: true,
+        },
+        {
+          id: '2',
+          name: 'Ned Stark',
+          tel: '1310000000',
+        },
+      ],
+      select: 'Select',
+      defaultTagText: 'default',
+    },
+  },
+
+  data() {
+    return {
+      chosenContactId: '1',
+    };
+  },
+
+  methods: {
+    onAdd() {
+      this.$toast(this.t('add'));
+    },
+    onEdit(contact) {
+      this.$toast(this.t('edit') + contact.id);
+    },
+    onSelect(contact) {
+      this.$toast(this.t('select') + contact.id);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-contact-card {
+  .van-popup {
+    height: 100%;
+    background-color: @background-color;
+  }
+}
+</style>
diff --git a/src/contact-list/test/__snapshots__/demo.spec.js.snap b/src/contact-list/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..e0365b24f
--- /dev/null
+++ b/src/contact-list/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-contact-list">
+      <div role="radiogroup" class="van-radio-group van-contact-list__group">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
+            <!----></i>
+          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
+          <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
+                <!----></i></div>
+          </div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
+            <!----></i>
+          <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">李四，1310000000</div>
+          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
+          <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
+        </button></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/contact-card/test/__snapshots__/index.spec.js.snap b/src/contact-list/test/__snapshots__/index.spec.js.snap
similarity index 95%
rename from src/contact-card/test/__snapshots__/index.spec.js.snap
rename to src/contact-list/test/__snapshots__/index.spec.js.snap
index 5c4e54037..8946ba610 100644
--- a/src/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/src/contact-list/test/__snapshots__/index.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContactList render 1`] = `
+exports[`should render ContactList correctly 1`] = `
 <div class="van-contact-list">
   <div role="radiogroup" class="van-radio-group van-contact-list__group">
     <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
diff --git a/src/contact-list/test/demo.spec.js b/src/contact-list/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/contact-list/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/contact-list/test/index.spec.js b/src/contact-list/test/index.spec.js
new file mode 100644
index 000000000..441f7e2ba
--- /dev/null
+++ b/src/contact-list/test/index.spec.js
@@ -0,0 +1,34 @@
+import ContactList from '../../contact-list';
+import { mount } from '../../../test';
+
+const contactInfo = {
+  name: 'test',
+  tel: '123123213',
+};
+
+test('should render ContactList correctly', () => {
+  const wrapper = mount(ContactList, {
+    propsData: {
+      list: [contactInfo],
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should emit select event after clicking the radio', () => {
+  const onSelect = jest.fn();
+  const wrapper = mount(ContactList, {
+    propsData: {
+      list: [contactInfo],
+    },
+    context: {
+      on: {
+        select: onSelect,
+      },
+    },
+  });
+
+  wrapper.find('.van-radio__icon').trigger('click');
+
+  expect(onSelect).toHaveBeenCalled();
+});
diff --git a/vant.config.js b/vant.config.js
index e009c8527..d025939c2 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -359,7 +359,15 @@ module.exports = {
               },
               {
                 path: 'contact-card',
-                title: 'Contact 联系人',
+                title: 'ContactCard 联系人卡片',
+              },
+              {
+                path: 'contact-edit',
+                title: 'ContactEdit 联系人编辑',
+              },
+              {
+                path: 'contact-list',
+                title: 'ContactList 联系人列表',
               },
               {
                 path: 'coupon-list',
@@ -714,7 +722,15 @@ module.exports = {
               },
               {
                 path: 'contact-card',
-                title: 'Contact',
+                title: 'ContactCard',
+              },
+              {
+                path: 'contact-edit',
+                title: 'ContactEdit',
+              },
+              {
+                path: 'contact-list',
+                title: 'ContactList',
               },
               {
                 path: 'coupon-list',