From 5f3c7155eb65dc5ac1b847f781a764b3aca47e49 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Mon, 26 Aug 2019 18:38:45 +0800
Subject: [PATCH] 增加开发指南

---
 examples/App.vue                          |  16 ----------------
 examples/assets/vue.svg                   |  14 ++++++++++++++
 examples/main.js                          |   3 +--
 examples/router/routes.js                 |  34 ++++++++++++++++++++++++++--------
 examples/styles/index.scss                |  28 ++++++++++++++++++++++++++++
 examples/views/docs/component/detail.md   |  73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/component/form.md     | 147 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/component/scheme.md   |  94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/component/search.md   | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/component/select.md   |  80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/component/table.md    | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/docs/detail.md             |  73 -------------------------------------------------------------------------
 examples/views/docs/form.md               | 147 ---------------------------------------------------------------------------------------------------------------------------------------------------
 examples/views/docs/guide/installation.md |   3 +++
 examples/views/docs/guide/introduce.md    |  11 +++++++++++
 examples/views/docs/scheme.md             |  94 ----------------------------------------------------------------------------------------------
 examples/views/docs/search.md             | 132 ------------------------------------------------------------------------------------------------------------------------------------
 examples/views/docs/select.md             |  80 --------------------------------------------------------------------------------
 examples/views/docs/table.md              | 142 ----------------------------------------------------------------------------------------------------------------------------------------------
 examples/views/layout/component.vue       |  48 ++++++++++++++++++++++++++++++++++--------------
 examples/views/page/index.vue             |   6 ++++--
 webpack/markdown-loader.js                |  48 ++++++++++++++++++++++++++++++++----------------
 22 files changed, 821 insertions(+), 726 deletions(-)
 create mode 100644 examples/assets/vue.svg
 create mode 100644 examples/styles/index.scss
 create mode 100644 examples/views/docs/component/detail.md
 create mode 100644 examples/views/docs/component/form.md
 create mode 100644 examples/views/docs/component/scheme.md
 create mode 100644 examples/views/docs/component/search.md
 create mode 100755 examples/views/docs/component/select.md
 create mode 100644 examples/views/docs/component/table.md
 delete mode 100644 examples/views/docs/detail.md
 delete mode 100644 examples/views/docs/form.md
 create mode 100644 examples/views/docs/guide/installation.md
 create mode 100644 examples/views/docs/guide/introduce.md
 delete mode 100644 examples/views/docs/scheme.md
 delete mode 100644 examples/views/docs/search.md
 delete mode 100755 examples/views/docs/select.md
 delete mode 100644 examples/views/docs/table.md

diff --git a/examples/App.vue b/examples/App.vue
index 5cc9d0a..812eef2 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -9,19 +9,3 @@ export default {
   name: 'App'
 }
 </script>
-
-<style lang="scss">
-@import "./styles/markdown.scss";
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-#app {
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-    Microsoft YaHei, SimSun, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</style>
diff --git a/examples/assets/vue.svg b/examples/assets/vue.svg
new file mode 100644
index 0000000..52a2a47
--- /dev/null
+++ b/examples/assets/vue.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="400px" height="350px" viewBox="0 0 400 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Vue</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-266.000000, -523.000000)">
+            <g id="Vue" transform="translate(266.000000, 523.000000)">
+                <polygon id="路径" fill="#44BC84" points="80 0 200 210 320 0 400 0 200 350 0 0"></polygon>
+                <polygon id="路径" fill="#344C5C" points="155.33049 0 200.426439 80 245.522388 0 320.682303 0 200.426439 210 80.1705757 0"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/main.js b/examples/main.js
index 799dda7..1dd7f7b 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -9,8 +9,7 @@ import EagleWebToolkit from '../packages';
 import NProgress from 'nprogress';
 import EagleCodeSnippet from "@/components/code-snippet";
 
