增加开发指南

Aaron
1 parent caa7ba03
Showing 22 changed files with 821 additions and 726 deletions Show diff stats
examples/App.vue
examples/assets/vue.svg
examples/main.js
examples/router/routes.js
examples/styles/index.scss
examples/views/docs/component/detail.md
examples/views/docs/component/form.md
examples/views/docs/component/scheme.md
examples/views/docs/component/search.md
examples/views/docs/component/select.md
examples/views/docs/component/table.md
examples/views/docs/detail.md
examples/views/docs/form.md
examples/views/docs/guide/installation.md
examples/views/docs/guide/introduce.md
examples/views/docs/scheme.md
examples/views/docs/search.md
examples/views/docs/select.md
examples/views/docs/table.md
examples/views/layout/component.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>
@@ -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
@@ -9,8 +9,7 @@ import EagleWebToolkit from &#39;../packages&#39;;
 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({
 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 [
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+# 安装
+
+## npm安装
 \ No newline at end of file
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 <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;
     }
@@ -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>`;
 };
...	...	@@ -9,19 +9,3 @@ export default {
9	9	name: 'App'
10	10	}
11	11	</script>
12		-
13		-<style lang="scss">
14		-@import "./styles/markdown.scss";
15		-
16		-html,
17		-body {
18		- padding: 0;
19		- margin: 0;
20		-}
21		-#app {
22		- font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
23		- Microsoft YaHei, SimSun, sans-serif;
24		- -webkit-font-smoothing: antialiased;
25		- -moz-osx-font-smoothing: grayscale;
26		-}
27		-</style>
...	...
...	...	@@ -0,0 +1,14 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<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">
	3	+ <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
	4	+ <title>Vue</title>
	5	+ <desc>Created with Sketch.</desc>
	6	+ <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
	7	+ <g id="画板" transform="translate(-266.000000, -523.000000)">
	8	+ <g id="Vue" transform="translate(266.000000, 523.000000)">
	9	+ <polygon id="路径" fill="#44BC84" points="80 0 200 210 320 0 400 0 200 350 0 0"></polygon>
	10	+ <polygon id="路径" fill="#344C5C" points="155.33049 0 200.426439 80 245.522388 0 320.682303 0 200.426439 210 80.1705757 0"></polygon>
	11	+ </g>
	12	+ </g>
	13	+ </g>
	14	+</svg>
0	15	\ No newline at end of file
...	...
...	...	@@ -9,8 +9,7 @@ import EagleWebToolkit from '../packages';
9	9	import NProgress from 'nprogress';
10	10	import EagleCodeSnippet from "@/components/code-snippet";
11	11
12		-import '@/styles/element.scss';
13		-import '@/styles/nprogress.scss';
	12	+import '@/styles/index.scss';
14	13	import "highlight.js/styles/github.css";
15	14
16	15	const request = axios.create({
...	...
1	1	import DefaultLayout from '@/views/layout/default';
2	2	import ComponentLayout from '@/views/layout/component';
3	3
	4	+// 开发指南的文档
	5	+
	6	+const _guides = [
	7	+ {
	8	+ path: 'introduce',
	9	+ name: 'introduce',
	10	+ meta: { title: '简介' },
	11	+ component: () => import('@/views/docs/guide/introduce.md'),
	12	+ },
	13	+ {
	14	+ path: 'installation',
	15	+ name: 'installation',
	16	+ meta: { title: '安装' },
	17	+ component: () => import('@/views/docs/guide/installation.md'),
	18	+ },
	19	+];
	20	+
4	21	// 组件页面的文档
5	22
6	23	const _components = [
...	...	@@ -11,7 +28,7 @@ const _components = [
11	28	path: 'select',
12	29	name: 'select',
13	30	meta: { title: 'Select 选择器' },
14		- component: () => import('@/views/docs/select.md'),
	31	+ component: () => import('@/views/docs/component/select.md'),
15	32	},
16	33	]
17	34	},
...	...	@@ -22,25 +39,25 @@ const _components = [
22	39	path: 'detail',
23	40	name: 'detail',
24	41	meta: { title: 'Detail 详情' },
25		- component: () => import('@/views/docs/detail.md'),
	42	+ component: () => import('@/views/docs/component/detail.md'),
26	43	},
27	44	{
28	45	path: 'form',
29	46	name: 'form',
30	47	meta: { title: 'Form 表单' },
31		- component: () => import('@/views/docs/form.md'),
	48	+ component: () => import('@/views/docs/component/form.md'),
32	49	},
33	50	{
34	51	path: 'search',
35	52	name: 'search',
36	53	meta: { title: 'Search 搜索' },
37		- component: () => import('@/views/docs/search.md'),
	54	+ component: () => import('@/views/docs/component/search.md'),
38	55	},
39	56	{
40	57	path: 'table',
41	58	name: 'table',
42	59	meta: { title: 'Table 表格' },
43		- component: () => import('@/views/docs/table.md'),
	60	+ component: () => import('@/views/docs/component/table.md'),
44	61	},
45	62	]
46	63	},
...	...	@@ -51,7 +68,7 @@ const _components = [
51	68	path: 'scheme',
52	69	name: 'scheme',
53	70	meta: { title: 'Scheme 方案' },
54		- component: () => import('@/views/docs/scheme.md'),
	71	+ component: () => import('@/views/docs/component/scheme.md'),
55	72	},
56	73	]
57	74	},
...	...	@@ -91,12 +108,13 @@ const _pages = [
91	108	name: 'component',
92	109	meta: { title: '组件', path: '/component' },
93	110	component: ComponentLayout,
94		- redirect: `/component/${_components[0].children[0].path \|\| 'detail'}`,
95		- children: _components_children
	111	+ redirect: `/component/${_guides[0].path \|\| 'detail'}`,
	112	+ children: [..._components_children, ..._guides]
96	113	}
97	114	]
98	115
99	116	export const pages = _pages;
	117	+export const guides = _guides;
100	118	export const components = _components;
101	119
102	120	export default [
...	...
...	...	@@ -0,0 +1,28 @@
	1	+@import './variables.scss';
	2	+@import './markdown.scss';
	3	+@import './nprogress.scss';
	4	+@import './element.scss';
	5	+
	6	+html,
	7	+body {
	8	+ padding: 0;
	9	+ margin: 0;
	10	+}
	11	+#app {
	12	+ font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
	13	+ Microsoft YaHei, SimSun, sans-serif;
	14	+ -webkit-font-smoothing: antialiased;
	15	+ -moz-osx-font-smoothing: grayscale;
	16	+}
	17	+
	18	+.side-menu__group {
	19	+ display: flex;
	20	+ align-items: flex-end;
	21	+ justify-content: space-between;
	22	+ padding: 0 20px;
	23	+ .subtitle {
	24	+ font-weight: normal;
	25	+ color: $text;
	26	+ font-size: 14px;
	27	+ }
	28	+}
0	29	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,73 @@
	1	+# Detail 详情
	2	+
	3	+> 将Form组件的值展示位详情
	4	+
	5	+## 基础用法
	6	+
	7	+配置项list将无视配置的type，统一渲染为label
	8	+
	9	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为el-form-item的子组件
	10	+
	11	+```html
	12	+<template>
	13	+ <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
	14	+</template>
	15	+
	16	+<script>
	17	+export default {
	18	+ data() {
	19	+ return {
	20	+ detailList: [
	21	+ { type: 'el-input', key: 'name', label: '名称' },
	22	+ { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
	23	+ { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
	24	+ { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
	25	+ ],
	26	+ detailModel: {
	27	+ name: '老A',
	28	+ address: 'Any where',
	29	+ postcode: 123456,
	30	+ number: 'N栋N-N'
	31	+ }
	32	+ }
	33	+ },
	34	+}
	35	+</script>
	36	+```
	37	+
	38	+:::
	39	+
	40	+
	41	+使用`list`属性设置数据源
	42	+
	43	+```js
	44	+export default {
	45	+ data() {
	46	+ const d = '!&(&(';
	47	+ console.log('123');
	48	+ return {
	49	+ a: 123,
	50	+ b: '456',
	51	+ c: d,
	52	+ }
	53	+ }
	54	+}
	55	+```
	56	+
	57	+---
	58	+
	59	+## API
	60	+
	61	+## Attribute 属性
	62	+
	63	+参数\|说明\|类型\|可选值\|默认值
	64	+-\|-\|-\|-\|-
	65	+value / v-model \| 绑定值 \| Object \| - \| -
	66	+list \| 表单项配置列表 \| Array \| - \| []
	67	+
	68	+## List 表单项配置列表
	69	+
	70	+参数\|说明\|类型\|可选值\|默认值
	71	+-\|-\|-\|-\|-
	72	+key \| 参数名 \| String \| - \| -
	73	+label \| 参数标签 \| String \| - \| -
0	74	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,147 @@
	1	+# Form 表单
	2	+
	3	+不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置
	4	+
	5	+## 基础用法
	6	+
	7	+配置项list中通过type可以配置任意组件，不受框架限制
	8	+
	9	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为el-form-item的子组件，通过`rules`配置校验规则
	10	+
	11	+```html
	12	+<template>
	13	+ <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
	14	+</template>
	15	+
	16	+<script>
	17	+export default {
	18	+ data() {
	19	+ return {
	20	+ formList: [
	21	+ { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
	22	+ { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
	23	+ { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
	24	+ { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
	25	+ ]
	26	+ }
	27	+ },
	28	+ methods: {
	29	+ handleSubmit(value) {
	30	+ console.log(value)
	31	+ },
	32	+ handleCancel() {
	33	+ this.$refs.form.reset()
	34	+ console.log('cancel!')
	35	+ }
	36	+ }
	37	+}
	38	+</script>
	39	+```
	40	+
	41	+:::
	42	+
	43	+## 分组
	44	+
	45	+对配置项进行分组
	46	+
	47	+:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组
	48	+
	49	+```html
	50	+<template>
	51	+ <eagle-form :list="formList" style="width: 500px;">
	52	+ <template #label-gender="{ label }">
	53	+ <span>自定义 - {{ label }}</span>
	54	+ </template>
	55	+ </eagle-form>
	56	+</template>
	57	+
	58	+<script>
	59	+export default {
	60	+ data() {
	61	+ return {
	62	+ formList: [
	63	+ { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
	64	+ { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
	65	+ { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
	66	+ { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
	67	+ { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
	68	+ ]
	69	+ }
	70	+ }
	71	+}
	72	+</script>
	73	+```
	74	+
	75	+:::
	76	+
	77	+## 自定义分组
	78	+
	79	+有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义
	80	+
	81	+:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题
	82	+
	83	+```html
	84	+<template>
	85	+ <eagle-form :list="formList" style="width: 500px;">
	86	+ <template #group-not-bad="{ label }">
	87	+ <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
	88	+ <span>哎哟 - {{ label }} - 不错哦</span>
	89	+ <el-button size="mini" type="primary">这是一个按钮</el-button>
	90	+ </div>
	91	+ </template>
	92	+ </eagle-form>
	93	+</template>
	94	+
	95	+<script>
	96	+export default {
	97	+ data() {
	98	+ return {
	99	+ formList: [
	100	+ { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
	101	+ { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
	102	+ ]
	103	+ }
	104	+ }
	105	+}
	106	+</script>
	107	+```
	108	+
	109	+:::
	110	+
	111	+## API
	112	+
	113	+## Attribute 属性
	114	+
	115	+参数\|说明\|类型\|可选值\|默认值
	116	+-\|-\|-\|-\|-
	117	+value / v-model \| 绑定值 \| Object \| - \| -
	118	+list \| 表单项配置列表 \| Array \| - \| []
	119	+
	120	+## Methods 方法
	121	+
	122	+方法名\|说明\|参数
	123	+-\|-\|-
	124	+reset \| 重置表单 \| -
	125	+
	126	+## Events 事件
	127	+
	128	+事件名称\|说明\|回调参数
	129	+-\|-\|-
	130	+change \| 表单model发生变化时触发 \| model对象
	131	+submit \| 点击表单提交按钮时触发 \| model对象
	132	+cancel \| 点击表单取消按钮时触发 \| -
	133	+
	134	+## List 表单项配置列表
	135	+
	136	+参数\|说明\|类型\|可选值\|默认值
	137	+-\|-\|-\|-\|-
	138	+type \| 组件类型 \| String \| - \| el-input
	139	+key \| 参数名 \| String \| - \| -
	140	+label \| 参数标签 \| String \| - \| -
	141	+props \| 组件参数 \| Object,Function(model: object)) \| - \| {}
	142	+style \| 组件样式 \| Object \| - \| { width: "100%" }
	143	+on \| 组件事件 \| Object,Function(model: object) \| - \| {}
	144	+visible \| 组件v-if状态 \| Boolean,Function(model: object) \| - \| true
	145	+show \| 组件v-show状态 \| Boolean,Function(model: object) \| - \| true
	146	+rules \| 组件校验规则 \| Object,Array \| - \| -
	147	+tip \| 组件提示框 \| Object,String \| - \| {}
0	148	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,94 @@
	1	+# Scheme 方案
	2	+
	3	+Scheme是一个数据驱动的解决方案，通过既定的业务配置参数，生成可模块化编辑的`CURD`业务视图
	4	+
	5	+## 基础用法
	6	+
	7	+配置项list中通过type可以配置任意组件，不受框架限制
	8	+
	9	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为el-form-item的子组件，通过`rules`配置校验规则
	10	+
	11	+```html
	12	+<template>
	13	+ <eagle-scheme :list="schemeList" :option="{ auto: false }">
	14	+ <!-- <div slot="action-bar" slot-scope="{ handleNew }">
	15	+ <el-button type="warn" @click="handleNew">新增</el-button>
	16	+ </div> -->
	17	+ <el-button slot="action-button" type="success" plain size="small">启用</el-button>
	18	+ <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
	19	+ <el-table-column type="selection" width="50" align="center"></el-table-column>
	20	+ <template #table-status="{ setDialog }">
	21	+ <el-table-column prop="status" label="激活状态" min-width="120">
	22	+ <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
	23	+ </el-table-column>
	24	+ </template>
	25	+ <template #search-status="{ model }">
	26	+ <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
	27	+ </template>
	28	+ <template #form-group-setting >
	29	+ <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
	30	+ <span>哎哟 - 设置 - 不错哦</span>
	31	+ <el-button size="mini" type="primary">这是一个按钮</el-button>
	32	+ </div>
	33	+ </template>
	34	+ <template #form-item-status="{ model }">
	35	+ <el-input-number v-model="model.status"></el-input-number>
	36	+ </template>
	37	+ <template #view-item-code="{ model }">
	38	+ <el-input disabled :value="model.code"></el-input>
	39	+ </template>
	40	+ <!-- <template #dialog-view="{ row }">
	41	+ <div>这是一个自定义弹出框内容</div>
	42	+ <div>{{ row }}</div>
	43	+ </template> -->
	44	+ <template #dialog-status>
	45	+ <div>这是Status的内容</div>
	46	+ </template>
	47	+ <!-- 自定义按钮组 -->
	48	+ <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
	49	+ <el-tag>自定义按钮组</el-tag>
	50	+ </el-table-column> -->
	51	+ <!-- 在操作按钮组前加上新的按钮 -->
	52	+ <!-- <template slot="table-operation-btn">
	53	+ <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
	54	+ <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
	55	+ </template> -->
	56	+ <!-- 在操作按钮组后追加新的按钮 -->
	57	+ <!-- <template slot="table-operation-btn-append">
	58	+ <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
	59	+ <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
	60	+ </template> -->
	61	+ </eagle-scheme>
	62	+</template>
	63	+
	64	+<script>
	65	+export default {
	66	+ data() {
	67	+ return {
	68	+ schemeList: [
	69	+ { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
	70	+ { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
	71	+ exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
	72	+ { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
	73	+ { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
	74	+ { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
	75	+ ],
	76	+ dataSource: [
	77	+ { label: '选项A', value: 'A' },
	78	+ { label: '选项B', value: 'B' },
	79	+ ],
	80	+ }
	81	+ },
	82	+}
	83	+</script>
	84	+```
	85	+
	86	+:::
	87	+
	88	+## API
	89	+
	90	+## Attribute 属性
	91	+
	92	+参数\|说明\|类型\|可选值\|默认值
	93	+-\|-\|-\|-\|-
	94	+list \| 表单项配置列表 \| Array \| - \| []
0	95	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,132 @@
	1	+# Search 搜索
	2	+
	3	+Search 搜索组件是一个使用`list`来配置生成的搜索表单
	4	+
	5	+## 基础用法
	6	+
	7	+配置项list中通过type可以配置任意组件，不受框架限制
	8	+
	9	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
	10	+
	11	+```html
	12	+<template>
	13	+ <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
	14	+</template>
	15	+
	16	+<script>
	17	+export default {
	18	+ data() {
	19	+ return {
	20	+ searching: false,
	21	+ searchList: [
	22	+ { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
	23	+ { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
	24	+ { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
	25	+ { type: 'el-input', key: 'number', label: '楼栋号' },
	26	+ { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
	27	+ { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
	28	+ { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
	29	+ ]
	30	+ }
	31	+ },
	32	+ mounted() {
	33	+ this.searching = true;
	34	+ setTimeout(() => {
	35	+ this.searching = false;
	36	+ }, 3000);
	37	+ },
	38	+ methods: {
	39	+ handleSearch(value) {
	40	+ console.log(value);
	41	+ },
	42	+ handleReset() {
	43	+ console.log('reset');
	44	+ }
	45	+ }
	46	+}
	47	+</script>
	48	+```
	49	+
	50	+:::
	51	+
	52	+## 自定义组件
	53	+
	54	+在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
	55	+
	56	+:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
	57	+
	58	+```html
	59	+<template>
	60	+ <eagle-search :list="searchList">
	61	+ <template #type="{ model }">
	62	+ <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
	63	+ </template>
	64	+ <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
	65	+ <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
	66	+ <el-button size="mini" type="success" round @click="doReset">恢复</el-button>
	67	+ <el-button size="mini" type="info" round @click="doCollapse">{{ collapse ? '打开' : '关闭' }}</el-button>
	68	+ </template>
	69	+ </eagle-search>
	70	+</template>
	71	+
	72	+<script>
	73	+export default {
	74	+ data() {
	75	+ return {
	76	+ searchList: [
	77	+ { type: 'el-input', key: 'name', label: '名称' },
	78	+ { key: 'type', label: '类型' },
	79	+ { type: 'el-input', key: 'yes', label: '是的' },
	80	+ { type: 'el-input', key: 'yeah', label: '没错' },
	81	+ { type: 'el-input', key: 'absolutely', label: '就这样' },
	82	+ ],
	83	+ dataSource: [
	84	+ { label: '选项A', value: 'A' },
	85	+ { label: '选项B', value: 'B' },
	86	+ ]
	87	+ }
	88	+ },
	89	+ methods: {
	90	+ handleQuery(model, action) {
	91	+ if (action) {
	92	+ action();
	93	+ console.log(model);
	94	+ }
	95	+ },
	96	+ }
	97	+}
	98	+</script>
	99	+```
	100	+
	101	+:::
	102	+
	103	+## API
	104	+
	105	+## Attribute 属性
	106	+
	107	+参数\|说明\|类型\|可选值\|默认值
	108	+-\|-\|-\|-\|-
	109	+value / v-model \| 绑定值 \| Object \| - \| -
	110	+list \| 表单项配置列表 \| Array \| - \| []
	111	+
	112	+## Events 事件
	113	+
	114	+事件名称\|说明\|回调参数
	115	+-\|-\|-
	116	+change \| 表单model发生变化时触发 \| model对象
	117	+search \| 点击查询按钮时触发 \| model对象
	118	+reset \| 点击重置按钮时触发 \| -
	119	+
	120	+## List 表单项配置列表
	121	+
	122	+参数\|说明\|类型\|可选值\|默认值
	123	+-\|-\|-\|-\|-
	124	+type \| 组件类型 \| String \| - \| el-input
	125	+key \| 参数名 \| String \| - \| -
	126	+label \| 参数标签 \| String \| - \| -
	127	+props \| 组件参数 \| Object,Function(model: object)) \| - \| {}
	128	+style \| 组件样式 \| Object \| - \| { width: "100%" }
	129	+on \| 组件事件 \| Object,Function(model: object) \| - \| {}
	130	+visible \| 组件v-if状态 \| Boolean,Function(model: object) \| - \| true
	131	+rules \| 组件校验规则 \| Object,Array \| - \| -
	132	+tip \| 组件提示框 \| Object,String \| - \| {}
0	133	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,80 @@
	1	+# Select 选择器
	2	+
	3	+在Element的el-select基础上的封装，直接通过数据列表配置选项
	4	+
	5	+## 基础用法
	6	+
	7	+:::snippet 通过`dataSource`属性设置数据源
	8	+
	9	+```html
	10	+<template>
	11	+ <eagle-select v-model="selectValue" :dataSource="dataSource"></eagle-select>
	12	+</template>
	13	+
	14	+<script>
	15	+export default {
	16	+ data() {
	17	+ return {
	18	+ selectValue: 'A',
	19	+ dataSource: [
	20	+ { label: '选项A', value: 'A' },
	21	+ { label: '选项B', value: 'B' }
	22	+ ]
	23	+ }
	24	+ },
	25	+}
	26	+</script>
	27	+```
	28	+
	29	+:::
	30	+
	31	+
	32	+## 数据源
	33	+
	34	+:::snippet 通过`dataSource`属性设置数据源，支持函数和`Promise`
	35	+
	36	+```html
	37	+<template>
	38	+ <eagle-select v-model="selectValue1" :dataSource="getDataSource"></eagle-select>
	39	+</template>
	40	+
	41	+<script>
	42	+export default {
	43	+ data() {
	44	+ return {
	45	+ selectValue1: undefined
	46	+ }
	47	+ },
	48	+ methods: {
	49	+ getDataSource() {
	50	+ return new Promise((resolve, reject) => {
	51	+ setTimeout(() => {
	52	+ resolve([
	53	+ { label: '选项A', value: 'A' },
	54	+ { label: '选项B', value: 'B' }
	55	+ ]);
	56	+ }, 3000);
	57	+ });
	58	+ }
	59	+ }
	60	+}
	61	+</script>
	62	+```
	63	+
	64	+:::
	65	+
	66	+## API
	67	+
	68	+## Attribute 属性
	69	+
	70	+参数\|说明\|类型\|可选值\|默认值
	71	+-\|-\|-\|-\|-
	72	+value / v-model \| 绑定值 \| String,Array \| - \| -
	73	+dataSource \| 数据源或获取数据源的方法 \| Array,Function,Promise \| - \| []
	74	+
	75	+## DataSource 数据源配置列表
	76	+
	77	+参数\|说明\|类型\|可选值\|默认值
	78	+-\|-\|-\|-\|-
	79	+label \| 选项标签 \| String \| - \| -
	80	+value \| 选项值 \| String,Number,Object \| - \| -
0	81	\ No newline at end of file
...	...