-import '@/styles/element.scss';
-import '@/styles/nprogress.scss';
+import '@/styles/index.scss';
 import "highlight.js/styles/github.css";
 
 const request = axios.create({
diff --git a/examples/router/routes.js b/examples/router/routes.js
index b0ef188..d5d105c 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -1,6 +1,23 @@
 import DefaultLayout from '@/views/layout/default';
 import ComponentLayout from '@/views/layout/component';
 
+// 开发指南的文档
+
+const _guides = [
+  {
+    path: 'introduce',
+    name: 'introduce',
+    meta: { title: '简介' },
+    component: () => import('@/views/docs/guide/introduce.md'),
+  },
+  {
+    path: 'installation',
+    name: 'installation',
+    meta: { title: '安装' },
+    component: () => import('@/views/docs/guide/installation.md'),
+  },
+];
+
 // 组件页面的文档
 
 const _components = [
@@ -11,7 +28,7 @@ const _components = [
         path: 'select',
         name: 'select',
         meta: { title: 'Select 选择器' },
-        component: () => import('@/views/docs/select.md'),
+        component: () => import('@/views/docs/component/select.md'),
       },
     ]
   },
@@ -22,25 +39,25 @@ const _components = [
         path: 'detail',
         name: 'detail',
         meta: { title: 'Detail 详情' },
-        component: () => import('@/views/docs/detail.md'),
+        component: () => import('@/views/docs/component/detail.md'),
       },
       {
         path: 'form',
         name: 'form',
         meta: { title: 'Form 表单' },
-        component: () => import('@/views/docs/form.md'),
+        component: () => import('@/views/docs/component/form.md'),
       },
       {
         path: 'search',
         name: 'search',
         meta: { title: 'Search 搜索' },
-        component: () => import('@/views/docs/search.md'),
+        component: () => import('@/views/docs/component/search.md'),
       },
       {
         path: 'table',
         name: 'table',
         meta: { title: 'Table 表格' },
-        component: () => import('@/views/docs/table.md'),
+        component: () => import('@/views/docs/component/table.md'),
       },
     ]
   },
@@ -51,7 +68,7 @@ const _components = [
         path: 'scheme',
         name: 'scheme',
         meta: { title: 'Scheme 方案' },
-        component: () => import('@/views/docs/scheme.md'),
+        component: () => import('@/views/docs/component/scheme.md'),
       },
     ]
   },
@@ -91,12 +108,13 @@ const _pages = [
     name: 'component',
     meta: { title: '组件', path: '/component' },
     component: ComponentLayout,
-    redirect: `/component/${_components[0].children[0].path || 'detail'}`,
-    children: _components_children
+    redirect: `/component/${_guides[0].path || 'detail'}`,
+    children: [..._components_children, ..._guides]
   }
 ]
 
 export const pages = _pages;
+export const guides = _guides;
 export const components = _components;
 
 export default [
diff --git a/examples/styles/index.scss b/examples/styles/index.scss
new file mode 100644
index 0000000..29799d7
--- /dev/null
+++ b/examples/styles/index.scss
@@ -0,0 +1,28 @@
+@import './variables.scss';
+@import './markdown.scss';
+@import './nprogress.scss';
+@import './element.scss';
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+#app {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, SimSun, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.side-menu__group {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 20px;
+  .subtitle {
+    font-weight: normal;
+    color: $text;
+    font-size: 14px;
+  }
+}
\ No newline at end of file
diff --git a/examples/views/docs/component/detail.md b/examples/views/docs/component/detail.md
new file mode 100644
index 0000000..f751f57
--- /dev/null
+++ b/examples/views/docs/component/detail.md
@@ -0,0 +1,73 @@
+# Detail 详情
+
+> 将Form组件的值展示位详情
+
+## 基础用法
+
+配置项list将无视配置的type，统一渲染为label
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件
+
+```html
+<template>
+  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      detailList: [
+        { type: 'el-input', key: 'name', label: '名称' },
+        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
+        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
+        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
+      ],
+      detailModel: {
+        name: '老A',
+        address: 'Any where',
+        postcode: 123456,
+        number: 'N栋N-N'
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
+
+使用`list`属性设置数据源
+
+```js
+export default {
+    data() {
+        const d = '!&(*&(*';
+        console.log('123');
+        return {
+            a: 123,
+            b: '456',
+            c: d,
+        }
+    }
+}
+```
+
+---
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | Object | - | -
+list | 表单项配置列表 | Array | - | []
+
+## List 表单项配置列表
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
\ No newline at end of file
diff --git a/examples/views/docs/component/form.md b/examples/views/docs/component/form.md
new file mode 100644
index 0000000..951962f
--- /dev/null
+++ b/examples/views/docs/component/form.md
@@ -0,0 +1,147 @@
+# Form 表单
+
+不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置
+
+## 基础用法
+
+配置项list中通过type可以配置任意组件，不受框架限制
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
+
+```html
+<template>
+  <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formList: [
+        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
+        { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
+        { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
+      ]
+    }
+  },
+  methods: {
+    handleSubmit(value) {
+      console.log(value)
+    },
+    handleCancel() {
+      this.$refs.form.reset()
+      console.log('cancel!')
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 分组
+
+对配置项进行分组
+
+:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组
+
+```html
+<template>
+  <eagle-form :list="formList" style="width: 500px;">
+    <template #label-gender="{ label }">
+      <span>自定义 - {{ label }}</span>
+    </template>
+  </eagle-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formList: [
+        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
+        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
+        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
+        { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 自定义分组
+
+有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义
+
+:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题
+
+```html
+<template>
+  <eagle-form :list="formList" style="width: 500px;">
+    <template #group-not-bad="{ label }">
+      <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
+        <span>哎哟 - {{ label }} - 不错哦</span>
+        <el-button size="mini" type="primary">这是一个按钮</el-button>
+      </div>
+    </template>
+  </eagle-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formList: [
+        { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
+        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | Object | - | -
+list | 表单项配置列表 | Array | - | []
+
+## Methods 方法
+
+方法名|说明|参数
+-|-|-
+reset | 重置表单 | -
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+change | 表单model发生变化时触发 | model对象
+submit | 点击表单提交按钮时触发 | model对象
+cancel | 点击表单取消按钮时触发 | -
+
+## List 表单项配置列表
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+type | 组件类型 | String | - | el-input
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
+props | 组件参数 | Object,Function(model: object)) | - | {}
+style | 组件样式 | Object | - | { width: "100%" }
+on | 组件事件 | Object,Function(model: object) | - | {}
+visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
+show | 组件v-show状态 | Boolean,Function(model: object) | - | true
+rules | 组件校验规则 | Object,Array | - | -
+tip | 组件提示框 | Object,String | - | {}
\ No newline at end of file
diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md
new file mode 100644
index 0000000..ed09e03
--- /dev/null
+++ b/examples/views/docs/component/scheme.md
@@ -0,0 +1,94 @@
+# Scheme 方案
+
+Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图
+
+## 基础用法
+
+配置项list中通过type可以配置任意组件，不受框架限制
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
+
+```html
+<template>
+  <eagle-scheme :list="schemeList" :option="{ auto: false }">
+    <!-- <div slot="action-bar" slot-scope="{ handleNew }">
+      <el-button type="warn" @click="handleNew">新增</el-button>
+    </div> -->
+    <el-button slot="action-button" type="success" plain size="small">启用</el-button>
+    <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
+    <el-table-column type="selection" width="50" align="center"></el-table-column>
+    <template #table-status="{ setDialog }">
+      <el-table-column prop="status" label="激活状态" min-width="120">
+        <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
+      </el-table-column>
+    </template>
+    <template #search-status="{ model }">
+      <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
+    </template>
+    <template #form-group-setting >
+      <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
+        <span>哎哟 - 设置 - 不错哦</span>
+        <el-button size="mini" type="primary">这是一个按钮</el-button>
+      </div>
+    </template>
+    <template #form-item-status="{ model }">
+      <el-input-number v-model="model.status"></el-input-number>
+    </template>
+    <template #view-item-code="{ model }">
+      <el-input disabled :value="model.code"></el-input>
+    </template>
+    <!-- <template #dialog-view="{ row }">
+      <div>这是一个自定义弹出框内容</div>
+      <div>{{ row }}</div>
+    </template> -->
+    <template #dialog-status>
+      <div>这是Status的内容</div>
+    </template>
+    <!-- 自定义按钮组 -->
+    <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
+      <el-tag>自定义按钮组</el-tag>
+    </el-table-column> -->
+    <!-- 在操作按钮组前加上新的按钮 -->
+    <!-- <template slot="table-operation-btn">
+      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
+      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
+    </template> -->
+    <!-- 在操作按钮组后追加新的按钮 -->
+    <!-- <template slot="table-operation-btn-append">
+      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
+      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
+    </template> -->
+  </eagle-scheme>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schemeList: [
+        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
+          exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
+        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
+        { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
+        { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
+      ],
+      dataSource: [
+        { label: '选项A', value: 'A' },
+        { label: '选项B', value: 'B' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+list | 表单项配置列表 | Array | - | []
\ No newline at end of file
diff --git a/examples/views/docs/component/search.md b/examples/views/docs/component/search.md
new file mode 100644
index 0000000..af8068a
--- /dev/null
+++ b/examples/views/docs/component/search.md
@@ -0,0 +1,132 @@
+# Search 搜索
+
+Search 搜索组件是一个使用`list`来配置生成的搜索表单
+
+## 基础用法
+
+配置项list中通过type可以配置任意组件，不受框架限制
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
+
+```html
+<template>
+  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searching: false,
+      searchList: [
+        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
+        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
+        { type: 'el-input', key: 'number', label: '楼栋号' },
+        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
+        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
+        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
+      ]
+    }
+  },
+  mounted() {
+    this.searching = true;
+    setTimeout(() => {
+      this.searching = false;
+    }, 3000);
+  },
+  methods: {
+    handleSearch(value) {
+      console.log(value);
+    },
+    handleReset() {
+      console.log('reset');
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 自定义组件
+
+在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
+
+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
+
+```html
+<template>
+  <eagle-search :list="searchList">
+    <template #type="{ model }">
+      <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
+    </template>
+    <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
+      <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
+      <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
+      <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
+    </template>
+  </eagle-search>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchList: [
+        { type: 'el-input', key: 'name', label: '名称' },
+        { key: 'type', label: '类型' },
+        { type: 'el-input', key: 'yes', label: '是的' },
+        { type: 'el-input', key: 'yeah', label: '没错' },
+        { type: 'el-input', key: 'absolutely', label: '就这样' },
+      ],
+      dataSource: [
+        { label: '选项A', value: 'A' },
+        { label: '选项B', value: 'B' },
+      ]
+    }
+  },
+  methods: {
+    handleQuery(model, action) {
+      if (action) {
+        action();
+        console.log(model);
+      }
+    },
+  }
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | Object | - | -
+list | 表单项配置列表 | Array | - | []
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+change | 表单model发生变化时触发 | model对象
+search | 点击查询按钮时触发 | model对象
+reset | 点击重置按钮时触发 | -
+
+## List 表单项配置列表
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+type | 组件类型 | String | - | el-input
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
+props | 组件参数 | Object,Function(model: object)) | - | {}
+style | 组件样式 | Object | - | { width: "100%" }
+on | 组件事件 | Object,Function(model: object) | - | {}
+visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
+rules | 组件校验规则 | Object,Array | - | -
+tip | 组件提示框 | Object,String | - | {}
\ No newline at end of file
diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md
new file mode 100755
index 0000000..b543c33
--- /dev/null
+++ b/examples/views/docs/component/select.md
@@ -0,0 +1,80 @@
+# Select 选择器
+
+在Element的el-select基础上的封装，直接通过数据列表配置选项
+
+## 基础用法
+
+:::snippet 通过`dataSource`属性设置数据源
+
+```html
+<template>
+  <eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectValue: 'A',
+      dataSource: [
+        { label: '选项A', value: 'A' },
+        { label: '选项B', value: 'B' }
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+
+## 数据源
+
+:::snippet 通过`dataSource`属性设置数据源，支持函数和`Promise`
+
+```html
+<template>
+  <eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectValue1: undefined
+    }
+  },
+  methods: {
+    getDataSource() {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve([
+            { label: '选项A', value: 'A' },
+            { label: '选项B', value: 'B' }
+          ]);
+        }, 3000);
+      });
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value / v-model |	绑定值 | String,Array | - | -
+dataSource | 数据源或获取数据源的方法 | Array,Function,Promise | - | []
+
+## DataSource 数据源配置列表
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+label | 选项标签 | String | - | -
+value | 选项值 | String,Number,Object | - | -
\ No newline at end of file
diff --git a/examples/views/docs/component/table.md b/examples/views/docs/component/table.md
new file mode 100644
index 0000000..3481dc2
--- /dev/null
+++ b/examples/views/docs/component/table.md
@@ -0,0 +1,142 @@
+# Table 表格
+
+不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
+
+## 基础用法
+
+表格列可以通过`list`动态配置
+
+:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
+
+```html
+<template>
+  <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
+        { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
+        { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
+        { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
+      ],
+      tableList: [
+        { key: 'name', label: '名称',
+          formatter(row, column) {
+            return `${row.name} - ${row.postcode}`;
+          }
+        },
+        { key: 'address', label: '住址' },
+        { key: 'postcode', agentKey: 'postName', label: '邮编' },
+        { key: 'number', label: '楼栋号', minWidth: '180' },
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.$refs.table.instance);
+  },
+  methods: {
+    handleSubmit(value) {
+      console.log(value)
+    },
+    handleCancel() {
+      this.$refs.form.reset()
+      console.log('cancel!')
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 自定义列
+
+表格列可以通过`slot`动态配置，名称对应各列的列名
+
+:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
+
+```html
+<template>
+  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column type="index" width="50"></el-table-column>
+    <template #postcode="{ label, key }">
+      <el-table-column prop="postcode" label="家属院" min-width="200">
+        <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来  -->
+          <span style="color: orange">{{ $index }}</span>
+          <span style="color: blue">{{ label }}</span>
+          <span style="color: red">{{ key }}</span>
+          <span>{{ number }}</span>
+          <span>{{ postcode }}</span>
+        </template>
+      </el-table-column>
+    </template>
+  </eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
+        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
+        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
+        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
+      ],
+      tableProps: {
+        border: true
+      },
+      tableList: [
+        { key: 'name', label: '名称',
+          formatter(row, column) {
+            return `${row.name} - ${row.postcode}`;
+          }
+        },
+        { key: 'address', label: '住址' },
+        { key: 'postcode', label: '邮编' },
+        { key: 'number', label: '楼栋号', minWidth: '180' },
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.$refs.table.instance);
+  },
+  methods: {
+    handleSubmit(value) {
+      console.log(value)
+    },
+    handleCancel() {
+      this.$refs.form.reset()
+      console.log('cancel!')
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+list | 表单项配置列表 | Array | - | []
+tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
+tableEvents | ElementUI表格事件 | Object | - | {}
+
+## List 表单项配置列表
+
+配置方法与Form组件基本相同，有部分属性删减
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
+其它参数 | ElementUI表格项的属性 | Any | - | -
\ No newline at end of file
diff --git a/examples/views/docs/detail.md b/examples/views/docs/detail.md
deleted file mode 100644
index f751f57..0000000
--- a/examples/views/docs/detail.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Detail 详情
-
-> 将Form组件的值展示位详情
-
-## 基础用法
-
-配置项list将无视配置的type，统一渲染为label
-
-:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件
-
-```html
-<template>
-  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      detailList: [
-        { type: 'el-input', key: 'name', label: '名称' },
-        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
-        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
-        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
-      ],
-      detailModel: {
-        name: '老A',
-        address: 'Any where',
-        postcode: 123456,
-        number: 'N栋N-N'
-      }
-    }
-  },
-}
-</script>
-```
-
-:::
-
-
-使用`list`属性设置数据源
-
-```js
-export default {
-    data() {
-        const d = '!&(*&(*';
-        console.log('123');
-        return {
-            a: 123,
-            b: '456',
-            c: d,
-        }
-    }
-}
-```
-
----
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-value / v-model |	绑定值 | Object | - | -
-list | 表单项配置列表 | Array | - | []
-
-## List 表单项配置列表
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-key | 参数名 | String | - | -
-label | 参数标签 | String | - | -
\ No newline at end of file
diff --git a/examples/views/docs/form.md b/examples/views/docs/form.md
deleted file mode 100644
index 951962f..0000000
--- a/examples/views/docs/form.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# Form 表单
-
-不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置
-
-## 基础用法
-
-配置项list中通过type可以配置任意组件，不受框架限制
-
-:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
-
-```html
-<template>
-  <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      formList: [
-        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
-        { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
-        { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
-      ]
-    }
-  },
-  methods: {
-    handleSubmit(value) {
-      console.log(value)
-    },
-    handleCancel() {
-      this.$refs.form.reset()
-      console.log('cancel!')
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## 分组
-
-对配置项进行分组
-
-:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组
-
-```html
-<template>
-  <eagle-form :list="formList" style="width: 500px;">
-    <template #label-gender="{ label }">
-      <span>自定义 - {{ label }}</span>
-    </template>
-  </eagle-form>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      formList: [
-        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
-        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
-        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
-        { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
-      ]
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## 自定义分组
-
-有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义
-
-:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题
-
-```html
-<template>
-  <eagle-form :list="formList" style="width: 500px;">
-    <template #group-not-bad="{ label }">
-      <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
-        <span>哎哟 - {{ label }} - 不错哦</span>
-        <el-button size="mini" type="primary">这是一个按钮</el-button>
-      </div>
-    </template>
-  </eagle-form>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      formList: [
-        { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
-        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
-      ]
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-value / v-model |	绑定值 | Object | - | -
-list | 表单项配置列表 | Array | - | []
-
-## Methods 方法
-
-方法名|说明|参数
--|-|-
-reset | 重置表单 | -
-
-## Events 事件
-
-事件名称|说明|回调参数
--|-|-
-change | 表单model发生变化时触发 | model对象
-submit | 点击表单提交按钮时触发 | model对象
-cancel | 点击表单取消按钮时触发 | -
-
-## List 表单项配置列表
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-type | 组件类型 | String | - | el-input
-key | 参数名 | String | - | -
-label | 参数标签 | String | - | -
-props | 组件参数 | Object,Function(model: object)) | - | {}
-style | 组件样式 | Object | - | { width: "100%" }
-on | 组件事件 | Object,Function(model: object) | - | {}
-visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
-show | 组件v-show状态 | Boolean,Function(model: object) | - | true
-rules | 组件校验规则 | Object,Array | - | -
-tip | 组件提示框 | Object,String | - | {}
\ No newline at end of file
diff --git a/examples/views/docs/guide/installation.md b/examples/views/docs/guide/installation.md
new file mode 100644
index 0000000..f3439dd
--- /dev/null
+++ b/examples/views/docs/guide/installation.md
@@ -0,0 +1,3 @@
+# 安装
+
+## npm安装
\ No newline at end of file
diff --git a/examples/views/docs/guide/introduce.md b/examples/views/docs/guide/introduce.md
new file mode 100644
index 0000000..449b208
--- /dev/null
+++ b/examples/views/docs/guide/introduce.md
@@ -0,0 +1,11 @@
+# EAGLE-WEB-TOOKIT
+
+`EAGLE-WEB-TOOKIT` 是在基于**Vue 2.0**的 [**Element**](https://element.eleme.cn) 组件库基础上的扩展组件库，主要用于快速生成企业后台管理项目。
+
+## 特性
+
+额
+
+::: html 啊啊啊
+<span>123123</span>
+:::
\ No newline at end of file
diff --git a/examples/views/docs/scheme.md b/examples/views/docs/scheme.md
deleted file mode 100644
index ed09e03..0000000
--- a/examples/views/docs/scheme.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Scheme 方案
-
-Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图
-
-## 基础用法
-
-配置项list中通过type可以配置任意组件，不受框架限制
-
-:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则
-
-```html
-<template>
-  <eagle-scheme :list="schemeList" :option="{ auto: false }">
-    <!-- <div slot="action-bar" slot-scope="{ handleNew }">
-      <el-button type="warn" @click="handleNew">新增</el-button>
-    </div> -->
-    <el-button slot="action-button" type="success" plain size="small">启用</el-button>
-    <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
-    <el-table-column type="selection" width="50" align="center"></el-table-column>
-    <template #table-status="{ setDialog }">
-      <el-table-column prop="status" label="激活状态" min-width="120">
-        <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
-      </el-table-column>
-    </template>
-    <template #search-status="{ model }">
-      <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
-    </template>
-    <template #form-group-setting >
-      <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
-        <span>哎哟 - 设置 - 不错哦</span>
-        <el-button size="mini" type="primary">这是一个按钮</el-button>
-      </div>
-    </template>
-    <template #form-item-status="{ model }">
-      <el-input-number v-model="model.status"></el-input-number>
-    </template>
-    <template #view-item-code="{ model }">
-      <el-input disabled :value="model.code"></el-input>
-    </template>
-    <!-- <template #dialog-view="{ row }">
-      <div>这是一个自定义弹出框内容</div>
-      <div>{{ row }}</div>
-    </template> -->
-    <template #dialog-status>
-      <div>这是Status的内容</div>
-    </template>
-    <!-- 自定义按钮组 -->
-    <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
-      <el-tag>自定义按钮组</el-tag>
-    </el-table-column> -->
-    <!-- 在操作按钮组前加上新的按钮 -->
-    <!-- <template slot="table-operation-btn">
-      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
-      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
-    </template> -->
-    <!-- 在操作按钮组后追加新的按钮 -->
-    <!-- <template slot="table-operation-btn-append">
-      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
-      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
-    </template> -->
-  </eagle-scheme>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      schemeList: [
-        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
-          exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
-        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
-        { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
-        { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
-      ],
-      dataSource: [
-        { label: '选项A', value: 'A' },
-        { label: '选项B', value: 'B' },
-      ],
-    }
-  },
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-list | 表单项配置列表 | Array | - | []
\ No newline at end of file
diff --git a/examples/views/docs/search.md b/examples/views/docs/search.md
deleted file mode 100644
index af8068a..0000000
--- a/examples/views/docs/search.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# Search 搜索
-
-Search 搜索组件是一个使用`list`来配置生成的搜索表单
-
-## 基础用法
-
-配置项list中通过type可以配置任意组件，不受框架限制
-
-:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
-
-```html
-<template>
-  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searching: false,
-      searchList: [
-        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
-        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
-        { type: 'el-input', key: 'number', label: '楼栋号' },
-        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
-        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
-        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
-      ]
-    }
-  },
-  mounted() {
-    this.searching = true;
-    setTimeout(() => {
-      this.searching = false;
-    }, 3000);
-  },
-  methods: {
-    handleSearch(value) {
-      console.log(value);
-    },
-    handleReset() {
-      console.log('reset');
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## 自定义组件
-
-在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
-
-:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
-
-```html
-<template>
-  <eagle-search :list="searchList">
-    <template #type="{ model }">
-      <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
-    </template>
-    <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
-      <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
-      <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
-      <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
-    </template>
-  </eagle-search>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchList: [
-        { type: 'el-input', key: 'name', label: '名称' },
-        { key: 'type', label: '类型' },
-        { type: 'el-input', key: 'yes', label: '是的' },
-        { type: 'el-input', key: 'yeah', label: '没错' },
-        { type: 'el-input', key: 'absolutely', label: '就这样' },
-      ],
-      dataSource: [
-        { label: '选项A', value: 'A' },
-        { label: '选项B', value: 'B' },
-      ]
-    }
-  },
-  methods: {
-    handleQuery(model, action) {
-      if (action) {
-        action();
-        console.log(model);
-      }
-    },
-  }
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-value / v-model |	绑定值 | Object | - | -
-list | 表单项配置列表 | Array | - | []
-
-## Events 事件
-
-事件名称|说明|回调参数
--|-|-
-change | 表单model发生变化时触发 | model对象
-search | 点击查询按钮时触发 | model对象
-reset | 点击重置按钮时触发 | -
-
-## List 表单项配置列表
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-type | 组件类型 | String | - | el-input
-key | 参数名 | String | - | -
-label | 参数标签 | String | - | -
-props | 组件参数 | Object,Function(model: object)) | - | {}
-style | 组件样式 | Object | - | { width: "100%" }
-on | 组件事件 | Object,Function(model: object) | - | {}
-visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
-rules | 组件校验规则 | Object,Array | - | -
-tip | 组件提示框 | Object,String | - | {}
\ No newline at end of file
diff --git a/examples/views/docs/select.md b/examples/views/docs/select.md
deleted file mode 100755
index b543c33..0000000
--- a/examples/views/docs/select.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Select 选择器
-
-在Element的el-select基础上的封装，直接通过数据列表配置选项
-
-## 基础用法
-
-:::snippet 通过`dataSource`属性设置数据源
-
-```html
-<template>
-  <eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectValue: 'A',
-      dataSource: [
-        { label: '选项A', value: 'A' },
-        { label: '选项B', value: 'B' }
-      ]
-    }
-  },
-}
-</script>
-```
-
-:::
-
-
-## 数据源
-
-:::snippet 通过`dataSource`属性设置数据源，支持函数和`Promise`
-
-```html
-<template>
-  <eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectValue1: undefined
-    }
-  },
-  methods: {
-    getDataSource() {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve([
-            { label: '选项A', value: 'A' },
-            { label: '选项B', value: 'B' }
-          ]);
-        }, 3000);
-      });
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-value / v-model |	绑定值 | String,Array | - | -
-dataSource | 数据源或获取数据源的方法 | Array,Function,Promise | - | []
-
-## DataSource 数据源配置列表
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-label | 选项标签 | String | - | -
-value | 选项值 | String,Number,Object | - | -
\ No newline at end of file
diff --git a/examples/views/docs/table.md b/examples/views/docs/table.md
deleted file mode 100644
index 3481dc2..0000000
--- a/examples/views/docs/table.md
+++ /dev/null
@@ -1,142 +0,0 @@
-# Table 表格
-
-不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
-
-## 基础用法
-
-表格列可以通过`list`动态配置
-
-:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
-
-```html
-<template>
-  <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
-        { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
-        { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
-        { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
-      ],
-      tableList: [
-        { key: 'name', label: '名称',
-          formatter(row, column) {
-            return `${row.name} - ${row.postcode}`;
-          }
-        },
-        { key: 'address', label: '住址' },
-        { key: 'postcode', agentKey: 'postName', label: '邮编' },
-        { key: 'number', label: '楼栋号', minWidth: '180' },
-      ]
-    }
-  },
-  mounted() {
-    console.log(this.$refs.table.instance);
-  },
-  methods: {
-    handleSubmit(value) {
-      console.log(value)
-    },
-    handleCancel() {
-      this.$refs.form.reset()
-      console.log('cancel!')
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## 自定义列
-
-表格列可以通过`slot`动态配置，名称对应各列的列名
-
-:::snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
-
-```html
-<template>
-  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
-    <el-table-column type="selection" width="55"></el-table-column>
-    <el-table-column type="index" width="50"></el-table-column>
-    <template #postcode="{ label, key }">
-      <el-table-column prop="postcode" label="家属院" min-width="200">
-        <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来  -->
-          <span style="color: orange">{{ $index }}</span>
-          <span style="color: blue">{{ label }}</span>
-          <span style="color: red">{{ key }}</span>
-          <span>{{ number }}</span>
-          <span>{{ postcode }}</span>
-        </template>
-      </el-table-column>
-    </template>
-  </eagle-table>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
-        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
-        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
-        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
-      ],
-      tableProps: {
-        border: true
-      },
-      tableList: [
-        { key: 'name', label: '名称',
-          formatter(row, column) {
-            return `${row.name} - ${row.postcode}`;
-          }
-        },
-        { key: 'address', label: '住址' },
-        { key: 'postcode', label: '邮编' },
-        { key: 'number', label: '楼栋号', minWidth: '180' },
-      ]
-    }
-  },
-  mounted() {
-    console.log(this.$refs.table.instance);
-  },
-  methods: {
-    handleSubmit(value) {
-      console.log(value)
-    },
-    handleCancel() {
-      this.$refs.form.reset()
-      console.log('cancel!')
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-list | 表单项配置列表 | Array | - | []
-tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
-tableEvents | ElementUI表格事件 | Object | - | {}
-
-## List 表单项配置列表
-
-配置方法与Form组件基本相同，有部分属性删减
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-key | 参数名 | String | - | -
-label | 参数标签 | String | - | -
-其它参数 | ElementUI表格项的属性 | Any | - | -
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 1f758db..3eaf85d 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -4,7 +4,11 @@
     <el-container class="layout-container__component">
       <el-aside class="layout-aside__component" width="200px">
         <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
-          <h4 style="padding: 0 20px;">组件</h4>
+          <h4 class="side-menu__group">开发指南</h4>
+          <el-menu-item v-for="(doc, index) in guideList" :key="`doc-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item>
+          <h4 class="side-menu__group">
+            组件<el-tag type="info" size="mini">{{ componentsCount }}</el-tag>
+          </h4>
           <el-menu-item-group v-for="(component, idx) in componentList" :key="idx">
             <template slot="title">{{ component.group }}</template>
             <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
@@ -24,14 +28,15 @@
 
 <script>
 import LayoutHeader from './components/header';
-import { components } from '@/router/routes';
+import { guides, components } from '@/router/routes';
 
 export default {
   name: 'componentLayout',
   components: { LayoutHeader },
   data() {
     return {
-      activeMenu: 'select',
+      activeMenu: 'introduce',
+      guideList: guides,
       componentList: components,
       anchorList: [],
       currentAnchor: '',
@@ -68,6 +73,15 @@ export default {
       }
     }
   },
+  computed: {
+    componentsCount() {
+      let result = 0;
+      this.componentList.forEach(item => {
+        result += (item.children || []).length;
+      });
+      return result;
+    }
+  },
   methods: {
     isBottom() {
       // 变量scrollTop是滚动条滚动时，距离顶部的距离
@@ -85,20 +99,22 @@ export default {
       let anchorList = [];
       for (let index in domList) {
         let dom = domList[index] || {};
-        const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
-        if (text === 'API') {
-          break;
-        } else {
-          anchorList.push({
-            text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
-            href: dom.href,
-            hash: dom.hash,
-            offsetTop: dom.offsetTop,
-          });
+        if (dom.parentNode) {
+          const text = `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim();
+          if (text === 'API') {
+            break;
+          } else {
+            anchorList.push({
+              text: `${dom.parentNode.innerHTML}`.replace(/<\/?.*[^>]*>/g, '').trim(),
+              href: dom.href,
+              hash: dom.hash,
+              offsetTop: dom.offsetTop,
+            });
+          }
         }
       }
       this.anchorList = anchorList;
-      this.currentAnchor = anchorList[0].hash;
+      this.currentAnchor = (anchorList[0] || {}).hash;
     },
     handleSelect(key) {
       this.$router.push({ name: key });
@@ -130,6 +146,10 @@ export default {
     .el-menu-item {
       border-right: 3px solid rgba(0, 0, 0, 0);
     }
+    .el-menu-item:hover {
+      color: $primary;
+      background-color: rgba(0, 0, 0, 0);
+    }
     .el-menu-item.is-active {
       background-color: rgba($primary, 0.1);
       border-right: 3px solid $primary;
diff --git a/examples/views/page/index.vue b/examples/views/page/index.vue
index 8d66076..5a5bacb 100644
--- a/examples/views/page/index.vue
+++ b/examples/views/page/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-index">
     <div class="logo">
-      <img alt="logo" src="@/assets/logo.svg">
+      <img alt="logo" src="/img/logo.svg">
     </div>
     <div class="content">
       欢迎使用<span class="name">EAGLE WEB TOOLKIT</span>组件库
@@ -22,8 +22,10 @@ export default {
   width: 100%;
   text-align: center;
   .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding-top: 150px;
-    margin: auto;
     img {
       width: 240px;
     }
diff --git a/webpack/markdown-loader.js b/webpack/markdown-loader.js
index 9d71a7b..9a8ccf4 100644
--- a/webpack/markdown-loader.js
+++ b/webpack/markdown-loader.js
@@ -92,22 +92,38 @@ module.exports = function(source) {
                 </eagle-code-snippet> `;
     }
   });
+  // 使用【markdown-it-container】插件解析【:::html :::】代码块为vue渲染
+  markdownIt.use(MarkdownItContainer, "html", {
+    // 验证代码块为【:::html :::】才进行渲染
+    validate(params) {
+      return params.trim().match(/^html\s*(.*)$/);
+    },
+    // 代码块渲染
+    render(tokens, idx) {
+      var m = tokens[idx].info.trim().match(/^html\s+(.*)$/);
+      if (tokens[idx].nesting === 1) {
+        return `<div> ${markdownIt.utils.escapeHtml(m[1])}`;
+      } else {
+        return '</div>';
+      }
+    }
+  });
   // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
   return `
-        <template>
-          <div class="eagle-snippet-doc">
-            ${markdownIt.render(source)}
-          </div>
-        </template>
-        <script>
-           export default {
-           name: 'eagle-component-doc',
-           components: {
-            ${componentCodeList.join(",")}
-           }
-         }
-       </script>
-       <style>
-         ${Array.from(styleCodeList, m => m.content).join("\n")}
-       </style>`;
+    <template>
+      <div class="eagle-snippet-doc">
+        ${markdownIt.render(source)}
+      </div>
+    </template>
+    <script>
+        export default {
+        name: 'eagle-component-doc',
+        components: {
+        ${componentCodeList.join(",")}
+        }
+      }
+    </script>
+    <style>
+      ${Array.from(styleCodeList, m => m.content).join("\n")}
+    </style>`;
 };
--
libgit2 0.21.0