From fe174f1a89ca315c293c14c4eb6832a4498ec0ce Mon Sep 17 00:00:00 2001 From: chuchur Date: Sat, 9 Nov 2019 00:39:57 +0800 Subject: [PATCH 01/15] =?UTF-8?q?=E4=BD=BF=E7=94=A8jsx=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E6=9E=84=E5=BB=BA=E6=96=B0=E7=9A=84=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 3 +- build/build.js | 3 - build/md-loader/index.js | 1 + build/md-loader/loader.js | 174 + build/md-loader/render.js | 120 + build/webpack.base.conf.js | 75 +- build/webpack.dev.conf.js | 109 +- build/webpack.prod.conf.js | 45 +- build/webpack.prod.doc.conf.js | 65 +- .../_tool}/docClick.js | 0 .../_tool}/transferDom.js | 0 components/_tool/utils.js | 6 + .../_tool}/winScroll.js | 0 .../components => components}/affix/affix.vue | 2 +- .../code => components/affix/demo}/affix.js | 0 .../views => components/affix/demo}/affix.vue | 0 {src/components => components}/affix/index.js | 1 - .../affix/styles/index.less | 0 .../alert.vue => components/alert/alert.jsx | 35 +- components/alert/demo/base.md | 15 + components/alert/demo/close.md | 15 + components/alert/demo/icon.md | 15 + components/alert/demo/index.vue | 22 + {src/components => components}/alert/index.js | 1 - components/alert/index.md | 7 + .../alert/styles/index.less | 8 +- .../backtop/backTop.vue | 2 +- .../backtop/demo}/backtop.js | 0 .../backtop/demo}/backtop.vue | 0 .../backtop/index.js | 1 - .../backtop/styles/index.less | 0 .../badge.vue => components/badge/badge.jsx | 32 +- components/badge/demo/base.md | 29 + components/badge/demo/dot.md | 31 + components/badge/demo/index.vue | 22 + components/badge/demo/max.md | 40 + components/badge/index.js | 2 + components/badge/index.md | 7 + .../badge/styles/index.less | 0 components/breadcrumb/breadcrumb.jsx | 10 + components/breadcrumb/breadcrumbItem.jsx | 27 + components/breadcrumb/demo/base.md | 16 + components/breadcrumb/demo/icon.md | 16 + components/breadcrumb/demo/index.vue | 19 + components/breadcrumb/demo/separator.md | 16 + components/breadcrumb/index.js | 3 + components/breadcrumb/index.md | 7 + components/breadcrumb/styles/index.less | 33 + .../button/button.jsx | 72 +- .../button/buttonGroup.jsx | 21 +- components/button/demo/base.md | 16 + .../button/demo}/button.vue | 0 components/button/demo/disabled.md | 13 + components/button/demo/group.md | 25 + components/button/demo/index.vue | 31 + components/button/demo/size.md | 14 + components/button/demo/with-icon.md | 17 + components/button/index.js | 11 + components/button/index.md | 11 + .../button/styles/index.less | 9 +- {docs/src/code => components/card}/card.js | 0 components/card/card.jsx | 33 + components/card/demo/base.md | 26 + components/card/demo/border.md | 20 + components/card/demo/index.vue | 17 + components/card/index.js | 2 + components/card/index.md | 7 + .../card/styles/index.less | 13 +- .../carousel/carousel.vue | 2 +- .../carousel/carouselItem.vue | 0 .../carousel/demo}/carousel.vue | 0 .../carousel/index.js | 1 - .../carousel/styles/index.less | 0 .../checkbox/checkbox.vue | 0 .../checkbox/checkboxGroup.vue | 0 .../checkbox/demo}/checkbox.js | 0 .../checkbox/demo}/checkbox.vue | 0 .../checkbox/index.js | 1 - .../checkbox/styles/index.less | 0 .../code => components/collapse}/carousel.js | 0 .../collapse/collapse.js | 7 +- components/collapse/collapse.jsx | 47 + .../collapse/collapse.vue | 0 .../collapse/demo}/collapse.vue | 0 .../collapse/demo/collapse1.js | 0 .../collapse/index.js | 1 - .../collapse/panel.vue | 0 .../collapse/styles/index.less | 0 .../colorPicker/colorPicker.vue | 8 +- .../colorPicker/demo}/colorpicker.vue | 0 .../colorPicker/img/marker.png | Bin .../colorPicker/img/mask.png | Bin .../colorPicker/img/wheel.png | Bin .../colorPicker/index.js | 1 - .../colorPicker/picker.vue | 0 .../colorPicker/styles/index.less | 6 +- .../datePicker/datecalendar.vue | 3 +- .../datePicker/datepicker.vue | 7 +- .../datePicker/demo}/datepicker.js | 0 .../datePicker/demo}/datepicker.vue | 0 .../datePicker/index.js | 0 .../datePicker/lang.js | 0 components/datePicker/styles/calendar.less | 270 ++ .../datePicker/styles}/datepicker.less | 0 components/datePicker/styles/index.less | 2 + .../code => components/drawer/demo}/drawer.js | 0 .../drawer/demo}/drawer.vue | 0 .../drawer/drawer.vue | 4 +- .../components => components}/drawer/index.js | 2 - .../drawer/styles/index.less | 0 .../dropdown/demo}/dropdown.js | 0 .../dropdown/demo}/dropdown.vue | 0 .../dropdown/dropdown.vue | 4 +- .../dropdown/dropdownItem.vue | 0 .../dropdown/dropdownMenu.vue | 0 .../dropdown/index.js | 1 - .../dropdown/styles/index.less | 0 .../src/code => components/form/demo}/form.js | 0 .../views => components/form/demo}/form.vue | 0 {src/components => components}/form/form.vue | 0 .../form/formitem.vue | 0 {src/components => components}/form/index.js | 1 - .../form/styles/index.less | 0 .../grid/col.vue => components/grid/col.jsx | 36 +- components/grid/demo/base.md | 27 + components/grid/demo/gutter.md | 25 + components/grid/demo/index.vue | 55 + components/grid/demo/info.md | 11 + components/grid/demo/offset.md | 23 + components/grid/index.js | 4 + components/grid/index.md | 9 + .../grid/row.vue => components/grid/row.jsx | 34 +- .../grid/styles/index.less | 0 components/icon/demo/base.md | 15 + .../src/code => components/icon/demo}/icon.js | 17 +- components/icon/demo/index.vue | 21 + components/icon/demo/info.md | 3 + .../icon/demo/search.vue | 98 +- .../icon/fonts/ionicons.eot | Bin .../icon/fonts/ionicons.svg | 0 .../icon/fonts/ionicons.ttf | Bin .../icon/fonts/ionicons.woff | Bin .../icon/fonts/ionicons.woff2 | Bin .../icon/icon.vue => components/icon/icon.jsx | 19 +- {src/components => components}/icon/index.js | 6 +- components/icon/index.md | 8 + .../icon/styles/index.less | 4 +- .../imagePreview/demo}/image-preview.vue | 0 .../imagePreview/demo}/imagepreview.js | 0 .../imagePreview/imagePreview.vue | 2 +- .../imagePreview/index.js | 1 - .../imagePreview/styles/index.less | 0 {src => components}/index.js | 82 +- .../code => components/input/demo}/input.js | 0 .../views => components/input/demo}/input.vue | 0 {src/components => components}/input/index.js | 1 - .../components => components}/input/input.vue | 0 .../input/styles/index.less | 0 components/layout/demo/base.md | 64 + components/layout/demo/index.vue | 18 + components/layout/demo/info.md | 39 + components/layout/demo/top-middle-bottom.md | 101 + components/layout/demo/top-sider-content.md | 104 + components/layout/index.js | 12 + components/layout/index.md | 0 components/layout/layout.jsx | 96 + .../layout/styles/index.less | 37 +- .../loading/demo}/loading.js | 0 .../loading/demo}/loading.vue | 0 .../loading/index.js | 1 - .../loading/loading.vue | 0 .../loading/styles/index.less | 0 .../src/code => components/menu/demo}/menu.js | 0 .../views => components/menu/demo}/menu.vue | 0 {src/components => components}/menu/index.js | 1 - {src/components => components}/menu/menu.vue | 5 +- .../menu/menugroup.vue | 0 .../menu/menuitem.vue | 0 .../menu/styles/index.less | 2 +- .../menu/submenu.vue | 0 .../message/demo}/message.js | 0 .../message/demo}/message.vue | 0 .../message/demo}/notice.js | 0 .../message/index.js | 2 - .../message/notice.vue | 0 .../message/notices.vue | 0 components/message/styles/index.less | 2 + components/message/styles/message.less | 82 + components/message/styles/notice.less | 90 + .../code => components/modal/demo}/modal.js | 0 .../views => components/modal/demo}/modal.vue | 0 {src/components => components}/modal/index.js | 3 +- .../components => components}/modal/modal.vue | 4 +- .../modal/styles/index.less | 0 .../src/code => components/page/demo}/page.js | 0 .../views => components/page/demo}/page.vue | 0 {src/components => components}/page/index.js | 1 - {src/components => components}/page/page.vue | 2 +- .../page/styles/index.less | 0 .../code => components/poptip/demo}/poptip.js | 0 .../poptip/demo}/poptip.vue | 0 .../components => components}/poptip/index.js | 1 - .../poptip/poptip.vue | 8 +- .../poptip/styles/index.less | 0 .../code => components/radio/demo}/radio.js | 0 .../views => components/radio/demo}/radio.vue | 0 {src/components => components}/radio/index.js | 1 - .../components => components}/radio/radio.vue | 0 .../radio/radioButton.vue | 2 +- .../radio/radioGroup.vue | 0 .../radio/styles/index.less | 0 .../code => components/select/demo}/select.js | 0 .../select/demo}/select.vue | 0 .../components => components}/select/index.js | 1 - .../select/option.vue | 0 .../select/select.vue | 6 +- .../select/styles/index.less | 0 .../code => components/slider/demo}/slider.js | 0 .../slider/demo}/slider.vue | 0 .../components => components}/slider/index.js | 1 - .../slider/slider.vue | 0 .../slider/sliderButton.vue | 0 .../slider/styles/index.less | 0 .../code => components/steps/demo}/steps.js | 0 .../views => components/steps/demo}/steps.vue | 0 {src/components => components}/steps/index.js | 1 - {src/components => components}/steps/step.vue | 0 .../components => components}/steps/steps.vue | 0 .../steps/styles/index.less | 0 components/styles.js | 42 + {src => components}/styles/global.less | 0 .../code => components/switch/demo}/switch.js | 0 .../switch/demo}/switch.vue | 0 .../components => components}/switch/index.js | 1 - .../switch/styles/index.less | 0 .../switch/switch.vue | 0 .../code => components/table/demo}/table.js | 0 .../views => components/table/demo}/table.vue | 0 .../components => components}/table/expand.js | 0 {src/components => components}/table/index.js | 1 - .../table/styles/index.less | 0 .../components => components}/table/table.vue | 2 +- .../src/code => components/tabs/demo}/tabs.js | 0 .../views => components/tabs/demo}/tabs.vue | 0 {src/components => components}/tabs/index.js | 1 - .../tabs/styles/index.less | 0 .../tabs/tabpane.vue | 0 {src/components => components}/tabs/tabs.vue | 2 +- {docs/src/code => components/tabs}/tag.js | 0 components/tag/demo/base.md | 15 + components/tag/demo/color.md | 17 + components/tag/demo/dynamic.md | 22 + components/tag/demo/index.vue | 19 + components/tag/index.js | 2 + components/tag/index.md | 6 + .../tag/styles/index.less | 0 components/tag/tag.jsx | 53 + .../timeline/demo}/timeline.js | 0 .../timeline/demo}/timeline.vue | 0 .../timeline/index.js | 1 - .../timeline/styles/index.less | 0 .../timeline/timeline.vue | 0 .../timeline/timelineitem.vue | 0 .../tooltip/demo}/tooltip.js | 0 .../tooltip/demo}/tooltip.vue | 0 .../tooltip/index.js | 1 - .../tooltip/styles/index.less | 0 .../tooltip/tooltip.vue | 4 +- .../src/code => components/tree/demo}/tree.js | 0 .../views => components/tree/demo}/tree.vue | 0 {src/components => components}/tree/index.js | 1 - {src/components => components}/tree/node.vue | 0 .../tree/styles/index.less | 0 {src/components => components}/tree/tree.vue | 0 .../treeselect/demo}/treeselect.js | 0 .../treeselect/demo}/treeselect.vue | 0 .../treeselect/index.js | 1 - .../treeselect/styles/index.less | 0 .../treeselect/treeselect.vue | 6 +- .../code => components/upload/demo}/upload.js | 0 .../upload/demo}/upload.vue | 0 .../components => components}/upload/index.js | 1 - .../upload/styles/index.less | 0 .../upload/upload.vue | 0 .../src/views => components/views1}/about.vue | 0 .../src/views => components/views1}/color.vue | 0 .../src/views => components/views1}/font.vue | 0 .../src/views => components/views1}/index.vue | 0 .../views => components/views1}/notice.vue | 0 .../views => components/views1}/react-kui.vue | 0 .../views => components/views1}/sponsor.vue | 0 .../src/views => components/views1}/test.vue | 0 .../views => components/views1}/transfer.vue | 0 docs/{src => }/app.vue | 0 .../code => assets}/atom-one-light.css | 0 docs/{src => }/assets/back.jpg | Bin docs/{src => }/assets/demo.less | 58 +- docs/{src => }/assets/favicon.png | Bin docs/{src => }/assets/logo.svg | 0 docs/assets/markdown.less | 420 +++ docs/{src => }/assets/v-logo.png | Bin .../angular-kui.vue => components/base.vue} | 8 +- docs/components/code/atom-one-light.css | 96 + docs/{src => }/components/code/code.vue | 17 +- docs/{src => }/components/code/highlight.js | 0 docs/{src => }/components/code/htmlbars.js | 0 docs/components/code/index.js | 2 + .../components/code/lang/javascript.js | 0 docs/{src => }/components/code/lang/xml.js | 0 docs/{src => }/components/demo/demo.less | 45 +- docs/components/demo/demo.vue | 61 + docs/{src => }/components/demo/index.js | 0 docs/components/index.vue | 16 + docs/components/md.vue | 43 + docs/index.html | 22 +- docs/{src => }/layout.vue | 50 +- docs/{src => }/main.js | 19 +- docs/menu.js | 75 + docs/router.js | 97 + docs/src/assets/ani.less | 3205 ----------------- docs/src/assets/fonts/CenturyGothic.ttf | Bin 137568 -> 0 bytes docs/src/assets/fonts/w-e-icon.woff | Bin 5568 -> 0 bytes docs/src/assets/react.svg | 1 - docs/src/assets/theme.jpg | Bin 55691 -> 0 bytes docs/src/assets/wx.jpg | Bin 38756 -> 0 bytes docs/src/assets/zfb.jpg | Bin 31034 -> 0 bytes docs/src/code/alert.js | 19 - docs/src/code/badge.js | 45 - docs/src/code/breadcrumb.js | 21 - docs/src/code/button.js | 40 - docs/src/code/grid.js | 47 - docs/src/code/install.js | 42 - docs/src/code/layout.js | 116 - docs/src/code/menuData.js | 76 - docs/src/code/start.js | 25 - docs/src/code/transfer.js | 3 - docs/src/components/code/index.js | 21 - docs/src/components/demo/demo.vue | 79 - docs/src/components/test.vue | 12 - docs/src/index.html | 27 - docs/src/router.js | 103 - docs/src/test.vue | 68 - docs/src/views/alert.vue | 86 - docs/src/views/badge.vue | 116 - docs/src/views/breadcrumb.vue | 97 - docs/src/views/card.vue | 94 - docs/src/views/grid.vue | 141 - docs/src/views/install.vue | 24 - docs/src/views/kui-loader.vue | 30 - docs/src/views/layout.vue | 213 -- docs/src/views/log.vue | 332 -- docs/src/views/start.vue | 72 - docs/src/views/tag.vue | 98 - docs/src/views/theme.vue | 42 - docs/test.vue | 49 + docs/views/install.md | 51 + .../vue-loader.js => views/kui-loader.md} | 27 +- docs/views/log.md | 338 ++ docs/{src/views/ssr.vue => views/ssr.md} | 61 +- docs/views/start.md | 100 + docs/views/theme.md | 26 + {src/mixins => mixins}/emitter.js | 0 package.json | 34 +- src/components/badge/index.js | 3 - src/components/breadcrumb/breadcrumb.less | 28 - src/components/breadcrumb/breadcrumb.vue | 10 - src/components/breadcrumb/breadcrumbItem.vue | 27 - src/components/breadcrumb/index.js | 4 - src/components/button/index.js | 4 - src/components/card/card.vue | 35 - src/components/card/index.js | 3 - src/components/datePicker/calendar.less | 270 -- src/components/grid/index.js | 5 - src/components/layout/content.vue | 18 - src/components/layout/footer.vue | 8 - src/components/layout/header.vue | 8 - src/components/layout/index.js | 7 - src/components/layout/layout.vue | 8 - src/components/layout/sider.vue | 8 - src/components/message/message.less | 82 - src/components/message/notice.less | 90 - src/components/scroll/index.js | 3 - src/components/scroll/scroll.less | 48 - src/components/scroll/scroll.vue | 223 -- src/components/tag/index.js | 3 - src/components/tag/tag.vue | 45 - src/styles/index.less | 42 - 387 files changed, 4184 insertions(+), 6955 deletions(-) create mode 100644 build/md-loader/index.js create mode 100644 build/md-loader/loader.js create mode 100644 build/md-loader/render.js rename {src/directives => components/_tool}/docClick.js (100%) rename {src/directives => components/_tool}/transferDom.js (100%) create mode 100644 components/_tool/utils.js rename {src/directives => components/_tool}/winScroll.js (100%) rename {src/components => components}/affix/affix.vue (98%) rename {docs/src/code => components/affix/demo}/affix.js (100%) rename {docs/src/views => components/affix/demo}/affix.vue (100%) rename {src/components => components}/affix/index.js (68%) rename src/components/affix/affix.less => components/affix/styles/index.less (100%) rename src/components/alert/alert.vue => components/alert/alert.jsx (54%) create mode 100644 components/alert/demo/base.md create mode 100644 components/alert/demo/close.md create mode 100644 components/alert/demo/icon.md create mode 100644 components/alert/demo/index.vue rename {src/components => components}/alert/index.js (69%) create mode 100644 components/alert/index.md rename src/components/alert/alert.less => components/alert/styles/index.less (90%) rename {src/components => components}/backtop/backTop.vue (97%) rename {docs/src/code => components/backtop/demo}/backtop.js (100%) rename {docs/src/views => components/backtop/demo}/backtop.vue (100%) rename {src/components => components}/backtop/index.js (69%) rename src/components/backtop/backtop.less => components/backtop/styles/index.less (100%) rename src/components/badge/badge.vue => components/badge/badge.jsx (58%) create mode 100644 components/badge/demo/base.md create mode 100644 components/badge/demo/dot.md create mode 100644 components/badge/demo/index.vue create mode 100644 components/badge/demo/max.md create mode 100644 components/badge/index.js create mode 100644 components/badge/index.md rename src/components/badge/badge.less => components/badge/styles/index.less (100%) create mode 100644 components/breadcrumb/breadcrumb.jsx create mode 100644 components/breadcrumb/breadcrumbItem.jsx create mode 100644 components/breadcrumb/demo/base.md create mode 100644 components/breadcrumb/demo/icon.md create mode 100644 components/breadcrumb/demo/index.vue create mode 100644 components/breadcrumb/demo/separator.md create mode 100644 components/breadcrumb/index.js create mode 100644 components/breadcrumb/index.md create mode 100644 components/breadcrumb/styles/index.less rename src/components/button/button.vue => components/button/button.jsx (43%) rename src/components/button/buttonGroup.vue => components/button/buttonGroup.jsx (47%) create mode 100644 components/button/demo/base.md rename {docs/src/views => components/button/demo}/button.vue (100%) create mode 100644 components/button/demo/disabled.md create mode 100644 components/button/demo/group.md create mode 100644 components/button/demo/index.vue create mode 100644 components/button/demo/size.md create mode 100644 components/button/demo/with-icon.md create mode 100644 components/button/index.js create mode 100644 components/button/index.md rename src/components/button/button.less => components/button/styles/index.less (95%) rename {docs/src/code => components/card}/card.js (100%) create mode 100644 components/card/card.jsx create mode 100644 components/card/demo/base.md create mode 100644 components/card/demo/border.md create mode 100644 components/card/demo/index.vue create mode 100644 components/card/index.js create mode 100644 components/card/index.md rename src/components/card/card.less => components/card/styles/index.less (70%) rename {src/components => components}/carousel/carousel.vue (99%) rename {src/components => components}/carousel/carouselItem.vue (100%) rename {docs/src/views => components/carousel/demo}/carousel.vue (100%) rename {src/components => components}/carousel/index.js (81%) rename src/components/carousel/carousel.less => components/carousel/styles/index.less (100%) rename {src/components => components}/checkbox/checkbox.vue (100%) rename {src/components => components}/checkbox/checkboxGroup.vue (100%) rename {docs/src/code => components/checkbox/demo}/checkbox.js (100%) rename {docs/src/views => components/checkbox/demo}/checkbox.vue (100%) rename {src/components => components}/checkbox/index.js (81%) rename src/components/checkbox/checkbox.less => components/checkbox/styles/index.less (100%) rename {docs/src/code => components/collapse}/carousel.js (100%) rename {src/components => components}/collapse/collapse.js (85%) create mode 100644 components/collapse/collapse.jsx rename {src/components => components}/collapse/collapse.vue (100%) rename {docs/src/views => components/collapse/demo}/collapse.vue (100%) rename docs/src/code/collapse.js => components/collapse/demo/collapse1.js (100%) rename {src/components => components}/collapse/index.js (79%) rename {src/components => components}/collapse/panel.vue (100%) rename src/components/collapse/collapse.less => components/collapse/styles/index.less (100%) rename {src/components => components}/colorPicker/colorPicker.vue (97%) rename {docs/src/views => components/colorPicker/demo}/colorpicker.vue (100%) rename {src/components => components}/colorPicker/img/marker.png (100%) rename {src/components => components}/colorPicker/img/mask.png (100%) rename {src/components => components}/colorPicker/img/wheel.png (100%) rename {src/components => components}/colorPicker/index.js (70%) rename {src/components => components}/colorPicker/picker.vue (100%) rename src/components/colorPicker/colorpicker.less => components/colorPicker/styles/index.less (94%) rename {src/components => components}/datePicker/datecalendar.vue (99%) rename {src/components => components}/datePicker/datepicker.vue (97%) rename {docs/src/code => components/datePicker/demo}/datepicker.js (100%) rename {docs/src/views => components/datePicker/demo}/datepicker.vue (100%) rename {src/components => components}/datePicker/index.js (100%) rename {src/components => components}/datePicker/lang.js (100%) create mode 100644 components/datePicker/styles/calendar.less rename {src/components/datePicker => components/datePicker/styles}/datepicker.less (100%) create mode 100644 components/datePicker/styles/index.less rename {docs/src/code => components/drawer/demo}/drawer.js (100%) rename {docs/src/views => components/drawer/demo}/drawer.vue (100%) rename {src/components => components}/drawer/drawer.vue (97%) rename {src/components => components}/drawer/index.js (70%) rename src/components/drawer/drawer.less => components/drawer/styles/index.less (100%) rename {docs/src/code => components/dropdown/demo}/dropdown.js (100%) rename {docs/src/views => components/dropdown/demo}/dropdown.vue (100%) rename {src/components => components}/dropdown/dropdown.vue (97%) rename {src/components => components}/dropdown/dropdownItem.vue (100%) rename {src/components => components}/dropdown/dropdownMenu.vue (100%) rename {src/components => components}/dropdown/index.js (86%) rename src/components/dropdown/dropdown.less => components/dropdown/styles/index.less (100%) rename {docs/src/code => components/form/demo}/form.js (100%) rename {docs/src/views => components/form/demo}/form.vue (100%) rename {src/components => components}/form/form.vue (100%) rename {src/components => components}/form/formitem.vue (100%) rename {src/components => components}/form/index.js (80%) rename src/components/form/form.less => components/form/styles/index.less (100%) rename src/components/grid/col.vue => components/grid/col.jsx (33%) create mode 100644 components/grid/demo/base.md create mode 100644 components/grid/demo/gutter.md create mode 100644 components/grid/demo/index.vue create mode 100644 components/grid/demo/info.md create mode 100644 components/grid/demo/offset.md create mode 100644 components/grid/index.js create mode 100644 components/grid/index.md rename src/components/grid/row.vue => components/grid/row.jsx (36%) rename src/components/grid/grid.less => components/grid/styles/index.less (100%) create mode 100644 components/icon/demo/base.md rename {docs/src/code => components/icon/demo}/icon.js (97%) create mode 100644 components/icon/demo/index.vue create mode 100644 components/icon/demo/info.md rename docs/src/views/icon.vue => components/icon/demo/search.vue (45%) rename {src/components => components}/icon/fonts/ionicons.eot (100%) rename {src/components => components}/icon/fonts/ionicons.svg (100%) rename {src/components => components}/icon/fonts/ionicons.ttf (100%) rename {src/components => components}/icon/fonts/ionicons.woff (100%) rename {src/components => components}/icon/fonts/ionicons.woff2 (100%) rename src/components/icon/icon.vue => components/icon/icon.jsx (62%) rename {src/components => components}/icon/index.js (39%) create mode 100644 components/icon/index.md rename src/components/icon/icon.less => components/icon/styles/index.less (99%) rename {docs/src/views => components/imagePreview/demo}/image-preview.vue (100%) rename {docs/src/code => components/imagePreview/demo}/imagepreview.js (100%) rename {src/components => components}/imagePreview/imagePreview.vue (97%) rename {src/components => components}/imagePreview/index.js (98%) rename src/components/imagePreview/imagepreview.less => components/imagePreview/styles/index.less (100%) rename {src => components}/index.js (39%) rename {docs/src/code => components/input/demo}/input.js (100%) rename {docs/src/views => components/input/demo}/input.vue (100%) rename {src/components => components}/input/index.js (68%) rename {src/components => components}/input/input.vue (100%) rename src/components/input/input.less => components/input/styles/index.less (100%) create mode 100644 components/layout/demo/base.md create mode 100644 components/layout/demo/index.vue create mode 100644 components/layout/demo/info.md create mode 100644 components/layout/demo/top-middle-bottom.md create mode 100644 components/layout/demo/top-sider-content.md create mode 100644 components/layout/index.js create mode 100644 components/layout/index.md create mode 100644 components/layout/layout.jsx rename src/components/layout/layout.less => components/layout/styles/index.less (59%) rename {docs/src/code => components/loading/demo}/loading.js (100%) rename {docs/src/views => components/loading/demo}/loading.vue (100%) rename {src/components => components}/loading/index.js (99%) rename {src/components => components}/loading/loading.vue (100%) rename src/components/loading/loading.less => components/loading/styles/index.less (100%) rename {docs/src/code => components/menu/demo}/menu.js (100%) rename {docs/src/views => components/menu/demo}/menu.vue (100%) rename {src/components => components}/menu/index.js (89%) rename {src/components => components}/menu/menu.vue (92%) rename {src/components => components}/menu/menugroup.vue (100%) rename {src/components => components}/menu/menuitem.vue (100%) rename src/components/menu/menu.less => components/menu/styles/index.less (99%) rename {src/components => components}/menu/submenu.vue (100%) rename {docs/src/code => components/message/demo}/message.js (100%) rename {docs/src/views => components/message/demo}/message.vue (100%) rename {docs/src/code => components/message/demo}/notice.js (100%) rename {src/components => components}/message/index.js (98%) rename {src/components => components}/message/notice.vue (100%) rename {src/components => components}/message/notices.vue (100%) create mode 100755 components/message/styles/index.less create mode 100644 components/message/styles/message.less create mode 100644 components/message/styles/notice.less rename {docs/src/code => components/modal/demo}/modal.js (100%) rename {docs/src/views => components/modal/demo}/modal.vue (100%) rename {src/components => components}/modal/index.js (98%) rename {src/components => components}/modal/modal.vue (98%) rename src/components/modal/modal.less => components/modal/styles/index.less (100%) rename {docs/src/code => components/page/demo}/page.js (100%) rename {docs/src/views => components/page/demo}/page.vue (100%) rename {src/components => components}/page/index.js (68%) rename {src/components => components}/page/page.vue (99%) rename src/components/page/page.less => components/page/styles/index.less (100%) rename {docs/src/code => components/poptip/demo}/poptip.js (100%) rename {docs/src/views => components/poptip/demo}/poptip.vue (100%) rename {src/components => components}/poptip/index.js (68%) rename {src/components => components}/poptip/poptip.vue (97%) rename src/components/poptip/poptip.less => components/poptip/styles/index.less (100%) rename {docs/src/code => components/radio/demo}/radio.js (100%) rename {docs/src/views => components/radio/demo}/radio.vue (100%) rename {src/components => components}/radio/index.js (86%) rename {src/components => components}/radio/radio.vue (100%) rename {src/components => components}/radio/radioButton.vue (95%) rename {src/components => components}/radio/radioGroup.vue (100%) rename src/components/radio/radio.less => components/radio/styles/index.less (100%) rename {docs/src/code => components/select/demo}/select.js (100%) rename {docs/src/views => components/select/demo}/select.vue (100%) rename {src/components => components}/select/index.js (78%) rename {src/components => components}/select/option.vue (100%) rename {src/components => components}/select/select.vue (97%) rename src/components/select/select.less => components/select/styles/index.less (100%) rename {docs/src/code => components/slider/demo}/slider.js (100%) rename {docs/src/views => components/slider/demo}/slider.vue (100%) rename {src/components => components}/slider/index.js (68%) rename {src/components => components}/slider/slider.vue (100%) rename {src/components => components}/slider/sliderButton.vue (100%) rename src/components/slider/slider.less => components/slider/styles/index.less (100%) rename {docs/src/code => components/steps/demo}/steps.js (100%) rename {docs/src/views => components/steps/demo}/steps.vue (100%) rename {src/components => components}/steps/index.js (77%) rename {src/components => components}/steps/step.vue (100%) rename {src/components => components}/steps/steps.vue (100%) rename src/components/steps/steps.less => components/steps/styles/index.less (100%) create mode 100644 components/styles.js rename {src => components}/styles/global.less (100%) rename {docs/src/code => components/switch/demo}/switch.js (100%) rename {docs/src/views => components/switch/demo}/switch.vue (100%) rename {src/components => components}/switch/index.js (68%) rename src/components/switch/switch.less => components/switch/styles/index.less (100%) rename {src/components => components}/switch/switch.vue (100%) rename {docs/src/code => components/table/demo}/table.js (100%) rename {docs/src/views => components/table/demo}/table.vue (100%) rename {src/components => components}/table/expand.js (100%) rename {src/components => components}/table/index.js (68%) rename src/components/table/table.less => components/table/styles/index.less (100%) rename {src/components => components}/table/table.vue (99%) rename {docs/src/code => components/tabs/demo}/tabs.js (100%) rename {docs/src/views => components/tabs/demo}/tabs.vue (100%) rename {src/components => components}/tabs/index.js (79%) rename src/components/tabs/tabs.less => components/tabs/styles/index.less (100%) rename {src/components => components}/tabs/tabpane.vue (100%) rename {src/components => components}/tabs/tabs.vue (99%) rename {docs/src/code => components/tabs}/tag.js (100%) create mode 100644 components/tag/demo/base.md create mode 100644 components/tag/demo/color.md create mode 100644 components/tag/demo/dynamic.md create mode 100644 components/tag/demo/index.vue create mode 100644 components/tag/index.js create mode 100644 components/tag/index.md rename src/components/tag/tag.less => components/tag/styles/index.less (100%) create mode 100644 components/tag/tag.jsx rename {docs/src/code => components/timeline/demo}/timeline.js (100%) rename {docs/src/views => components/timeline/demo}/timeline.vue (100%) rename {src/components => components}/timeline/index.js (82%) rename src/components/timeline/timeline.less => components/timeline/styles/index.less (100%) rename {src/components => components}/timeline/timeline.vue (100%) rename {src/components => components}/timeline/timelineitem.vue (100%) rename {docs/src/code => components/tooltip/demo}/tooltip.js (100%) rename {docs/src/views => components/tooltip/demo}/tooltip.vue (100%) rename {src/components => components}/tooltip/index.js (69%) rename src/components/tooltip/tooltip.less => components/tooltip/styles/index.less (100%) rename {src/components => components}/tooltip/tooltip.vue (98%) rename {docs/src/code => components/tree/demo}/tree.js (100%) rename {docs/src/views => components/tree/demo}/tree.vue (100%) rename {src/components => components}/tree/index.js (68%) rename {src/components => components}/tree/node.vue (100%) rename src/components/tree/tree.less => components/tree/styles/index.less (100%) rename {src/components => components}/tree/tree.vue (100%) rename {docs/src/code => components/treeselect/demo}/treeselect.js (100%) rename {docs/src/views => components/treeselect/demo}/treeselect.vue (100%) rename {src/components => components}/treeselect/index.js (70%) rename src/components/treeselect/treeselect.less => components/treeselect/styles/index.less (100%) rename {src/components => components}/treeselect/treeselect.vue (97%) rename {docs/src/code => components/upload/demo}/upload.js (100%) rename {docs/src/views => components/upload/demo}/upload.vue (100%) rename {src/components => components}/upload/index.js (68%) rename src/components/upload/upload.less => components/upload/styles/index.less (100%) rename {src/components => components}/upload/upload.vue (100%) rename {docs/src/views => components/views1}/about.vue (100%) rename {docs/src/views => components/views1}/color.vue (100%) rename {docs/src/views => components/views1}/font.vue (100%) rename {docs/src/views => components/views1}/index.vue (100%) rename {docs/src/views => components/views1}/notice.vue (100%) rename {docs/src/views => components/views1}/react-kui.vue (100%) rename {docs/src/views => components/views1}/sponsor.vue (100%) rename {docs/src/views => components/views1}/test.vue (100%) rename {docs/src/views => components/views1}/transfer.vue (100%) rename docs/{src => }/app.vue (100%) rename docs/{src/components/code => assets}/atom-one-light.css (100%) rename docs/{src => }/assets/back.jpg (100%) rename docs/{src => }/assets/demo.less (91%) rename docs/{src => }/assets/favicon.png (100%) rename docs/{src => }/assets/logo.svg (100%) create mode 100644 docs/assets/markdown.less rename docs/{src => }/assets/v-logo.png (100%) rename docs/{src/views/angular-kui.vue => components/base.vue} (39%) create mode 100644 docs/components/code/atom-one-light.css rename docs/{src => }/components/code/code.vue (71%) rename docs/{src => }/components/code/highlight.js (100%) rename docs/{src => }/components/code/htmlbars.js (100%) create mode 100644 docs/components/code/index.js rename docs/{src => }/components/code/lang/javascript.js (100%) rename docs/{src => }/components/code/lang/xml.js (100%) rename docs/{src => }/components/demo/demo.less (48%) create mode 100644 docs/components/demo/demo.vue rename docs/{src => }/components/demo/index.js (100%) create mode 100644 docs/components/index.vue create mode 100644 docs/components/md.vue rename docs/{src => }/layout.vue (62%) rename docs/{src => }/main.js (47%) create mode 100644 docs/menu.js create mode 100644 docs/router.js delete mode 100644 docs/src/assets/ani.less delete mode 100755 docs/src/assets/fonts/CenturyGothic.ttf delete mode 100755 docs/src/assets/fonts/w-e-icon.woff delete mode 100644 docs/src/assets/react.svg delete mode 100644 docs/src/assets/theme.jpg delete mode 100644 docs/src/assets/wx.jpg delete mode 100644 docs/src/assets/zfb.jpg delete mode 100644 docs/src/code/alert.js delete mode 100644 docs/src/code/badge.js delete mode 100644 docs/src/code/breadcrumb.js delete mode 100644 docs/src/code/button.js delete mode 100644 docs/src/code/grid.js delete mode 100644 docs/src/code/install.js delete mode 100644 docs/src/code/layout.js delete mode 100644 docs/src/code/menuData.js delete mode 100644 docs/src/code/start.js delete mode 100644 docs/src/code/transfer.js delete mode 100644 docs/src/components/code/index.js delete mode 100644 docs/src/components/demo/demo.vue delete mode 100644 docs/src/components/test.vue delete mode 100644 docs/src/index.html delete mode 100644 docs/src/router.js delete mode 100644 docs/src/test.vue delete mode 100644 docs/src/views/alert.vue delete mode 100644 docs/src/views/badge.vue delete mode 100644 docs/src/views/breadcrumb.vue delete mode 100644 docs/src/views/card.vue delete mode 100644 docs/src/views/grid.vue delete mode 100644 docs/src/views/install.vue delete mode 100644 docs/src/views/kui-loader.vue delete mode 100644 docs/src/views/layout.vue delete mode 100644 docs/src/views/log.vue delete mode 100644 docs/src/views/start.vue delete mode 100644 docs/src/views/tag.vue delete mode 100644 docs/src/views/theme.vue create mode 100644 docs/test.vue create mode 100644 docs/views/install.md rename docs/{src/code/vue-loader.js => views/kui-loader.md} (31%) create mode 100644 docs/views/log.md rename docs/{src/views/ssr.vue => views/ssr.md} (30%) create mode 100644 docs/views/start.md create mode 100644 docs/views/theme.md rename {src/mixins => mixins}/emitter.js (100%) delete mode 100644 src/components/badge/index.js delete mode 100644 src/components/breadcrumb/breadcrumb.less delete mode 100644 src/components/breadcrumb/breadcrumb.vue delete mode 100644 src/components/breadcrumb/breadcrumbItem.vue delete mode 100644 src/components/breadcrumb/index.js delete mode 100644 src/components/button/index.js delete mode 100644 src/components/card/card.vue delete mode 100644 src/components/card/index.js delete mode 100644 src/components/datePicker/calendar.less delete mode 100644 src/components/grid/index.js delete mode 100644 src/components/layout/content.vue delete mode 100644 src/components/layout/footer.vue delete mode 100644 src/components/layout/header.vue delete mode 100644 src/components/layout/index.js delete mode 100644 src/components/layout/layout.vue delete mode 100644 src/components/layout/sider.vue delete mode 100755 src/components/message/message.less delete mode 100755 src/components/message/notice.less delete mode 100644 src/components/scroll/index.js delete mode 100644 src/components/scroll/scroll.less delete mode 100644 src/components/scroll/scroll.vue delete mode 100644 src/components/tag/index.js delete mode 100644 src/components/tag/tag.vue delete mode 100644 src/styles/index.less diff --git a/.babelrc b/.babelrc index 8c642c5f..2aa7f94c 100644 --- a/.babelrc +++ b/.babelrc @@ -12,6 +12,7 @@ ] ], "plugins": [ - "@babel/plugin-syntax-dynamic-import" + "@babel/plugin-syntax-dynamic-import", + "transform-vue-jsx" ] } \ No newline at end of file diff --git a/build/build.js b/build/build.js index 8dfe6760..8a7bf262 100644 --- a/build/build.js +++ b/build/build.js @@ -1,10 +1,7 @@ const rm = require('rimraf') -const ora = require('ora') -const spinner = ora('开始构建...') const chalk = require('chalk') const webpack = require('webpack') -const path = require('path') let isBuildDoc = process.argv.splice(2).length>0; let config = isBuildDoc ? require('./webpack.prod.doc.conf') : require('./webpack.prod.conf'); diff --git a/build/md-loader/index.js b/build/md-loader/index.js new file mode 100644 index 00000000..e464f65f --- /dev/null +++ b/build/md-loader/index.js @@ -0,0 +1 @@ +module.exports = require('./loader'); \ No newline at end of file diff --git a/build/md-loader/loader.js b/build/md-loader/loader.js new file mode 100644 index 00000000..fc32e655 --- /dev/null +++ b/build/md-loader/loader.js @@ -0,0 +1,174 @@ +var loaderUtils = require('loader-utils'); +var hljs = require('highlight.js'); +var cheerio = require('cheerio'); +var markdown = require('markdown-it'); +var Token = require('markdown-it/lib/token'); + +/** + * `
` => `
`
+ * `` => ``
+ * @param  {string} str
+ * @return {string}
+ */
+var addVuePreviewAttr = function (str) {
+  return str.replace(/( vue file template
+ * @param  {[type]} html [description]
+ * @return {[type]}      [description]
+ */
+var renderVueTemplate = function (html, wrapper) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false,
+    xmlMode: true,
+  });
+
+  var output = {
+    style: $.html('style'),
+    // get only the first script child. Causes issues if multiple script files in page.
+    script: $.html($('script').first())
+  };
+  var result;
+
+  $('style').remove();
+  $('script').remove();
+
+  if (wrapper) {
+    result =
+      `\n`
+  } else {
+    result =
+      `\n`
+  }
+  result += output.style + '\n' + output.script;
+
+  return result;
+};
+
+module.exports = function (source) {
+  this.cacheable && this.cacheable();
+  var parser, preprocess;
+  // var params = loaderUtils.getOptions(this) || {};
+  // var vueMarkdownOptions = this._compilation.__vueMarkdownOptions__;
+  // var opts = vueMarkdownOptions ? Object.create(vueMarkdownOptions.__proto__) : {}; // inherit prototype
+  var opts = loaderUtils.getOptions(this);
+
+  var preventExtract = false;
+
+  // opts = Object.assign(opts, params, vueMarkdownOptions); // assign attributes
+
+  if (opts.preventExtract) {
+    delete opts.preventExtract;
+    preventExtract = true;
+  }
+
+  if (typeof opts.render === 'function') {
+    parser = opts;
+  } else {
+    opts = Object.assign(
+      {
+        preset: 'default',
+        html: true,
+        highlight: renderHighlight,
+        wrapper: 'section'
+      },
+      opts
+    );
+
+    var plugins = opts.use;
+    preprocess = opts.preprocess;
+
+    delete opts.use;
+    delete opts.preprocess;
+
+    parser = markdown(opts.preset, opts);
+
+    //add ruler:extract script and style tags from html token content
+    !preventExtract &&
+      parser.core.ruler.push('extract_script_or_style', function replace(
+        state
+      ) {
+        let tag_reg = new RegExp('<(script|style)(?:[^<]|<)+', 'g');
+        let newTokens = [];
+        state.tokens
+          .filter(token => token.type == 'fence' && token.info == 'html')
+          .forEach(token => {
+            let tokens = (token.content.match(tag_reg) || []).map(content => {
+              let t = new Token('html_block', '', 0);
+              t.content = content;
+              return t;
+            });
+            if (tokens.length > 0) {
+              newTokens.push.apply(newTokens, tokens);
+            }
+          });
+        state.tokens.push.apply(state.tokens, newTokens);
+      });
+
+    if (plugins) {
+      plugins.forEach(function (plugin) {
+        if (Array.isArray(plugin)) {
+          parser.use.apply(parser, plugin);
+        } else {
+          parser.use(plugin);
+        }
+      });
+    }
+  }
+
+  /**
+   * override default parser rules by adding v-pre attribute on 'code' and 'pre' tags
+   * @param {Array} rules rules to override
+   */
+  function overrideParserRules(rules) {
+    if (parser && parser.renderer && parser.renderer.rules) {
+      var parserRules = parser.renderer.rules;
+      rules.forEach(function (rule) {
+        if (parserRules && parserRules[rule]) {
+          var defaultRule = parserRules[rule];
+          parserRules[rule] = function () {
+            return addVuePreviewAttr(defaultRule.apply(this, arguments));
+          };
+        }
+      });
+    }
+  }
+
+  overrideParserRules(['code_inline', 'code_block', 'fence']);
+
+  if (preprocess) {
+    source = preprocess.call(this, parser, source);
+  }
+
+  source = source.replace(/@/g, '__at__');
+
+  var content = parser.render(source).replace(/__at__/g, '@');
+  var result = renderVueTemplate(content, opts.wrapper);
+
+  if (opts.raw) {
+    return result;
+  } else {
+    return 'module.exports = ' + JSON.stringify(result);
+  }
+};
diff --git a/build/md-loader/render.js b/build/md-loader/render.js
new file mode 100644
index 00000000..4c3f4026
--- /dev/null
+++ b/build/md-loader/render.js
@@ -0,0 +1,120 @@
+const cheerio = require('cheerio');
+const Token = require('markdown-it/lib/token');
+const hljs = require('highlight.js');
+const anchor = require('markdown-it-anchor')
+
+
+const cnReg = new RegExp('<(cn)(?:[^<]|<)+', 'g');
+
+const getDomHtml = (str, tag, scoped) => {
+  const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true, });  //xmlMode 为false 闭合标签 编译错误 
+  if (!tag) {
+    return str;
+  }
+  if (tag === 'style') {
+    return scoped
+      ? $(`${tag}[scoped]`).html()
+      : $(`${tag}`).not(`${tag}[scoped]`).html();
+  }
+  return $(tag).html() || '';
+};
+
+const render = (md, options) => {
+
+  md.core.ruler.push('render', ({ tokens }) => {
+    let cn, template, script, style, scopedStyle, code, sourceCode;
+
+
+    tokens.forEach(token => {
+      if (token.type === 'html_block') {
+        if (token.content.match(cnReg)) {
+          cn = getDomHtml(token.content, 'cn');
+          token.content = null
+        }
+        /* if (token.content.match(usReg)) {
+             us = getDomHtml(token.content, 'us');
+             token.content = '';
+           } */
+      }
+      if (token.type === 'fence' && token.info === 'tpl' && token.markup === '```') {
+        sourceCode = token.content;
+        code = '````html\n' + token.content + '````';
+        template = getDomHtml(token.content, 'template');
+        script = getDomHtml(token.content, 'script');
+        style = getDomHtml(token.content, 'style');
+        scopedStyle = getDomHtml(token.content, 'style', true);
+        token.content = '';
+        token.type = 'html_block';
+      }
+    });
+    if (template) {
+      let data = { html: template, script, style, cn, sourceCode, };
+
+      data = md.utils.escapeHtml(JSON.stringify(data));
+
+      const codeHtml = code ? md.render(code) : '';
+
+      const cnHtml = cn ? md.render(cn) : '';
+
+      let newContent = `
+      `;
+      newContent += script
+        ? `
+      
+      `
+        : '';
+      newContent += style ? `` : '';
+      newContent += scopedStyle ? `` : '';
+      const tk = new Token('html_block', '', 0);
+      tk.content = newContent;
+      tokens.push(tk);
+    }
+  });
+}
+
+//options
+
+
+const replaceDelimiters = function (str) {
+  return str.replace(/({{|}})/g, '$1');
+};
+
+var renderHighlight = function (str, lang) {
+  if (!(lang && hljs.getLanguage(lang))) {
+    return '';
+  }
+
+  try {
+    return replaceDelimiters(hljs.highlight(lang, str, true).value);
+  } catch (err) { }
+};
+
+var markdown = require('markdown-it')({
+  html: true,
+  breaks: true,
+  highlight: renderHighlight,
+})
+markdown
+  .use(anchor, {
+    level: 2,
+    permalink: true,
+    permalinkClass: 'anchor',
+    permalinkSymbol: '#',
+    permalinkBefore: false,
+  })
+  .use(render)
+
+markdown = Object.assign(markdown, {
+  raw: true,
+  wrapper: 'div'
+})
+
+module.exports = markdown
\ No newline at end of file
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index ba6bf9c6..3698c54b 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,43 +1,88 @@
+const webpack = require('webpack')
 const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const pkg = require('../package.json');
 
+const markdown = require('./md-loader/render')
+
+const vueLoaderOptions = {
+  loaders: {
+    js: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: ['env'],
+          plugins: ['transform-vue-jsx', 'transform-object-rest-spread'],
+        },
+      },
+    ],
+  },
+};
 module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',
-        /* query: {
-          presets: ['es2015', 'stage-3'],
-          plugins: ['transform-runtime']
-        } */
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'vue-loader', // 这里的使用的最新的 v15 版本
+          },
+          {
+            loader: 'kui-loader', options: { prefix: false }
+          },
+          {
+            loader: './build/md-loader',
+            options: markdown
+          },
+
+        ]
       },
-      { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
-      { test: /\.styl(us)?$/, use: ['style-loader', 'css-loader', 'stylus-loader'] },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader', /* 'postcss-loader' */]
+        use: ['vue-style-loader', 'css-loader'],
+      },
+      {
+        test: /\.vue$/,
+        use: [{
+          loader: 'vue-loader',
+          options: vueLoaderOptions
+          // options: {
+          //   loaders: {
+          //     css: 'vue-style-loader!css-loader',
+          //     less: 'vue-style-loader!css-loader!less-loader'
+          //   },
+          // }
+        },
+        { loader: 'kui-loader', options: { prefix: false } }
+        ]
       },
       {
-        test: /\.less$/,
-        use: ['style-loader', 'css-loader', 'less-loader'],
+        test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader',
       },
       {
         test: /\.(png|jpg|gif)$/,
         loader: 'url-loader',
-        query: { limit: 13000, name: 'img/[name].[ext]?[hash:7]' }
+        options: { limit: 10000, name: 'img/[name].[ext]?[hash:7]' }
       },
       {
         test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
         loader: 'file-loader',
-        query: { limit: 10000, name: 'fonts/[name].[ext]?[hash:7]', prefix: 'font' }
+        query: { name: 'fonts/[name].[ext]?[hash:7]', prefix: 'font' }
       },
     ]
   },
 
   resolve: {
-    extensions: ['.js', '.vue', '.json', '.less'],
+    extensions: ['.js', '.jsx', '.vue', '.json', '.less', '.md'],
     alias: {
       'vue': 'vue/dist/vue.esm.js',
-      '@': path.resolve(__dirname, '../src'),
+      '@': path.join(__dirname, '../'),
     },
-  }
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.BannerPlugin(`${pkg.name} v${pkg.version} 
+Copyright 2017-present, kui-vue.
+All rights reserved.
+        `),],
 }
\ No newline at end of file
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index a4b0a739..195f8539 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -2,77 +2,54 @@
  * by chuchur /chuchur@qq.com
  * 打包vue 组件
  */
-const webpack = require('webpack')
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
 const webpackBaseConfig = require('./webpack.base.conf.js');
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
-module.exports = merge(webpackBaseConfig, {
-    mode: 'development',
-    devServer: {
-        contentBase: path.resolve(__dirname, 'docs'),
-        port: 7005,
-        clientLogLevel: 'none',
-        hot: true,
-        // open: false,
-        inline: true,
-        compress: true,
-        historyApiFallback: true,
-    },
-    entry: {
-        index: ['./docs/src/main.js'],
-        vendors: ['vue', 'vue-router']
-    },
-    output: {
-        path: path.resolve(__dirname, 'docs'),
-        filename: '[name].[hash:5].js',
-        publicPath: '/',
-        chunkFilename: '[name].[chunkhash:5].js',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.vue$/,
-                use: [{
-                    loader: 'vue-loader',
-                    options: {
-                        loaders: {
-                            css: 'vue-style-loader!css-loader',
-                            less: 'vue-style-loader!css-loader!less-loader'
-                        },
-                    }
-                },
-                { loader: 'kui-loader', options: { prefix: false } }
-                ]
-            },
-        ]
-    },
-    optimization: {
-        minimize: false,
-    },
-    plugins: [
-        new VueLoaderPlugin(), //for vue-loader 15
-        new webpack.HotModuleReplacementPlugin(),
 
-        new webpack.DefinePlugin({ DEVELOPMENT: JSON.stringify(true) }),
-        // 位于开发环境下
-        // 自动生成html插件，如果创建多个HtmlWebpackPlugin的实例，就会生成多个页面
-        new HtmlWebpackPlugin({
-            favicon: path.join(__dirname, '../docs/src/assets/favicon.png'),
-            // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
-            filename: 'index.html',
-            // 源文件，路径相对于本文件所在的位置
-            template: path.resolve(__dirname, '../docs/src/index.html'),
-            // 需要引入entry里面的哪几个入口，如果entry里有公共模块，记住一定要引入
-            chunks: ['vendors', 'index'],
-            // 要把
+}; 
\ No newline at end of file
diff --git a/components/alert/demo/base.md b/components/alert/demo/base.md
new file mode 100644
index 00000000..32458c3d
--- /dev/null
+++ b/components/alert/demo/base.md
@@ -0,0 +1,15 @@
+
+#### 基本用法
+通过 `type` 来控制展示类型
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/alert/demo/close.md b/components/alert/demo/close.md
new file mode 100644
index 00000000..4f12471d
--- /dev/null
+++ b/components/alert/demo/close.md
@@ -0,0 +1,15 @@
+
+#### 可关闭
+`closable` 来控制是否显示可关闭按钮
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
new file mode 100644
index 00000000..1e756bc4
--- /dev/null
+++ b/components/alert/demo/icon.md
@@ -0,0 +1,15 @@
+
+#### 图标
+`showIcon` 来设置是否显示图标
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue
new file mode 100644
index 00000000..327c40c0
--- /dev/null
+++ b/components/alert/demo/index.vue
@@ -0,0 +1,22 @@
+ 
\ No newline at end of file
diff --git a/src/components/alert/index.js b/components/alert/index.js
similarity index 69%
rename from src/components/alert/index.js
rename to components/alert/index.js
index 1ad979f5..033791d0 100644
--- a/src/components/alert/index.js
+++ b/components/alert/index.js
@@ -1,3 +1,2 @@
-import './alert.less'
 import Alert from './alert'
 export default Alert;
\ No newline at end of file
diff --git a/components/alert/index.md b/components/alert/index.md
new file mode 100644
index 00000000..d2fa831f
--- /dev/null
+++ b/components/alert/index.md
@@ -0,0 +1,7 @@
+### API
+| 属性        | 说明                                       | 类型       | 默认值     |
+|-----------|------------------------------------------|----------|---------|
+| type      | 按钮类型，可选值为success、info、warning、error或者不设置 | String   | warning |
+| show-icon | 是否显示图标                                   | Boolean  | false   |
+| closable  | 是否显示关闭按钮                                 | Boolean  | false   |
+| close     | 关闭时触发的回调函数                               | Function | -       |
\ No newline at end of file
diff --git a/src/components/alert/alert.less b/components/alert/styles/index.less
similarity index 90%
rename from src/components/alert/alert.less
rename to components/alert/styles/index.less
index 8bf460fd..8bc2633d 100644
--- a/src/components/alert/alert.less
+++ b/components/alert/styles/index.less
@@ -2,10 +2,12 @@
 .k-alert {
    border-radius: @radius;
    margin-bottom: 16px;
-   padding: 8px 15px;
+   padding: 8px 35px 8px 15px;
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
+   transition: all .3s;
+   overflow: hidden;
    &>[class^="k-ion"], [class*=" k-ion"] {
       margin-right: 5px;
       font-size: 20px;
@@ -16,8 +18,10 @@
 .k-alert-close {
    font-size: 12px;
    position: absolute;
-   right: 16px;
+   right: 8px;
    top: 8px;
+   width: 22px;
+   text-align: center;
    line-height: 22px;
    overflow: hidden;
    cursor: pointer;
diff --git a/src/components/backtop/backTop.vue b/components/backtop/backTop.vue
similarity index 97%
rename from src/components/backtop/backTop.vue
rename to components/backtop/backTop.vue
index 6ff0a560..8df1277c 100644
--- a/src/components/backtop/backTop.vue
+++ b/components/backtop/backTop.vue
@@ -9,7 +9,7 @@
 
 
+  render() {
+    const { $slots, countText, styles, classes } = this
+    const props = {
+      class: classes,
+      style: styles
+    }
+    return (
+      

+        {$slots.default}
+        {countText}
+      

+    )
+  }
+}; 
diff --git a/components/badge/demo/base.md b/components/badge/demo/base.md
new file mode 100644
index 00000000..6d29b46b
--- /dev/null
+++ b/components/badge/demo/base.md
@@ -0,0 +1,29 @@
+
+#### 基本用法
+`Badge` 基础使用
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
new file mode 100644
index 00000000..332c9346
--- /dev/null
+++ b/components/badge/demo/dot.md
@@ -0,0 +1,31 @@
+
+#### 点
+设置 `dot` 来展示一个点
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
new file mode 100644
index 00000000..c90f0bfe
--- /dev/null
+++ b/components/badge/demo/index.vue
@@ -0,0 +1,22 @@
+ 
\ No newline at end of file
diff --git a/components/badge/demo/max.md b/components/badge/demo/max.md
new file mode 100644
index 00000000..28a6f56b
--- /dev/null
+++ b/components/badge/demo/max.md
@@ -0,0 +1,40 @@
+
+#### 最大值 / 自定义
+设置 `max-count` 配合 `count` ，数字模式超出隐藏，`count` 不为数字时将不进行计算
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/badge/index.js b/components/badge/index.js
new file mode 100644
index 00000000..10678bdb
--- /dev/null
+++ b/components/badge/index.js
@@ -0,0 +1,2 @@
+import Badge from './badge.jsx'
+export default Badge
\ No newline at end of file
diff --git a/components/badge/index.md b/components/badge/index.md
new file mode 100644
index 00000000..571c00a3
--- /dev/null
+++ b/components/badge/index.md
@@ -0,0 +1,7 @@
+### API
+| 属性        | 说明                   | 类型            | 默认值   |
+|-----------|----------------------|---------------|-------|
+| count     | 显示的文字                | String，Number | -     |
+| max-count | 展示封顶的数字值，高于的部分会以+号显示 | String，Number | -     |
+| dot       | 不展示数字，只有一个小红点        | Boolean       | false |
+| mark      | 是否单独使用               | Boolean       | false |
\ No newline at end of file
diff --git a/src/components/badge/badge.less b/components/badge/styles/index.less
similarity index 100%
rename from src/components/badge/badge.less
rename to components/badge/styles/index.less
diff --git a/components/breadcrumb/breadcrumb.jsx b/components/breadcrumb/breadcrumb.jsx
new file mode 100644
index 00000000..32a4143f
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.jsx
@@ -0,0 +1,10 @@
+export default {
+  name: 'Breadcrumb',
+  render() {
+    return (
+      

+        {this.$slots.default}
+      

+    )
+  }
+}
diff --git a/components/breadcrumb/breadcrumbItem.jsx b/components/breadcrumb/breadcrumbItem.jsx
new file mode 100644
index 00000000..fb6d7bc7
--- /dev/null
+++ b/components/breadcrumb/breadcrumbItem.jsx
@@ -0,0 +1,27 @@
+import Icon from "../icon";
+export default {
+  name: 'BreadcrumbItem',
+  props: {
+    separator: { type: String, default: '/' },
+    to: String,
+    replace: Boolean,
+    icon: String
+  },
+  methods: {
+    toPath() {
+      this.to && this.replace ? this.$router.replace({ path: this.replace }) : this.$router.push({ path: this.to })
+    }
+  },
+  render() {
+    const { $slots, toPath, icon, separator } = this
+    return (
+      
+        {icon ?  : null}
+        
+          {$slots.default}
+        
+        {separator}
+      
+    )
+  }
+} 
\ No newline at end of file
diff --git a/components/breadcrumb/demo/base.md b/components/breadcrumb/demo/base.md
new file mode 100644
index 00000000..98fd0a6b
--- /dev/null
+++ b/components/breadcrumb/demo/base.md
@@ -0,0 +1,16 @@
+
+#### 基础用法
+通过 `to` 添加跳转链接
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/breadcrumb/demo/icon.md b/components/breadcrumb/demo/icon.md
new file mode 100644
index 00000000..aa5f0bc5
--- /dev/null
+++ b/components/breadcrumb/demo/icon.md
@@ -0,0 +1,16 @@
+
+#### 设置图标
+通过 `icon` 设置图标
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue
new file mode 100644
index 00000000..1d742a21
--- /dev/null
+++ b/components/breadcrumb/demo/index.vue
@@ -0,0 +1,19 @@
+ 
\ No newline at end of file
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
new file mode 100644
index 00000000..b4655988
--- /dev/null
+++ b/components/breadcrumb/demo/separator.md
@@ -0,0 +1,16 @@
+
+#### 分隔符
+通过 `separator` 设置分隔符
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/breadcrumb/index.js b/components/breadcrumb/index.js
new file mode 100644
index 00000000..14814e0e
--- /dev/null
+++ b/components/breadcrumb/index.js
@@ -0,0 +1,3 @@
+import Breadcrumb from './breadcrumb.jsx'
+import BreadcrumbItem from './breadcrumbItem.jsx'
+export { Breadcrumb, BreadcrumbItem }
\ No newline at end of file
diff --git a/components/breadcrumb/index.md b/components/breadcrumb/index.md
new file mode 100644
index 00000000..2537a6ee
--- /dev/null
+++ b/components/breadcrumb/index.md
@@ -0,0 +1,7 @@
+### BreadcrumbItem API
+| 属性        | 说明                                  | 类型      | 默认值   |
+|-----------|-------------------------------------|---------|-------|
+| separator | 自定义分隔符                              | String  | /     |
+| to        | 自定义链接函数,和 vue-router配合使用            | String  | -     |
+| replace   | 路由跳转时，开启 replace 将不会向 history 添加新记录 | Boolean | false |
+| icon      | 按钮的图标                               | String  | -     |
\ No newline at end of file
diff --git a/components/breadcrumb/styles/index.less b/components/breadcrumb/styles/index.less
new file mode 100644
index 00000000..44551e64
--- /dev/null
+++ b/components/breadcrumb/styles/index.less
@@ -0,0 +1,33 @@
+@import '../../styles/global.less';
+.k-breadcrumb {
+  line-height: 1.5;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: rgba(0, 0, 0, .45);
+  font-size: 14px;
+  .k-breadcrumb-item {
+    [class^="k-ion"]{
+      margin-right: 4px;
+    }
+    &:hover {
+      color: @main;
+    }
+  }
+  .k-breadcrumb-link {
+    cursor: pointer;
+  }
+  >span {
+    &:last-child {
+      color: rgba(0, 0, 0, .65);
+      .k-breadcrumb-separator {
+        display: none;
+      }
+    }
+  }
+  .k-breadcrumb-separator {
+    margin: 0 5px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/button/button.vue b/components/button/button.jsx
similarity index 43%
rename from src/components/button/button.vue
rename to components/button/button.jsx
index d23870c0..95bb1aec 100644
--- a/src/components/button/button.vue
+++ b/components/button/button.jsx
@@ -1,15 +1,5 @@
-
-
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/components/button/buttonGroup.vue b/components/button/buttonGroup.jsx
similarity index 47%
rename from src/components/button/buttonGroup.vue
rename to components/button/buttonGroup.jsx
index ec5b5aa4..5759f06a 100644
--- a/src/components/button/buttonGroup.vue
+++ b/components/button/buttonGroup.jsx
@@ -1,9 +1,3 @@
-
-
 
diff --git a/components/button/demo/base.md b/components/button/demo/base.md
new file mode 100644
index 00000000..691793eb
--- /dev/null
+++ b/components/button/demo/base.md
@@ -0,0 +1,16 @@
+
+#### 基本用法
+使用type、hollow、circle属性来定义Button 的样式。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/docs/src/views/button.vue b/components/button/demo/button.vue
similarity index 100%
rename from docs/src/views/button.vue
rename to components/button/demo/button.vue
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
new file mode 100644
index 00000000..222d94ea
--- /dev/null
+++ b/components/button/demo/disabled.md
@@ -0,0 +1,13 @@
+
+#### 禁用
+通过添加 disabled 属性可将按钮设置为不可用状态。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/button/demo/group.md b/components/button/demo/group.md
new file mode 100644
index 00000000..9317e660
--- /dev/null
+++ b/components/button/demo/group.md
@@ -0,0 +1,25 @@
+
+#### 按钮组合
+将多个 `Button` 放入 `ButtonGroup` 内，可实现按钮组合的效果。
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
new file mode 100644
index 00000000..57751bd5
--- /dev/null
+++ b/components/button/demo/index.vue
@@ -0,0 +1,31 @@
+
+
\ No newline at end of file
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
new file mode 100644
index 00000000..923f8e4c
--- /dev/null
+++ b/components/button/demo/size.md
@@ -0,0 +1,14 @@
+
+#### 基本用法
+使用type、hollow、circle属性来定义Button 的样式。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/button/demo/with-icon.md b/components/button/demo/with-icon.md
new file mode 100644
index 00000000..3397be0e
--- /dev/null
+++ b/components/button/demo/with-icon.md
@@ -0,0 +1,17 @@
+
+#### 带图标
+通过添加 icon 属性 设置按钮按钮图标。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/button/index.js b/components/button/index.js
new file mode 100644
index 00000000..208c6f9e
--- /dev/null
+++ b/components/button/index.js
@@ -0,0 +1,11 @@
+// import './button.less'
+import Button from './button'
+import ButtonGroup from './buttonGroup'
+
+Button.Group = ButtonGroup
+
+Button.install = function (vue) {
+  vue.component(Button.name, Button)
+  vue.component(ButtonGroup.name, ButtonGroup)
+}
+export default Button
\ No newline at end of file
diff --git a/components/button/index.md b/components/button/index.md
new file mode 100644
index 00000000..d24da81a
--- /dev/null
+++ b/components/button/index.md
@@ -0,0 +1,11 @@
+## API 
+
+| 属性      | 说明                                                | 类型      | 默认值   |
+|---------|---------------------------------------------------|---------|-------|
+| type    | 按钮类型，可选值为primary、link、success、warning、danger或者不设置 | String  | -     |
+| mini    | 按钮显示小尺寸                                           | Boolean | false |
+| large   | 按钮显示大尺寸                                           | Boolean | false |
+| circle  | 按钮是否圆角                                            | Boolean | false |
+| hollow  | 按钮是否颜色镂空                                          | Boolean | false |
+| icon    | 按钮的图标                                             | String  | -     |
+| loading | 按钮是否进入加载模式                                        | Boolean | false |
\ No newline at end of file
diff --git a/src/components/button/button.less b/components/button/styles/index.less
similarity index 95%
rename from src/components/button/button.less
rename to components/button/styles/index.less
index 637d38bb..8cfdbb26 100644
--- a/src/components/button/button.less
+++ b/components/button/styles/index.less
@@ -22,14 +22,7 @@
         cursor: not-allowed;
         opacity: .5;
     }
-    // &>span+.
-    .icon-left,.icon-right{
-        font-size: 16px;
-    }
-    &>span+.icon-right {
-        margin-left: 8px;
-    }
-    &>.icon-left+span {
+    &>[class^="k-ion"] +span, span +[class^="k-ion"] {
         margin-left: 8px;
     }
 }
diff --git a/docs/src/code/card.js b/components/card/card.js
similarity index 100%
rename from docs/src/code/card.js
rename to components/card/card.js
diff --git a/components/card/card.jsx b/components/card/card.jsx
new file mode 100644
index 00000000..c4ecdc38
--- /dev/null
+++ b/components/card/card.jsx
@@ -0,0 +1,33 @@
+import Icon from "../icon";
+export default {
+  name: 'Card',
+  props: {
+    bordered: Boolean,
+    title: String,
+    icon: String
+  },
+  computed: {
+    classes() {
+      return ['k-card', {
+        ['k-card-bordered']: this.bordered
+      }]
+    }
+  },
+  render() {
+    const { title, classes, icon, $slots } = this
+    return (
+      

+        

+          {icon ?  : null}
+          {title ? 
{title}
 : $slots.title || null}
+        

+        {$slots.extra ?
+          
{$slots.extra}

+          : null}
+        {$slots.default ?
+          
{$slots.default}

+          : null}
+      

+    )
+  }
+}
\ No newline at end of file
diff --git a/components/card/demo/base.md b/components/card/demo/base.md
new file mode 100644
index 00000000..0359e4b5
--- /dev/null
+++ b/components/card/demo/base.md
@@ -0,0 +1,26 @@
+
+#### 边框
+`bordered` 可以设置是否显示边框
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/card/demo/border.md b/components/card/demo/border.md
new file mode 100644
index 00000000..c41b9086
--- /dev/null
+++ b/components/card/demo/border.md
@@ -0,0 +1,20 @@
+
+#### 基本用法
+通过 `title` 和 `icon` 可设置标题和图标
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue
new file mode 100644
index 00000000..85b1a1cc
--- /dev/null
+++ b/components/card/demo/index.vue
@@ -0,0 +1,17 @@
+ 
\ No newline at end of file
diff --git a/components/card/index.js b/components/card/index.js
new file mode 100644
index 00000000..a439d75b
--- /dev/null
+++ b/components/card/index.js
@@ -0,0 +1,2 @@
+import Card from './card.jsx'
+export default Card
\ No newline at end of file
diff --git a/components/card/index.md b/components/card/index.md
new file mode 100644
index 00000000..c36fd286
--- /dev/null
+++ b/components/card/index.md
@@ -0,0 +1,7 @@
+### API
+| 属性       | 说明       | 类型      | 默认值   |
+|----------|----------|---------|-------|
+| title    | 卡片的标题    | String、slot  | slot     |
+| icon     | 卡片标题的图标  | String  | -     |
+| bordered | 卡片是否显示边框 | Boolean | false |
+| extra    | 卡片标题扩展   | slot    | -     |
\ No newline at end of file
diff --git a/src/components/card/card.less b/components/card/styles/index.less
similarity index 70%
rename from src/components/card/card.less
rename to components/card/styles/index.less
index b045e5a9..a60e53ba 100644
--- a/src/components/card/card.less
+++ b/components/card/styles/index.less
@@ -7,12 +7,16 @@
         border-bottom: 1px solid #e9eaec;
         padding: 14px 16px;
         line-height: 1;
-        p{
+        [class^="k-ion"] {
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+        p {
             display: inline;
             font-weight: 700;
         }
     }
-    .k-card-extra{
+    .k-card-extra {
         position: absolute;
         right: 16px;
         top: 14px;
@@ -21,6 +25,7 @@
         padding: 16px;
     }
 }
-.k-card-bordered{
-    border:1px solid #eee;
+
+.k-card-bordered {
+    border: 1px solid #eee;
 }
\ No newline at end of file
diff --git a/src/components/carousel/carousel.vue b/components/carousel/carousel.vue
similarity index 99%
rename from src/components/carousel/carousel.vue
rename to components/carousel/carousel.vue
index 9d3d159b..26e0f438 100644
--- a/src/components/carousel/carousel.vue
+++ b/components/carousel/carousel.vue
@@ -16,7 +16,7 @@
 
 
-
+}; 
\ No newline at end of file
diff --git a/components/grid/demo/base.md b/components/grid/demo/base.md
new file mode 100644
index 00000000..8539cf79
--- /dev/null
+++ b/components/grid/demo/base.md
@@ -0,0 +1,27 @@
+
+#### 基本用法
+`col` 必须放在 `row` 里面
+
+
+```tpl
+
+```
+
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
new file mode 100644
index 00000000..78c9fd32
--- /dev/null
+++ b/components/grid/demo/gutter.md
@@ -0,0 +1,25 @@
+
+#### 分栏间隔
+使用 `gutter` 熟悉来设置分栏的间隔
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue
new file mode 100644
index 00000000..cb5dd34a
--- /dev/null
+++ b/components/grid/demo/index.vue
@@ -0,0 +1,55 @@
+
+
\ No newline at end of file
diff --git a/components/grid/demo/info.md b/components/grid/demo/info.md
new file mode 100644
index 00000000..733645c9
--- /dev/null
+++ b/components/grid/demo/info.md
@@ -0,0 +1,11 @@
+### Grid 栅格
+采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题
+两个概念，行 `row` 和列 `col` ，具体使用方法如下：
+- 使用 `row` 在水平方向创建一行
+- 将一组 `col` 插入在 `row` 中
+- 在每个 `col` 中，键入自己的内容
+- 通过设置 `col` 的 `span` 参数，指定跨越的范围，其范围是1到24
+- 每个 `row` 中的 `col` 总和应该为24
+
+> 注意：非 template/render 模式下，需使用 k-col。
+### 代码示例
\ No newline at end of file
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
new file mode 100644
index 00000000..99e48a1c
--- /dev/null
+++ b/components/grid/demo/offset.md
@@ -0,0 +1,23 @@
+
+#### 栅格偏移
+通过设置 `offset` 属性，将列进行左右偏移，偏移栅格数为 `offset` 的值。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/grid/index.js b/components/grid/index.js
new file mode 100644
index 00000000..6c40b708
--- /dev/null
+++ b/components/grid/index.js
@@ -0,0 +1,4 @@
+import Row from './row.jsx';
+import Col from './col.jsx';
+
+export { Row, Col };
\ No newline at end of file
diff --git a/components/grid/index.md b/components/grid/index.md
new file mode 100644
index 00000000..6c5cc829
--- /dev/null
+++ b/components/grid/index.md
@@ -0,0 +1,9 @@
+### Row API
+| 属性     | 说明              | 类型            | 默认值 |
+|--------|-----------------|---------------|-----|
+| gutter | 栅格间距，单位 px，左右平分 | String,Number | 0   |
+### Col API
+| 属性     | 说明                    | 类型            | 默认值 |
+|--------|-----------------------|---------------|-----|
+| span   | 栅格的占位格数，可选值为0~24的整数   | String,Number | -   |
+| offset | 栅格左侧的间隔格数，可选值为1~24的整数 | String,Number | -   |
\ No newline at end of file
diff --git a/src/components/grid/row.vue b/components/grid/row.jsx
similarity index 36%
rename from src/components/grid/row.vue
rename to components/grid/row.jsx
index 1decb7db..20bee865 100644
--- a/src/components/grid/row.vue
+++ b/components/grid/row.jsx
@@ -1,9 +1,4 @@
-
-
-
+}; 
\ No newline at end of file
diff --git a/src/components/grid/grid.less b/components/grid/styles/index.less
similarity index 100%
rename from src/components/grid/grid.less
rename to components/grid/styles/index.less
diff --git a/components/icon/demo/base.md b/components/icon/demo/base.md
new file mode 100644
index 00000000..31f45dce
--- /dev/null
+++ b/components/icon/demo/base.md
@@ -0,0 +1,15 @@
+
+#### 基本用法
+可以通过 `type`、`size`  、`color` 属性分别设置图标的类型、大小、颜色,也可以通过设置 `spin` 属性来实现动画旋转效果。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/docs/src/code/icon.js b/components/icon/demo/icon.js
similarity index 97%
rename from docs/src/code/icon.js
rename to components/icon/demo/icon.js
index b3e2b553..6fa14735 100644
--- a/docs/src/code/icon.js
+++ b/components/icon/demo/icon.js
@@ -1,12 +1,5 @@
-let code = {}
 
-code.base = `
-
-
-`
-let icons = {}
-
-icons.ios = [
+export const ios = [
   'ios-add',
   'ios-add-circle',
   'ios-add-circle-outline',
@@ -326,7 +319,7 @@ icons.ios = [
   'ios-woman',
 ]
 
-icons.md = [
+export const md = [
   'md-add',
   'md-add-circle',
   'md-add-circle-outline',
@@ -646,7 +639,7 @@ icons.md = [
   'md-woman'
 ]
 
-icons.logo = [
+export const logo = [
   'logo-android',
   'logo-angular',
   'logo-apple',
@@ -710,7 +703,3 @@ icons.logo = [
   'logo-yen',
   'logo-youtube',
 ]
-
-code.icons = icons
-
-export default code
\ No newline at end of file
diff --git a/components/icon/demo/index.vue b/components/icon/demo/index.vue
new file mode 100644
index 00000000..9e923307
--- /dev/null
+++ b/components/icon/demo/index.vue
@@ -0,0 +1,21 @@
+
\ No newline at end of file
diff --git a/components/icon/demo/info.md b/components/icon/demo/info.md
new file mode 100644
index 00000000..95be4765
--- /dev/null
+++ b/components/icon/demo/info.md
@@ -0,0 +1,3 @@
+## Icon 图标
+kui 的图标使用开源项目 [ionicons](http://ionicons.com/) 前版本4.5.10 
+### 代码示例
\ No newline at end of file
diff --git a/docs/src/views/icon.vue b/components/icon/demo/search.vue
similarity index 45%
rename from docs/src/views/icon.vue
rename to components/icon/demo/search.vue
index 58432f80..34ea32fb 100644
--- a/docs/src/views/icon.vue
+++ b/components/icon/demo/search.vue
@@ -1,62 +1,8 @@
 
 
+  },
+}
+
\ No newline at end of file
diff --git a/src/components/icon/fonts/ionicons.eot b/components/icon/fonts/ionicons.eot
similarity index 100%
rename from src/components/icon/fonts/ionicons.eot
rename to components/icon/fonts/ionicons.eot
diff --git a/src/components/icon/fonts/ionicons.svg b/components/icon/fonts/ionicons.svg
similarity index 100%
rename from src/components/icon/fonts/ionicons.svg
rename to components/icon/fonts/ionicons.svg
diff --git a/src/components/icon/fonts/ionicons.ttf b/components/icon/fonts/ionicons.ttf
similarity index 100%
rename from src/components/icon/fonts/ionicons.ttf
rename to components/icon/fonts/ionicons.ttf
diff --git a/src/components/icon/fonts/ionicons.woff b/components/icon/fonts/ionicons.woff
similarity index 100%
rename from src/components/icon/fonts/ionicons.woff
rename to components/icon/fonts/ionicons.woff
diff --git a/src/components/icon/fonts/ionicons.woff2 b/components/icon/fonts/ionicons.woff2
similarity index 100%
rename from src/components/icon/fonts/ionicons.woff2
rename to components/icon/fonts/ionicons.woff2
diff --git a/src/components/icon/icon.vue b/components/icon/icon.jsx
similarity index 62%
rename from src/components/icon/icon.vue
rename to components/icon/icon.jsx
index a48084b7..9accf611 100644
--- a/src/components/icon/icon.vue
+++ b/components/icon/icon.jsx
@@ -1,7 +1,3 @@
-
-
diff --git a/src/components/icon/index.js b/components/icon/index.js
similarity index 39%
rename from src/components/icon/index.js
rename to components/icon/index.js
index 3d93f0a6..28f7a16c 100644
--- a/src/components/icon/index.js
+++ b/components/icon/index.js
@@ -1,3 +1,7 @@
-import './icon.less'
 import Icon from './icon'
+
+Icon.install = function (vue) {
+  vue.component(Icon.name, Icon)
+}
+
 export default Icon
\ No newline at end of file
diff --git a/components/icon/index.md b/components/icon/index.md
new file mode 100644
index 00000000..0028f3c2
--- /dev/null
+++ b/components/icon/index.md
@@ -0,0 +1,8 @@
+### API 
+| 属性    | 说明           | 类型            | 默认值   |
+|-------|--------------|---------------|-------|
+| type  | 图标的名称        | String        | -     |
+| size  | 图标的大小，单位是 px | String,Number | -     |
+| color | 图标的颜色        | String        | -     |
+| spin  | 图标是否选择       | Boolen        | false |
+         
\ No newline at end of file
diff --git a/src/components/icon/icon.less b/components/icon/styles/index.less
similarity index 99%
rename from src/components/icon/icon.less
rename to components/icon/styles/index.less
index c64e8578..c067ce51 100644
--- a/src/components/icon/icon.less
+++ b/components/icon/styles/index.less
@@ -12,8 +12,8 @@
 
 @font-face {
   font-family: "Ionicons";
-  src: url("fonts/ionicons.eot?v=4.6.3");
-  src: url("fonts/ionicons.eot?v=4.6.3#iefix") format("embedded-opentype"), url("fonts/ionicons.woff2?v=4.6.3") format("woff2"), url("fonts/ionicons.woff?v=4.6.3") format("woff"), url("fonts/ionicons.ttf?v=4.6.3") format("truetype"), url("fonts/ionicons.svg?v=4.6.3#Ionicons") format("svg");
+  src: url("../fonts/ionicons.eot?v=4.6.3");
+  src: url("../fonts/ionicons.eot?v=4.6.3#iefix") format("embedded-opentype"), url("../fonts/ionicons.woff2?v=4.6.3") format("woff2"), url("../fonts/ionicons.woff?v=4.6.3") format("woff"), url("../fonts/ionicons.ttf?v=4.6.3") format("truetype"), url("../fonts/ionicons.svg?v=4.6.3#Ionicons") format("svg");
   font-weight: normal;
   font-style: normal
 }
diff --git a/docs/src/views/image-preview.vue b/components/imagePreview/demo/image-preview.vue
similarity index 100%
rename from docs/src/views/image-preview.vue
rename to components/imagePreview/demo/image-preview.vue
diff --git a/docs/src/code/imagepreview.js b/components/imagePreview/demo/imagepreview.js
similarity index 100%
rename from docs/src/code/imagepreview.js
rename to components/imagePreview/demo/imagepreview.js
diff --git a/src/components/imagePreview/imagePreview.vue b/components/imagePreview/imagePreview.vue
similarity index 97%
rename from src/components/imagePreview/imagePreview.vue
rename to components/imagePreview/imagePreview.vue
index 36ef030d..ae1e2bcc 100644
--- a/src/components/imagePreview/imagePreview.vue
+++ b/components/imagePreview/imagePreview.vue
@@ -9,7 +9,7 @@
   
 
 
\ No newline at end of file
diff --git a/components/layout/demo/info.md b/components/layout/demo/info.md
new file mode 100644
index 00000000..161837de
--- /dev/null
+++ b/components/layout/demo/info.md
@@ -0,0 +1,39 @@
+## Layout 布局
+协助进行页面级整体布局。
+
+### 设计规则
+#### 尺寸
+一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
+- 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
+- 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
+- 顶部导航高度的范围计算公式为：48+8n。
+- 侧边导航宽度的范围计算公式：200+8n。
+#### 交互
+- 一级导航和末级的导航需要在可视化的层面被强调出来；
+- 当前项应该在呈现上优先级最高；
+- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
+- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
+#### 视觉
+导航样式上需要根据信息层级合理的选择样式：
+
+- 大色块强调
+建议用于底色为深色系时，当前页面父级的导航项。
+
+- 高亮火柴棍
+当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
+
+- 字体高亮变色
+从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
+
+- 字体放大
+12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
+
+### 组件概述
+- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
+- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
+- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
+
+
+功能不多，他就是简单的布局。未采用 `flex`
\ No newline at end of file
diff --git a/components/layout/demo/top-middle-bottom.md b/components/layout/demo/top-middle-bottom.md
new file mode 100644
index 00000000..4c917087
--- /dev/null
+++ b/components/layout/demo/top-middle-bottom.md
@@ -0,0 +1,101 @@
+
+#### 上中下布局
+最基本的『上-中-下』布局。 一般主导航放置于页面的顶端，从左自右依次为：`logo`、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/layout/demo/top-sider-content.md b/components/layout/demo/top-sider-content.md
new file mode 100644
index 00000000..d18b4e38
--- /dev/null
+++ b/components/layout/demo/top-sider-content.md
@@ -0,0 +1,104 @@
+
+#### 顶部-侧边布局-通栏
+同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/layout/index.js b/components/layout/index.js
new file mode 100644
index 00000000..b5617b41
--- /dev/null
+++ b/components/layout/index.js
@@ -0,0 +1,12 @@
+import Layout from './layout.jsx'
+// import Header from './header.jsx'
+// import Footer from './footer.jsx'
+// import Sider from './sider.jsx'
+// import Content from './content.jsx'
+
+const Header = Layout.Header
+const Footer = Layout.Footer
+const Sider = Layout.Sider
+const Content = Layout.Content
+
+export { Layout, Header, Footer, Sider, Content }
\ No newline at end of file
diff --git a/components/layout/index.md b/components/layout/index.md
new file mode 100644
index 00000000..e69de29b
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
new file mode 100644
index 00000000..414ec12b
--- /dev/null
+++ b/components/layout/layout.jsx
@@ -0,0 +1,96 @@
+function createComponent(suffixCls, name) {
+  return Component => {
+    return {
+      name,
+      render() {
+        const prop = {
+          props: { suffixCls },
+        }
+        return (
+          {this.$slots.default}
+        )
+      }
+    }
+  }
+}
+const Base = {
+  props: { suffixCls: String },
+  render() {
+    const { $slots, suffixCls } = this
+    const prop = {
+      class: `k-${suffixCls}`
+    }
+    return (
+      
{$slots.default}

+    )
+  }
+}
+
+const Content = createComponent('layout-content', 'Content')(Base)
+const Header = createComponent('layout-header', 'Header')(Base)
+const Footer = createComponent('layout-footer', 'Footer')(Base)
+
+const layoutBase = {
+  props: { suffixCls: String },
+  data() {
+    return {
+      siders: 0
+    }
+  },
+  provide() {
+    return {
+      addSider: e => {
+        this.siders++
+      },
+      removeSider: e => {
+        this.siders--
+      }
+    }
+  },
+  computed: {
+    classes() {
+      const { suffixCls, siders } = this
+      return [`k-${suffixCls}`, { 'k-layout-has-sider': siders > 0 }]
+    }
+  },
+  render() {
+    const { $slots, classes } = this
+    const prop = {
+      class: classes
+    }
+    return (
+      
{$slots.default}

+    )
+  }
+}
+
+const Layout = createComponent('layout', 'Layout')(layoutBase)
+
+const siderBase = {
+  props: { suffixCls: String },
+  inject: ['addSider', 'removeSider'],
+  mounted() {
+    this.addSider && this.addSider()
+  },
+  beforeDestroy() {
+    this.removeSider && this.removeSider()
+  },
+  render() {
+    const { $slots, suffixCls } = this
+    const prop = {
+      class: `k-${suffixCls}`
+    }
+    return (
+      
{$slots.default}

+    )
+  }
+}
+
+const Sider = createComponent('layout-sider', 'Sider')(siderBase)
+
+Layout.Sider = Sider
+Layout.Content = Content
+Layout.Header = Header
+Layout.Footer = Footer
+
+export default Layout
\ No newline at end of file
diff --git a/src/components/layout/layout.less b/components/layout/styles/index.less
similarity index 59%
rename from src/components/layout/layout.less
rename to components/layout/styles/index.less
index 2693802c..f63bdf7a 100644
--- a/src/components/layout/layout.less
+++ b/components/layout/styles/index.less
@@ -1,7 +1,8 @@
 .k-layout {
   background: #f0f2f5;
-  position: relative;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   &::before {
     content: "";
     display: table;
@@ -18,33 +19,27 @@
     height: 64px;
     line-height: 64px;
     padding: 0 50px;
-  }
-  .k-layout-header,
-  .k-layout-sider {
     background: #646d82;
   }
-  .k-layout-sider {
-    width: 200px;
-    height: 100%;
-    float: left;
-    position: absolute;
-    bottom: 0;
-    overflow: hidden;
-    &+.k-layout-content,
-    &+.k-layout {
-      margin-left: 200px;
-    }
-  }
   .k-layout-content {
-    box-sizing: border-box;
-    margin-left: 0;
-    &+.k-layout-sider {
-      right: 0;
-    }
+    flex: 1;
+  }
+  .k-layout-sider {
+    position: relative;
+    min-width: 0;
+    transition: all 0.2s;
+    background: #646d82;
   }
   .k-layout-footer {
     background: #f0f2f5;
     padding: 24px 50px;
     font-size: 14px;
   }
+}
+
+.k-layout-has-sider {
+  flex-direction: row;
+  .k-layout {
+    flex: 1;
+  }
 }
\ No newline at end of file
diff --git a/docs/src/code/loading.js b/components/loading/demo/loading.js
similarity index 100%
rename from docs/src/code/loading.js
rename to components/loading/demo/loading.js
diff --git a/docs/src/views/loading.vue b/components/loading/demo/loading.vue
similarity index 100%
rename from docs/src/views/loading.vue
rename to components/loading/demo/loading.vue
diff --git a/src/components/loading/index.js b/components/loading/index.js
similarity index 99%
rename from src/components/loading/index.js
rename to components/loading/index.js
index a86ff7f1..854e07de 100644
--- a/src/components/loading/index.js
+++ b/components/loading/index.js
@@ -1,4 +1,3 @@
-import './loading.less'
 import Load from './loading.vue'
 import Vue from 'vue';
 
diff --git a/src/components/loading/loading.vue b/components/loading/loading.vue
similarity index 100%
rename from src/components/loading/loading.vue
rename to components/loading/loading.vue
diff --git a/src/components/loading/loading.less b/components/loading/styles/index.less
similarity index 100%
rename from src/components/loading/loading.less
rename to components/loading/styles/index.less
diff --git a/docs/src/code/menu.js b/components/menu/demo/menu.js
similarity index 100%
rename from docs/src/code/menu.js
rename to components/menu/demo/menu.js
diff --git a/docs/src/views/menu.vue b/components/menu/demo/menu.vue
similarity index 100%
rename from docs/src/views/menu.vue
rename to components/menu/demo/menu.vue
diff --git a/src/components/menu/index.js b/components/menu/index.js
similarity index 89%
rename from src/components/menu/index.js
rename to components/menu/index.js
index 0105e139..dbd6f416 100644
--- a/src/components/menu/index.js
+++ b/components/menu/index.js
@@ -1,4 +1,3 @@
-import './menu.less'
 import Menu from './menu'
 import MenuGroup from './menugroup'
 import MenuItem from './menuitem'
diff --git a/src/components/menu/menu.vue b/components/menu/menu.vue
similarity index 92%
rename from src/components/menu/menu.vue
rename to components/menu/menu.vue
index f7633328..508386b7 100644
--- a/src/components/menu/menu.vue
+++ b/components/menu/menu.vue
@@ -1,5 +1,5 @@
 
@@ -33,9 +33,6 @@ export default {
         }
       ];
     },
-    styles() {
-      return this.mode == "vertical" ? { width: this.width > 0 ? `${this.width}px` : this.width } : {};
-    }
   },
   methods: {
     setAccordion(name) {
diff --git a/src/components/menu/menugroup.vue b/components/menu/menugroup.vue
similarity index 100%
rename from src/components/menu/menugroup.vue
rename to components/menu/menugroup.vue
diff --git a/src/components/menu/menuitem.vue b/components/menu/menuitem.vue
similarity index 100%
rename from src/components/menu/menuitem.vue
rename to components/menu/menuitem.vue
diff --git a/src/components/menu/menu.less b/components/menu/styles/index.less
similarity index 99%
rename from src/components/menu/menu.less
rename to components/menu/styles/index.less
index 1a99e040..31a8de33 100644
--- a/src/components/menu/menu.less
+++ b/components/menu/styles/index.less
@@ -7,7 +7,7 @@
     list-style: none;
     font-size: 14px;
     position: relative;
-    z-index: 800;
+    zoom: 1;
     &:after, &:before {
         content: "";
         display: table;
diff --git a/src/components/menu/submenu.vue b/components/menu/submenu.vue
similarity index 100%
rename from src/components/menu/submenu.vue
rename to components/menu/submenu.vue
diff --git a/docs/src/code/message.js b/components/message/demo/message.js
similarity index 100%
rename from docs/src/code/message.js
rename to components/message/demo/message.js
diff --git a/docs/src/views/message.vue b/components/message/demo/message.vue
similarity index 100%
rename from docs/src/views/message.vue
rename to components/message/demo/message.vue
diff --git a/docs/src/code/notice.js b/components/message/demo/notice.js
similarity index 100%
rename from docs/src/code/notice.js
rename to components/message/demo/notice.js
diff --git a/src/components/message/index.js b/components/message/index.js
similarity index 98%
rename from src/components/message/index.js
rename to components/message/index.js
index 3f2c9b96..d96cb777 100755
--- a/src/components/message/index.js
+++ b/components/message/index.js
@@ -1,5 +1,3 @@
-import './notice.less'
-import './message.less'
 import Notices from './notices'
 import Vue from 'vue';
 
diff --git a/src/components/message/notice.vue b/components/message/notice.vue
similarity index 100%
rename from src/components/message/notice.vue
rename to components/message/notice.vue
diff --git a/src/components/message/notices.vue b/components/message/notices.vue
similarity index 100%
rename from src/components/message/notices.vue
rename to components/message/notices.vue
diff --git a/components/message/styles/index.less b/components/message/styles/index.less
new file mode 100755
index 00000000..608323df
--- /dev/null
+++ b/components/message/styles/index.less
@@ -0,0 +1,2 @@
+@import './message.less';
+@import './notice.less';
\ No newline at end of file
diff --git a/components/message/styles/message.less b/components/message/styles/message.less
new file mode 100644
index 00000000..d7079991
--- /dev/null
+++ b/components/message/styles/message.less
@@ -0,0 +1,82 @@
+@import '../../styles/global.less';
+.k-message {
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: fixed;
+  z-index: 1010;
+  width: 100%;
+  top: 16px;
+  left: 0;
+  pointer-events: none;
+  .k-message-notice {
+    box-sizing: content-box;
+    padding: 8px;
+    text-align: center;
+    transition: all .3s;
+    // overflow: hidden;
+    &:first-child {
+      // margin-top: -8px;
+    }
+  }
+  .k-message-notice-content {
+    box-sizing: content-box;
+    line-height: 1.5;
+    padding: 10px 16px;
+    border-radius: @radius;
+    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    background: #fff;
+    display: inline-block;
+    pointer-events: all;
+    &>[class^="k-ion"], [class*=" k-ion"] {
+      margin-right: 5px;
+      font-size: 18px;
+      vertical-align: middle;
+    }
+  }
+  .k-message-close {
+    font-size: 12px;
+    line-height: 1.5;
+    overflow: hidden;
+    cursor: pointer;
+    float: right;
+    margin-left: 15px;
+    &::before {
+      content: '\f2c0';
+      font-family: Ionicons;
+      color: #999;
+      font-size: 15px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.k-message-success .k-message-notice-content {
+  &>[class^="k-ion"], [class*=" k-ion"] {
+    color: @success;
+  }
+}
+
+.k-message-error .k-message-notice-content {
+  &>[class^="k-ion"], [class*=" k-ion"] {
+    color: @danger;
+  }
+}
+
+.k-message-info .k-message-notice-content {
+  &>[class^="k-ion"], [class*=" k-ion"] {
+    color: @main;
+  }
+}
+
+.k-message-warning .k-message-notice-content {
+  &>[class^="k-ion"], [class*=" k-ion"] {
+    color: @warning;
+  }
+}
\ No newline at end of file
diff --git a/components/message/styles/notice.less b/components/message/styles/notice.less
new file mode 100644
index 00000000..e71c3c4d
--- /dev/null
+++ b/components/message/styles/notice.less
@@ -0,0 +1,90 @@
+@import '../../styles/global.less';
+.k-notice {
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: fixed;
+  z-index: 1010;
+  width: 384px;
+  max-width: calc(100vw - 32px);
+  margin-right: 24px;
+  right: 0px;
+  top: 24px;
+  bottom: auto;
+  .k-notice-notice {
+    box-sizing: content-box;
+    transition: all .3s ease-in-out;
+    padding: 16px;
+    border-radius: @radius;
+    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    background: #fff;
+    line-height: 1.5;
+    position: relative;
+    margin-bottom: 16px;
+    overflow: hidden;
+  }
+  .k-notice-title {
+    margin-right: 16px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 8px;
+    line-height: 24px;
+    display: inline-block;
+  }
+  .k-notice-close {
+    position: absolute;
+    right: 22px;
+    top: 16px;
+    outline: none;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    &::before {
+      content: '\f2c0';
+      font-family: Ionicons;
+      color: #999;
+    }
+  }
+  .k-notice-info, .k-notice-error, .k-notice-success, .k-notice-warning {
+    .k-notice-notice-content {
+      padding-left: 35px;
+      &::before {
+        position: absolute;
+        left: 22px;
+        top: 17px;
+        font-family: Ionicons;
+        font-size: 24px;
+      }
+    }
+  }
+  .k-notice-info .k-notice-notice-content {
+    &::before {
+      color: @main;
+      content: '\f1a0';
+    }
+  }
+  .k-notice-error .k-notice-notice-content {
+    &::before {
+      content: '\f14e';
+      color: @danger;
+    }
+  }
+  .k-notice-success .k-notice-notice-content {
+    &::before {
+      content: '\f14a';
+      color: @success;
+    }
+  }
+  .k-notice-warning .k-notice-notice-content {
+    &::before {
+      content: '\f104';
+      color: @warning;
+    }
+  }
+}
\ No newline at end of file
diff --git a/docs/src/code/modal.js b/components/modal/demo/modal.js
similarity index 100%
rename from docs/src/code/modal.js
rename to components/modal/demo/modal.js
diff --git a/docs/src/views/modal.vue b/components/modal/demo/modal.vue
similarity index 100%
rename from docs/src/views/modal.vue
rename to components/modal/demo/modal.vue
diff --git a/src/components/modal/index.js b/components/modal/index.js
similarity index 98%
rename from src/components/modal/index.js
rename to components/modal/index.js
index 80e8341a..07076541 100644
--- a/src/components/modal/index.js
+++ b/components/modal/index.js
@@ -1,7 +1,6 @@
-import './modal.less'
 import Vue from 'vue';
 import Modal from './modal.vue'
-import Button from '../button/button.vue'
+import Button from '../button'
 
 let modalInstance;
 let showPos = {}
diff --git a/src/components/modal/modal.vue b/components/modal/modal.vue
similarity index 98%
rename from src/components/modal/modal.vue
rename to components/modal/modal.vue
index 68daca99..1ec1ff7f 100644
--- a/src/components/modal/modal.vue
+++ b/components/modal/modal.vue
@@ -45,8 +45,8 @@
   
 
 
+```
\ No newline at end of file
diff --git a/components/tag/demo/index.vue b/components/tag/demo/index.vue
new file mode 100644
index 00000000..bc2cf408
--- /dev/null
+++ b/components/tag/demo/index.vue
@@ -0,0 +1,19 @@
+ 
\ No newline at end of file
diff --git a/components/tag/index.js b/components/tag/index.js
new file mode 100644
index 00000000..6826d94c
--- /dev/null
+++ b/components/tag/index.js
@@ -0,0 +1,2 @@
+import Tag from './tag.jsx'
+export default Tag
\ No newline at end of file
diff --git a/components/tag/index.md b/components/tag/index.md
new file mode 100644
index 00000000..a467378d
--- /dev/null
+++ b/components/tag/index.md
@@ -0,0 +1,6 @@
+### Tag API
+| 属性        | 说明             | 类型       | 默认值   |
+|-----------|----------------|----------|-------|
+| closeable | 是否显示关闭按钮       | Boolean  | false |
+| color     | 标签的颜色，默认提供5组颜色 | String   | -     |
+| close     | 关闭标签的回调事件      | Function | -     |
\ No newline at end of file
diff --git a/src/components/tag/tag.less b/components/tag/styles/index.less
similarity index 100%
rename from src/components/tag/tag.less
rename to components/tag/styles/index.less
diff --git a/components/tag/tag.jsx b/components/tag/tag.jsx
new file mode 100644
index 00000000..2e16d6ca
--- /dev/null
+++ b/components/tag/tag.jsx
@@ -0,0 +1,53 @@
+export default {
+  name: 'Tag',
+  props: {
+    closeable: { type: Boolean, default: false },
+    color: String
+  },
+  data() {
+    return {
+      visible: true,
+      isDefaultColor: ['blue', 'red', 'orange', 'gray', 'green'].indexOf(this.color) >= 0
+    }
+  },
+  computed: {
+    classes() {
+      return ['k-tag', {
+        [`k-tag-${this.color}`]: this.isDefaultColor,
+        ['k-tag-has-color']: this.color
+      }]
+    },
+    styles() {
+      return this.isDefaultColor ? {} : { backgroundColor: this.color }
+    }
+  },
+  methods: {
+    handle(e) {
+      this.$emit('click', e)
+    },
+    close(e) {
+      this.$emit('close', e)
+      this.visible = false
+    }
+  },
+  render() {
+    const { visible, styles, handle, $slots, close, classes, closeable } = this
+    const props = {
+      on: {
+        click: handle
+      },
+      class: classes,
+      style: styles
+    }
+    return (
+      visible ? 
+        

+          
+            {$slots.default}
+          
+          {closeable ?  : null}
+        

+       : null
+    )
+  }
+}
\ No newline at end of file
diff --git a/docs/src/code/timeline.js b/components/timeline/demo/timeline.js
similarity index 100%
rename from docs/src/code/timeline.js
rename to components/timeline/demo/timeline.js
diff --git a/docs/src/views/timeline.vue b/components/timeline/demo/timeline.vue
similarity index 100%
rename from docs/src/views/timeline.vue
rename to components/timeline/demo/timeline.vue
diff --git a/src/components/timeline/index.js b/components/timeline/index.js
similarity index 82%
rename from src/components/timeline/index.js
rename to components/timeline/index.js
index a6badf24..d840f5e2 100644
--- a/src/components/timeline/index.js
+++ b/components/timeline/index.js
@@ -1,4 +1,3 @@
-import './timeline.less'
 import TimeLine from './timeline';
 import TimeLineItem from './timelineitem';
 
diff --git a/src/components/timeline/timeline.less b/components/timeline/styles/index.less
similarity index 100%
rename from src/components/timeline/timeline.less
rename to components/timeline/styles/index.less
diff --git a/src/components/timeline/timeline.vue b/components/timeline/timeline.vue
similarity index 100%
rename from src/components/timeline/timeline.vue
rename to components/timeline/timeline.vue
diff --git a/src/components/timeline/timelineitem.vue b/components/timeline/timelineitem.vue
similarity index 100%
rename from src/components/timeline/timelineitem.vue
rename to components/timeline/timelineitem.vue
diff --git a/docs/src/code/tooltip.js b/components/tooltip/demo/tooltip.js
similarity index 100%
rename from docs/src/code/tooltip.js
rename to components/tooltip/demo/tooltip.js
diff --git a/docs/src/views/tooltip.vue b/components/tooltip/demo/tooltip.vue
similarity index 100%
rename from docs/src/views/tooltip.vue
rename to components/tooltip/demo/tooltip.vue
diff --git a/src/components/tooltip/index.js b/components/tooltip/index.js
similarity index 69%
rename from src/components/tooltip/index.js
rename to components/tooltip/index.js
index 1a4fb86a..bec44667 100644
--- a/src/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,3 +1,2 @@
-import './tooltip.less'
 import Tooltip from './tooltip'
 export default Tooltip
\ No newline at end of file
diff --git a/src/components/tooltip/tooltip.less b/components/tooltip/styles/index.less
similarity index 100%
rename from src/components/tooltip/tooltip.less
rename to components/tooltip/styles/index.less
diff --git a/src/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
similarity index 98%
rename from src/components/tooltip/tooltip.vue
rename to components/tooltip/tooltip.vue
index 2043529f..b96ab1a5 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -14,9 +14,9 @@
   
 
 
diff --git a/docs/src/components/demo/index.js b/docs/components/demo/index.js
similarity index 100%
rename from docs/src/components/demo/index.js
rename to docs/components/demo/index.js
diff --git a/docs/components/index.vue b/docs/components/index.vue
new file mode 100644
index 00000000..ce7d32e6
--- /dev/null
+++ b/docs/components/index.vue
@@ -0,0 +1,16 @@
+ 
\ No newline at end of file
diff --git a/docs/components/md.vue b/docs/components/md.vue
new file mode 100644
index 00000000..f5d794d2
--- /dev/null
+++ b/docs/components/md.vue
@@ -0,0 +1,43 @@
+
+
diff --git a/docs/index.html b/docs/index.html
index 9b431a96..af18c785 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,4 +1,19 @@
-KUI - 高质量的UI组件库

\ No newline at end of file
+    }, 1000);
+
+
+
\ No newline at end of file
diff --git a/docs/src/layout.vue b/docs/layout.vue
similarity index 62%
rename from docs/src/layout.vue
rename to docs/layout.vue
index 2c1af52d..034f9aaa 100644
--- a/docs/src/layout.vue
+++ b/docs/layout.vue
@@ -13,39 +13,39 @@
         首页
         组件
         Github
-        KUI React
+        KUI React
         Blog
       
     
     

       
-        
-        
-        
-        
-        

-          
-            
-          
-        

-        
+        
+          
+        
+        
+          

+            
+              
+            
+          

+        
       
     

   
 
 
 
diff --git a/docs/src/components/test.vue b/docs/src/components/test.vue
deleted file mode 100644
index 07c0502b..00000000
--- a/docs/src/components/test.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
diff --git a/docs/src/index.html b/docs/src/index.html
deleted file mode 100644
index af18c785..00000000
--- a/docs/src/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
-    
-    KUI - 高质量的UI组件库
-    
-    
-    
-
-
-
-    

-
-
-
-
\ No newline at end of file
diff --git a/docs/src/router.js b/docs/src/router.js
deleted file mode 100644
index 4ca5ec67..00000000
--- a/docs/src/router.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import Vue from 'vue'
-import loading from '@/components/loading'
-//Vue.use(kui);
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-
-let router = []
-
-//此种编译后，无法实现按需加载，会打包在一个文件
-/*let r=['','install','start','log','input','button','select','switch','form','colorpicker','loading',
-'icon','timeline','theme','react-kui','angular-kui','alert','message','notice','upload','poptip','menu','tabs','badge',
-'checkbox','radio','datepicker','table','layout','page','modal','kui-loader','sponsor','about'];
-r.map((x)=>{
-children.push({
-path:`/${x}`,
-component:resolve=>require([x==''?'./views/index':`./views/${x}`],resolve),
-//component:r=>require.ensure([],()=>r(require(x==''?'/views/index':`./views/${x}`),x)
-})
-})*/
-
-let children = [
-    { path: 'about', component: () => import(/*webpackChunkName:'about'*/'./views/about'), },
-    { path: 'alert', component: () => import(/*webpackChunkName:'alert'*/'./views/alert'), },
-    { path: 'affix', component: () => import(/*webpackChunkName:'affix'*/'./views/affix'), },
-    { path: 'angular-kui', component: () => import(/*webpackChunkName:'angular-kui'*/'./views/angular-kui'), },
-    { path: 'card', component: () => import(/*webpackChunkName:'card'*/'./views/card'), },
-    { path: 'carousel', component: () => import(/*webpackChunkName:'carousel'*/'./views/carousel'), },
-    { path: 'collapse', component: () => import(/*webpackChunkName:'collapse'*/'./views/collapse'), },
-    { path: 'colorpicker', component: () => import(/*webpackChunkName:'colorpicker'*/'./views/colorpicker'), },
-    { path: 'color', component: () => import(/*webpackChunkName:'color'*/'./views/color'), },
-    { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'./views/checkbox'), },
-    { path: 'button', component: () => import(/*webpackChunkName:'button'*/'./views/button'), },
-    { path: 'breadcrumb', component: () => import(/*webpackChunkName:'breadcrumb'*/'./views/breadcrumb'), },
-    { path: 'backtop', component: () => import(/*webpackChunkName:'backtop'*/'./views/backtop'), },
-    { path: 'badge', component: () => import(/*webpackChunkName:'badge'*/'./views/badge'), },
-    { path: 'datepicker', component: () => import(/*webpackChunkName:'datepicker'*/'./views/datepicker'), },
-    { path: 'dropdown', component: () => import(/*webpackChunkName:'dropdown'*/'./views/dropdown'), },
-    { path: 'drawer', component: () => import(/*webpackChunkName:'drawer'*/'./views/drawer'), },
-    { path: 'form', component: () => import(/*webpackChunkName:'form'*/'./views/form'), },
-    { path: 'font', component: () => import(/*webpackChunkName:'font'*/'./views/font'), },
-    { path: 'grid', component: () => import(/*webpackChunkName:'grid'*/'./views/grid'), },
-    { path: 'imagepreview', component: () => import(/*webpackChunkName:'image-preview'*/'./views/image-preview'), },
-    { path: 'install', component: () => import(/*webpackChunkName:'install'*/'./views/install'), },
-    { path: 'input', component: () => import(/*webpackChunkName:'input'*/'./views/input'), },
-    { path: 'icon', component: () => import(/*webpackChunkName:'icon'*/'./views/icon'), },
-    { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'./views/kui-loader'), },
-    { path: 'log', component: () => import(/*webpackChunkName:'log'*/'./views/log'), },
-    { path: 'layout', component: () => import(/*webpackChunkName:'layout'*/'./views/layout'), },
-    { path: 'loading', component: () => import(/*webpackChunkName:'loading'*/'./views/loading'), },
-    { path: 'message', component: () => import(/*webpackChunkName:'message'*/'./views/message'), },
-    { path: 'modal', component: () => import(/*webpackChunkName:'modal'*/'./views/modal'), },
-    { path: 'menu', component: () => import(/*webpackChunkName:'menu'*/'./views/menu'), },
-    { path: 'notice', component: () => import(/*webpackChunkName:'notice'*/'./views/notice'), },
-    { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'./views/radio'), },
-    { path: 'react-kui', component: () => import(/*webpackChunkName:'react-kui'*/'./views/react-kui'), },
-    { path: 'select', component: () => import(/*webpackChunkName:'select'*/'./views/select'), },
-    { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'./views/ssr'), },
-    { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'./views/switch'), },
-    { path: 'start', component: () => import(/*webpackChunkName:'start'*/'./views/start'), },
-    { path: 'steps', component: () => import(/*webpackChunkName:'steps'*/'./views/steps'), },
-    { path: 'sponsor', component: () => import(/*webpackChunkName:'sponsor'*/'./views/sponsor'), },
-    { path: 'table', component: () => import(/*webpackChunkName:'table'*/'./views/table'), },
-    { path: 'tag', component: () => import(/*webpackChunkName:'tag'*/'./views/tag'), },
-    { path: 'tabs', component: () => import(/*webpackChunkName:'tabs'*/'./views/tabs'), },
-    { path: 'timeline', component: () => import(/*webpackChunkName:'timeline'*/'./views/timeline'), },
-    { path: 'tooltip', component: () => import(/*webpackChunkName:'tooltip'*/'./views/tooltip'), },
-    { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'./views/theme'), },
-    { path: 'tree', component: () => import(/*webpackChunkName:'tree'*/'./views/tree'), },
-    { path: 'treeselect', component: () => import(/*webpackChunkName:'treeselect'*/'./views/treeselect'), },
-    { path: 'test', component: () => import(/*webpackChunkName:'test'*/'./views/test'), },
-    { path: 'poptip', component: () => import(/*webpackChunkName:'poptip'*/'./views/poptip'), },
-    { path: 'page', component: () => import(/*webpackChunkName:'page'*/'./views/page'), },
-    { path: 'upload', component: () => import(/*webpackChunkName:'upload'*/'./views/upload'), },
-];
-
-
-router.push(
-    { path: '/', component: () => import(/*webpackChunkName:'home'*/'./views/index') },
-    { path: '/test', component: () => import(/*webpackChunkName:'test'*/'./test') },
-    {
-        path: '/',
-        component: () => import(/*webpackChunkName:'layout'*/'./layout'),
-        children: children
-    })
-let routers = new Router({
-    routes: router, mode: 'hash', scrollBehavior(to, from, savedPosition) {
-        //return期望滚动到哪个的位置
-        //returnsavedPosition||{x:0,y:0}
-        document.querySelector('.colMain') && (document.querySelector('.colMain').scrollTop = 0)
-    }
-})
-routers.beforeEach(function (to, from, next) {
-    typeof (_hmt) != 'undefined' && _hmt.push(['_trackPageview', to.path]);
-    loading.start('line');
-    next()
-})
-routers.afterEach((to, from, next) => {
-    // (process.env.NODE_ENV == 'development') &&
-    loading.finish();
-});
-export default routers
\ No newline at end of file
diff --git a/docs/src/test.vue b/docs/src/test.vue
deleted file mode 100644
index c5cc6726..00000000
--- a/docs/src/test.vue
+++ /dev/null
@@ -1,68 +0,0 @@
- 
-单独调试组件专用
- 
-
-
-
-
diff --git a/docs/src/views/alert.vue b/docs/src/views/alert.vue
deleted file mode 100644
index 9d6d25a8..00000000
--- a/docs/src/views/alert.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-
-
diff --git a/docs/src/views/badge.vue b/docs/src/views/badge.vue
deleted file mode 100644
index be1f0a47..00000000
--- a/docs/src/views/badge.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/src/views/breadcrumb.vue b/docs/src/views/breadcrumb.vue
deleted file mode 100644
index 85198436..00000000
--- a/docs/src/views/breadcrumb.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
diff --git a/docs/src/views/card.vue b/docs/src/views/card.vue
deleted file mode 100644
index 569a450a..00000000
--- a/docs/src/views/card.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-
-
-
diff --git a/docs/src/views/grid.vue b/docs/src/views/grid.vue
deleted file mode 100644
index 8a94d2b1..00000000
--- a/docs/src/views/grid.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-
-
-
diff --git a/docs/src/views/install.vue b/docs/src/views/install.vue
deleted file mode 100644
index 0f777dde..00000000
--- a/docs/src/views/install.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
diff --git a/docs/src/views/kui-loader.vue b/docs/src/views/kui-loader.vue
deleted file mode 100644
index 904e6034..00000000
--- a/docs/src/views/kui-loader.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
diff --git a/docs/src/views/layout.vue b/docs/src/views/layout.vue
deleted file mode 100644
index cdf3590f..00000000
--- a/docs/src/views/layout.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-
-
-
diff --git a/docs/src/views/log.vue b/docs/src/views/log.vue
deleted file mode 100644
index a2c82fea..00000000
--- a/docs/src/views/log.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-
diff --git a/docs/src/views/start.vue b/docs/src/views/start.vue
deleted file mode 100644
index cde703f3..00000000
--- a/docs/src/views/start.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
diff --git a/docs/src/views/tag.vue b/docs/src/views/tag.vue
deleted file mode 100644
index d999e431..00000000
--- a/docs/src/views/tag.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-
-
-
diff --git a/docs/src/views/theme.vue b/docs/src/views/theme.vue
deleted file mode 100644
index 8bb35361..00000000
--- a/docs/src/views/theme.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
diff --git a/docs/test.vue b/docs/test.vue
new file mode 100644
index 00000000..e1852387
--- /dev/null
+++ b/docs/test.vue
@@ -0,0 +1,49 @@
+ 
+
+
+
+
diff --git a/docs/views/install.md b/docs/views/install.md
new file mode 100644
index 00000000..87c7c9e5
--- /dev/null
+++ b/docs/views/install.md
@@ -0,0 +1,51 @@
+## 安装 
+
+### CDN 引入 
+在页面上引入 js 和 css 文件即可开始使用:
+
+````html
+
+// 
+
+
+
+// 
+````
+### 示例
+````html
+
+
+
+  
+  kui example
+  
+  
+  
+
+
+  

+    Click me!
+    Welcome to use kui
+  

+  
+
+
+````
+### NPM 安装
+```sh
+$ npm install kui-vue --save
+#OR
+$ yarn add kui-vue
+```
\ No newline at end of file
diff --git a/docs/src/code/vue-loader.js b/docs/views/kui-loader.md
similarity index 31%
rename from docs/src/code/vue-loader.js
rename to docs/views/kui-loader.md
index c6b678b3..fe913cc8 100644
--- a/docs/src/code/vue-loader.js
+++ b/docs/views/kui-loader.md
@@ -1,6 +1,19 @@
-let code = {}
-code.install = `npm i kui-loader --save-dev`
-code.webconfig = `module: {
+## KUI-Loader
+### 用途
+在vue 里面，自定义组件名称是无法和 原生的html组件 重名的， 在vue1.x 版本有这个限制，但是在vue2.x 以后，有虚拟DOM ，所以可以使用原生组件来命名自定义组件，但是有大小写区分(template/render模式)
+### 使用方法
+#### 安装 
+通过 npm 安装 kui-loader
+```sh
+npm i kui-loader --save-dev
+#or
+yarn add kui-loader
+```
+#### 配置
+配置 webpack，修改 vue-loader 的配置，如下：
+
+```js
+module: {
     rules: [
         {
           test: /\.vue$/,
@@ -16,6 +29,10 @@ code.webconfig = `module: {
           ]
         }
     ]
-}`
+}
+```
 
-export default code
\ No newline at end of file
+#### 说明
+可以直接写 标签；
+参数 prefix 设置为 true 后，所有 kui 组件标签名都可以使用前缀 k-
+ 
\ No newline at end of file
diff --git a/docs/views/log.md b/docs/views/log.md
new file mode 100644
index 00000000..58158cdf
--- /dev/null
+++ b/docs/views/log.md
@@ -0,0 +1,338 @@
+## 更新日志
+
+
+### 2.3.5
+ `2019-10-17 `
+
+- 👏 优化 `Modal` 关闭动画
+- 🐞 修复 `Select` 组件表单验证的问题
+- 💪 完善 `Table ` `row-click` 冒泡不执行的问题
+
+
+### 2.3.4
+ `2019-10-9 `
+
+- 👏 重写了 `Menu` ， `MenuItem` 一系列组件，新增了二级菜单
+- 👏 重写了 `Badge` 组件，修复了一些显示问题
+- 👏 重写了 `Tab` 组件，修复了在Modal中显示不完整的问题
+- 👏 优化了 `Tooltip` 等组件，加入了浅色显示
+- 🐞 修正 `Input` 组件文字大小不统一的问题
+- 👏 优化 `button` 组件组合使用的颜色问题
+- 🐞 表单 `Form` 组件 👏 优化，错误拼写更正
+- 👏 `Modal` 组件  新增了 `mask-closable` 属性，点遮罩阻止关闭， 默认确定按钮点击不再关闭窗体⚠️
+
+### 2.2.9
+`2019-8-26`
+
+- 组件库整体 优化，组件按需加载体积更小
+- ⬆️ 图标库升级到5.6.10版本
+- 🐞 修复 `Form` 组件特殊情况的验证问题
+- 🌟 `Table` 新增 `Loading` 模式
+- 🌟 `ImagePreview` 组件新增全局显示模式
+- 🌟 `Switch` 组件新增 `mini` 模式
+- 🌟 新增抽屉 `Drawer` 组件，[#体验](https://k-ui.cn/components/drawer)
+- 👏 `Modal`
+  - 👏 优化展示隐藏动画 [#体验](https://k-ui.cn/components/modal)
+  - 🌟 删除 `toast` 模式，新增提示框、 `confrim` 模式
+  - 🌟 新增 `info，success，warning，error，show` 等全局模式
+  - 🌟 新增异步回调
+- `Input`
+  - 🐞 修复 `@input` 事件调用两次的问题
+  - 🌟 新增大尺寸模式
+  - 👏 优化图标左右位置显示
+- `Button`
+  - 🌟 新增大尺寸模式
+  - 🌟 新增图标位置显示，左右可控
+  - 🌟 新增按钮 `loading` 模式
+
+### 2.2.7
+ `2019-7-23 `
+
+- 统一表单组件大小
+- 🐞 修复 `Radio，Checkbox` 等组件的 `disabled` 属性动态属性问题
+- 💪 全面修复 完善表单验证组件如下:
+  -  `Input ` 组件，数字类型和最大值最小值验证
+  -  `Input ` 清除之后的验证
+  -  `Chebox` 单独使用和组合使用的验证
+  -  `Radio` 单独使用和组合使用的验证
+
+### 2.2.2
+ `2019-6-13 `
+
+为了移动端更好的体验，默认取消全局定位，本次改动受影响的组件 `ColorPicker，DatePicker，Poptip，Select，Tooltip，TreeSelect `，如果发现组件下拉部分被遮挡，请给设置组件 `transfer='true' `
+文档代码展示模块新增了复制代码和放大显示
+- 🌟 新增了 `Dropdown` 组件
+- 🌟  `Modal` 组件新增宽度支持百分比 `width="80%"` 显示， 优化关闭按钮显示
+- 🌟  `Poptip` 组件新增了暗黑模式，默认宽度由 `150px` 改为 `200px`
+- 👏 优化 `ToolTip` 显示隐藏的问题
+🐞 修复 `DatePicker` 在IE，Safari等浏览器下无法设置时间的问题。
+- 👏 优化 `Notice，Message` 组件显示隐藏动画展示的问题
+- 👏 优化 `Select，DatePikcer` 组件下拉展示的问题
+🐞 修复 `Poptip `内容或标题过长展示的问题
+
+
+### 2.1.8
+ `2019-5-22 `
+
+- 🌟  `Table` 组件新增可编辑模式
+- 🐞 修复 `Page` 组件，当 `Total` 改变时 `page` 重置的问题
+- 🌟 新增 `ImagePreview` 组件
+- 🌟  `Modal` 组件，新增一些属性，可以最大化，居中显示，和自定义显示动画
+- 👏 优化 `Modal` 组件拖动
+- 🐞 修复 `Checkbox，Radio` 组件动态赋值的问题
+- 🐞 修复 `Input` 组件 `type` 为 `number` 时表单验证不通过的问题
+- 🐞 修复 `loading` 组件显示异常的问题
+- 🐞 修复 `Radio` 组件无法选中的问题
+- 🐞 修复 `Select` 组件在表单中值改变后的验证问题
+- 🐞 修复 `DatePicker` 组件赋值错误导致显示异常的问题
+- 🐞 修复 `DatePicker` 表单验证的问题
+- 🌟  `DatePicker` 支持时间戳格式
+- ⬆️ `Icon` 库升级到4.5.6
+
+### 2.0.3
+ `2019-1-27 `
+
+- 🐞 修复 `Poptip，Tooltip` 显示坐标错误的问题，非常感谢用户 `@tiantian8144` 提出问题
+- 🐞 修复一些组件在 `box-sizing: border-box;` 模式下展示怪异的问题
+- 💪 完善 `DatePicker` 组件的问题，非常感谢用户 `@醒` 提出问题
+- 👏 优化 `Table` 组件，选中表格内容
+- 🐞 修复 `Menu` 组件展开折叠和 `accordion` 不生效的问题，非常感谢用户 `@^_^¦¦¦` 提出问题
+- 🐞 修复 `Checkbox` 组件动态赋值不触发 `change` 事件的问题，非常感谢用户 `@^_^¦¦¦` 提出问题
+- 💪 完善文档目录结构
+
+
+### 1.9.7
+ `2018-9-29 `
+
+- 👏 优化webpack的编译，组件体积更小
+- 🌟 新增了对SSR服务端渲染的支持（for Nuxt），可以更愉快的玩耍了😊
+- 🌟  `Table` 组件新增排序，和 `rowclick` 行点击事件
+- 🌟  `Upload` 组件新增`max-file-size`，和`file-extension` 属性分别控制上传大小和上传扩展名
+
+### 1.9.0
+ `2018-8-8 `
+
+- 👏 重新设计了logo，组件风格统一了圆角4px
+- ⬆️ `Icon `库升级到4.3.0，使用更加规范，有效区分了ios和安卓粗细线条
+- 🌟  `Input` 新增 `icon-align` 属性控制图标显示位置
+- 🐞 修复 `Select` 组件几处问题
+- 🐞 修复 `Menu` 组件初始化的问题，新增 `open-name` 属性，可以默认展开子菜单
+- 🌟  `page` 组件新增了一些属性控制辅助显示
+- 🌟  `Tabs` 新增 `animated` 属性控制切换动画
+
+
+
+### 1.8.8
+ `2018-7-13 `
+
+- 💪 完善 `Table `文字处理 
+- 💪 完善 `Menu ` 在特定情况下显示不全的问题
+- 🌟  `Table` 组件新增 `text-max-length` 属性，统一处理文字限制
+- 🌟  `Upload` 组件新增 `beforeUpload `， `afterUpload `事件
+- 🐞 修复 `DatePicker` 组件特定情况下换行的问题
+- 🐞 修复 `Page` 组件打印错误的问题
+- 🐞 修复 `Table` 组件数据为空时全选的问题
+- 🐞 修复下拉 `transfer` 多组件干扰的问题
+- 🌟 组件内部调用隔离，用于兼容第三方UI组件库 
+
+### 1.8.0
+ `2018-7-6 `
+
+- 👏 KUI for React1.0 发布了
+- 👏 重写了部分组件， 优化和修复一些问题
+- 🐞 修复 `poptip` 等一系列组件特定情况下无法销毁的问题
+- 🐞 修复 `Table `全选反选的问题
+- 🌟 新增布局组件 `Layout` 等一些列组件和子组件
+- 🐞 修复 `transfer` 钩子无法销毁的问题
+- 🐞 修复 `Select` 无法赋值，和搜索的问题
+- 🐞 修复 `TreeSelect`：`lable` 无法更改的问题
+- 🌟  `Table` 组件新增表头固定
+- 🐞 修复 `Tooltip` 组件显示隐藏的问题
+- 👏 优化 `transfer `性能问题
+
+
+### 1.7.7
+ `2018-6-12 `
+
+- 🐞 修复 `Tree，TreeSelect` 异步加载的问题
+- 🌟  `Tooltip` 组件新增 `breaked` 属性，文字过长强制换行
+- 🌟  `Table` 组件新增 `overflow，tooltip` 属性
+- 🌟 新增 `TreeSelect` 组件
+- 👏 优化一些细节，规范一些组件名称和函数定义
+- 🌟 修复文档部分示例展示错误
+- ⬆️打包编译升级 `webpack4`
+
+
+### 1.7.5
+ `2018-5-24 `
+
+- 👏 优化 `Poptip` 等一些列组件的定位卡顿问题
+- 👏 优化 `Menu `手风琴模式的展示卡顿问题
+- 🐞 修复IE9+ `Tree` 组件选中的问题
+- 👏 优化 `datePicker `更加友好展示
+- 🐞 修复 `Tabs `子集 删除宽度错误的问题
+- 👏 优化一些其他的1像素的问题
+
+### 1.7.0
+`2018-5-10 `
+
+- 🐞 修复 `Select `， `dataPicker ` `colorPicker` 等组件在Modal组件内时，下拉位置偏移的问题
+- 🐞 修复下拉组件在浏览器的一些兼容性问题
+- 🐞 修复IE9+浏览器中的花式问题
+- 👏 重写了 `Page` 组件，保持队形
+- 🌟 新增 `Tabs` ， `TabPane` 组件
+- 👏 优化 `Modal` ， `Select` 组件展示1像素的问题
+
+
+### 1.6.8
+`2018-5-8 `
+
+- 🐞  修复 `Form` 验证的问题
+- 🐞  修复 `Select` 选中的问题
+- 🐞  修复 `Modal` 图标展示的问题
+- 💪 完善 `tree ` 组件选中的问题
+- 🐞 修复一部分组件 `mini` 模式怪异展示
+- 💪 完善 `Modal` 显示滚动条的问题
+- 🌟  `checkbox` 组件新增 `indeterminate `，协助全选展示
+- 🐞 修复Select无法选中的问题，修复poptip confirm模式怪异问题
+- 🐞 修复表单自定义类型验证
+- 🌟 新增 `Carousel `， `Collapse `， `Tree `， `Steps` 等组件
+- 👏 优化表单验证 双向排列验证提示
+
+
+### 1.6.1
+ `2018-4-25 `
+
+- 🌟 新增 `Tooltip `， `Tag `， `Breadcrumb `， `BackTop `， `Affix `， `Card` 等组件
+- 🐞 修复 `RadioGroup` 无法选中的问题
+- 🐞 修复 `Select` 无法赋值的问题
+- 💪 完善 `Poptip` 子元素有 `margin` 时无法对齐的问题
+- 💪 完善表单文档
+
+### 1.6
+ `2018-4-22 `
+
+- 🚩为了有效区分和名称，框架更名为 `kui-vue `
+统一组件的事件回调
+- 💪 重写了 `Checkbox` ， `Radio`， `Select`， `Menu` 等一系列组件
+- 💪 完成了 `Form `表单验证 [#体验](https://k-ui.cn/components/form)
+- 💪 完善文档，分离代码示例和模版
+- 🌟 新增 `Menu`， `MenuGroup`， `MenuItem`， `SubMenu` 组件 [#体验](https://k-ui.cn/components/menu)
+- 👏 优化了文档的可读性
+- 👏 优化 `Select` 组件，可清空状态
+- 👏 优化 `datePicker` 在safari下展示怪异模式
+- 🐞 修复 `Page` 组件跳转翻页的问题以及按钮字符换行的问题
+- 👏 优化 `Loading` 组件展示半透明模式
+
+### 1.4.9
+`2018-3-20 `
+
+- 🐞 修复 `colorPicker` 组件，当页面滚动时找不到对象的错误
+- 👏 优化了文档页面首次载入过慢的问题 [#解决方案](https://www.chuchur.com/article/vue-code-optimization)
+- 🌟 新增 `Loading` 组件 [#体验](https://k-ui.cn/components/loading) 
+- 🌟 新增 `Badge` 组件  [#体验](https://k-ui.cn/components/badge) 
+- 👏 优化文档，加入了代码展示部分 展开折叠
+- 🐞 修复了文档 `Table` 部分，日期下拉导致出现滚动条，部分被隐藏
+
+### 1.4.6 
+`2018-1-31`
+ 
+- 👏 加入了全局的 `document` `click` ，`scroll` 指令 优化显示一系列组件的下拉显示将更加人性化
+- 🐞 修复了 `DatePicker` 组件层级显示问题
+- 👏 优化了 `Page` 组件在 `mini` 模式显示的问题
+
+### 1.4.5 
+`2018-1-29`
+ 
+- 🐞 修复 `Table` 组件  `bordered` 显示问题
+- 👏 优化 `Table` 组件 无数据时文字显示问题，优化表格表头字体大小
+- 🌟 新增 `Table` 组件  `mini` 显示模式 [#体验](https://k-ui.cn/components/table) 
+- 👏 优化 `Select` ， `DataPicker` 等组件 `mini` 模式  `icon` 显示问题
+- 👏 优化 `Select`， `DataPicker` ， `colorPicker` 等组件点击隐藏的问题
+- 🌟 新增 `Input` 组件可以设置右侧图标  [#体验](https://k-ui.cn/components/input)
+- 🌟 新增 `Button` 组件可以设置图标 [#体验](https://k-ui.cn/components/button) 
+- 🌟 新增 `Poptip` 组件 [#体验](https://k-ui.cn/components/poptip) 
+- 🐞  `DatePicker `， `colorPicker `， `Select` 等下拉组件新增 `transifer` 属性，下拉组件可以append到body尾部，解决了父级overflow遮挡的问题 [#体验](https://k-ui.cn/components/table)
+
+
+### 1.4.3 
+`2018-1-22`
+ 
+修复多个下拉组件显示隐藏的问题
+- 🐞 修复 `Modal` 组件冒泡显示移除的问题
+- 🐞 修复 `Message` 组件显示隐藏警告提示的问题
+- 🌟 新增 `Modal` `Toast` 模式，优化动画流畅性，加入点击 `Mask`，和 `ESC`键关闭弹框。 [#体验](https://k-ui.cn/components/modal)
+- 🐞 解决 `Message`， `Notice` 组件动画的流畅性。 [#体验Msessage](https://k-ui.cn/components/message)，[#体验Notice](https://k-ui.cn/components/notice)，[#解决方案](https://www.chuchur.com/article/vue-v-for-transition)
+
+
+### 1.4 
+`2018-1-19`
+ 
+- 🐞 修复 `DataPicker` 时间选择完整性
+- 💪 完善文档多处文字错误
+- 🌟 新增 `Upload` 组件。 [#解决方案](https://www.chuchur.com/article/ajax-upload-download)
+- 🌟 新增 `Select` ， `DatePicker` ， `mini` 属性，可以使用小尺寸
+- 🌟 新增 `DatePicker` `width` 属性，可以自定义宽度
+
+### 1.3.7 
+`2018-1-17`
+ 
+- 🐞 修复 `Select` 组件无法赋值的问题
+- 🐞 修复 `Input` 组件默认参数定义出错的问题
+- 清理 `Table` 组件打印字符
+- 💪 完善文档说明
+- 🌟 新增 `Alert` 组件
+- 🌟 新增 `Message` 组件
+- 🌟 新增 `Notice` 组件
+- 🌟 `Table` 组件新增文字对其属性
+- 🌟 `Modal` 组件新增可拖动属性
+
+### 1.3.5 
+`2018-1-10 `
+ 
+- 🐞 修复 `Select` 组件数据动态改变后无法选中的问题
+- 🐞 修复 `Option` 组件 `label` 赋值的问题
+- 🌟 新增 `Option` 组件
+- 🐞 修改 `Select` 组件数据结构
+- 🐞 修复文档多处错误，完善文档数据结构
+- 🐞 修复 `render` 模式下无法渲染的问题
+- 🐞 修复表格组件冲突问题
+- 🌟 新增 `icon` 组件
+- 🌟 新增 `TimeLine`
+
+### 1.2.8 
+`2018-1-3 `
+ 
+- 🐞 修复部分组件在禁用状态下显示异常的问题
+- 🌟 新增 `Form` 组件
+- 🐞 修复 `colorPicker` 组件内存泄漏问题
+- 🌟 部分组件加入禁用状态
+- 💪 完善文档
+- 🐞 修复下拉组件绑定数据的问题
+- 💪 完善表单问题
+- 🌟 新增 `color` 组件
+
+### 1.2 
+`2017-12-19`
+- 🌟 新增 `Switch` 组件
+- 💪 完善 `Select` 组件
+- 💪 完善 `Page` 分页组件
+- 💪 完善 `Input` 组件 
+- 🐞 修复在ie下表格无法选中的问题
+
+### 1.1 
+`2017-12-18` 
+- 🌟 新增 `Radio` 组件
+- 🌟 新增 `Checkbox` 组件
+- 🐞 修复 `Table` 组件更新数据更新问题
+- 🌟 新增 `Select` 组件
+- 💪 完善 `Modal` 回调问题
+- 🌟 日期控件新增回调
+- 🌟 新增 `Row`， `Col`组件
+- 🌟 完成 `Table` ， `Page`， `Button`， `DatePicker` 等组件
+
+###  1.0.0 
+`2017-12-10`
+
+👏 🚩着手开发
+
diff --git a/docs/src/views/ssr.vue b/docs/views/ssr.md
similarity index 30%
rename from docs/src/views/ssr.vue
rename to docs/views/ssr.md
index d18bd6ef..e918bbc8 100644
--- a/docs/src/views/ssr.vue
+++ b/docs/views/ssr.md
@@ -1,36 +1,31 @@
-
-
+```
+至此，配置完成，所有组件将支持服务端渲染了。只要是对Nuxt universal 模式的支持
diff --git a/docs/views/start.md b/docs/views/start.md
new file mode 100644
index 00000000..6a8e3daf
--- /dev/null
+++ b/docs/views/start.md
@@ -0,0 +1,100 @@
+## 快速上手
+
+在开始之前，如果您刚开始接触Vue，建议您先细看 Vue及其相关文档： [vue](https://vuejs.org)，[vuex](https://vuex.vuejs.org)，[vue-router](http://router.vuejs.org/)，[vue-cli](https://cli.vuejs.org/),[vue-devtools](https://github.com/vuejs/vue-devtools)
+
+### 引入 KUI
+
+#### 1.安装脚手架
+
+[vue-cli](https://github.com/vuejs/vue-cli)
+
+```sh
+$ npm install -g @vue/cli
+# OR
+$ yarn global add @vue/cli
+```
+
+#### 2. 初始化一个项目
+
+```sh
+$ vue create antd-demo
+```
+
+#### 3. 使用组件
+
+一般在 **webpack** 入口页面` main.js` 中如下配置：
+
+```js
+import Vue from 'vue';
+import App from './App';
+import kui from 'kui-vue'; 
+import 'kui-vue/dist/k-ui.css'; 
+
+Vue.use(kui);
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '',
+});
+```
+
+以上代码便完成了 Kui 的引入。注意: 样式文件需要单独引入。
+
+#### 局部导入组件
+
+```js
+import Vue from 'vue';
+import { Button, Message } from 'kui';
+import App from './App';
+
+Vue.config.productionTip = false;
+Vue.use(Button);
+
+Vue.prototype.$message = message;
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '',
+});
+```
+
+### 兼容性
+Kui Vue 支持所有的现代浏览器和 IE9+。
+
+对于 IE 系列浏览器，需提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
+
+如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
+
+### 按需加载 
+
+可以通过以下的写法来按需加载组件。
+
+```js
+import Button from 'ant-design-vue/lib/button';
+import 'kui-vue/components/button/style'; 
+```
+
+### 使用规范 
+在非 `template/render` 模式下（例如使用 **CDN** 引用时），组件名要分隔，例如
+`Buton` 必须要写成 `k-button`。
+
+以下组件，在非 template/render 模式下，需要加前缀 k-
+- Table ：`k-table`
+- Button：`k-button`
+- Input ：`k-input`
+- Switch：`k-switch`
+- Select：`k-select`
+- Option：`k-option`
+- Col：`k-col`
+
+以下组件，在非 `template/render` 模式下，组件名要分隔
+- ButtonGroup ：`button-group`
+- CheckboxGroup：`checkbox-group`
+- FormItem ：`form-item`
+- DatePicker ：`date-picker`
+- ColorPicker ：`color-picker`
+- TimeLine ：`time-line`
+- TimeLineItem ：`time-line-item`
+ 
\ No newline at end of file
diff --git a/docs/views/theme.md b/docs/views/theme.md
new file mode 100644
index 00000000..ce4651b5
--- /dev/null
+++ b/docs/views/theme.md
@@ -0,0 +1,26 @@
+## 定制主题
+主题可以根据自己的喜好，和项目定制的风格来开发，可以定制颜色和圆角风格。
+
+![]('../assets/theme.jpg')
+
+### 覆盖定制
+如果项目使用webpack构建，可以通过覆盖less变量来定制主题
+新建一个less 文件 如：'assets/styles/custom.less',写下如下内容：
+```js
+//引入 styles
+@import '~kui-vue/src/styles/index.less';
+
+// 主色覆盖为 ff0055
+@main :#ff0055;
+
+// 组件的圆角覆盖为5px
+@radius:~'5px';
+```
+然后在入口文件 main.js 内导入这个 less 文件即可：
+```js
+import Vue from 'vue';
+import kui from 'kui-vue';
+import 'assets/styles/custom.less';
+
+Vue.use(kui);
+```
diff --git a/src/mixins/emitter.js b/mixins/emitter.js
similarity index 100%
rename from src/mixins/emitter.js
rename to mixins/emitter.js
diff --git a/package.json b/package.json
index beb88c11..7b1b16c5 100755
--- a/package.json
+++ b/package.json
@@ -21,11 +21,6 @@
     },
     "author": "chuchur",
     "license": "ISC",
-    "dependencies": {
-        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "uglifyjs-webpack-plugin": "^2.2.0"
-    },
     "keywords": [
         "kui",
         "ui",
@@ -49,10 +44,16 @@
         "email": "chuchur@qq.com"
     },
     "devDependencies": {
-        "@babel/core": "^7.6.4",
-        "@babel/polyfill": "^7.6.0",
-        "@babel/preset-env": "^7.6.3",
+        "@babel/core": "^7.7.0",
+        "@babel/helper-module-imports": "^7.7.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@babel/polyfill": "^7.7.0",
+        "@babel/preset-env": "^7.7.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
         "babel-loader": "^8.0.6",
+        "babel-plugin-transform-vue-jsx": "^4.0.1",
+        "babel-preset-env": "^1.7.0",
         "chalk": "^2.4.2",
         "css-loader": "^3.2.0",
         "file-loader": "^4.2.0",
@@ -62,22 +63,31 @@
         "less-loader": "^5.0.0",
         "mini-css-extract-plugin": "^0.8.0",
         "opn": "^6.0.0",
+        "optimize-css-assets-webpack-plugin": "^5.0.3",
         "ora": "^4.0.2",
         "postcss-loader": "^3.0.0",
         "rimraf": "^3.0.0",
         "style-loader": "^1.0.0",
+        "uglifyjs-webpack-plugin": "^2.2.0",
         "url-loader": "^2.2.0",
         "vue": "^2.6.10",
         "vue-clipboard2": "^0.3.1",
         "vue-hljs": "^1.1.2",
-        "vue-loader": "^15.7.1",
+        "vue-loader": "^15.7.2",
         "vue-router": "^3.1.3",
         "vue-style-loader": "^4.1.2",
         "vue-template-compiler": "^2.6.10",
         "webpack": "^4.41.2",
-        "webpack-cli": "^3.3.9",
-        "webpack-dev-server": "^3.8.2",
+        "webpack-cli": "^3.3.10",
+        "webpack-dev-server": "^3.9.0",
         "webpack-merge": "^4.2.2",
-        "webpack-simple-progress-plugin": "0.0.4"
+        "webpack-simple-progress-plugin": "0.0.4",
+        "webpackbar": "^4.0.0"
+    },
+    "dependencies": {
+        "markdown-it-anchor": "^5.2.5",
+        "marked": "^0.7.0",
+        "vue-antd-md-loader": "^1.1.0",
+        "vue-markdown-loader": "^2.4.1"
     }
 }
diff --git a/src/components/badge/index.js b/src/components/badge/index.js
deleted file mode 100644
index 0d347f35..00000000
--- a/src/components/badge/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './badge.less'
-import Badge from './badge'
-export default Badge
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb.less b/src/components/breadcrumb/breadcrumb.less
deleted file mode 100644
index 8cff39c0..00000000
--- a/src/components/breadcrumb/breadcrumb.less
+++ /dev/null
@@ -1,28 +0,0 @@
-@import '../../styles/global.less';
-.k-breadcrumb {
-    line-height: 1.5;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    color: rgba(0, 0, 0, .45);
-    font-size: 14px;
-    .k-breadcrumb-item:hover{
-        color: @main;
-    }
-    .k-breadcrumb-link{
-        cursor: pointer;
-    }
-    >span {
-        &:last-child {
-            color: rgba(0, 0, 0, .65);
-           .k-breadcrumb-separator{
-               display: none;
-           } 
-        }
-    }
-    .k-breadcrumb-separator{
-        margin:0 5px;
-    }
-}
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb.vue b/src/components/breadcrumb/breadcrumb.vue
deleted file mode 100644
index 71b94746..00000000
--- a/src/components/breadcrumb/breadcrumb.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
diff --git a/src/components/breadcrumb/breadcrumbItem.vue b/src/components/breadcrumb/breadcrumbItem.vue
deleted file mode 100644
index a41ceeae..00000000
--- a/src/components/breadcrumb/breadcrumbItem.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
deleted file mode 100644
index e1017498..00000000
--- a/src/components/breadcrumb/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './breadcrumb.less'
-import Breadcrumb from './breadcrumb'
-import BreadcrumbItem from './breadcrumbItem'
-export { Breadcrumb, BreadcrumbItem }
\ No newline at end of file
diff --git a/src/components/button/index.js b/src/components/button/index.js
deleted file mode 100644
index 0bf160d4..00000000
--- a/src/components/button/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './button.less'
-import Button from './button'
-import ButtonGroup from './buttonGroup'
-export { Button, ButtonGroup }
\ No newline at end of file
diff --git a/src/components/card/card.vue b/src/components/card/card.vue
deleted file mode 100644
index 70e4b7b3..00000000
--- a/src/components/card/card.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
diff --git a/src/components/card/index.js b/src/components/card/index.js
deleted file mode 100644
index 46b4abc4..00000000
--- a/src/components/card/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './card.less'
-import Card from './Card'
-export default Card
\ No newline at end of file
diff --git a/src/components/datePicker/calendar.less b/src/components/datePicker/calendar.less
deleted file mode 100644
index 500bf4c0..00000000
--- a/src/components/datePicker/calendar.less
+++ /dev/null
@@ -1,270 +0,0 @@
-@import '../../styles/global.less';
-.k-calendar {
-   float: left;
-   display: inline-block;
-   -webkit-user-select: none;
-   -moz-user-select: none;
-   -ms-user-select: none;
-   user-select: none;
-   &+.k-calendar {
-      // border-left: solid 1px #eaeaea;
-      margin-left: 5px;
-      padding-left: 5px;
-      .k-calendar-time {
-         border-left: solid 5px #efefef;
-         box-sizing: content-box;
-      }
-   }
-   .k-calendar-head {
-      line-height: 32px;
-      height: 32px;
-      text-align: center;
-      position: relative;
-   }
-   .k-calendar-head span {
-      color: #666;
-      font-weight: bold;
-      cursor: pointer;
-      display: inline-block;
-      text-align: center;
-      position: absolute;
-      padding: 0 5px;
-      font-size: 16px;
-   }
-   .k-calendar-head span:hover {
-      color: @main;
-   }
-   .k-calendar-head .k-calendar-year-select, .k-calendar-head .k-calendar-month-select {
-      font-size: 12px;
-      padding: 0 2px;
-      position: relative;
-   }
-   .k-calendar-prev-decade-btn, .k-calendar-prev-year-btn {
-      left: 6px;
-   }
-   .k-calendar-prev-month-btn {
-      left: 24px;
-   }
-   .k-calendar-next-decade-btn, .k-calendar-next-year-btn {
-      right: 6px;
-   }
-   .k-calendar-next-month-btn {
-      right: 24px;
-   }
-   .k-calendar-body {
-      position: relative;
-      width: 210px;
-      min-height: 210px;
-   }
-   .k-calendar-days {
-      width: 100%;
-      height: 100%;
-      line-height: 1.5;
-   }
-   .k-calendar-week, .k-calendar-date {
-      font-weight: normal;
-      width: 28px;
-      height: 28px;
-      text-align: center;
-      box-sizing: border-box;
-      display: inline-block;
-      overflow: hidden;
-      float: left;
-      margin: 2px 1px 0 1px;
-   }
-   .k-calendar-week:before, .k-calendar-date:before {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-   }
-   .k-calendar-date {
-      cursor: pointer;
-      color: #666;
-      border-radius: @radius;
-      position: relative;
-   }
-   .k-calendar-date-out {
-      color: #ccc;
-      background: none;
-   }
-   .k-calendar-date:hover, .k-calendar-date-on {
-      background: fade(@main, 30%);
-      border-radius: @radius;
-   }
-   .k-calendar-date-on {
-      border-radius: 0;
-   }
-   .k-calendar-date-today {
-      // background: fade(@main, 30%);
-      &:after {
-         content: '';
-         position: absolute;
-         width: 5px;
-         height: 5px;
-         background: @main;
-         right: 5px;
-         top: 5px;
-         border-radius: 50%;
-      }
-   }
-   .k-calendar-date-selected, .k-calendar-date-selected:hover {
-      color: #fff;
-      font-weight: bold;
-      background: @main;
-      border-radius: @radius;
-      &::after {
-         background: #fff;
-      }
-   }
-   .k-calendar-date-disabled {
-      cursor: not-allowed !important;
-      color: #bcbcbc !important;
-      background: #f3f3f3 !important;
-      border-radius: 0;
-   }
-   .k-calendar-foot {
-      padding: 7px 7px 2px 7px;
-      line-height: 25px;
-      box-sizing: content-box;
-      border-top: 1px solid #efefef;
-      margin: 1px -5px 0 -5px;
-      .k-calendar-timetip {
-         margin-left: 8px;
-         cursor: pointer;
-      }
-      .k-calendar-btn {
-         float: right;
-      }
-      .disabled {
-         cursor: not-allowed;
-         color: #ccc;
-      }
-   }
-   .k-calendar-time {
-      position: absolute;
-      top: 0;
-      left: -5px;
-      height: 100%;
-      border-top: 1px solid #efefef;
-      right: -5px;
-      overflow: hidden;
-   }
-   .k-calendar-time-title {
-      font-size: 14px;
-      font-weight: 600;
-      //    text-align: center;
-      //    background: #fff;
-      //    padding: 3px 0;
-      //    border-bottom:1px solid #efefef;
-   }
-   .k-calendar-hour {
-      display: inline-block;
-      border: 1px solid #e6e5e5;
-      color: #9e9e9e;
-   }
-   .k-calendar-hour span {
-      display: inline-block;
-      // padding: 2px 4px;
-      cursor: pointer;
-   }
-   .k-calendar-hour a:hover, .k-calendar-hour a.on {
-      color: @main;
-   }
-   .k-calendar-hours, .k-calendar-minutes, .k-calendar-seconds {
-      width: 72px;
-      height: 100%;
-      float: left;
-      // position: absolute;
-      background: #fff;
-      overflow: hidden;
-      position: relative;
-      &:hover {
-         overflow-y: auto;
-      }
-      &::-webkit-scrollbar {
-         width: 8px;
-         height: 8px;
-         background: none;
-      }
-      &::-webkit-scrollbar-thumb {
-         background: #e6e5e5;
-         border-radius: 4px;
-      }
-   }
-   .k-calendar-minutes {
-      box-sizing: content-box;
-      border-left: 1px solid #efefef;
-      border-right: 1px solid #efefef;
-   }
-   .k-calendar-seconds {
-      border: none;
-   }
-   .k-calendar-years, .k-calendar-months {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background: #fff;
-      left: 0;
-      top: 0;
-   }
-   .k-calendar-months span {
-      width: 68px;
-      height: 35px;
-      margin: 8px 0;
-   }
-   .k-calendar-years span {
-      width: 68px;
-      height: 35px;
-      margin: 8px 0;
-   }
-   .k-calendar-hours, .k-calendar-minutes, .k-calendar-seconds {
-      span {
-         height: 25px;
-         line-height: 25px;
-         margin: 0;
-         width: 100%;
-         border-radius: 0;
-         text-align: left;
-         padding-left: 31px;
-         float: left;
-         &:hover {
-            border-radius: 0;
-         }
-      }
-   }
-   .k-calendar-date {
-      height: 28px;
-      line-height: 1.5;
-      width: 28px;
-   }
-   .k-calendar-title {
-      margin-top: -30px;
-      height: 30px;
-      line-height: 30px;
-      background: #fff;
-      text-align: center;
-      font-weight: bold;
-   }
-}
-
-.k-calendar-right, .k-calendar-left {
-   .k-calendar-hours, .k-calendar-minutes, .k-calendar-seconds {
-      width: 71px;
-   }
-}
-
-// .k-calendar-right {
-//     margin-left: 5px;
-//     padding-left: 5px;
-//     .k-calendar-head{
-//         .k-calendar-prev-year-btn,.k-calendar-prev-month-btn{
-//             display: none;
-//         }
-//     }
-// }
-// .k-calendar-left .k-calendar-head{
-//     .k-calendar-next-month-btn,.k-calendar-next-year-btn{
-//         display: none;
-//     }
-// }
\ No newline at end of file
diff --git a/src/components/grid/index.js b/src/components/grid/index.js
deleted file mode 100644
index 56552466..00000000
--- a/src/components/grid/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import './grid.less'
-import Row from './row.vue';
-import Col from './col.vue';
-
-export { Row, Col };
\ No newline at end of file
diff --git a/src/components/layout/content.vue b/src/components/layout/content.vue
deleted file mode 100644
index a0434e43..00000000
--- a/src/components/layout/content.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
deleted file mode 100644
index 7546f299..00000000
--- a/src/components/layout/footer.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/layout/header.vue b/src/components/layout/header.vue
deleted file mode 100644
index 2ce9b43d..00000000
--- a/src/components/layout/header.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
deleted file mode 100644
index 51e6a319..00000000
--- a/src/components/layout/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import './layout.less';
-import Layout from './layout'
-import Header from './header'
-import Footer from './footer'
-import Sider from './sider'
-import Content from './content'
-export { Layout, Header, Footer, Sider, Content }
\ No newline at end of file
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
deleted file mode 100644
index c19b4df0..00000000
--- a/src/components/layout/layout.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue
deleted file mode 100644
index 7773c1ab..00000000
--- a/src/components/layout/sider.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/message/message.less b/src/components/message/message.less
deleted file mode 100755
index 0a0b2749..00000000
--- a/src/components/message/message.less
+++ /dev/null
@@ -1,82 +0,0 @@
-@import '../../styles/global.less';
-.k-message {
-   font-size: 14px;
-   line-height: 1.5;
-   color: rgba(0, 0, 0, 0.65);
-   -webkit-box-sizing: border-box;
-   box-sizing: border-box;
-   margin: 0;
-   padding: 0;
-   list-style: none;
-   position: fixed;
-   z-index: 1010;
-   width: 100%;
-   top: 16px;
-   left: 0;
-   pointer-events: none;
-   .k-message-notice {
-      box-sizing: content-box;
-      padding: 8px;
-      text-align: center;
-      transition: all .3s;
-      // overflow: hidden;
-      &:first-child {
-         // margin-top: -8px;
-      }
-   }
-   .k-message-notice-content {
-      box-sizing: content-box;
-      line-height: 1.5;
-      padding: 10px 16px;
-      border-radius: @radius;
-      -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      background: #fff;
-      display: inline-block;
-      pointer-events: all;
-      &>[class^="k-ion"], [class*=" k-ion"] {
-         margin-right: 5px;
-         font-size: 18px;
-         vertical-align: middle;
-      }
-   }
-   .k-message-close {
-      font-size: 12px;
-      line-height: 1.5;
-      overflow: hidden;
-      cursor: pointer;
-      float: right;
-      margin-left: 15px;
-      &::before {
-         content: '\f2c0';
-         font-family: Ionicons;
-         color: #999;
-         font-size: 15px;
-         vertical-align: middle;
-      }
-   }
-}
-
-.k-message-success .k-message-notice-content {
-   &>[class^="k-ion"], [class*=" k-ion"] {
-      color: @success;
-   }
-}
-
-.k-message-error .k-message-notice-content {
-   &>[class^="k-ion"], [class*=" k-ion"] {
-      color: @danger;
-   }
-}
-
-.k-message-info .k-message-notice-content {
-   &>[class^="k-ion"], [class*=" k-ion"] {
-      color: @main;
-   }
-}
-
-.k-message-warning .k-message-notice-content {
-   &>[class^="k-ion"], [class*=" k-ion"] {
-      color: @warning;
-   }
-}
\ No newline at end of file
diff --git a/src/components/message/notice.less b/src/components/message/notice.less
deleted file mode 100755
index ec7e53da..00000000
--- a/src/components/message/notice.less
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '../../styles/global.less';
-.k-notice {
-   font-size: 14px;
-   line-height: 1.5;
-   color: rgba(0, 0, 0, 0.65);
-   -webkit-box-sizing: border-box;
-   box-sizing: border-box;
-   margin: 0;
-   padding: 0;
-   list-style: none;
-   position: fixed;
-   z-index: 1010;
-   width: 384px;
-   max-width: calc(100vw - 32px);
-   margin-right: 24px;
-   right: 0px;
-   top: 24px;
-   bottom: auto;
-   .k-notice-notice {
-      box-sizing: content-box;
-      transition: all .3s ease-in-out;
-      padding: 16px;
-      border-radius: @radius;
-      -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      background: #fff;
-      line-height: 1.5;
-      position: relative;
-      margin-bottom: 16px;
-      overflow: hidden;
-   }
-   .k-notice-title {
-      margin-right: 16px;
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.85);
-      margin-bottom: 8px;
-      line-height: 24px;
-      display: inline-block;
-   }
-   .k-notice-close {
-      position: absolute;
-      right: 22px;
-      top: 16px;
-      outline: none;
-      cursor: pointer;
-      color: rgba(0, 0, 0, 0.85);
-      font-size: 14px;
-      &::before {
-         content: '\f2c0';
-         font-family: Ionicons;
-         color: #999;
-      }
-   }
-   .k-notice-info, .k-notice-error, .k-notice-success, .k-notice-warning {
-      .k-notice-notice-content {
-         padding-left: 35px;
-         &::before {
-            position: absolute;
-            left: 22px;
-            top: 17px;
-            font-family: Ionicons;
-            font-size: 24px;
-         }
-      }
-   }
-   .k-notice-info .k-notice-notice-content {
-      &::before {
-         color: @main;
-         content: '\f1a0';
-      }
-   }
-   .k-notice-error .k-notice-notice-content {
-      &::before {
-         content: '\f14e';
-         color: @danger;
-      }
-   }
-   .k-notice-success .k-notice-notice-content {
-      &::before {
-         content: '\f14a';
-         color: @success;
-      }
-   }
-   .k-notice-warning .k-notice-notice-content {
-      &::before {
-         content: '\f104';
-         color: @warning;
-      }
-   }
-}
\ No newline at end of file
diff --git a/src/components/scroll/index.js b/src/components/scroll/index.js
deleted file mode 100644
index c27e3a85..00000000
--- a/src/components/scroll/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './scroll.less'
-import Scroll from './scroll'
-export default Scroll
\ No newline at end of file
diff --git a/src/components/scroll/scroll.less b/src/components/scroll/scroll.less
deleted file mode 100644
index 27c1d45c..00000000
--- a/src/components/scroll/scroll.less
+++ /dev/null
@@ -1,48 +0,0 @@
-.k-scroll {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    // user-select: none;
-    .k-scroll-view {
-        position: relative;
-        transition:top .1s ease-in-out;
-    }
-    &:hover {
-        .k-scroll-vertical-bar {
-            opacity: .3;
-        }
-    }
-    .k-scroll-vertical-bar {
-        width: 6px;
-        background: #000;
-        border-radius: 3px;
-        min-height: 20px;
-        position: absolute;
-        right: 2px;
-        top: 0;
-        z-index: 999999;
-        opacity: 0;
-        transition: opacity .3s ease-in-out,top .1s ease-in-out;
-        cursor: pointer;
-        user-select: none;
-        -webkit-user-select: none;
-        pointer-events: all;
-        &:hover{
-            opacity: .5;
-        }
-    }
-    .k-scroll-horizontal-bar {
-        height: px;
-        background: #ddd;
-        border-radius: 4px;
-        min-width: 20px;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        display: none;
-        z-index: 999999;
-        transition: opacity .3s ease-in-out,top .3s ease-in-out;
-        user-select: none;
-    }
-}
\ No newline at end of file
diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue
deleted file mode 100644
index b97ff867..00000000
--- a/src/components/scroll/scroll.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-
-
-
diff --git a/src/components/tag/index.js b/src/components/tag/index.js
deleted file mode 100644
index efa85648..00000000
--- a/src/components/tag/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './tag.less'
-import Tag from './tag'
-export default Tag
\ No newline at end of file
diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
deleted file mode 100644
index 7b0d198c..00000000
--- a/src/components/tag/tag.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
diff --git a/src/styles/index.less b/src/styles/index.less
deleted file mode 100644
index 3bccf72b..00000000
--- a/src/styles/index.less
+++ /dev/null
@@ -1,42 +0,0 @@
-@import '../components/alert/alert.less';
-@import '../components/affix/affix.less';
-@import '../components/badge/badge.less';
-@import '../components/backtop/backtop.less';
-@import '../components/breadcrumb/breadcrumb.less';
-@import '../components/button/button.less';
-@import '../components/card/card.less';
-@import '../components/colorpicker/colorpicker.less';
-@import '../components/collapse/collapse.less';
-@import '../components/carousel/carousel.less';
-@import '../components/checkbox/checkbox.less';
-@import '../components/datepicker/calendar.less';
-@import '../components/datepicker/datepicker.less';
-@import '../components/drawer/drawer.less';
-@import '../components/dropdown/dropdown.less';
-@import '../components/form/form.less';
-@import '../components/icon/icon.less';
-@import '../components/grid/grid.less';
-@import '../components/input/input.less';
-@import '../components/imagepreview/imagepreview.less';
-@import '../components/loading/loading.less';
-@import '../components/layout/layout.less';
-@import '../components/modal/modal.less';
-@import '../components/message/message.less';
-@import '../components/message/notice.less';
-@import '../components/menu/menu.less';
-@import '../components/page/page.less';
-@import '../components/poptip/poptip.less';
-@import '../components/radio/radio.less';
-// @import '../components/scroll/scroll.less';
-@import '../components/select/select.less';
-@import '../components/switch/switch.less';
-// @import '../components/slider/slider.less';
-@import '../components/steps/steps.less';
-@import '../components/timeline/timeline.less';
-@import '../components/tag/tag.less';
-@import '../components/tooltip/tooltip.less';
-@import '../components/table/table.less';
-@import '../components/tree/tree.less';
-@import '../components/treeselect/treeselect.less';
-@import '../components/tabs/tabs.less';
-@import '../components/upload/upload.less';
\ No newline at end of file
-- 
Gitee


From d60b1c6fedf56194ca100a8c7390b2d4c8dfaf56 Mon Sep 17 00:00:00 2001
From: chuchur 
Date: Wed, 13 Nov 2019 14:05:19 +0800
Subject: [PATCH 02/15] =?UTF-8?q?=E5=AE=8C=E6=88=90badge=EF=BC=8Cbutton?=
 =?UTF-8?q?=EF=BC=8Cbreadcrumb=EF=BC=8Calert=EF=BC=8Ccard=EF=BC=8Ccheckbox?=
 =?UTF-8?q?=EF=BC=8Cradio=E7=AD=89=E7=BB=84=E4=BB=B6=E7=9A=84=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/md-loader/render.js                     |   5 +-
 build/webpack.base.conf.js                    |   4 +-
 build/webpack.dev.conf.js                     |   6 +-
 components/_tool/directives.js                |  29 ++
 components/_tool/transfer.js                  |  31 ++
 components/_tool/utils.js                     |  21 +
 components/alert/alert.jsx                    |   7 +-
 components/alert/demo/index.vue               |  15 +-
 components/alert/index.md                     |   2 +-
 components/badge/badge.jsx                    |  56 +-
 components/badge/demo/dot.md                  |   2 +-
 components/badge/demo/dynamic.md              |  51 ++
 components/badge/demo/index.vue               |  15 +-
 components/badge/demo/max.md                  |   1 +
 components/badge/styles/index.less            |   2 +
 components/breadcrumb/demo/index.vue          |   4 +-
 components/breadcrumb/index.md                |  12 +-
 components/button/button.jsx                  |   6 +-
 components/button/demo/base.md                |   3 +-
 components/button/demo/button.vue             | 153 ------
 components/button/demo/disabled.md            |   2 +-
 components/button/demo/group.md               |  12 +-
 components/button/demo/index.vue              |  11 +-
 components/button/demo/loading.md             |  34 ++
 components/button/demo/size.md                |   4 +-
 components/button/demo/with-icon.md           |   4 +-
 components/button/index.md                    |  18 +-
 components/button/styles/index.less           | 254 ++++-----
 components/card/card.js                       |  21 -
 components/card/card.jsx                      |  27 +-
 components/card/demo/base.md                  |  16 +-
 components/card/demo/border.md                |  16 +-
 components/card/demo/index.vue                |   5 +-
 components/card/index.md                      |  12 +-
 components/card/styles/index.less             |  48 +-
 components/checkbox/checkbox.jsx              |  76 +++
 components/checkbox/checkbox.vue              |  86 ----
 components/checkbox/checkboxGroup.vue         |  61 ---
 components/checkbox/demo/base.md              |  26 +
 components/checkbox/demo/check-all.md         |  48 ++
 components/checkbox/demo/checkbox.js          |  89 ----
 components/checkbox/demo/checkbox.vue         | 185 -------
 components/checkbox/demo/disabled.md          |  29 ++
 components/checkbox/demo/group.md             |  45 ++
 components/checkbox/demo/index.vue            |  22 +
 components/checkbox/group.jsx                 |  48 ++
 components/checkbox/index.js                  |   4 +-
 components/checkbox/index.md                  |  16 +
 components/checkbox/styles/index.less         | 193 +++----
 components/drawer/demo/base.md                |  23 +
 components/drawer/demo/custom.md              |  25 +
 components/drawer/demo/drawer.vue             | 242 ---------
 components/drawer/demo/{drawer.js => form.md} | 164 +++---
 components/drawer/demo/index.vue              |  19 +
 components/drawer/{drawer.vue => drawer.jsx}  |  83 +--
 components/drawer/index.js                    |   2 +-
 components/drawer/index.md                    |  13 +
 components/grid/demo/index.vue                |   4 +-
 components/icon/demo/index.vue                |   4 +-
 components/input/demo/base.md                 |  13 +
 components/input/demo/clearable.md            |  12 +
 components/input/demo/icon.md                 |  22 +
 components/input/demo/index.vue               |  30 ++
 components/input/demo/input.js                |  29 --
 components/input/demo/input.vue               | 221 --------
 components/input/demo/size.md                 |  14 +
 components/input/demo/textarea.md             |  13 +
 components/input/index.js                     |   2 +-
 components/input/index.md                     |  14 +
 components/input/{input.vue => input.jsx}     | 144 +++---
 components/input/styles/index.less            |  20 +-
 components/layout/demo/index.vue              |   2 +-
 components/layout/demo/info.md                |   3 +-
 components/layout/layout.jsx                  |   9 +-
 components/layout/styles/index.less           |   1 +
 components/menu/styles/index.less             |  10 +-
 components/radio/button.jsx                   |  46 ++
 components/radio/demo/base.md                 |  26 +
 components/radio/demo/button.md               |  57 +++
 components/radio/demo/disabled.md             |  28 +
 components/radio/demo/group.md                |  44 ++
 components/radio/demo/index.vue               |  21 +
 components/radio/demo/radio.js                |  53 --
 components/radio/demo/radio.vue               | 162 ------
 components/radio/group.jsx                    |  60 +++
 components/radio/index.js                     |   6 +-
 components/radio/index.md                     |  17 +
 components/radio/radio.jsx                    |  66 +++
 components/radio/radio.vue                    |  69 ---
 components/radio/radioButton.vue              |  40 --
 components/radio/radioGroup.vue               |  62 ---
 components/radio/styles/index.less            |  46 +-
 components/select/demo/base.md                |  48 ++
 components/select/demo/clearable.md           |  23 +
 components/select/demo/index.vue              |  20 +
 components/select/demo/m1.md                  |  23 +
 components/select/demo/size.md                |  23 +
 components/select/index.js                    |   4 +-
 components/select/index.md                    |  18 +
 components/select/{option.vue => option.jsx}  |  85 ++--
 components/select/select.jsx                  | 274 ++++++++++
 components/select/select.vue                  | 220 --------
 components/select/styles/index.less           | 480 +++++++++++-------
 components/styles/global.less                 | 270 +++++++---
 components/switch/demo/base.md                |  27 +
 components/switch/demo/color.md               |  28 +
 components/switch/demo/disabled.md            |  32 ++
 components/switch/demo/index.vue              |  21 +
 components/switch/demo/switch.js              |  17 -
 components/switch/demo/switch.vue             | 120 -----
 components/switch/demo/text.md                |  40 ++
 components/switch/index.js                    |   2 +-
 components/switch/index.md                    |  11 +
 components/switch/styles/index.less           |  47 +-
 components/switch/switch.jsx                  |  59 +++
 components/switch/switch.vue                  |  58 ---
 components/tag/demo/index.vue                 |   4 +-
 docs/assets/atom-one-light.css                |  42 +-
 docs/assets/demo.less                         | 167 +-----
 docs/assets/index.less                        |  58 +++
 docs/assets/markdown.less                     |  42 +-
 docs/components/api.vue                       |  10 +
 docs/components/demo/demo.less                |  39 +-
 docs/components/demo/demo.vue                 |  22 +-
 docs/components/index.vue                     |   8 +-
 docs/components/md.vue                        |   3 -
 {components/views1 => docs}/index.vue         | 113 ++++-
 docs/layout.vue                               | 121 +++--
 docs/main.js                                  |  14 +-
 docs/menu.js                                  |  52 +-
 docs/router.js                                |  46 +-
 docs/views/kui-loader.md                      |   4 +-
 docs/views/log.md                             |  12 +-
 docs/views/ssr.md                             |   4 +-
 134 files changed, 3332 insertions(+), 3157 deletions(-)
 create mode 100644 components/_tool/directives.js
 create mode 100644 components/_tool/transfer.js
 create mode 100644 components/badge/demo/dynamic.md
 delete mode 100644 components/button/demo/button.vue
 create mode 100644 components/button/demo/loading.md
 delete mode 100644 components/card/card.js
 create mode 100644 components/checkbox/checkbox.jsx
 delete mode 100644 components/checkbox/checkbox.vue
 delete mode 100644 components/checkbox/checkboxGroup.vue
 create mode 100644 components/checkbox/demo/base.md
 create mode 100644 components/checkbox/demo/check-all.md
 delete mode 100644 components/checkbox/demo/checkbox.js
 delete mode 100644 components/checkbox/demo/checkbox.vue
 create mode 100644 components/checkbox/demo/disabled.md
 create mode 100644 components/checkbox/demo/group.md
 create mode 100644 components/checkbox/demo/index.vue
 create mode 100644 components/checkbox/group.jsx
 create mode 100644 components/checkbox/index.md
 create mode 100644 components/drawer/demo/base.md
 create mode 100644 components/drawer/demo/custom.md
 delete mode 100644 components/drawer/demo/drawer.vue
 rename components/drawer/demo/{drawer.js => form.md} (32%)
 create mode 100644 components/drawer/demo/index.vue
 rename components/drawer/{drawer.vue => drawer.jsx} (50%)
 create mode 100644 components/drawer/index.md
 create mode 100644 components/input/demo/base.md
 create mode 100644 components/input/demo/clearable.md
 create mode 100644 components/input/demo/icon.md
 create mode 100644 components/input/demo/index.vue
 delete mode 100644 components/input/demo/input.js
 delete mode 100644 components/input/demo/input.vue
 create mode 100644 components/input/demo/size.md
 create mode 100644 components/input/demo/textarea.md
 create mode 100644 components/input/index.md
 rename components/input/{input.vue => input.jsx} (54%)
 create mode 100644 components/radio/button.jsx
 create mode 100644 components/radio/demo/base.md
 create mode 100644 components/radio/demo/button.md
 create mode 100644 components/radio/demo/disabled.md
 create mode 100644 components/radio/demo/group.md
 create mode 100644 components/radio/demo/index.vue
 delete mode 100644 components/radio/demo/radio.js
 delete mode 100644 components/radio/demo/radio.vue
 create mode 100644 components/radio/group.jsx
 create mode 100644 components/radio/index.md
 create mode 100644 components/radio/radio.jsx
 delete mode 100644 components/radio/radio.vue
 delete mode 100644 components/radio/radioButton.vue
 delete mode 100644 components/radio/radioGroup.vue
 create mode 100644 components/select/demo/base.md
 create mode 100644 components/select/demo/clearable.md
 create mode 100644 components/select/demo/index.vue
 create mode 100644 components/select/demo/m1.md
 create mode 100644 components/select/demo/size.md
 create mode 100644 components/select/index.md
 rename components/select/{option.vue => option.jsx} (30%)
 create mode 100644 components/select/select.jsx
 delete mode 100644 components/select/select.vue
 create mode 100644 components/switch/demo/base.md
 create mode 100644 components/switch/demo/color.md
 create mode 100644 components/switch/demo/disabled.md
 create mode 100644 components/switch/demo/index.vue
 delete mode 100644 components/switch/demo/switch.js
 delete mode 100644 components/switch/demo/switch.vue
 create mode 100644 components/switch/demo/text.md
 create mode 100644 components/switch/index.md
 create mode 100644 components/switch/switch.jsx
 delete mode 100644 components/switch/switch.vue
 create mode 100644 docs/assets/index.less
 create mode 100644 docs/components/api.vue
 rename {components/views1 => docs}/index.vue (36%)

diff --git a/build/md-loader/render.js b/build/md-loader/render.js
index 4c3f4026..4eb0b99c 100644
--- a/build/md-loader/render.js
+++ b/build/md-loader/render.js
@@ -29,14 +29,14 @@ const render = (md, options) => {
       if (token.type === 'html_block') {
         if (token.content.match(cnReg)) {
           cn = getDomHtml(token.content, 'cn');
-          token.content = null
+          token.content = ''
         }
         /* if (token.content.match(usReg)) {
              us = getDomHtml(token.content, 'us');
              token.content = '';
            } */
       }
-      if (token.type === 'fence' && token.info === 'tpl' && token.markup === '```') {
+      if (token.info === 'tpl') {
         sourceCode = token.content;
         code = '````html\n' + token.content + '````';
         template = getDomHtml(token.content, 'template');
@@ -105,6 +105,7 @@ var markdown = require('markdown-it')({
 markdown
   .use(anchor, {
     level: 2,
+    slugify: string => string.trim().split(' ').join('-'),
     permalink: true,
     permalinkClass: 'anchor',
     permalinkSymbol: '#',
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 3698c54b..d42c6146 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -27,13 +27,11 @@ module.exports = {
           {
             loader: 'vue-loader', // 这里的使用的最新的 v15 版本
           },
-          {
-            loader: 'kui-loader', options: { prefix: false }
-          },
           {
             loader: './build/md-loader',
             options: markdown
           },
+          { loader: 'kui-loader', options: { prefix: false } }
 
         ]
       },
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 195f8539..c04532d0 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -33,8 +33,8 @@ module.exports = merge(webpackBaseConfig, {
         test: /\.less$/,
         use: [
           { loader: 'style-loader' },
-          { loader: 'css-loader', options: { sourceMap: true } },
-          { loader: 'less-loader', options: { sourceMap: true, javascriptEnabled: true } }
+          { loader: 'css-loader', options: { sourceMap: false } },
+          { loader: 'less-loader', options: { sourceMap: false, javascriptEnabled: true } }
         ],
       },
     ]
@@ -42,7 +42,7 @@ module.exports = merge(webpackBaseConfig, {
   performance: {
     hints: false,
   },
-  devtool: '#source-map',
+  // devtool: '#source-map',
   plugins: [
     new HtmlWebpackPlugin({
       favicon: './docs/assets/favicon.png',
diff --git a/components/_tool/directives.js b/components/_tool/directives.js
new file mode 100644
index 00000000..e5d205a5
--- /dev/null
+++ b/components/_tool/directives.js
@@ -0,0 +1,29 @@
+export default {
+  inserted(el, { value }, vnode) {
+    let transfer = el.getAttribute ? el.getAttribute('data-transfer') : el.dataset.transfer
+    if (transfer === 'true') {
+      const parentNode = el.parentNode
+      if (!parentNode) return false;
+      let empty = document.createComment('')
+      if (value !== false) {
+        parentNode.replaceChild(empty, el)
+        document.body.appendChild(el)
+        removed = true
+      }
+      if (!el.__data) {
+        el.__data = { parentNode, empty, removed }
+      }
+    }
+  },
+
+  unbind(el) {
+    // 父组件被移除时，把自己归位，不然会造成 父子组件不同步
+    let transfer = el.getAttribute ? el.getAttribute('data-transfer') : el.dataset.transfer
+    if (transfer === 'true' && el.__data) {
+      if (el.__data.removed == true) {
+        el.__data.parentNode.appendChild(el)
+      }
+      el.__data = null
+    }
+  }
+} 
\ No newline at end of file
diff --git a/components/_tool/transfer.js b/components/_tool/transfer.js
new file mode 100644
index 00000000..1615206f
--- /dev/null
+++ b/components/_tool/transfer.js
@@ -0,0 +1,31 @@
+
+export default {
+  inserted(el, { value }, vnode) {
+    if (value) {
+      const parentNode = el.parentNode
+      if (!parentNode) return false;
+
+      let empty = document.createComment('')
+      let box = document.createElement('div')
+      box.style.top = 0
+      box.style.left = 0
+      box.style.width = '100%'
+      box.style.position = 'absolute'
+      parentNode.replaceChild(empty, el)
+      box.appendChild(el)
+      document.body.appendChild(box)
+
+      if (!el.__data) {
+        el.__data = { parentNode, empty, box }
+      }
+    }
+  },
+  unbind(el, { value }, ) {
+    // 父组件被移除时，把自己归位，不然会造成 父子组件不同步
+    if (value) {
+      el.__data.parentNode.appendChild(el)
+      document.body.removeChild(el.__data.box)
+      el.__data = null
+    }
+  }
+} 
\ No newline at end of file
diff --git a/components/_tool/utils.js b/components/_tool/utils.js
index 93134d69..9cf8e430 100644
--- a/components/_tool/utils.js
+++ b/components/_tool/utils.js
@@ -3,4 +3,25 @@ export function isEmptyNode(vnode = {}) {
 }
 export function getChild(child = []) {
   return child.filter(c => !isEmptyNode(c))
+}
+
+export function hasProp(context, key) {
+  const options = context.$options || {}
+  const props = options.propsData || {}
+  return key in props
+}
+
+export function getElementPos(element) {
+  var parent = element.offsetParent;
+  let pos = {
+    left:0,
+    top: 0,
+    width: parent.offsetWidth
+  }
+  while (parent !== null) {
+    pos.left += parent.offsetLeft;
+    pos.top += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  return pos;
 }
\ No newline at end of file
diff --git a/components/alert/alert.jsx b/components/alert/alert.jsx
index d3a05819..780dbeb6 100644
--- a/components/alert/alert.jsx
+++ b/components/alert/alert.jsx
@@ -3,7 +3,7 @@ import Icon from "../icon";
 import { getChild } from '../_tool/utils'
 import Transition from '../collapse/collapse.jsx'
 export default {
-  components: { Icon},
+  components: { Icon },
   name: "Alert",
   props: {
     type: { type: String, default: "warning" },
@@ -27,10 +27,7 @@ export default {
     },
     classes() {
       return [
-        "k-alert",
-        {
-          [`k-alert-${this.type}`]: this.type
-        }
+        "k-alert", { [`k-alert-${this.type}`]: this.type }
       ];
     }
   },
diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue
index 327c40c0..2e65d8f2 100644
--- a/components/alert/demo/index.vue
+++ b/components/alert/demo/index.vue
@@ -1,19 +1,18 @@
 
+
+```
\ No newline at end of file
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index c90f0bfe..69abd634 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -1,19 +1,18 @@
 
-
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index 222d94ea..1a1ca071 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -1,6 +1,6 @@
 
 #### 禁用
-通过添加 disabled 属性可将按钮设置为不可用状态。
+通过添加 `disabled` 属性可将按钮设置为不可用状态。
 
 
 ```tpl
diff --git a/components/button/demo/group.md b/components/button/demo/group.md
index 9317e660..9ea32a1d 100644
--- a/components/button/demo/group.md
+++ b/components/button/demo/group.md
@@ -2,10 +2,11 @@
 #### 按钮组合
 将多个 `Button` 放入 `ButtonGroup` 内，可实现按钮组合的效果。
 
+
 ```tpl
 
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 57751bd5..93bbfcc3 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -3,12 +3,10 @@ import Base from './base'
 import Disabled from './disabled'
 import Size from './size'
 import WithIcon from './with-icon.md'
+import Loading from './loading.md'
 import Group from './group.md'
-import Api from '../index.md'
+import CN from '../index.md'
 export default {
-  mounted() {
-
-  },
   render() {
     return (
       

@@ -16,8 +14,9 @@ export default {
         
         
         
-        
-        
+        
+        
+        
       

     )
   }
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
new file mode 100644
index 00000000..69a9c682
--- /dev/null
+++ b/components/button/demo/loading.md
@@ -0,0 +1,34 @@
+
+#### 加载中状态
+添加 `loading` 属性即可让按钮处于加载状态
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 923f8e4c..44205e11 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -1,6 +1,6 @@
 
-#### 基本用法
-使用type、hollow、circle属性来定义Button 的样式。
+#### 尺寸
+`mini` 为小尺寸， `large` 为大尺寸
 
 
 ```tpl
diff --git a/components/button/demo/with-icon.md b/components/button/demo/with-icon.md
index 3397be0e..0a756560 100644
--- a/components/button/demo/with-icon.md
+++ b/components/button/demo/with-icon.md
@@ -1,6 +1,6 @@
 
 #### 带图标
-通过添加 icon 属性 设置按钮按钮图标。
+通过添加 `icon` 属性 设置按钮按钮图标。
 
 
 ```tpl
@@ -8,7 +8,7 @@
   

     
     
-    
+    
     
-`
-code.disabled = `
-  
-  
-  
-  
-`
-
-code.group =`
-  
-  
-  
-  
-  
-  
-
-
-
-
-`
-
-code.checkAll =`全选
-
-  
-  
-  
-  
-
-
-`
-export default code
\ No newline at end of file
diff --git a/components/checkbox/demo/checkbox.vue b/components/checkbox/demo/checkbox.vue
deleted file mode 100644
index 17bd4608..00000000
--- a/components/checkbox/demo/checkbox.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-
-
-
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
new file mode 100644
index 00000000..94b1cffd
--- /dev/null
+++ b/components/checkbox/demo/disabled.md
@@ -0,0 +1,29 @@
+
+#### 可不用 / 可控
+通过 `disabled` 设置不可用
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
new file mode 100644
index 00000000..426cd554
--- /dev/null
+++ b/components/checkbox/demo/group.md
@@ -0,0 +1,45 @@
+
+#### 组合使用
+组合使用可以直接使用 `CheckboxGroup` 的 `options` 来赋值,或者结合 `Checkbox` 来组合使用,通过 `disabled` 可以设置组件是否被禁用
+**`CheckboxGroup` 可以直接使用 `options` 来组合，3.0版本增加**
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/checkbox/demo/index.vue b/components/checkbox/demo/index.vue
new file mode 100644
index 00000000..3b7fc066
--- /dev/null
+++ b/components/checkbox/demo/index.vue
@@ -0,0 +1,22 @@
+ 
\ No newline at end of file
diff --git a/components/checkbox/group.jsx b/components/checkbox/group.jsx
new file mode 100644
index 00000000..00d702c6
--- /dev/null
+++ b/components/checkbox/group.jsx
@@ -0,0 +1,48 @@
+import Checkbox from './checkbox';
+
+export default {
+  name: "CheckboxGroup",
+  props: {
+    disabled: Boolean,
+    options: Array,
+    value: Array,
+  },
+  provide() {
+    return {
+      groupContext: this,
+    }
+  },
+  methods: {
+    change(data) {
+      let value = this.value
+      let index = value.indexOf(data.value)
+      if (index < 0) {
+        value.push(data.value);
+      } else {
+        value.splice(index, 1);
+      }
+      this.$emit("input", value);
+      this.$emit("change", value);
+    }
+  },
+  render() {
+    const { options, $slots } = this
+    let kid = $slots.default
+
+    if (options && options.length) {
+      kid = options.map(option => (
+        
+      ))
+    }
+    return (
+      

+        {kid}
+      

+    )
+  }
+}
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index 4fa29162..a4d3d880 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -1,3 +1,3 @@
-import Checkbox from './checkbox'
-import CheckboxGroup from './checkboxGroup'
+import Checkbox from './checkbox.jsx'
+import CheckboxGroup from './group.jsx'
 export { Checkbox, CheckboxGroup }
\ No newline at end of file
diff --git a/components/checkbox/index.md b/components/checkbox/index.md
new file mode 100644
index 00000000..6ac33482
--- /dev/null
+++ b/components/checkbox/index.md
@@ -0,0 +1,16 @@
+### API
+| 属性            | 说明                           | 类型              | 默认值               |
+|---------------|------------------------------|-----------------|-------------------|
+| checked       | 是否选中状态，可以使用 `v-model` 双向绑定数据 | Boolean         | false             |
+| label         | 显示的文字                        | String 、 Number | -                 |
+| disabled      | 是否禁用当前项                      | Boolean         | false             |
+| indeterminate | 组合辅助选项控制半选状态                 | Boolean         | false             |
+| change        | 在选项状态发生改变时回调                 | -               | Function(e:Event) |
+| value         | 组合使用时表示的值                    | String,Number   | -                 |
+### CheckboxGroup API
+| 属性       | 说明                    | 类型                                                | 默认值     |
+|----------|-----------------------|---------------------------------------------------|---------|
+| value    | 可以使用 `v-model` 双向绑定数据 | Boolean                                           | false   |
+| disabled | 是否禁用组件                | Boolean                                           | false   |
+| change   | 在选项状态发生改变时触发，返回当前选中的值 | Function                                          | [value] |
+| options  | 可以指定子项 `checkbox`     | Array <{label:string/number,value:string/number}> | -       |
\ No newline at end of file
diff --git a/components/checkbox/styles/index.less b/components/checkbox/styles/index.less
index 5e8ef322..465e1bb7 100644
--- a/components/checkbox/styles/index.less
+++ b/components/checkbox/styles/index.less
@@ -1,104 +1,107 @@
 @import '../../styles/global.less';
 .k-checkbox-wp {
-    cursor: pointer;
-    font-size: 12px;
-    display: inline-block;
-    margin-right: 8px;
-    user-select: none;
-    .k-checkbox {
-        display: inline-block;
-        vertical-align: middle;
-        white-space: nowrap;
-        cursor: pointer;
-        outline: 0;
-        line-height: 1;
-        position: relative;
-        margin-right: 5px;
-        box-sizing: content-box;
-        .k-checkbox-inner {
-            box-sizing: content-box;
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            position: relative;
-            top: 0;
-            left: 0;
-            border: 1px solid #dddee1;
-            border-radius: 2px;
-            background-color: #fff;
-            transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
-        }
-        .k-checkbox-input {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: 1;
-            cursor: pointer;
-            opacity: 0;
-        }
-    }
-    .k-checkbox-checked {
-        .k-checkbox-inner {
-            background: @main;
-            border-color: @main;
-            position: relative;
-            &::after {
-                box-sizing: content-box;
-                position: absolute;
-                content: '\f2bc';
-                font-family: Ionicons;
-                width: 14px;
-                height: 14px;
-                line-height: 14px;
-                top: 0;
-                left: 0;
-                color: #fff;
-                text-align: center;
-            }
-        }
-    }
-    .k-checkbox-indeterminate {
-        .k-checkbox-inner {
-            background: @main;
-            border-color: @main;
-            position: relative;
-            &:after {
-                box-sizing: content-box;
-                background-color: #fff;
-                position: absolute;
-                width: 10px;
-                height: 2px;
-                content: '';
-                top: 6px;
-                left: 2px;
-                transition: all .2s ease-in-out;
-            }
-        }
-    }
+	cursor: pointer;
+	font-size: 12px;
+	display: inline-block;
+	margin-right: 8px;
+	user-select: none;
+	.k-checkbox {
+		display: inline-block;
+		vertical-align: middle;
+		white-space: nowrap;
+		cursor: pointer;
+		outline: 0;
+		line-height: 1;
+		position: relative;
+		margin-right: 5px;
+		box-sizing: content-box;
+		.k-checkbox-inner {
+			box-sizing: content-box;
+			display: inline-block;
+			width: 14px;
+			height: 14px;
+			position: relative;
+			top: 0;
+			left: 0;
+			border: 1px solid @borderColor;
+			border-radius: 2px;
+			background-color: #fff;
+			transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
+		}
+		.k-checkbox-input {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 1;
+			cursor: pointer;
+			opacity: 0;
+		}
+	}
+	.k-checkbox-checked {
+		.k-checkbox-inner {
+			background: @main;
+			border-color: @main;
+			position: relative;
+			&::after {
+				box-sizing: content-box;
+				position: absolute;
+				content: '\f2bc';
+				font-family: Ionicons;
+				width: 14px;
+				height: 14px;
+				line-height: 14px;
+				top: 0;
+				left: 0;
+				color: #fff;
+				text-align: center;
+			}
+		}
+	}
+	.k-checkbox-indeterminate {
+		.k-checkbox-inner {
+			background: @main;
+			border-color: @main;
+			position: relative;
+			&:after {
+				box-sizing: content-box;
+				background-color: #fff;
+				position: absolute;
+				width: 10px;
+				height: 2px;
+				content: '';
+				top: 6px;
+				left: 2px;
+				transition: all .2s ease-in-out;
+			}
+		}
+	}
 }
 
 .k-checkbox-disabled {
-    cursor: not-allowed;
-    opacity: .5;
-    .k-checkbox {
-        .k-checkbox-input {
-            cursor: not-allowed;
-        }
-        .k-checkbox-inner {
-            background: #ccc;
-            border-color: #999;
-            &:after {
-                background-color: #f3f3f3;
-                color: #666;
-            }
-        }
-    }
+	cursor: not-allowed;
+	color: @disableColor;
+	.k-checkbox {
+		.k-checkbox-input {
+			cursor: not-allowed;
+		}
+		.k-checkbox-inner {
+			background: @disableBack;
+			border-color: @disableBorder;
+			&:after {
+				background-color: @disableBack;
+				color: @disableColor;
+			}
+		}
+	}
+	.k-checkbox-indeterminate .k-checkbox-inner:after{
+		background-color: @disableColor;
+	}
 }
 
 .k-checkbox-group {
-    display: inline-block;
+	display: inline-block;
 }
\ No newline at end of file
diff --git a/components/drawer/demo/base.md b/components/drawer/demo/base.md
new file mode 100644
index 00000000..9b5ab2cc
--- /dev/null
+++ b/components/drawer/demo/base.md
@@ -0,0 +1,23 @@
+
+
+#### 基本用法
+通过 `v-model` 双向绑定 `Drawer` 是否展示
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/drawer/demo/custom.md b/components/drawer/demo/custom.md
new file mode 100644
index 00000000..1e008d18
--- /dev/null
+++ b/components/drawer/demo/custom.md
@@ -0,0 +1,25 @@
+
+#### 自定义
+通过 `title` 来设置标题， `width` 控制宽度， 还有 `placement` 控制方向
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/drawer/demo/drawer.vue b/components/drawer/demo/drawer.vue
deleted file mode 100644
index b951a335..00000000
--- a/components/drawer/demo/drawer.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-
-
-
diff --git a/components/drawer/demo/drawer.js b/components/drawer/demo/form.md
similarity index 32%
rename from components/drawer/demo/drawer.js
rename to components/drawer/demo/form.md
index 7218317e..c2cf27e5 100644
--- a/components/drawer/demo/drawer.js
+++ b/components/drawer/demo/form.md
@@ -1,90 +1,89 @@
-let code = {}
+
+#### 表单模式
+`type` 值为 `form` 时内容将呈现表单模式，有页头和页尾, 可自定义页尾
+
 
-code.base = `
-`
-code.custom = `
-
-
-My name is chuchur.
-`
- 
-code.from = `
-
-
-
-  

-    
-      
-    
-    
-      
-    
-    
-      
-        
-        
-          
+```tpl
+
 
+```
\ No newline at end of file
diff --git a/components/drawer/demo/index.vue b/components/drawer/demo/index.vue
new file mode 100644
index 00000000..daa69f48
--- /dev/null
+++ b/components/drawer/demo/index.vue
@@ -0,0 +1,19 @@
+ 
\ No newline at end of file
diff --git a/components/drawer/drawer.vue b/components/drawer/drawer.jsx
similarity index 50%
rename from components/drawer/drawer.vue
rename to components/drawer/drawer.jsx
index c43651c3..6d94ad95 100644
--- a/components/drawer/drawer.vue
+++ b/components/drawer/drawer.jsx
@@ -1,46 +1,13 @@
-
-
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/components/drawer/index.js b/components/drawer/index.js
index dc28c09d..81b7e2b9 100644
--- a/components/drawer/index.js
+++ b/components/drawer/index.js
@@ -1,2 +1,2 @@
-import Drawer from './drawer.vue'
+import Drawer from './drawer'
 export default Drawer;
\ No newline at end of file
diff --git a/components/drawer/index.md b/components/drawer/index.md
new file mode 100644
index 00000000..45f58478
--- /dev/null
+++ b/components/drawer/index.md
@@ -0,0 +1,13 @@
+#### API
+| 属性         | 说明                                | 类型            | 默认值    |
+|------------|-----------------------------------|---------------|--------|
+| title      | 抽屉标题                              | String        | -      |
+| width      | 抽屉宽度                              | Number,String | 520    |
+| placement  | 抽屉显示方向，提供 `left` ,`right` 两种展示方式  | String        | right  |
+| type       | 抽屉展示形式，提供 `static`, `form` 两种展示模式 | String        | static |
+| closable   | 是否显示关闭按钮                          | Boolean       | true   |
+| okText     | 确定按钮文字                            | String        | 确定     |
+| cancelText | 取消按钮文字                            | String        | 取消     |
+| ok         | 点击确定的回调                           | Function      | -      |
+| cancel     | 点击取消的回调                           | Function      | -      |
+| close      | 抽屉关闭的回调                           | Function      | -      |
\ No newline at end of file
diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue
index cb5dd34a..1e16b50b 100644
--- a/components/grid/demo/index.vue
+++ b/components/grid/demo/index.vue
@@ -3,7 +3,7 @@ import Info from './info.md'
 import Base from './base.md'
 import Gutter from './gutter.md'
 import Offset from './offset.md'
-import API from '../index.md'
+import CN from '../index.md'
 export default {
   mounted() {
 
@@ -15,7 +15,7 @@ export default {
         
         
         
-        
+        
       

     )
   }
diff --git a/components/icon/demo/index.vue b/components/icon/demo/index.vue
index 9e923307..9f67c30e 100644
--- a/components/icon/demo/index.vue
+++ b/components/icon/demo/index.vue
@@ -2,7 +2,7 @@
 import Base from './base'
 import Info from './info'
 import Search from './search.vue'
-import Api from '../index.md'
+import CN from '../index.md'
 export default {
   mounted() {
 
@@ -12,7 +12,7 @@ export default {
       

         
         
-        
+        
         
       

     )
diff --git a/components/input/demo/base.md b/components/input/demo/base.md
new file mode 100644
index 00000000..39a4fc1d
--- /dev/null
+++ b/components/input/demo/base.md
@@ -0,0 +1,13 @@
+
+#### 基础用法
+使用 `v-model` 进行数据双向绑定
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/input/demo/clearable.md b/components/input/demo/clearable.md
new file mode 100644
index 00000000..14130cfb
--- /dev/null
+++ b/components/input/demo/clearable.md
@@ -0,0 +1,12 @@
+
+#### 可清除
+通过设置 `clearable` 属性可控制是否显示清空按钮
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/input/demo/icon.md b/components/input/demo/icon.md
new file mode 100644
index 00000000..109ca509
--- /dev/null
+++ b/components/input/demo/icon.md
@@ -0,0 +1,22 @@
+
+#### 带图标
+通过设置 `icon` 属性，可设置按钮图标，`icon-align` 设置显示位置 `icon-click` 可触发图标点击事件
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/input/demo/index.vue b/components/input/demo/index.vue
new file mode 100644
index 00000000..d99d31da
--- /dev/null
+++ b/components/input/demo/index.vue
@@ -0,0 +1,30 @@
+ 
+
\ No newline at end of file
diff --git a/components/input/demo/input.js b/components/input/demo/input.js
deleted file mode 100644
index d89596c6..00000000
--- a/components/input/demo/input.js
+++ /dev/null
@@ -1,29 +0,0 @@
-let code = {}
-
-code.base = `
-`
-
-code.clearable = ``
-
-code.withIcon = `
-
-`
-
-code.size = `

-

-`
-
-
-code.textArea = `
-`
-
-
-export default code
\ No newline at end of file
diff --git a/components/input/demo/input.vue b/components/input/demo/input.vue
deleted file mode 100644
index 31fb59fc..00000000
--- a/components/input/demo/input.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-
-
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
new file mode 100644
index 00000000..e77efbfd
--- /dev/null
+++ b/components/input/demo/size.md
@@ -0,0 +1,14 @@
+
+#### 尺寸
+`large` 为大尺寸， `mini` 为小尺寸
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
new file mode 100644
index 00000000..14e7d988
--- /dev/null
+++ b/components/input/demo/textarea.md
@@ -0,0 +1,13 @@
+
+#### 文本域
+当 `type` 属性取值为 `textarea` 时组件呈现文本域
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/input/index.js b/components/input/index.js
index dcf6b54b..f16c284b 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -1,2 +1,2 @@
-import Input from './input'
+import Input from './input.jsx'
 export default Input
\ No newline at end of file
diff --git a/components/input/index.md b/components/input/index.md
new file mode 100644
index 00000000..bfd71c0c
--- /dev/null
+++ b/components/input/index.md
@@ -0,0 +1,14 @@
+### API
+| 属性          | 说明                                                           | 类型              | 默认值   |
+|-------------|--------------------------------------------------------------|-----------------|-------|
+| type        | 输入框类型，可选值为 `text`、`password`、`textarea`、`url`、`email`、`date` | String          | text  |
+| width       | 组件的宽度                                                        | String,Number   | 200   |
+| value       | 绑定的值，可使用 `v-model` 双向绑定                                      | String 、 Number | -     |
+| mini        | 是否展示小尺寸，仅在 `text` 类型下有效                                      | Boolean         | false |
+| large       | 是否展示大尺寸，仅在 `text` 类型下有效                                      | Boolean         | false |
+| icon        | 输入框图标，仅在 `text` 类型下有效                                        | String          | -     |
+| icon-align  | 输入框图标位置，可选值为 `left`、`right`，仅在 `type=text` 类型下有效             | String          | right |
+| placeholder | 占位文本                                                         | String          | -     |
+| rows        | 文本域默认行数，仅在 `textarea` 类型下有效                                  | Number          | 2     |
+| number      | 将用户的输入转换为 `Number` 类型                                        | Boolean         | false |
+| icon-click   | `icon` 的点击事件                                                 | Function        | -     |
\ No newline at end of file
diff --git a/components/input/input.vue b/components/input/input.jsx
similarity index 54%
rename from components/input/input.vue
rename to components/input/input.jsx
index f839855d..8abb5c83 100644
--- a/components/input/input.vue
+++ b/components/input/input.jsx
@@ -1,27 +1,10 @@
-
-
-
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/components/input/styles/index.less b/components/input/styles/index.less
index e627c42e..b469f1ce 100644
--- a/components/input/styles/index.less
+++ b/components/input/styles/index.less
@@ -12,7 +12,7 @@
     line-height: 1.5;
     padding: 4px 7px;
     font-size: 12px;
-    border: 1px solid #dddee1;
+    border: 1px solid @borderColor;
     border-radius: @radius;
     color: #495060;
     background-color: #fff;
@@ -26,8 +26,13 @@
       border-color: @main;
     }
     &:disabled {
-      background: #f5f5f5;
       cursor: not-allowed;
+      color: @disableColor;
+      background: @disableBack;
+      border-color: @disableBorder;
+      &::placeholder{
+        color: @disableColor;
+      }
     }
   }
   .k-textarea {
@@ -54,8 +59,6 @@
   }
 }
 
-
-
 .k-input-clearable {
   position: absolute;
   top: 1px;
@@ -84,6 +87,7 @@
     }
   }
 }
+
 .k-input-icon-left {
   [class^="k-ion"] {
     left: 0;
@@ -119,6 +123,7 @@
     }
   }
 }
+
 .k-input-lg {
   .k-input {
     padding: 2px 7px;
@@ -145,6 +150,7 @@
     }
   }
 }
+
 .k-input-lg.k-input-icon-left {
   [class^="k-ion"] {
     left: 0;
@@ -154,6 +160,7 @@
     }
   }
 }
+
 .k-input-mini.k-input-icon-left {
   [class^="k-ion"] {
     left: 0;
@@ -163,14 +170,11 @@
     }
   }
 }
+
 ::-ms-clear {
   display: none;
 }
 
 ::-ms-reveal {
   display: none;
-}
-
-input[disabled='disabled'], textarea[disabled='disabled'] {
-  cursor: not-allowed;
 }
\ No newline at end of file
diff --git a/components/layout/demo/index.vue b/components/layout/demo/index.vue
index 32be2d15..6ad9685f 100644
--- a/components/layout/demo/index.vue
+++ b/components/layout/demo/index.vue
@@ -7,7 +7,7 @@ export default {
   render() {
     return (
       

-        
+        
         
         
         
diff --git a/components/layout/demo/info.md b/components/layout/demo/info.md
index 161837de..ffccaf84 100644
--- a/components/layout/demo/info.md
+++ b/components/layout/demo/info.md
@@ -36,4 +36,5 @@
 - `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
 
 
-功能不多，他就是简单的布局。未采用 `flex`
\ No newline at end of file
+功能不多，他就是简单的布局。未采用 `flex`
+>3.0 版本以后使用 `flex` 布局，请注意[浏览器兼容性](http://caniuse.com/#search=flex)
\ No newline at end of file
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
index 414ec12b..76508410 100644
--- a/components/layout/layout.jsx
+++ b/components/layout/layout.jsx
@@ -68,12 +68,15 @@ const Layout = createComponent('layout', 'Layout')(layoutBase)
 
 const siderBase = {
   props: { suffixCls: String },
-  inject: ['addSider', 'removeSider'],
+  inject: {
+    addSider: { default: e => { } },
+    removeSider: { default: e => { } }
+  },
   mounted() {
-    this.addSider && this.addSider()
+    this.addSider()
   },
   beforeDestroy() {
-    this.removeSider && this.removeSider()
+    this.removeSider()
   },
   render() {
     const { $slots, suffixCls } = this
diff --git a/components/layout/styles/index.less b/components/layout/styles/index.less
index f63bdf7a..5130cb91 100644
--- a/components/layout/styles/index.less
+++ b/components/layout/styles/index.less
@@ -39,6 +39,7 @@
 
 .k-layout-has-sider {
   flex-direction: row;
+  width: 100%;
   .k-layout {
     flex: 1;
   }
diff --git a/components/menu/styles/index.less b/components/menu/styles/index.less
index 31a8de33..c3cd8f57 100644
--- a/components/menu/styles/index.less
+++ b/components/menu/styles/index.less
@@ -29,6 +29,12 @@
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+    .k-menu-popup ,.k-menu-popup ul{
+        padding: 0;
+        margin: 0;
+        left: 0;
+        list-style: none;
+    }
 }
 
 .k-menu-horizontal {
@@ -240,7 +246,7 @@
 }
 
 .k-menu-vertical {
-    color: #555;
+    // color: #555;
     &::before {
         content: "";
         top: 0;
@@ -356,4 +362,4 @@
             color: @main;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/components/radio/button.jsx b/components/radio/button.jsx
new file mode 100644
index 00000000..525782b7
--- /dev/null
+++ b/components/radio/button.jsx
@@ -0,0 +1,46 @@
+import Button from '../button';
+export default {
+  name: "RadioButton",
+  props: {
+    value: { type: [String, Number, Boolean], default: false },
+    disabled: Boolean,
+    label: [String, Number],
+  },
+  inject: {
+    groupContext: { default: null },
+  },
+  data() {
+    return {
+      checked: false
+    }
+  },
+  methods: {
+    change() {
+      const { value, $slots, label, groupContext } = this
+      this.checked = true
+      if (groupContext) {
+        let _label = label || $slots.default.text
+        groupContext.change({ label: _label, value })
+      }
+    }
+  },
+
+  render() {
+    let { disabled, change, $slots, label, groupContext, value, checked, $attrs } = this
+    let prop = {}
+    if (groupContext) {
+      checked = groupContext.value == value
+      let { mini, large, hollow } = groupContext
+      disabled = disabled || groupContext.disabled
+      prop = { disabled, mini, large, hollow, type: checked ? 'primary' : 'default' }
+    }
+    const props = {
+      attrs: { ...$attrs },
+      on: { click: change },
+      props: { ...prop }
+    }
+    return (
+      
+    )
+  }
+};
diff --git a/components/radio/demo/base.md b/components/radio/demo/base.md
new file mode 100644
index 00000000..4082ea02
--- /dev/null
+++ b/components/radio/demo/base.md
@@ -0,0 +1,26 @@
+
+#### 基本用法
+单独使用可使用 `v-model` 双向绑定数据
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/radio/demo/button.md b/components/radio/demo/button.md
new file mode 100644
index 00000000..48b0d413
--- /dev/null
+++ b/components/radio/demo/button.md
@@ -0,0 +1,57 @@
+
+#### 组合Button使用
+结合 `RadioGroup`,`RadioButton` 可以组合使用
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/radio/demo/disabled.md b/components/radio/demo/disabled.md
new file mode 100644
index 00000000..2b8b3c80
--- /dev/null
+++ b/components/radio/demo/disabled.md
@@ -0,0 +1,28 @@
+
+#### 可不用 / 可控
+通过 `disabled` 设置不可用
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/radio/demo/group.md b/components/radio/demo/group.md
new file mode 100644
index 00000000..cff23fce
--- /dev/null
+++ b/components/radio/demo/group.md
@@ -0,0 +1,44 @@
+
+#### 组合使用
+组合使用可以直接使用 `RadioGroup` 的 `options` 来赋值,或者结合 `Radio` 来组合使用,通过 `disabled` 可以设置组件是否被禁用
+**`RadioGroup` 可以直接使用 `options` 来组合，3.0版本增加**
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/radio/demo/index.vue b/components/radio/demo/index.vue
new file mode 100644
index 00000000..5d11efca
--- /dev/null
+++ b/components/radio/demo/index.vue
@@ -0,0 +1,21 @@
+ 
\ No newline at end of file
diff --git a/components/radio/demo/radio.js b/components/radio/demo/radio.js
deleted file mode 100644
index 88b59130..00000000
--- a/components/radio/demo/radio.js
+++ /dev/null
@@ -1,53 +0,0 @@
-let code = {}
-
-code.base=`
{{checked}}

-测试
-`
-
-code.disabled = `
-`
-code.group = `
当前选中值：{{data}}

-
-  苹果🍎
-  橘子🍊
-  香蕉🍌
-  栗子🌰
-  葡萄🍇
-  梨子🍐
-
-
-
-data() {
-  return {
-    checked:true,
-    data: "0",
-  };
-},
-methods: {
-  change(v) {
-    console.log(v);
-  }
-}`
-code.groupbutton =`
-  
-  
-  
-  
-
-

-

-
-  
-  
-  
-  
-
-

-

-
-  
-  
-  
-  
-`
-export default code
\ No newline at end of file
diff --git a/components/radio/demo/radio.vue b/components/radio/demo/radio.vue
deleted file mode 100644
index 371f9123..00000000
--- a/components/radio/demo/radio.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-
-
-
diff --git a/components/radio/group.jsx b/components/radio/group.jsx
new file mode 100644
index 00000000..a9a9e843
--- /dev/null
+++ b/components/radio/group.jsx
@@ -0,0 +1,60 @@
+import Radio from './radio.jsx';
+import Button from './button.jsx';
+export default {
+  name: "RadioGroup",
+  props: {
+    value: { type: [String, Number], default: "" },
+    disabled: Boolean,
+    mini: Boolean,
+    large: Boolean,
+    hollow: Boolean,
+    circle: Boolean,
+    options: Array,
+    type: String,
+  },
+  provide() {
+    return {
+      groupContext: this,
+    }
+  },
+  methods: {
+    change(data) {
+      let value = data.value
+      this.$emit("input", value);
+      this.$emit("change", value);
+    }
+  },
+  render() {
+    const { options, $slots, type } = this
+    let kid = $slots.default
+    if (options && options.length) {
+      kid = options.map(option => {
+        return type == 'button' ? (
+          

     )
   }
diff --git a/docs/assets/atom-one-light.css b/docs/assets/atom-one-light.css
index 9dbe0072..6a595a3e 100644
--- a/docs/assets/atom-one-light.css
+++ b/docs/assets/atom-one-light.css
@@ -26,23 +26,16 @@ hue-6-2: #c18401
   background: #f5f5f5;
 }
 
-.hljs-comment,
-.hljs-quote {
+.hljs-comment, .hljs-quote {
   color: #a0a1a7;
   font-style: italic;
 }
 
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
+.hljs-doctag, .hljs-keyword, .hljs-formula {
   color: #26a3a6;
 }
 
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
+.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
   color: #0c6ac4;
 }
 
@@ -50,36 +43,19 @@ hue-6-2: #c18401
   color: #0184bb;
 }
 
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
+.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
   color: #50a14f;
 }
 
-.hljs-built_in,
-.hljs-class .hljs-title {
+.hljs-built_in, .hljs-class .hljs-title {
   color: #c18401;
 }
 
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
+.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
   color: #b05e00;
 }
 
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
+.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
   color: #4078f2;
 }
 
@@ -94,3 +70,7 @@ hue-6-2: #c18401
 .hljs-link {
   text-decoration: underline;
 }
+
+pre > code[class*='lang-'], pre > code[class*='language-'] {
+  font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
\ No newline at end of file
diff --git a/docs/assets/demo.less b/docs/assets/demo.less
index 0edf5734..48c28136 100644
--- a/docs/assets/demo.less
+++ b/docs/assets/demo.less
@@ -1,10 +1,5 @@
 @import './markdown.less';
-// @import './ani.less';
 @main: #3a95ff;
-// @font-face {
-//   font-family: CenturyGothic;
-//   src: url(./fonts/CenturyGothic.ttf)
-// }
 * {
   margin: 0;
   padding: 0;
@@ -22,7 +17,6 @@
 
 html, body, .body {
   height: 100%;
-  overflow: hidden;
 }
 
 html, body, section {
@@ -38,11 +32,10 @@ article, aside, audio, details, figcaption, figure, footer, header, img, main, m
 body {
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  // text-rendering: optimizeLegibility;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
   -moz-font-feature-setting: 'liga', 'kern';
-  background-color: #c5cace;
   color: #333;
   // font-family: "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
   // font-family: -apple-system, CenturyGothic, BlinkMacSystemFont, PingFang SC, Helvetica Neue, Hiragino Sans GB, Segoe UI, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif !important;
@@ -80,10 +73,6 @@ h4 {
   margin-top: 20px;
 }
 
-body {
-  background: #f1f1f1;
-}
-
 p {
   margin: 10px 0;
 }
@@ -161,8 +150,6 @@ button * {
 }
 
 .body, .main {
-  display: inline-block;
-  width: 100%;
   .nav .k-menu-vertical .k-menu-item-group-title {
     font-size: 16px;
     font-weight: bold;
@@ -179,110 +166,7 @@ button * {
   }
 }
 
-.index {
-  // background: #fff;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  &::after {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    background-image: url(back.jpg);
-    background-size: cover;
-    text-align: center;
-    top: 0;
-    bottom: 0;
-    filter: blur(5px);
-    transform: scale(1.3);
-    opacity: .5;
-  }
-  .header {
-    background: none;
-    border: none;
-    box-shadow: none;
-    .nav-left {
-      float: left;
-      .logo {
-        margin-left: 40px;
-        color: #39495f;
-        font-weight: bold;
-        font-size: 16px;
-      }
-    }
-    .nav-right {
-      float: right;
-      margin-right: 50px;
-      li {
-        float: left;
-        position: relative;
-        display: inline-block;
-        margin: 0 24px;
-        cursor: pointer;
-        transition: color .3s;
-        font-size: 14px;
-      }
-    }
-  }
-  .index-content {
-    width: 50%;
-    color: #005388;
-    font-family: -apple-system, "BlinkMacSystemFont", "Open Sans", "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-    font-weight: 300;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    height: 65%;
-    display: inline-block;
-    margin: auto;
-    .logo {
-      margin-top: 120px;
-      // display: none;
-      font-size: 60px;
-      background: url(./v-logo.png) no-repeat center center;
-      background-size: contain;
-      height: 40px;
-      display: block;
-      font-size: 0;
-      // font-weight: 100;
-      // font-family: "Arial Rounded MT"
-      // img {
-      //   margin: 0 auto;
-      //   height: 120px;
-      // }
-    }
-    h1 {
-      // font-weight: 300;
-      font-size: 34px;
-      color: #005388;
-      margin: 80px 0;
-      text-align: center;
-    }
-    .btn-content {
-      text-align: center;
-      .k-btn {
-        display: inline-block;
-        width: 120px;
-        margin-left: 35px;
-        transition: all 0.3s;
-        border-radius: 20px;
-        cursor: pointer;
-        border: none;
-      }
-      .start {
-        // background: #65b87f;
-        background: linear-gradient(45deg, #65b87f, #008028);
-        color: #fff;
-      }
-    }
-  }
-}
+
 
 p {
   line-height: 25px; // margin: 10px 0;
@@ -312,9 +196,6 @@ header {
 
 .main {
   background: #fff; // width: 90%;
-  // margin: 80px auto 20px;
-  height: calc(~'100% - 50px'); // border-radius: 3px;
-  overflow: hidden;
   margin: 50px auto 0;
   >.k-row {
     height: 100%;
@@ -350,7 +231,6 @@ header {
     }
   }
   .colMain {
-    width: calc(100% - 300px);
     overflow: auto
   }
   .nav {
@@ -598,44 +478,7 @@ table {
   }
 }
 
-.k-code {
-  position: relative;
-  .k-code-pre {
-    height: 100%;
-    min-height: 100%;
-    font-size: 0;
-    overflow: hidden; // margin: 10px 0;
-    transition: height 0.3s ease-in-out;
-    line-height: 1.5;
-  }
-  .k-code-tools {
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    .k-tooltip {
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-      text-align: center;
-      color: #999;
-      font-size: 16px;
-      cursor: pointer;
-      &:hover {
-        color: #333;
-      }
-    }
-  }
-  code, kbd, samp {
-    font-size: 14px;
-    line-height: 25px;
-  }
-  .hljs {
-    // background: rgba(241, 241, 241, 0.43) !important;
-    height: 100%;
-    margin: 0;
-    font-size: 13px;
-  }
-}
+
 
 @media(max-width:1070px) {
   .search-component {
diff --git a/docs/assets/index.less b/docs/assets/index.less
new file mode 100644
index 00000000..13aa0205
--- /dev/null
+++ b/docs/assets/index.less
@@ -0,0 +1,58 @@
+@import './markdown.less';
+@import './atom-one-light.css';
+.k-layout {
+  .header {
+    height: 50px;
+    line-height: 50px;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 0 10px #ddd;
+    .logo {
+      float: left;
+      a {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+        text-decoration: none;
+      }
+      img {
+        height: 30px;
+        vertical-align: middle;
+        display: inline-block;
+        margin-right: 10px;
+        width: 30px;
+      }
+    }
+    .top-menu {
+      float: right;
+    }
+    .search-component {
+      width: 280px;
+      float: left;
+      margin-left: 130px;
+      .k-select-selection {
+        font-size: 15px;
+        border: none !important;
+      }
+      .k-select-arrow {
+        display: none;
+      }
+    }
+  }
+  .main {
+    background: #fff;
+    padding-top: 50px;
+    .k-layout-sider {
+      background: #fff;
+      .left-menu {
+        height: 100%;
+      }
+    }
+    & > .k-layout-content {
+      padding: 30px 20px 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/docs/assets/markdown.less b/docs/assets/markdown.less
index 1f9d7147..f6b5d8ef 100644
--- a/docs/assets/markdown.less
+++ b/docs/assets/markdown.less
@@ -3,11 +3,11 @@
 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
 
 html {
-  color: #333;
+  color: rgba(0, 0, 0, .65);
   background: #fff;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
-  // text-rendering: optimizelegibility;
+  text-rendering: optimizelegibility;
 }
 
 
@@ -45,7 +45,7 @@ audio, canvas, video {
 /* 要注意表单元素并不继承父级 font 的问题 */
 
 body, button, input, select, textarea {
-  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
+  font: 300 1em/1.8  PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
 }
 
 button::-moz-focus-inner, input::-moz-focus-inner {
@@ -167,10 +167,14 @@ a:hover {
 
 .typo a {
   // border-bottom: 1px solid #1abc9c;
-  opacity: 0;
   transition: all .3s ease;
 }
 
+.typo .anchor {
+  transition: all .3s ease;
+  opacity: 0;
+}
+
 .typo a:hover {
   border-bottom-color: #555;
   color: #555;
@@ -210,25 +214,26 @@ mark {
 
 /* 代码片断 */
 
-pre, code, pre tt {
-  font-family: Courier, 'Courier New', monospace;
+pre, code, pre tt, kbd, samp {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
 }
 
 pre {
-  background: #f8f8f8;
-  // border: 1px solid #ddd;
+  background: #f9f9f9;
+  border-top: 1px dashed #eee;
   padding: 1em 1.5em;
   display: block;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-p >code ,li>code{
+p >code, li>code, td>code {
   background: #f8f8f8;
   padding: 0.2em 0.4em;
   border-radius: 3px;
   font-size: 0.9em;
   border: 1px solid #eee;
+  // font-family: Courier, 'Courier New', monospace;
 }
 
 
@@ -317,6 +322,9 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 1.2em;
   margin-bottom: 0.6em;
   line-height: 1.35;
+  &:hover .anchor {
+    opacity: 1;
+  }
 }
 
 .typo h1, .typo-h1 {
@@ -364,6 +372,22 @@ h1, h2, h3, h4, h5, h6 {
 
 /* 同 ul/ol，在文章中应用 table 基本格式 */
 
+.typo table {
+  width: 100%;
+}
+
+.typo table td:first-child {
+  color: #005388;
+}
+
+.typo table td:nth-child(3) {
+  color: #b05e00;
+}
+
+.typo table td:nth-child(4) {
+  color: #50a14f;
+}
+
 .typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption {
   border: 1px solid #ddd;
   padding: 0.5em 1em;
diff --git a/docs/components/api.vue b/docs/components/api.vue
new file mode 100644
index 00000000..cbdcc93c
--- /dev/null
+++ b/docs/components/api.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/docs/components/demo/demo.less b/docs/components/demo/demo.less
index caf0c277..422b1aaf 100644
--- a/docs/components/demo/demo.less
+++ b/docs/components/demo/demo.less
@@ -18,7 +18,7 @@
     position: relative;
     h4 {
       position: absolute;
-      top: -65px;
+      top: -55px;
       font-size: 15px;
       font-weight: 600;
       color: #555;
@@ -37,6 +37,43 @@
   }
   .k-code {
     transition: all .3s ease;
+    position: relative;
+    // font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+    .k-code-pre {
+      height: 100%;
+      min-height: 100%;
+      font-size: 0;
+      overflow: hidden; // margin: 10px 0;
+      transition: height 0.3s ease-in-out;
+      line-height: 1.5;
+    }
+    .k-code-tools {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      .k-tooltip {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        color: #999;
+        font-size: 16px;
+        cursor: pointer;
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+    code, kbd, samp {
+      font-size: 14px;
+      // line-height: 25px;
+    }
+    .hljs {
+      // background: rgba(241, 241, 241, 0.43) !important;
+      height: 100%;
+      margin: 0;
+      font-size: 13px;
+    }
   }
   .k-code-expan {
     position: absolute;
diff --git a/docs/components/demo/demo.vue b/docs/components/demo/demo.vue
index 652209e5..cf518af8 100644
--- a/docs/components/demo/demo.vue
+++ b/docs/components/demo/demo.vue
@@ -17,6 +17,11 @@
     
       
       

+        

+          
+            
+          
+        

         
       

       
@@ -28,8 +33,10 @@
 import './demo.less'
 // import Code from '../code'
 import Collapse from '@/components/collapse/collapse.js'
+import ToolTip from '@/components/tooltip'
+import {Message} from '@/components/message'
 export default {
-  components: { Collapse },
+  components: { Collapse, ToolTip,Message },
   data() {
     return {
       expand: false
@@ -40,9 +47,18 @@ export default {
     data: { Object, Array }
   },
   methods: {
+    copy() {
+      let { sourceCode } = this.data
+      this.$copyText(sourceCode).then(function (e) {
+        Message.success('代码复制成功！')
+      }, function (e) {
+        Message.error('复制代码失败，请手动复制')
+        console.log(e)
+      })
+    },
     beforeEnter(el) {
-        el.style.height = 0
-        el.style.opacity = 0.1
+      el.style.height = 0
+      el.style.opacity = 0.1
     },
     enter(el) {
       if (el.scrollHeight !== 0) {
diff --git a/docs/components/index.vue b/docs/components/index.vue
index ce7d32e6..56ae330d 100644
--- a/docs/components/index.vue
+++ b/docs/components/index.vue
@@ -1,13 +1,13 @@
 
+
diff --git a/docs/layout.vue b/docs/layout.vue
index 034f9aaa..187c15db 100644
--- a/docs/layout.vue
+++ b/docs/layout.vue
@@ -1,95 +1,90 @@
 
 
diff --git a/docs/main.js b/docs/main.js
index 9993e778..ab574405 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -3,17 +3,23 @@ import Vue from 'vue'
 import App from './app'
 import router from './router'
 // import kui from '@/index'
-import './assets/demo.less'
-import './assets/atom-one-light.css'
+// import './assets/demo.less'
+// import './assets/atom-one-light.css'
 import '../components/styles'
+
+import './assets/index.less'
+
 import kui from '../components'
+
 import Copy from 'vue-clipboard2'
 
 import Demo from './components/demo'
-import MD from './components/md'
+import Api from './components/api'
+// import MD from './components/md'
 
 Vue.component('demo', Demo)
-Vue.component('MD', MD)
+// Vue.component('MD', MD)
+Vue.component('Api', Api)
 
 Vue.use(Copy)
 Vue.use(kui)
diff --git a/docs/menu.js b/docs/menu.js
index 0a0b7b35..5aa0c245 100644
--- a/docs/menu.js
+++ b/docs/menu.js
@@ -1,27 +1,25 @@
-let code = {}
-code.nav = [
-  {
-    title: "开始",
-    child: [
-      // { title: "KUI for React", weblink: 'https://react.k-ui.xyz/start' },
-      // { title: "KUI for Angular", link: '/angular-kui' },
-      { title: "快速上手", name: "start", icon: 'ios-cog' },
-      { title: "SSR 支持", name: "ssr", icon: 'ios-cloud' },
-      { title: "更新日志", name: "log", log: 1, icon: 'ios-paper' },
-      { title: "定制主题", name: "theme", icon: "md-shirt" },
-      { title: "kui-loader", name: "kui-loader", icon: "ios-link" }
-    ]
-  },
-  {
-    title: "基础组件",
-    child: [
-      { title: "图标", sub: "Icon", name: "icon", icon: "ios-heart" },
-      { title: "按钮", sub: "Button", name: "button", icon: 'ios-square' },
-      { title: "颜色", sub: "ColorPicker", name: "colorpicker", icon: 'ios-color-palette' },
-      { title: "栅格", sub: "Grid", name: "grid", icon: 'ios-grid' },
-      { title: "布局", sub: "Layout", name: "layout", icon: 'ios-albums' },
-    ]
-  },
+const Nav = [
+  // {
+  //   title: "开始",
+  //   child: [
+  //     // { title: "KUI for React", weblink: 'https://react.k-ui.xyz/start' },
+  //     { title: "快速上手", name: "start", icon: 'ios-cog' },
+  //     { title: "SSR 支持", name: "ssr", icon: 'ios-cloud' },
+  //     { title: "更新日志", name: "log", log: 1, icon: 'ios-paper' },
+  //     { title: "定制主题", name: "theme", icon: "md-shirt" },
+  //     { title: "kui-loader", name: "kui-loader", icon: "ios-link" }
+  //   ]
+  // },
+  // {
+  //   title: "基础组件",
+  //   child: [
+  //     { title: "图标", sub: "Icon", name: "icon", icon: "ios-heart" },
+  //     { title: "按钮", sub: "Button", name: "button", icon: 'ios-square' },
+  //     { title: "颜色", sub: "ColorPicker", name: "colorpicker", icon: 'ios-color-palette' },
+  //     { title: "栅格", sub: "Grid", name: "grid", icon: 'ios-grid' },
+  //     { title: "布局", sub: "Layout", name: "layout", icon: 'ios-albums' },
+  //   ]
+  // },
   {
     title: "表单",
     child: [
@@ -30,7 +28,7 @@ code.nav = [
       { title: "单选框", sub: "Radio", name: "radio", icon: 'ios-checkmark-circle' },
       { title: "开关", sub: "Switch", name: "switch", icon: 'ios-switch' },
       { title: "下拉框", sub: "Select", name: "select", icon: 'ios-arrow-down' },
-      { title: "日期", sub: "datePicker", name: "datepicker", icon: 'ios-calendar' },
+      { title: "日期", sub: "DatePicker", name: "datepicker", icon: 'ios-calendar' },
       { title: "表格", sub: "Table", name: "table", icon: 'ios-grid' },
       { title: "上传", sub: "Upload", name: "upload", icon: 'ios-cloud-upload' },
       { title: "表单", sub: "Form", name: "form", icon: 'ios-list' },
@@ -45,7 +43,7 @@ code.nav = [
       { title: "走马灯", sub: "Carousel", name: "carousel", icon: 'ios-film' },
       { title: "折叠面板", sub: "Collapse", name: "collapse", icon: 'ios-funnel' },
       { title: "抽屉", sub: "Drawer", name: "drawer", icon: 'ios-map' },
-      { title: "图片预览", sub: "imagePreview", name: "imagepreview", icon: 'ios-images' },
+      { title: "图片预览", sub: "ImagePreview", name: "imagepreview", icon: 'ios-images' },
       { title: "全局提示", sub: "Message", name: "message", icon: 'ios-chatboxes' },
       { title: "通知提醒", sub: "Notice", name: "notice", icon: 'ios-notifications' },
       { title: "对话框", sub: "Modal", name: "modal", icon: 'ios-chatbubbles' },
@@ -72,4 +70,4 @@ code.nav = [
     ]
   },
 ]
-export default code
\ No newline at end of file
+export default Nav
\ No newline at end of file
diff --git a/docs/router.js b/docs/router.js
index e5f9bcd5..39195d26 100644
--- a/docs/router.js
+++ b/docs/router.js
@@ -8,35 +8,36 @@ Vue.use(Router)
 
 let router = []
 
-let children = [
-    { path: '/', component: () => import(/*webpackChunkName:'start'*/'./views/start') },
-    { path: '/start', component: () => import(/*webpackChunkName:'start'*/'./views/start') },
-    { path: '/log', component: () => import(/*webpackChunkName:'log'*/'./views/log') },
-    { path: '/ssr', component: () => import(/*webpackChunkName:'ssr'*/'./views/ssr') },
-    { path: '/theme', component: () => import(/*webpackChunkName:'theme'*/'./views/theme') },
-    { path: '/kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'./views/kui-loader') },
+let docs = [
+    { path: 'start', component: () => import(/*webpackChunkName:'start'*/'./views/start') },
+    { path: 'log', component: () => import(/*webpackChunkName:'log'*/'./views/log') },
+    { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'./views/ssr') },
+    { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'./views/theme') },
+    { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'./views/kui-loader') },
+]
+let components = [
     //     { path: 'about', component: () => import(/*webpackChunkName:'about'*/'../components/about'), },
     { path: 'alert', component: () => import(/*webpackChunkName:'alert'*/'../components/alert/demo'), },
     //     { path: 'affix', component: () => import(/*webpackChunkName:'affix'*/'../components/affix/demo'), },
     //     { path: 'angular-kui', component: () => import(/*webpackChunkName:'angular-kui'*/'../components/angular-kui'), },
-        { path: 'card', component: () => import(/*webpackChunkName:'card'*/'../components/card/demo'), },
+    { path: 'card', component: () => import(/*webpackChunkName:'card'*/'../components/card/demo'), },
     //     { path: 'carousel', component: () => import(/*webpackChunkName:'carousel'*/'../components/carousel/demo'), },
     //     { path: 'collapse', component: () => import(/*webpackChunkName:'collapse'*/'../components/collapse/demo'), },
     //     { path: 'colorpicker', component: () => import(/*webpackChunkName:'colorpicker'*/'../components/colorpicker'/demo), },
     //     { path: 'color', component: () => import(/*webpackChunkName:'color'*/'../components/color/demo'), },
-    //     { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'../components/checkbox/demo'), },
+        { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'../components/checkbox/demo'), },
     { path: 'button', component: () => import(/*webpackChunkName:'button'*/'../components/button/demo'), },
     { path: 'breadcrumb', component: () => import(/*webpackChunkName:'breadcrumb'*/'../components/breadcrumb/demo'), },
     //     { path: 'backtop', component: () => import(/*webpackChunkName:'backtop'*/'../components/backtop'/demo), },
     { path: 'badge', component: () => import(/*webpackChunkName:'badge'*/'../components/badge/demo'), },
     //     { path: 'datepicker', component: () => import(/*webpackChunkName:'datepicker'*/'../components/datepicker/demo'), },
     //     { path: 'dropdown', component: () => import(/*webpackChunkName:'dropdown'*/'../components/dropdown'/demo), },
-    //     { path: 'drawer', component: () => import(/*webpackChunkName:'drawer'*/'../components/drawer/demo'), },
+    { path: 'drawer', component: () => import(/*webpackChunkName:'drawer'*/'../components/drawer/demo'), },
     //     { path: 'form', component: () => import(/*webpackChunkName:'form'*/'../components/form'/demo), },
     //     { path: 'font', component: () => import(/*webpackChunkName:'font'*/'../components/font/demo'), },
     { path: 'grid', component: () => import(/*webpackChunkName:'grid'*/'../components/grid/demo'), },
     //     { path: 'imagepreview', component: () => import(/*webpackChunkName:'image-preview'*/'../components/image-preview/demo'), },
-    //     { path: 'input', component: () => import(/*webpackChunkName:'input'*/'../components/input/demo'), },
+    { path: 'input', component: () => import(/*webpackChunkName:'input'*/'../components/input/demo'), },
     { path: 'icon', component: () => import(/*webpackChunkName:'icon'*/'../components/icon/demo'), },
     //     { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'../components/kui-loader/demo'), },
     //     { path: 'log', component: () => import(/*webpackChunkName:'log'*/'../components/log/demo'), },
@@ -46,11 +47,11 @@ let children = [
     //     { path: 'modal', component: () => import(/*webpackChunkName:'modal'*/'../components/modal/demo'), },
     //     { path: 'menu', component: () => import(/*webpackChunkName:'menu'*/'../components/menu'/demo), },
     //     { path: 'notice', component: () => import(/*webpackChunkName:'notice'*/'../components/notice/demo'), },
-    //     { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'../components/radio/demo'), },
+        { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'../components/radio/demo'), },
     //     { path: 'react-kui', component: () => import(/*webpackChunkName:'react-kui'*/'../components/react-kui/demo'), },
-    //     { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
+        { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
     //     { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'../components/ssr/demo'), },
-    //     { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'../components/switch/demo'), },
+        { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'../components/switch/demo'), },
     //     { path: 'start', component: () => import(/*webpackChunkName:'start'*/'../components/start/demo'), },
     //     { path: 'steps', component: () => import(/*webpackChunkName:'steps'*/'../components/steps/demo'), },
     //     { path: 'sponsor', component: () => import(/*webpackChunkName:'sponsor'*/'../components/sponsor/demo'), },
@@ -70,19 +71,24 @@ let children = [
 
 
 router.push(
-
+    { path: '/', component: () => import(/*webpackChunkName:'home'*/'./index') },
     { path: '/test', component: () => import(/*webpackChunkName:'test'*/'./test') },
     {
-        path: '/',
-        component: () => import(/*webpackChunkName:'layout'*/'./layout'),
-        children: children
+        path: '/components/',
+        component: () => import(/*webpackChunkName:'components'*/'./layout'),
+        children: components
+    },
+    {
+        path: '/docs/',
+        component: () => import(/*webpackChunkName:'docs'*/'./layout'),
+        children: docs
     }
 )
 let routers = new Router({
     routes: router, mode: 'history', scrollBehavior(to, from, savedPosition) {
         //return期望滚动到哪个的位置
-        //returnsavedPosition||{x:0,y:0}
-        document.querySelector('.colMain') && (document.querySelector('.colMain').scrollTop = 0)
+        // returnsavedPosition||{x:0,y:0}
+        // document.querySelector('.colMain') && (document.querySelector('.colMain').scrollTop = 0)
     }
 })
 routers.beforeEach(function (to, from, next) {
diff --git a/docs/views/kui-loader.md b/docs/views/kui-loader.md
index fe913cc8..47d99da5 100644
--- a/docs/views/kui-loader.md
+++ b/docs/views/kui-loader.md
@@ -33,6 +33,6 @@ module: {
 ```
 
 #### 说明
-可以直接写 标签；
-参数 prefix 设置为 true 后，所有 kui 组件标签名都可以使用前缀 k-
+使用 `kui-loader` 之后， 可以直接写 `Switch` 标签；
+参数 `prefix` 设置为 `true` 后，所有 `kui` 组件标签 名称都可以使用前缀 `k-`
  
\ No newline at end of file
diff --git a/docs/views/log.md b/docs/views/log.md
index 58158cdf..356c1112 100644
--- a/docs/views/log.md
+++ b/docs/views/log.md
@@ -31,16 +31,22 @@
 - 🌟 `ImagePreview` 组件新增全局显示模式
 - 🌟 `Switch` 组件新增 `mini` 模式
 - 🌟 新增抽屉 `Drawer` 组件，[#体验](https://k-ui.cn/components/drawer)
-- 👏 `Modal`
+
+`Modal`
+
   - 👏 优化展示隐藏动画 [#体验](https://k-ui.cn/components/modal)
   - 🌟 删除 `toast` 模式，新增提示框、 `confrim` 模式
   - 🌟 新增 `info，success，warning，error，show` 等全局模式
   - 🌟 新增异步回调
-- `Input`
+
+`Input`
+
   - 🐞 修复 `@input` 事件调用两次的问题
   - 🌟 新增大尺寸模式
   - 👏 优化图标左右位置显示
-- `Button`
+
+`Button`
+
   - 🌟 新增大尺寸模式
   - 🌟 新增图标位置显示，左右可控
   - 🌟 新增按钮 `loading` 模式
diff --git a/docs/views/ssr.md b/docs/views/ssr.md
index e918bbc8..41758ac2 100644
--- a/docs/views/ssr.md
+++ b/docs/views/ssr.md
@@ -1,5 +1,5 @@
-## 服务端渲染的支持
-### nuxt 环境构建
+## 服务端渲染的支持
+### nuxt 环境构建
 使用npx 或者 yarn 初始化项目,使用npm i npx -g 安装npx 或 yarn
 
 ```sh
-- 
Gitee


From 89419a414299c3c6243bc484ec928459f2dd0125 Mon Sep 17 00:00:00 2001
From: chuchur 
Date: Mon, 18 Nov 2019 16:22:23 +0800
Subject: [PATCH 03/15] =?UTF-8?q?=E9=87=8D=E5=86=99message,notice,timeline?=
 =?UTF-8?q?=E7=AD=89=E4=B8=80=E7=B3=BB=E5=88=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 4.0.md                                        |  36 +++
 components/{collapse => _tool}/collapse.js    |  12 +-
 components/_tool/resize.js                    |  14 +
 components/_tool/transition.js                |  51 ++++
 components/_tool/utils.js                     |   7 +-
 components/_tool/winScroll.js                 |  22 --
 components/affix/affix.vue                    |   2 +-
 components/alert/alert.jsx                    |  56 ++--
 components/alert/demo/close.md                |   8 +-
 components/alert/demo/icon.md                 |  23 +-
 components/alert/demo/index.vue               |   2 +
 components/alert/demo/info.md                 |   8 +
 components/alert/index.md                     |  14 +-
 components/alert/styles/index.less            |  90 +++++--
 components/backtop/backTop.vue                |   2 +-
 components/badge/demo/index.vue               |  10 +-
 components/badge/demo/info.md                 |   7 +
 components/breadcrumb/breadcrumb.jsx          |   3 +-
 components/breadcrumb/demo/index.vue          |   3 +-
 components/breadcrumb/demo/info.md            |   9 +
 components/button/buttonGroup.jsx             |   3 +-
 components/button/demo/index.vue              |  21 +-
 components/button/demo/info.md                |  12 +
 components/button/styles/index.less           |   4 +-
 components/card/demo/index.vue                |   2 +
 components/card/demo/info.md                  |   7 +
 components/card/styles/index.less             |  11 +-
 components/carousel/carousel.jsx              | 150 +++++++++++
 components/carousel/carousel.vue              | 148 -----------
 components/carousel/carouselItem.jsx          |  19 ++
 components/carousel/carouselItem.vue          |  29 ---
 components/carousel/demo/autoplay.md          |  17 ++
 components/carousel/demo/base.md              |  17 ++
 components/carousel/demo/carousel.vue         | 133 ----------
 components/carousel/demo/dottype.md           |  17 ++
 components/carousel/demo/index.vue            |  39 +++
 components/carousel/demo/info.md              |   9 +
 components/carousel/demo/vertical.md          |  17 ++
 components/carousel/index.js                  |   4 +-
 components/carousel/index.md                  |   9 +
 components/carousel/styles/index.less         | 239 +++++++++---------
 components/checkbox/demo/index.vue            |   4 +-
 components/checkbox/demo/info.md              |   7 +
 components/checkbox/group.jsx                 |  10 +-
 components/checkbox/styles/index.less         |   3 +
 components/collapse/carousel.js               |  31 ---
 components/collapse/collapse.jsx              |  86 +++----
 components/collapse/collapse.vue              |  59 -----
 components/collapse/demo/accrodion.md         |  28 ++
 components/collapse/demo/base.md              |  28 ++
 components/collapse/demo/collapse.vue         | 168 ------------
 components/collapse/demo/collapse1.js         | 123 ---------
 components/collapse/demo/index.vue            |  22 ++
 components/collapse/demo/info.md              |   7 +
 components/collapse/demo/nesting.md           |  40 +++
 components/collapse/demo/sample.md            |  28 ++
 components/collapse/index.js                  |   4 +-
 components/collapse/index.md                  |   7 +
 components/collapse/panel.jsx                 |  45 ++++
 components/collapse/panel.vue                 |  53 ----
 components/collapse/styles/index.less         | 136 ++++++----
 components/colorPicker/colorPicker.vue        |   2 +-
 components/datePicker/datepicker.vue          |   2 +-
 components/drawer/demo/custom.md              |  16 +-
 components/drawer/demo/form.md                |   6 +-
 components/drawer/demo/index.vue              |   2 +
 components/drawer/demo/info.md                |   9 +
 components/drawer/drawer.jsx                  | 127 ++++------
 components/drawer/index.md                    |  26 +-
 components/drawer/styles/animal.less          | 137 ++++++++++
 components/drawer/styles/index.less           | 141 +++++++----
 components/dropdown/dropdown.vue              |   2 +-
 components/dropdown/styles/index.less         |   4 +-
 components/icon/demo/index.vue                |   3 -
 components/icon/icon.jsx                      |  26 +-
 components/icon/styles/index.less             |  16 ++
 components/index.js                           |   3 +-
 components/input/demo/icon.md                 |  49 +++-
 components/input/demo/index.vue               |   7 +-
 components/input/demo/info.md                 |  10 +
 components/input/demo/textarea.md             |   3 +-
 components/input/input.jsx                    | 222 +++++++---------
 components/input/porps.js                     |  22 ++
 components/input/styles/index.less            | 128 ++++------
 components/layout/styles/index.less           |   2 +
 components/menu/submenu.vue                   |   2 +-
 components/message/demo/base.md               |  23 ++
 components/message/demo/close.md              |  39 +++
 components/message/demo/index.vue             |  20 ++
 components/message/demo/info.md               |   8 +
 components/message/demo/message.js            |  57 -----
 components/message/demo/message.vue           | 133 ----------
 components/message/demo/notice.js             |  36 ---
 components/message/demo/types.md              |  29 +++
 components/message/index.js                   | 102 ++------
 components/message/index.md                   |  27 ++
 components/message/notice.jsx                 |  50 ++++
 components/message/notice.vue                 |  58 -----
 components/message/notices.jsx                |  77 ++++++
 components/message/notices.vue                |  48 ----
 components/message/styles/index.less          | 100 +++++++-
 components/message/styles/message.less        |  82 ------
 components/modal/index.js                     |   2 +-
 components/modal/{modal.vue => modal.jsx}     | 105 +++-----
 components/notice/demo/base.md                |  26 ++
 components/notice/demo/icon.md                |  28 ++
 components/notice/demo/index.vue              |  18 ++
 components/notice/demo/info.md                |  11 +
 components/notice/index.js                    |  33 +++
 components/notice/index.md                    |  26 ++
 .../notice.less => notice/styles/index.less}  | 104 +++++---
 components/page/styles/index.less             |   2 +-
 components/poptip/poptip.vue                  |   2 +-
 components/radio/demo/index.vue               |   6 +-
 components/radio/demo/info.md                 |   8 +
 components/radio/group.jsx                    |   3 +-
 components/select/demo/base.md                |   7 +-
 components/select/demo/clearable.md           |  17 +-
 components/select/demo/index.vue              |  15 +-
 components/select/demo/info.md                |   8 +
 components/select/demo/m1.md                  |  23 --
 components/select/demo/multiple.md            |  50 ++++
 components/select/demo/search.md              |  46 ++++
 components/select/demo/select.js              |  99 --------
 components/select/demo/select.vue             | 193 --------------
 components/select/option.jsx                  |   2 +-
 components/select/select.jsx                  | 168 ++++++------
 components/select/styles/index.less           | 143 ++++++-----
 components/styles.js                          |   1 +
 components/styles/global.less                 | 101 +-------
 components/switch/demo/base.md                |   2 -
 components/switch/demo/index.vue              |  11 +-
 components/switch/demo/info.md                |   8 +
 components/switch/demo/text.md                |   2 +-
 components/table/table.vue                    |   1 -
 components/tabs/tabs.vue                      |   2 +-
 components/tag/demo/dynamic.md                |  23 +-
 components/tag/demo/index.vue                 |   2 +
 components/tag/demo/info.md                   |   8 +
 components/tag/styles/index.less              |  35 ++-
 components/tag/tag.jsx                        |   6 +-
 components/timeline/demo/base.md              |  16 ++
 components/timeline/demo/icon.md              |  18 ++
 components/timeline/demo/index.vue            |  20 ++
 components/timeline/demo/info.md              |  10 +
 components/timeline/demo/mode.md              |  34 +++
 components/timeline/index.js                  |   4 +-
 components/timeline/index.md                  |   7 +
 components/timeline/styles/index.less         | 125 ++++++---
 components/timeline/timeline.jsx              |  16 ++
 components/timeline/timeline.vue              |  14 -
 components/timeline/timelineitem.jsx          |  26 ++
 components/timeline/timelineitem.vue          |  32 ---
 components/tooltip/tooltip.vue                |   2 +-
 components/tree/node.vue                      |   2 +-
 components/treeselect/treeselect.vue          |   2 +-
 docs/assets/index.less                        |   1 +
 docs/assets/markdown.less                     |   9 +-
 docs/components/demo/demo.less                |  11 +-
 docs/components/demo/demo.vue                 |   7 +-
 docs/components/index.vue                     |   4 +-
 docs/router.js                                |  18 +-
 162 files changed, 2995 insertions(+), 2761 deletions(-)
 create mode 100644 4.0.md
 rename components/{collapse => _tool}/collapse.js (81%)
 create mode 100644 components/_tool/resize.js
 create mode 100644 components/_tool/transition.js
 delete mode 100644 components/_tool/winScroll.js
 create mode 100644 components/alert/demo/info.md
 create mode 100644 components/badge/demo/info.md
 create mode 100644 components/breadcrumb/demo/info.md
 create mode 100644 components/button/demo/info.md
 create mode 100644 components/card/demo/info.md
 create mode 100644 components/carousel/carousel.jsx
 delete mode 100644 components/carousel/carousel.vue
 create mode 100644 components/carousel/carouselItem.jsx
 delete mode 100644 components/carousel/carouselItem.vue
 create mode 100644 components/carousel/demo/autoplay.md
 create mode 100644 components/carousel/demo/base.md
 delete mode 100644 components/carousel/demo/carousel.vue
 create mode 100644 components/carousel/demo/dottype.md
 create mode 100644 components/carousel/demo/index.vue
 create mode 100644 components/carousel/demo/info.md
 create mode 100644 components/carousel/demo/vertical.md
 create mode 100644 components/carousel/index.md
 create mode 100644 components/checkbox/demo/info.md
 delete mode 100644 components/collapse/carousel.js
 delete mode 100644 components/collapse/collapse.vue
 create mode 100644 components/collapse/demo/accrodion.md
 create mode 100644 components/collapse/demo/base.md
 delete mode 100644 components/collapse/demo/collapse.vue
 delete mode 100644 components/collapse/demo/collapse1.js
 create mode 100644 components/collapse/demo/index.vue
 create mode 100644 components/collapse/demo/info.md
 create mode 100644 components/collapse/demo/nesting.md
 create mode 100644 components/collapse/demo/sample.md
 create mode 100644 components/collapse/index.md
 create mode 100644 components/collapse/panel.jsx
 delete mode 100644 components/collapse/panel.vue
 create mode 100644 components/drawer/demo/info.md
 create mode 100644 components/drawer/styles/animal.less
 create mode 100644 components/input/demo/info.md
 create mode 100644 components/input/porps.js
 create mode 100644 components/message/demo/base.md
 create mode 100644 components/message/demo/close.md
 create mode 100644 components/message/demo/index.vue
 create mode 100644 components/message/demo/info.md
 delete mode 100644 components/message/demo/message.js
 delete mode 100644 components/message/demo/message.vue
 delete mode 100644 components/message/demo/notice.js
 create mode 100644 components/message/demo/types.md
 create mode 100644 components/message/index.md
 create mode 100755 components/message/notice.jsx
 delete mode 100755 components/message/notice.vue
 create mode 100755 components/message/notices.jsx
 delete mode 100755 components/message/notices.vue
 delete mode 100644 components/message/styles/message.less
 rename components/modal/{modal.vue => modal.jsx} (71%)
 create mode 100644 components/notice/demo/base.md
 create mode 100644 components/notice/demo/icon.md
 create mode 100644 components/notice/demo/index.vue
 create mode 100644 components/notice/demo/info.md
 create mode 100644 components/notice/index.js
 create mode 100644 components/notice/index.md
 rename components/{message/styles/notice.less => notice/styles/index.less} (48%)
 create mode 100644 components/radio/demo/info.md
 create mode 100644 components/select/demo/info.md
 delete mode 100644 components/select/demo/m1.md
 create mode 100644 components/select/demo/multiple.md
 create mode 100644 components/select/demo/search.md
 delete mode 100644 components/select/demo/select.js
 delete mode 100644 components/select/demo/select.vue
 create mode 100644 components/switch/demo/info.md
 create mode 100644 components/tag/demo/info.md
 create mode 100644 components/timeline/demo/base.md
 create mode 100644 components/timeline/demo/icon.md
 create mode 100644 components/timeline/demo/index.vue
 create mode 100644 components/timeline/demo/info.md
 create mode 100644 components/timeline/demo/mode.md
 create mode 100644 components/timeline/index.md
 create mode 100644 components/timeline/timeline.jsx
 delete mode 100644 components/timeline/timeline.vue
 create mode 100644 components/timeline/timelineitem.jsx
 delete mode 100644 components/timeline/timelineitem.vue

diff --git a/4.0.md b/4.0.md
new file mode 100644
index 00000000..da63c419
--- /dev/null
+++ b/4.0.md
@@ -0,0 +1,36 @@
+
+`Alert`
+
+- 优化 `cloasable` 关闭时动画卡顿
+- 优化内容文字文字换行
+- 增加 `message` `description` 属性来呈现标题和内容 
+
+`Badge`
+
+- 增加 `dot` 隐藏显示
+
+`Card`
+
+- 优化 `extra` 显示更友好
+- 优化标题居中显示,超出部分隐藏,调节字体大小
+
+`Checkbox`
+
+- 统一禁用光标状态
+- `Group` 增加 `options` 属性来呈现子组件
+
+`Carousel`
+
+- 优化切换动画 抖动和 尺寸变化的组件内部的动画展现形式
+- 增加循环无缝播放
+
+`Radio`
+
+- `RadioGroup` 增加 `mini`, `large` ,`circle` ,`options` 来控制组件呈现模式
+- `RadioButton`增加 `icon` 属性来展示图标
+
+`Switch`
+
+- 增加 `icon` 属性可展示图标切换开关
+- 优化组件,可展示多个文字切换开关
+
diff --git a/components/collapse/collapse.js b/components/_tool/collapse.js
similarity index 81%
rename from components/collapse/collapse.js
rename to components/_tool/collapse.js
index 0a27300e..866dcf39 100644
--- a/components/collapse/collapse.js
+++ b/components/_tool/collapse.js
@@ -2,9 +2,8 @@
 //给需要的 元素加上 css  transition: height .2s ease-in-out;
 //by chuchur
 
-let on = {
+const on = {
     beforeEnter(el) {
-        el.style.overflow = 'hidden';
         el.style.height = 0
         el.style.opacity = 0.1
     },
@@ -33,7 +32,6 @@ let on = {
         }
     },
     afterLeave(el) {
-        el.style.overflow = ''
         el.style.height = ''
         el.style.opacity = ''
     },
@@ -43,8 +41,10 @@ let on = {
 
 export default {
     name: 'Collapse',
-    functional: true, //为true 表示 无状态 data 无 无实例 没有this
-    render(h, context) {
-        return h('transition', { on: on }, context.children)
+    // functional: true, //为true 表示 无状态 data 无 无实例 没有this
+
+    render() {
+        const props = { on }
+        return ({this.$slots.default})
     }
 }
\ No newline at end of file
diff --git a/components/_tool/resize.js b/components/_tool/resize.js
new file mode 100644
index 00000000..a1fa92eb
--- /dev/null
+++ b/components/_tool/resize.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+const SSR = Vue.prototype.$isServer
+export default {
+  bind(el, { value }) {
+    if (SSR) return;
+    if (typeof value == 'function') {
+      window.addEventListener('resize', value)
+    }
+  },
+  unbind(el, { value }) {
+    if (typeof value == 'function')
+      window.removeEventListener('resize', value)
+  }
+}
\ No newline at end of file
diff --git a/components/_tool/transition.js b/components/_tool/transition.js
new file mode 100644
index 00000000..d9fe26e5
--- /dev/null
+++ b/components/_tool/transition.js
@@ -0,0 +1,51 @@
+//利用vue 的状态管理 结合 vue transition 和 css3 的 transition 实现 Jqeury toggle
+//给需要的 元素加上 css  transition: height .2s ease-in-out;
+//by chuchur
+export function getTranstionProp(name) {
+  return {
+    name: name,
+    on: {
+      beforeEnter(el) {
+        // el.style.overflow = 'hidden';
+        el.style.height = 0
+        el.style.opacity = 0.1
+      },
+      enter(el) {
+        if (el.scrollHeight !== 0) {
+          el.style.height = el.scrollHeight + 'px'
+          el.style.opacity = 1
+        } else {
+          el.style.height = ''
+          el.style.opacity = ''
+        }
+      },
+      afterEnter(el) {
+        el.style.height = ''
+        el.style.opacity = ''
+      },
+      beforeLeave(el) {
+        el.style.height = el.scrollHeight + 'px'
+        el.style.opacity = 1
+      },
+      leave(el) {
+        if (el.scrollHeight !== 0) {
+          el.style.height = 0;
+          el.style.paddingTop = 0;
+          el.style.paddingBottom = 0;
+          el.style.marginTop = 0;
+          el.style.marginBottom = 0;
+          el.style.opacity = 0
+        }
+      },
+      afterLeave(el) {
+        el.style.height = '';
+        el.style.paddingTop = '';
+        el.style.paddingBottom = '';
+        el.style.marginTop = '';
+        el.style.marginBottom = '';
+        el.style.opacity = ''
+        el.style.overflow = ''
+      },
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/_tool/utils.js b/components/_tool/utils.js
index 9cf8e430..ff0bb0ab 100644
--- a/components/_tool/utils.js
+++ b/components/_tool/utils.js
@@ -12,11 +12,12 @@ export function hasProp(context, key) {
 }
 
 export function getElementPos(element) {
-  var parent = element.offsetParent;
+  var parent = element//.offsetParent;
   let pos = {
-    left:0,
+    left: 0,
     top: 0,
-    width: parent.offsetWidth
+    width: parent.offsetWidth,
+    height: parent.offsetHeight,
   }
   while (parent !== null) {
     pos.left += parent.offsetLeft;
diff --git a/components/_tool/winScroll.js b/components/_tool/winScroll.js
deleted file mode 100644
index c217ca32..00000000
--- a/components/_tool/winScroll.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from 'vue';
-const SSR = Vue.prototype.$isServer
-export default {
-  bind(el, binding) {
-    if (SSR) return;
-    let scroll = (e) => {
-      if (binding.expression) {
-        binding.value(e);
-      }
-    }
-    el.__scroll = scroll
-    window.addEventListener('resize', scroll)
-    document.addEventListener('scroll', scroll)
-    document.addEventListener('mousewheel', scroll)
-  },
-  unbind(el, bind) {
-    window.removeEventListener('resize', el.__scroll)
-    document.removeEventListener('scroll', el.__scroll)
-    document.removeEventListener('mousewheel', el.__scroll)
-    delete el.__scroll
-  }
-}
\ No newline at end of file
diff --git a/components/affix/affix.vue b/components/affix/affix.vue
index b5369d13..582c0dc0 100644
--- a/components/affix/affix.vue
+++ b/components/affix/affix.vue
@@ -8,7 +8,7 @@
 
 
  
\ No newline at end of file
diff --git a/components/breadcrumb/demo/info.md b/components/breadcrumb/demo/info.md
new file mode 100644
index 00000000..50aca4da
--- /dev/null
+++ b/components/breadcrumb/demo/info.md
@@ -0,0 +1,9 @@
+# Breadcrumb面包屑
+显示当前页面在系统层级结构中的位置，并能向上返回。
+
+## 何时使用
+- 当系统拥有超过两级以上的层级结构时；
+- 当需要告知用户『你在哪里』时；
+- 当需要向上导航的功能时。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/button/buttonGroup.jsx b/components/button/buttonGroup.jsx
index 5759f06a..2896ffa9 100644
--- a/components/button/buttonGroup.jsx
+++ b/components/button/buttonGroup.jsx
@@ -1,3 +1,4 @@
+import { getChild } from '../_tool/utils'
 export default {
   name: "ButtonGroup",
   props: {
@@ -24,7 +25,7 @@ export default {
   render() {
     return (
       

-        {this.$slots.default}
+        {getChild(this.$slots.default)}
       

     )
   }
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 93bbfcc3..0b86ae92 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -1,4 +1,5 @@
 
-
\ No newline at end of file
diff --git a/components/button/demo/info.md b/components/button/demo/info.md
new file mode 100644
index 00000000..26c42f32
--- /dev/null
+++ b/components/button/demo/info.md
@@ -0,0 +1,12 @@
+# Button 按钮
+按钮用于开始一个即时操作。
+
+## 何时使用
+标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+
+## 组件注册
+```js
+import { Button } from 'kui-vue';
+Vue.use(Button);
+```
+## 代码演示
\ No newline at end of file
diff --git a/components/button/styles/index.less b/components/button/styles/index.less
index afcf1783..d7dde117 100644
--- a/components/button/styles/index.less
+++ b/components/button/styles/index.less
@@ -12,7 +12,7 @@
   user-select: none;
   z-index: 9;
   outline: none;
-  appearance: none;
+  border:1px solid transparent;
   &:hover {
     opacity: .8;
     zoom: 0%;
@@ -151,11 +151,11 @@
   position: relative;
   display: inline-block;
   vertical-align: middle;
+  white-space: nowrap;
   .k-btn {
     margin-left: -1px;
     position: relative;
     margin-right: 0;
-    float: left;
     border-radius: 0;
   }
 }
diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue
index f5bbf20b..d17d08b7 100644
--- a/components/card/demo/index.vue
+++ b/components/card/demo/index.vue
@@ -1,11 +1,13 @@
 
-
diff --git a/components/carousel/carouselItem.jsx b/components/carousel/carouselItem.jsx
new file mode 100644
index 00000000..83d512fe
--- /dev/null
+++ b/components/carousel/carouselItem.jsx
@@ -0,0 +1,19 @@
+export default {
+	name: 'CarouselItem',
+	inject: {
+		Carousel: { default: null }
+	},
+	render() {
+		let width, height, carousel = this.Carousel
+		if (carousel) {
+			width = carousel.width
+			height = carousel.height
+		}
+		let styles = { width: `${width}px`, height: `${height}px` }
+		return (
+			

+				{this.$slots.default}
+			

+		)
+	}
+} 
diff --git a/components/carousel/carouselItem.vue b/components/carousel/carouselItem.vue
deleted file mode 100644
index df8fe685..00000000
--- a/components/carousel/carouselItem.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
new file mode 100644
index 00000000..083eab71
--- /dev/null
+++ b/components/carousel/demo/autoplay.md
@@ -0,0 +1,17 @@
+
+#### 自动播放
+通过设置 `autoplay` ，可实现定时自动播放，通过 `delay` 设置间隔播放时间，默认 `3000` ，单位毫秒 
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/carousel/demo/base.md b/components/carousel/demo/base.md
new file mode 100644
index 00000000..2d2e2fff
--- /dev/null
+++ b/components/carousel/demo/base.md
@@ -0,0 +1,17 @@
+
+#### 基本用法
+最简单的用法,可以通过 `value(v-model)` 指定初始值
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/carousel/demo/carousel.vue b/components/carousel/demo/carousel.vue
deleted file mode 100644
index c34a5a54..00000000
--- a/components/carousel/demo/carousel.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-
-
-
-
diff --git a/components/carousel/demo/dottype.md b/components/carousel/demo/dottype.md
new file mode 100644
index 00000000..54929f46
--- /dev/null
+++ b/components/carousel/demo/dottype.md
@@ -0,0 +1,17 @@
+
+#### 圆形指示器
+通过设置 `dots-type=cricle` 可显示圆形指示器
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/carousel/demo/index.vue b/components/carousel/demo/index.vue
new file mode 100644
index 00000000..ef328f03
--- /dev/null
+++ b/components/carousel/demo/index.vue
@@ -0,0 +1,39 @@
+ 
+
\ No newline at end of file
diff --git a/components/carousel/demo/info.md b/components/carousel/demo/info.md
new file mode 100644
index 00000000..f22aa57f
--- /dev/null
+++ b/components/carousel/demo/info.md
@@ -0,0 +1,9 @@
+# Carousel 走马灯
+旋转木马，一组轮播的区域。
+
+## 何时使用
+- 当有一组平级的内容。
+- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+- 常用于一组图片或卡片轮播。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
new file mode 100644
index 00000000..d4d4b064
--- /dev/null
+++ b/components/carousel/demo/vertical.md
@@ -0,0 +1,17 @@
+
+#### 垂直
+通过设置 `vertical` 呈现垂直模式,此时不显示左右箭头
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/carousel/index.js b/components/carousel/index.js
index 70f8bf25..09fa4e42 100644
--- a/components/carousel/index.js
+++ b/components/carousel/index.js
@@ -1,3 +1,3 @@
-import Carousel from './carousel'
-import CarouselItem from './carouselItem'
+import Carousel from './carousel.jsx'
+import CarouselItem from './carouselItem.jsx'
 export { Carousel, CarouselItem }
\ No newline at end of file
diff --git a/components/carousel/index.md b/components/carousel/index.md
new file mode 100644
index 00000000..7d77b982
--- /dev/null
+++ b/components/carousel/index.md
@@ -0,0 +1,9 @@
+### API
+| 属性        | 说明                                  | 类型            | 默认值   |
+|-----------|-------------------------------------|---------------|-------|
+| value     | 幻灯片的索引，从 0 开始，可以使用 `v-model` 双向绑定数据 | String,Number | 0     |
+| loop      | 是否开启循环                              | Boolean       | true  |
+| vertical  | 是否垂直模式显示                            | Boolean       | false |
+| autoplay  | 是否自动切换                              | Boolean       | false |
+| speed     | 自动切换的时间间隔，单位为毫秒                     | Number        | 2000  |
+| dots-type | 指示器的类型， `rect` 为方块， `radius` 为圆点    | Number        | 2000  |
\ No newline at end of file
diff --git a/components/carousel/styles/index.less b/components/carousel/styles/index.less
index 6e743e8e..67e97467 100644
--- a/components/carousel/styles/index.less
+++ b/components/carousel/styles/index.less
@@ -1,124 +1,127 @@
 @import '../../styles/global.less';
 .k-carousel {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    &:hover {
-        [class*='k-carousel-arrow'] {
-            opacity: .2;
-        }
-    }
-    .k-carousel-list {
-        transition: transform .5s ease-in-out;
-    }
-    .k-carousel-item {
-        float: left;
-        height: 100%;
-        min-height: 1px;
-        display: block;
-    }
-    .k-carousel-dots {
-        width: 100%;
-        height: 17px;
-        text-align: center;
-        list-style: none;
-        z-index: 10;
-        position: absolute;
-        bottom: 10px;
-        left: 0;
-        li {
-            display: inline-block;
-            background: #fff;
-            width: 16px;
-            height: 3px;
-            margin: 0 3px;
-            opacity: .3;
-            border-radius: 1px;
-            transition: all .5s ease-in-out;
-            cursor: pointer;
-            &:hover {
-                opacity: .8;
-            }
-        }
-        .k-carousel-dots-active {
-            width: 25px;
-            opacity: 1;
-        }
-    }
-    .k-carousel-dots-radius {
-        li {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-        }
-        .k-carousel-dots-active {
-            width: 8px;
-            opacity: 1;
-        }
-    }
-    [class*='k-carousel-arrow'] {
-        position: absolute;
-        top: 50%;
-        z-index: 100;
-        left: 10px;
-        background: #000;
-        border-radius: 50%;
-        display: block;
-        height: 36px;
-        width: 36px;
-        text-align: center;
-        line-height: 36px;
-        opacity: 0;
-        margin-top: -18px;
-        cursor: pointer;
-        color: #fff;
-        transition: opacity .3s ease-in-out;
-        &:hover {
-            opacity: .5;
-        }
-    }
-    .k-carousel-arrow-right {
-        left: auto;
-        right: 10px;
-    }
+	position: relative;
+	display: block;
+	overflow: hidden;
+	width: 100%;
+	&:hover {
+		[class*='k-carousel-arrow'] {
+			opacity: .2;
+		}
+	}
+	.k-carousel-warpper {
+		transition: transform .5s ease-in-out;
+		width: 100%;
+		height: 100%;  
+	}
+	.k-carousel-item {
+		float: left;
+		height: 100%;
+		min-height: 1px;
+		display: block;
+	}
+	.k-carousel-dots {
+		width: 100%;
+		text-align: center;
+		list-style: none;
+		z-index: 10;
+		position: absolute;
+		line-height: 1;
+		bottom: 10px;
+		left: 0;
+		li {
+			display: inline-block;
+			background: #fff;
+			width: 16px;
+			height: 3px;
+			margin: 0 3px;
+			opacity: .3;
+			border-radius: 1px;
+			// transition: all .5s ease-in-out;
+			cursor: pointer;
+			&:hover {
+				opacity: .8;
+			}
+		}
+		.k-carousel-dots-active {
+			width: 25px;
+			opacity: 1;
+		}
+	}
+	.k-carousel-dots-radius {
+		li {
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+		}
+		.k-carousel-dots-active {
+			width: 8px;
+			opacity: 1;
+		}
+	}
+	[class*='k-carousel-arrow'] {
+		position: absolute;
+		top: 50%;
+		z-index: 100;
+		left: 10px;
+		background: #000;
+		border-radius: 50%;
+		display: block;
+		height: 36px;
+		width: 36px;
+		text-align: center;
+		line-height: 36px;
+		opacity: 0;
+		margin-top: -18px;
+		cursor: pointer;
+		color: #fff;
+		transition: opacity .3s ease-in-out;
+		&:hover {
+			opacity: .5;
+		}
+	}
+	.k-carousel-arrow-right {
+		left: auto;
+		right: 10px;
+	}
 }
 
 .k-carousel-vertical {
-    .k-carousel-item {
-        float: auto;
-        width: 100%;
-        height: auto;
-    }
-    .k-carousel-dots {
-        bottom: auto;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        height: auto;
-        width: 17px;
-        left: auto;
-        li {
-            width: 3px;
-            height: 16px;
-            margin: 5px 0;
-            display: block;
-        }
-        .k-carousel-dots-active {
-            height: 25px;
-            width: 3px;
-            opacity: 1;
-        }
-    }
-    .k-carousel-dots-radius {
-        li {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-        }
-        .k-carousel-dots-active {
-            height: 8px;
-            width: 8px;
-            opacity: 1;
-        }
-    }
+	.k-carousel-item {
+		float: auto;
+		width: 100%;
+		height: auto;
+	}
+	.k-carousel-dots {
+		bottom: auto;
+		top: 50%;
+		transform: translateY(-50%);
+		right: 0;
+		height: auto;
+		width: 17px;
+		left: auto;
+		li {
+			width: 3px;
+			height: 16px;
+			margin: 5px 0;
+			display: block;
+		}
+		.k-carousel-dots-active {
+			height: 25px;
+			width: 3px;
+			opacity: 1;
+		}
+	}
+	.k-carousel-dots-radius {
+		li {
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+		}
+		.k-carousel-dots-active {
+			height: 8px;
+			width: 8px;
+			opacity: 1;
+		}
+	}
 }
\ No newline at end of file
diff --git a/components/checkbox/demo/index.vue b/components/checkbox/demo/index.vue
index 3b7fc066..865d33f3 100644
--- a/components/checkbox/demo/index.vue
+++ b/components/checkbox/demo/index.vue
@@ -1,14 +1,15 @@
  
\ No newline at end of file
diff --git a/components/checkbox/demo/info.md b/components/checkbox/demo/info.md
new file mode 100644
index 00000000..f0e56855
--- /dev/null
+++ b/components/checkbox/demo/info.md
@@ -0,0 +1,7 @@
+# Checkbox多选框
+多选框
+
+## 何时使用
+- 在一组可选项中进行多项选择时；
+- 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
+## 代码演示
\ No newline at end of file
diff --git a/components/checkbox/group.jsx b/components/checkbox/group.jsx
index 00d702c6..f030f607 100644
--- a/components/checkbox/group.jsx
+++ b/components/checkbox/group.jsx
@@ -1,5 +1,5 @@
 import Checkbox from './checkbox';
-
+import { getChild } from '../_tool/utils'
 export default {
   name: "CheckboxGroup",
   props: {
@@ -27,7 +27,7 @@ export default {
   },
   render() {
     const { options, $slots } = this
-    let kid = $slots.default
+    let kid = getChild($slots.default)
 
     if (options && options.length) {
       kid = options.map(option => (
@@ -39,10 +39,6 @@ export default {
         />
       ))
     }
-    return (
-      

-        {kid}
-      

-    )
+    return (
{kid}
)
   }
 }
diff --git a/components/checkbox/styles/index.less b/components/checkbox/styles/index.less
index 465e1bb7..55b7a124 100644
--- a/components/checkbox/styles/index.less
+++ b/components/checkbox/styles/index.less
@@ -79,6 +79,9 @@
 			}
 		}
 	}
+	&:hover .k-checkbox-inner{
+		border-color: @main;
+	}
 }
 
 .k-checkbox-disabled {
diff --git a/components/collapse/carousel.js b/components/collapse/carousel.js
deleted file mode 100644
index 1f5ff39d..00000000
--- a/components/collapse/carousel.js
+++ /dev/null
@@ -1,31 +0,0 @@
-let code = {}
-
-code.base = `
-  1
-  2
-  3
-  4
-`
-
-code.vertical = `
-  1
-  2
-  3
-  4
-`
-
-code.autoplay = `
-  1
-  2
-  3
-  4
-`
-
-code.radius = `
-  1
-  2
-  3
-  4
-`
-
-export default code
\ No newline at end of file
diff --git a/components/collapse/collapse.jsx b/components/collapse/collapse.jsx
index ceafc758..ec13a363 100644
--- a/components/collapse/collapse.jsx
+++ b/components/collapse/collapse.jsx
@@ -1,47 +1,47 @@
-//利用vue 的状态管理 结合 vue transition 和 css3 的 transition 实现 Jqeury toggle
-//给需要的 元素加上 css  transition: height .2s ease-in-out;
-//by chuchur
-
-const on = {
-    beforeEnter(el) {
-        el.style.height = 0
-        el.style.opacity = 0.1
-    },
-    enter(el) {
-        if (el.scrollHeight !== 0) {
-            el.style.height = el.scrollHeight + 'px'
-            el.style.opacity = 1
-        } else {
-            el.style.height = ''
-            el.style.opacity = ''
-        }
-    },
-    afterEnter(el) {
-        el.style.height = ''
-        el.style.opacity = ''
-    },
-
-    beforeLeave(el) {
-        el.style.height = el.scrollHeight + 'px'
-        el.style.opacity = 1
-    },
-    leave(el) {
-        if (el.scrollHeight !== 0) { el.style.height = 0; el.style.opacity = 0.1 }
-    },
-    afterLeave(el) {
-        el.style.height = ''
-        el.style.opacity = ''
-    },
-}
-
-// https://cn.vuejs.org/v2/guide/render-function.html#函数式组件
-
+import { getChild, hasProp } from '../_tool/utils'
 export default {
-    name: 'Collapse',
-    // functional: true, //为true 表示 无状态 data 无 无实例 没有this
+  name: 'Collapse',
+  props: {
+    value: Array,
+    accrodion: Boolean,
+    sample: Boolean
+  },
+  provide() {
+    return {
+      Collapse: this
+    }
+  },
+  data() {
+    return {
+      currentValue: (!hasProp(this, 'value')) ? [] : this.value
+    }
+  },
+  watch: {
+    value(v) {
+      if (v !== undefined && v !== null && v !== '')
+        this.currentValue = v
+    }
+  },
+  methods: {
+    change(name) {
+      let value = this.currentValue
+      let index = value.indexOf(name)
 
-    render() {
-        const props = { on }
-        return ({this.$slots.default})
+      if (index >= 0) {
+        this.accrodion ? value = [] : value.splice(index, 1)
+      } else {
+        this.accrodion ? value = [name] : value.push(name)
+      }
+      this.currentValue = value
+      this.$emit('change', name)
+      this.$emit('input', value)
     }
+  },
+  render() {
+    const classes = ['k-collapse', {
+      ['k-collaplse-sample']: this.sample
+    }]
+    const kid = getChild(this.$slots.default)
+    return (
{kid}
)
+  }
 }
\ No newline at end of file
diff --git a/components/collapse/collapse.vue b/components/collapse/collapse.vue
deleted file mode 100644
index 63b65e23..00000000
--- a/components/collapse/collapse.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
diff --git a/components/collapse/demo/accrodion.md b/components/collapse/demo/accrodion.md
new file mode 100644
index 00000000..aa8a1b5a
--- /dev/null
+++ b/components/collapse/demo/accrodion.md
@@ -0,0 +1,28 @@
+
+#### 手风琴
+设置 `accrodion` 只允许同时展开一个面板
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/collapse/demo/base.md b/components/collapse/demo/base.md
new file mode 100644
index 00000000..b6867e3f
--- /dev/null
+++ b/components/collapse/demo/base.md
@@ -0,0 +1,28 @@
+
+#### 基本用法
+默认可以同时展开一个或者多个面板
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/collapse/demo/collapse.vue b/components/collapse/demo/collapse.vue
deleted file mode 100644
index 95d8b49f..00000000
--- a/components/collapse/demo/collapse.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-
-
diff --git a/components/collapse/demo/collapse1.js b/components/collapse/demo/collapse1.js
deleted file mode 100644
index f22c1283..00000000
--- a/components/collapse/demo/collapse1.js
+++ /dev/null
@@ -1,123 +0,0 @@
-let code = {}
-
-code.base = `
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-
-`
-
-code.accrodion = `
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-
-`
-
-code.collapse=`
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
-      
-        
我是内容，要写很多文字

-        
我是内容，要写很多文字

-        
我是内容，要写很多文字

-      
-      
-        
我是内容，要写很多文字

-        
我是内容，要写很多文字

-        
我是内容，要写很多文字

-      
-    
-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-
-`
-
-code.sample =`
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-  
-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-    
我是内容，要写很多文字

-  
-
-`
-
-export default code
\ No newline at end of file
diff --git a/components/collapse/demo/index.vue b/components/collapse/demo/index.vue
new file mode 100644
index 00000000..1167a2cb
--- /dev/null
+++ b/components/collapse/demo/index.vue
@@ -0,0 +1,22 @@
+ 
\ No newline at end of file
diff --git a/components/collapse/demo/info.md b/components/collapse/demo/info.md
new file mode 100644
index 00000000..701ca791
--- /dev/null
+++ b/components/collapse/demo/info.md
@@ -0,0 +1,7 @@
+# Collapse折叠面板
+可以折叠/展开的内容区域。
+
+## 何时使用
+- 对复杂区域进行分组和隐藏，保持页面的整洁。
+- ‘手风琴’ 是一种特殊的折叠面板，只允许单个内容区域展开。
+## 代码演示
\ No newline at end of file
diff --git a/components/collapse/demo/nesting.md b/components/collapse/demo/nesting.md
new file mode 100644
index 00000000..5fdf0d80
--- /dev/null
+++ b/components/collapse/demo/nesting.md
@@ -0,0 +1,40 @@
+
+#### 嵌套面板
+嵌套折叠面板。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/collapse/demo/sample.md b/components/collapse/demo/sample.md
new file mode 100644
index 00000000..71db39e2
--- /dev/null
+++ b/components/collapse/demo/sample.md
@@ -0,0 +1,28 @@
+
+#### 简洁模式
+设置 `sample` 呈现没有边框的简洁样式。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/collapse/index.js b/components/collapse/index.js
index 75c0d771..dc82949d 100644
--- a/components/collapse/index.js
+++ b/components/collapse/index.js
@@ -1,3 +1,3 @@
-import Collapse from './collapse.vue'
-import Panel from './panel.vue'
+import Collapse from './collapse.jsx'
+import Panel from './panel.jsx'
 export { Collapse, Panel }
\ No newline at end of file
diff --git a/components/collapse/index.md b/components/collapse/index.md
new file mode 100644
index 00000000..4eefa7ab
--- /dev/null
+++ b/components/collapse/index.md
@@ -0,0 +1,7 @@
+### API
+| 属性        | 说明                              | 类型             | 默认值   |
+|-----------|---------------------------------|----------------|-------|
+| value     | 当前激活的面板的 `name`，可以使用 `v-model` 双向绑定 | Array , String | -     |
+| accordion | 是否开启手风琴模式，开启后每次至多展开一个面板         | Boolean        | false |
+| sample    | 是否开启简洁模式                        | Boolean        | false |
+| change    | 切换面板时触发回调，返回当前选项卡的 `name`        | Function       | -     |
\ No newline at end of file
diff --git a/components/collapse/panel.jsx b/components/collapse/panel.jsx
new file mode 100644
index 00000000..996d33a3
--- /dev/null
+++ b/components/collapse/panel.jsx
@@ -0,0 +1,45 @@
+import Icon from "../icon";
+import { getTranstionProp } from '../_tool/transition'
+export default {
+  name: 'Panel',
+  props: {
+    title: String,
+    name: { type: String, required: true },
+  },
+  inject: {
+    Collapse: { default: null }
+  },
+  methods: {
+    handelClick() {
+      if (this.Collapse) {
+        this.Collapse.change(this.name)
+      }
+    }
+  },
+  render() {
+    let active = false
+    let { Collapse, name } = this
+    if (Collapse) {
+      active = Collapse.currentValue.indexOf(name) >= 0
+    }
+    const classes = ['k-collapse-item', {
+      ['k-collapse-item-active']: active
+    }]
+    const aniprop = getTranstionProp('k-collaplse-slide')
+    return (
+      

+        

+          
+          {this.title}
+        

+        
+          

+            

+              {this.$slots.default}
+            

+          

+        
+      

+    )
+  }
+} 
\ No newline at end of file
diff --git a/components/collapse/panel.vue b/components/collapse/panel.vue
deleted file mode 100644
index 7dc78b58..00000000
--- a/components/collapse/panel.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
diff --git a/components/collapse/styles/index.less b/components/collapse/styles/index.less
index f4cbf282..1de23f5b 100644
--- a/components/collapse/styles/index.less
+++ b/components/collapse/styles/index.less
@@ -1,57 +1,99 @@
 @import '../../styles/global.less';
 .k-collapse {
-    background-color: #fafafa;
-    border: 1px solid #d9d9d9;
-    border-radius: @radius;
-    border-bottom: 0;
-    overflow: hidden;
-    &>.k-collapse-item {
-        border-bottom: 1px solid #d9d9d9;
-        &>.k-collapse-header {
-            line-height: 22px;
-            padding: 12px 0 12px 40px;
-            cursor: pointer;
-            position: relative;
-            &>i {
-                position: absolute;
-                left: 16px;
-                top: 0;
-                line-height: 46px;
-                transform: rotate(0);
-                transition: transform .3s ease-in-out;
-            }
-        }
-        .k-collapse-content {
-            background-color: #fff;
-            border-top: 1px solid #d9d9d9;
-            padding: 0 16px;
-            transition: height .3s ease-in-out,opacity .3s ease-in-out;
-            box-sizing: border-box;
-            overflow: hidden;
-            .k-collapse-content-box {
-                padding: 16px 0;
-            }
-        }
+  background-color: #fafafa;
+  border: 1px solid @borderColor;
+  border-radius: @radius;
+  border-bottom: 0;
+  overflow: hidden;
+  &>.k-collapse-item {
+    border-bottom: 1px solid @borderColor;
+    &>.k-collapse-header {
+      line-height: 22px;
+      padding: 12px 0 12px 40px;
+      cursor: pointer;
+      position: relative;
+      color:@titleColor;
+      font-size: 14px;
+      &>i {
+        position: absolute;
+        left: 16px;
+        top: 0;
+        line-height: 46px;
+        transform: rotate(0);
+        transition: transform .3s ease-in-out;
+      }
+    }
+    .k-collapse-content {
+      background-color: #fff;
+      border-top: 1px solid @borderColor;
+      padding: 0 16px;
+      transition: all .3s ease-in-out;
+      box-sizing: border-box;
+      overflow: hidden;
+      .k-collapse-content-box {
+        padding: 16px 0;
+      }
     }
-    &>.k-collapse-item-active {
-        &>.k-collapse-header>i {
-            transform: rotate(90deg);
-        }
+  }
+  &>.k-collapse-item-active {
+    &>.k-collapse-header>i {
+      transform: rotate(90deg);
     }
+  }
 }
 
 .k-collaplse-sample {
+  border: none;
+  background: none;
+  .k-collapse-item {
+    background: @light;
     border: none;
-    background: none;
-    .k-collapse-item {
-        background: #f5f5f5;
-        border: none;
-        margin-bottom: 10px;
-        border-radius: @radius;
-        overflow: hidden;
-        .k-collapse-content {
-            border: none;
-            background: none;
-        }
+    margin-bottom: 10px;
+    border-radius: @radius;
+    overflow: hidden;
+    .k-collapse-content {
+      border: none;
+      background: none;
     }
+  }
+}
+
+.k-alert-info {
+  background: tint(@main, 90%);
+  border-color: tint(@main, 70%);
+  .k-alert-icon {
+    color: @main;
+  }
+}
+.k-collaplse-slide-enter-actived {
+  animation: slideIn 0.3s ease-in-out;
+  animation-fill-mode: both;
+}
+.k-collaplse-slide-leave-actived {
+  animation: slideOut 0.3s ease-in-out;
+  animation-fill-mode: both;
+}
+@keyframes slideIn {
+  0% {
+    transform: scaleY(0);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes slideOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/components/colorPicker/colorPicker.vue b/components/colorPicker/colorPicker.vue
index 7962f0b6..a8a16e45 100644
--- a/components/colorPicker/colorPicker.vue
+++ b/components/colorPicker/colorPicker.vue
@@ -42,7 +42,7 @@ import picker from "./picker";
 import Input from "../input";
 import Button from "../button";
 import emitter from '@/mixins/emitter'
-import winScroll from "../_tool/winScroll";
+import winScroll from "../_tool/resize";
 import transferDom from "../_tool/transferDom";
 import docClick from "../_tool/docClick";
 export default {
diff --git a/components/datePicker/datepicker.vue b/components/datePicker/datepicker.vue
index 1a4a993b..2fc95f81 100644
--- a/components/datePicker/datepicker.vue
+++ b/components/datePicker/datepicker.vue
@@ -18,7 +18,7 @@
  
 
\ No newline at end of file
diff --git a/components/input/demo/info.md b/components/input/demo/info.md
new file mode 100644
index 00000000..69e3dfd4
--- /dev/null
+++ b/components/input/demo/info.md
@@ -0,0 +1,10 @@
+# Input 输入框
+
+通过鼠标或键盘输入内容，是最基础的表单域的包装。
+
+## 何时使用
+
+- 需要用户输入表单域内容时。
+- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index 14e7d988..025b36c8 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -7,7 +7,8 @@
 
 ```
\ No newline at end of file
diff --git a/components/input/input.jsx b/components/input/input.jsx
index 8abb5c83..dffaa35d 100644
--- a/components/input/input.jsx
+++ b/components/input/input.jsx
@@ -1,182 +1,143 @@
+import Icon from '../icon'
+import baseProps from './porps'
+import { hasProp } from '../_tool/utils'
 export default {
   name: "Input",
-  props: {
-    clearable: Boolean,
-    mini: { type: Boolean, default: false },
-    large: { type: Boolean, default: false },
-    value: [String, Number],
-    type: {
-      validator(value) {
-        return (["text", "textarea", "password", "url", "email", "date"].indexOf(value) >= 0);
-      },
-      default: 'text'
-    },
-    icon: String,
-    iconAlign: { type: String, default: 'right' },
-    rows: { type: [Number, String], default: 2 },
-    name: { type: String },
-    number: { type: Boolean, default: false },
-    width: { type: [Number, String] }
-  },
+  props: { ...baseProps },
   data() {
     return {
       currentValue: this.value,
-      clearableShow: false,
       isFocus: false,
-      isMove: false
+      isEnter: false,
+      isPassword: true,
     };
   },
   watch: {
-    value(val) {
-      this.setCurrentValue(val);
-    }
-  },
-  mounted() {
-    this.currentValue = this.value;
-  },
-  computed: {
-    iconClasses() {
-      return [`k-ion-${this.icon}`];
-    },
-    classes() {
-      return [
-        "k-input-wp",
-        {
-          ["k-input-mini"]: this.mini && this.type != 'textarea',
-          ["k-input-lg"]: this.large && !this.mini && this.type != 'textarea',
-          ["k-input-icon-left"]: this.icon && this.iconAlign == 'left'
-        }
-      ];
-    },
-    styles() {
-      return this.width && this.width > 0 ? { width: `${this.width}px` } : {};
-    },
-    inputClasses() {
-      return [
-        "k-input",
-        {
-          ["k-input-mini"]: !!this.mini,
-          ["k-input-disabled"]: this.disabled
-        }
-      ];
-    },
-    textareaClasses() {
-      return [
-        "k-input",
-        {
-          ["k-input-mini"]: !!this.mini,
-          ["k-input-disabled"]: this.disabled,
-          ["k-textarea"]: this.type == "textarea"
-        }
-      ];
+    value(v) {
+      this.currentValue = v
     }
   },
   methods: {
-    clear() {
-      this.setCurrentValue("");
-      this.$emit("input", '');
-      this.clearableShow = false;
+    focus() {
+      this.$nextTick(e => this.$refs.input.focus())
     },
-    handleMove() {
-      this.clearableShow = (this.currentValue && this.currentValue.toString().length > 0);
-      this.isMove = true;
+    blur(e) {
+      this.$nextTick(e => this.$refs.input.blur())
     },
-    handleOut() {
-      this.isMove = false;
-      if (!this.isFocus) {
-        this.clearableShow = false;
-      }
+    clear() {
+      this.setValue('')
+      this.$nextTick(e => this.$refs.input.focus())
     },
     iconClick() {
       !this.disabled && this.$emit("icon-click");
     },
-    handleFocus(event) {
-      this.clearableShow = this.currentValue && this.currentValue.toString().length > 0;
-      this.$emit("focus", event);
-      this.isFocus = true;
+    handleFocus(e) {
+      this.isFocus = true
+      this.$emit('focus', e)
     },
-    handleBlur(event) {
-      if (!this.isMove) {
-        this.clearableShow = false;
-      }
+    handleBlur(e) {
       this.isFocus = false
-      this.$emit("blur", event);
-      // this.dispatch('FormItem', 'form-item-blur', this.currentValue)
-    },
-    handleInput(event) {
-      let value = event.target.value;
-      this.clearableShow = value && value.length > 0;
-      if (this.number)
-        value = Number.isNaN(Number(value)) ? value : Number(value);
-      this.$emit("input", value);
-      this.setCurrentValue(value);
-    },
-    handleChange(event) {
-      this.$emit("change", event.target.value);
+      this.$emit('blur', e)
     },
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.currentValue = value;
-      // this.$emit("input", value);
-      // this.dispatch('FormItem', 'form-item-change', this.currentValue)
+    handleInput(e) {
+      this.setValue(e.target.value, e)
     },
-    focus() {
-      this.$refs.input.focus();
-      this.isFocus = true;
-    },
-    blur() {
-      this.$refs.input.blur();
-      this.isFocus = false;
+    changeType() {
+      let type = ''
+      if (!this.isPassword) {
+        type = 'password'
+      } else {
+        type = 'text'
+      }
+      this.isPassword = !this.isPassword
+      this.$refs.input.type = type
+    },
+    // handleChange(e) {
+    //   this.$emit('change', e)
+    // },
+    setValue(value, e) {
+      if (this.number) {
+        const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
+        if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
+          value = value;
+        }
+      }
+      if (!hasProp(this, 'value')) {
+        this.currentValue = value
+      }
+      this.$emit('input', value)
+      this.$emit('change', e)
+    },
+    getSuffix() {
+      let { $listeners } = this
+      const Search = ('search' in $listeners)
+        ?  : null
+      const Password =
+
+        (this.type == 'password')
+          ?  : null
+
+      return Password || Search || this.$slots.suffix
     },
     renderInput() {
       const {
         $listeners, getProp,
-        inputClasses, $attrs,
-        handleFocus, handleBlur, handleInput, handleChange, currentValue,
-        icon, iconClick, iconClasses,
-        clearable, clearableShow, clear
+        $attrs, disabled, placeholder, type,
+        handleFocus, handleBlur, handleInput, currentValue,
+        icon, iconClick, clear
       } = this
       const inputProps = {
         domProps: {
           value: currentValue
         },
-        class: inputClasses,
+        class: 'k-input',
+        ref: 'input',
         attrs: {
           ...$attrs,
+          disabled, type,
+          placeholder,
         },
         on: {
           ...$listeners,
           focus: handleFocus,
           blur: handleBlur,
           input: handleInput,
-          change: handleChange
+          // change: handleChange
         }
       }
       const props = getProp()
+      const clearableShow = this.clearable && (this.isFocus || this.isEnter)
+        && currentValue !== undefined && currentValue !== null && currentValue !== ''
+
+      let suffix = this.getSuffix()
+      suffix = suffix ? 
{suffix}
 : null
       return (
         

-          {icon ?  : null}
+          {icon ?  : null}
           
-          {clearable && clearableShow ?  : null}
+          {suffix}
+          {clearableShow ?  : null}
         

       )
     },
     renderTextArea() {
       const {
-        textareaClasses, rows, $attrs, getProp, $listeners, currentValue,
-        handleBlur, handleInput
+        rows, $attrs, getProp, $listeners, currentValue,
+        handleInput, disabled, placeholder
       } = this
       const inputProps = {
         domProps: {
           value: currentValue
         },
-        class: textareaClasses,
+        class: 'k-textarea',
         attrs: {
-          rows, ...$attrs
+          rows, ...$attrs,
+          placeholder,
+          disabled
         },
+        ref: 'input',
         on: {
           ...$listeners,
-          blur: handleBlur,
           input: handleInput
         }
       }
@@ -186,14 +147,25 @@ export default {
       )
     },
     getProp() {
-      const { classes, styles, handleMove, handleOut } = this
+      const { mini, disabled, type, large, width, $listeners } = this
+      let isTextArea = type == 'textarea'
+      let isSuffix = ('search' in $listeners) || this.$slots.suffix || type == 'password'
+      const classes = [
+        "k-input-wrapper",
+        {
+          ["k-input-disabled"]: disabled,
+          ["k-input-has-suffix"]: isSuffix,
+          ["k-input-mini"]: mini && !isTextArea,
+          ["k-input-lg"]: large && !mini && !isTextArea,
+        }
+      ];
+
       const props = {
         class: classes,
-        style: styles,
-        attrs: {},
+        style: { width: width + 'px' },
         on: {
-          mouseenter: handleMove,
-          mouseleave: handleOut
+          mouseenter: e => this.isEnter = true,
+          mouseleave: e => this.isEnter = false
         }
       }
       return props
diff --git a/components/input/porps.js b/components/input/porps.js
new file mode 100644
index 00000000..2790ac47
--- /dev/null
+++ b/components/input/porps.js
@@ -0,0 +1,22 @@
+export default {
+  clearable: Boolean,
+  mini: { type: Boolean, default: false },
+  large: { type: Boolean, default: false },
+  value: [String, Number],
+  placeholder: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  type: {
+    validator(value) {
+      return (["text", "textarea", "password", "url", "email", "date"].indexOf(value) >= 0);
+    },
+    default: 'text'
+  },
+  icon: String,
+  autofocus: Boolean,
+  iconAlign: String,
+  rows: { type: [Number, String], default: 2 },
+  name: { type: String },
+  number: { type: Boolean, default: false },
+  width: { type: [Number, String] }
+}
\ No newline at end of file
diff --git a/components/input/styles/index.less b/components/input/styles/index.less
index b469f1ce..694fe23c 100644
--- a/components/input/styles/index.less
+++ b/components/input/styles/index.less
@@ -1,10 +1,9 @@
 @import '../../styles/global.less';
-.k-input-wp {
+.k-input-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
-  font-size: 0;
-  .k-input {
+  .k-input, .k-textarea {
     box-sizing: border-box;
     display: inline-block;
     width: 100%;
@@ -14,7 +13,7 @@
     font-size: 12px;
     border: 1px solid @borderColor;
     border-radius: @radius;
-    color: #495060;
+    color: @color;
     background-color: #fff;
     background-image: none;
     position: relative;
@@ -24,15 +23,19 @@
       // box-shadow: 0 0 5px rgba(59, 180, 242, 0.55);
       box-shadow: 0 0 5px fade(@main, 75%);
       border-color: @main;
+      outline: none;
     }
     &:disabled {
       cursor: not-allowed;
       color: @disableColor;
       background: @disableBack;
       border-color: @disableBorder;
-      &::placeholder{
+      &::placeholder {
         color: @disableColor;
       }
+      &:hover{
+        border-color: @disableBorder;
+      }
     }
   }
   .k-textarea {
@@ -41,45 +44,66 @@
     vertical-align: bottom;
     font-size: 12px;
     resize: none;
+    outline: none;
   }
-  [class^="k-ion"] {
+  .k-input-icon {
     position: absolute;
     top: 0;
-    right: 0;
-    height: 32px;
-    line-height: 30px;
-    width: 32px;
-    text-align: center;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
     font-size: 20px;
     color: #999;
+    line-height: 1;
     z-index: 1;
     &+.k-input {
-      padding-right: 32px;
+      padding-left: 32px;
     }
   }
+  &:hover {
+    .k-input, .k-textarea {
+      border-color: @main;
+    }
+  }
+  [class^="k-ion"], [class*=" k-ion"] {
+    font-size: 18px;
+  }
+}
+
+.k-input-has-suffix {
+  .k-input {
+    padding-right: 32px;
+  }
+}
+
+.k-input-suffix {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  font-size: 12px;
+  transform: translateY(-50%);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  &:hover {
+    color: #000;
+  }
 }
 
 .k-input-clearable {
   position: absolute;
-  top: 1px;
-  right: 1px;
-  width: 32px;
-  height: 30px;
-  line-height: 30px;
-  text-align: center; //   display: none;
+  right: 12px;
   cursor: pointer;
   z-index: 10;
-  background: #fff;
+  line-height: 1;
+  top: 50%;
+  font-size: 15px;
+  transform: translateY(-50%);
   &::before {
     content: "\f14e";
     font-family: Ionicons;
-    font-size: 15px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    text-align: center;
     color: #999;
-    width: 100%;
+    line-height: 1;
   }
   &:hover {
     &::before {
@@ -88,16 +112,6 @@
   }
 }
 
-.k-input-icon-left {
-  [class^="k-ion"] {
-    left: 0;
-    &+.k-input {
-      padding-left: 32px;
-      padding-right: 0;
-    }
-  }
-}
-
 .k-input-mini {
   .k-input {
     padding: 2px 7px;
@@ -105,21 +119,16 @@
     line-height: 23px;
   }
   .k-input-clearable {
-    text-align: center;
-    height: 23px;
-    line-height: 23px;
-    width: 25px;
+    right: 9px;
     &::before {
       font-size: 11px;
     }
   }
-  [class^="k-ion"] {
-    height: 26px;
-    line-height: 24px;
-    width: 26px;
+  .k-input-icon {
+    left: 9px;
     font-size: 16px;
     &+.k-input {
-      padding-right: 26px;
+      padding-left: 24px;
     }
   }
 }
@@ -132,41 +141,16 @@
     font-size: 14px;
   }
   .k-input-clearable {
-    text-align: center;
-    height: 38px;
-    line-height: 38px;
-    width: 40px;
+    right: 15px;
     &::before {
       font-size: 18px;
     }
   }
-  [class^="k-ion"] {
-    height: 40px;
-    line-height: 38px;
-    width: 40px;
+  .k-input-icon {
     font-size: 25px;
-    &+.k-input {
-      padding-right: 40px;
-    }
-  }
-}
-
-.k-input-lg.k-input-icon-left {
-  [class^="k-ion"] {
-    left: 0;
+    left: 14px;
     &+.k-input {
       padding-left: 40px;
-      padding-right: 0;
-    }
-  }
-}
-
-.k-input-mini.k-input-icon-left {
-  [class^="k-ion"] {
-    left: 0;
-    &+.k-input {
-      padding-left: 26px;
-      padding-right: 0;
     }
   }
 }
diff --git a/components/layout/styles/index.less b/components/layout/styles/index.less
index 5130cb91..7b3e8b59 100644
--- a/components/layout/styles/index.less
+++ b/components/layout/styles/index.less
@@ -20,9 +20,11 @@
     line-height: 64px;
     padding: 0 50px;
     background: #646d82;
+    box-sizing: border-box;
   }
   .k-layout-content {
     flex: 1;
+    overflow: hidden;
   }
   .k-layout-sider {
     position: relative;
diff --git a/components/menu/submenu.vue b/components/menu/submenu.vue
index 8e5d6aa6..f6f2523c 100644
--- a/components/menu/submenu.vue
+++ b/components/menu/submenu.vue
@@ -21,7 +21,7 @@
   
  
 
+```
\ No newline at end of file
diff --git a/components/message/demo/close.md b/components/message/demo/close.md
new file mode 100644
index 00000000..ccdea4ec
--- /dev/null
+++ b/components/message/demo/close.md
@@ -0,0 +1,39 @@
+
+#### 自定义时长
+可以自定义配置，其中 `duration` 来控制自动关闭时长,默认 `3s` , `closable` 显示关闭按钮
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/message/demo/index.vue b/components/message/demo/index.vue
new file mode 100644
index 00000000..9204e763
--- /dev/null
+++ b/components/message/demo/index.vue
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
new file mode 100644
index 00000000..bdfdc274
--- /dev/null
+++ b/components/message/demo/info.md
@@ -0,0 +1,8 @@
+# 全局提示
+全局展示操作反馈信息。
+
+## 何时使用
+- 可提供成功、警告和错误等反馈信息。
+- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/message/demo/message.js b/components/message/demo/message.js
deleted file mode 100644
index 3ab743b8..00000000
--- a/components/message/demo/message.js
+++ /dev/null
@@ -1,57 +0,0 @@
-let code = {}
-
-code.base = `
-
diff --git a/components/message/demo/notice.js b/components/message/demo/notice.js
deleted file mode 100644
index b9d7d7d8..00000000
--- a/components/message/demo/notice.js
+++ /dev/null
@@ -1,36 +0,0 @@
-let code = {}
-
-code.base = `
-
+```
\ No newline at end of file
diff --git a/components/message/index.js b/components/message/index.js
index d96cb777..424daf51 100755
--- a/components/message/index.js
+++ b/components/message/index.js
@@ -1,94 +1,30 @@
-import Notices from './notices'
-import Vue from 'vue';
-
-Notices.Create = options => {
-   const props = options || {};
-   const Notice = new Vue({
-      render(h) {
-         return h(Notices, {
-            props: props
-         });
-      }
-   });
-
-   const component = Notice.$mount();
-   document.body.appendChild(component.$el);
-   const notice = Notice.$children[0];
-   return notice
-};
+import Notices from './notices.jsx'
 
 let messageInstance;
-let noticeInstance;
 
 const getInstance = (type) => {
-   if (type == 'message') {
-      messageInstance = messageInstance || Notices.Create({ type })
-      return messageInstance
-   } else {
-      noticeInstance = noticeInstance || Notices.Create({ type })
-      return noticeInstance
-   }
+  messageInstance = messageInstance || Notices.newInstance({ type })
+  return messageInstance
 };
-const message = (noticeType, type, title, content, duration, close) => {
-   getInstance(noticeType).add({
-      title, noticeType, duration, content, type, close
-   });
-}
 
 let Message = {
-   name: 'Message',
-   info(content, duration, onClose) {
-      message('message', 'info', null, content, duration, onClose);
-   },
-   success(content, duration, onClose) {
-      message('message', 'success', null, content, duration, onClose);
-   },
-   warning(content, duration, onClose) {
-      message('message', 'warning', null, content, duration, onClose);
-   },
-   error(content, duration, onClose) {
-      message('message', 'error', null, content, duration, onClose);
-   },
-   config(options) {
-      options.noticeType = 'message'
-      getInstance('message').add(options);
-   },
-   destroy() {
+  name: 'Message',
+  config(options = {}) {
+    options.noticeType = 'message'
+    getInstance('message').add(options);
+  },
+  destroy() {
+    if (messageInstance) {
+      messageInstance.destroy()
       messageInstance = null;
       document.body.removeChild(document.getElementsByClassName('k-message'));
-   }
+    }
+  }
 };
-let Notice = {
-   name: 'Notice',
-   info(options) {
-      options.type = 'info'
-      options.noticeType = 'notice'
-      getInstance('notice').add(options);
-   },
-   success(options) {
-      options.type = 'success'
-      options.noticeType = 'notice'
-      getInstance('notice').add(options);
-   },
-   warning(options) {
-      options.type = 'warning'
-      options.noticeType = 'notice'
-      getInstance('notice').add(options);
-   },
-   error(options) {
-      options.type = 'error'
-      options.noticeType = 'notice'
-      getInstance('notice').add(options);
-   },
-   open(options) {
-      options.noticeType = 'notice'
-      options.type = null
-      getInstance('notice').add(options);
-   },
-   destroy() {
-      noticeInstance = null;
-      document.body.removeChild(document.getElementsByClassName('k-notice'));
-   }
-}
+['info', 'success', 'warning', 'error'].forEach(type => {
+  Message[type] = (content, duration, onClose) => {
+    return Message.config({ type, content, duration, onClose })
+  }
+})
 
-export { Message, Notice };
\ No newline at end of file
+export default Message;
\ No newline at end of file
diff --git a/components/message/index.md b/components/message/index.md
new file mode 100644
index 00000000..a04d941c
--- /dev/null
+++ b/components/message/index.md
@@ -0,0 +1,27 @@
+### API
+组件提供了一些静态方法，使用方式如下
+ 
+  
+- `this.$Message.info(content, [duration], onClose)`
+- `this.$Message.success(content, [duration], onClose)`
+- `this.$Message.warning(content, [duration], onClose)`
+- `this.$Message.error(content, [duration], onClose)`
+
+  
+
+另外提供了全局配置和全局销毁的方法：
+ 
+  
+- `this.$Message.config(options)`
+- `this.$Message.destroy()`
+
+  
+参数 `options` 为对象，具体说明如下：
+
+| 属性       | 说明                                                | 类型       | 默认值   |
+|----------|---------------------------------------------------|----------|-------|
+| type     | 提示类型，提供 `info`、`success`、`error`、`warning` 四种可选类型 | String   | info  |
+| content  | 提示内容                                              | String   | -     |
+| duration | 自动关闭的延时，单位秒，0为 不自动关闭                              | Number   | 3     |
+| closable | 是否可手动关闭                                           | Boolean  | false |
+| close    | 关闭时的回调                                            | Function | -     |
diff --git a/components/message/notice.jsx b/components/message/notice.jsx
new file mode 100755
index 00000000..d5b5b836
--- /dev/null
+++ b/components/message/notice.jsx
@@ -0,0 +1,50 @@
+import Icon from '../icon'
+export default {
+  props: {
+    type: { type: String, default: "info" },
+    title: String,
+    name: String,
+    content: String,
+    closable: Boolean,
+    noticeType: { type: String, default: "message" },
+    onClose: { type: Function, default: () => { } }
+  },
+  render() {
+    let { noticeType, type, content, title, onClose, closable } = this
+    const classes = [`k-${noticeType}-box`, `k-${noticeType}-${type}`, {
+      'k-notice-has-icon': noticeType == 'notice' && type != 'default'
+    }];
+    let childNode;
+    let icons = {
+      info: "ios-information-circle",
+      error: "ios-close-circle",
+      success: "ios-checkmark-circle",
+      warning: "ios-alert"
+    };
+    let iconNode = type != 'default' ?  : null
+    if (noticeType == 'message') {
+
+      childNode = (
+        

+          {iconNode}
+          {content}
+          {closable ?  : null}
+        

+      )
+    } else {
+      childNode = (
+        

+          {iconNode}
+          
{title}

+          
{content}

+          
+        

+      )
+    }
+    return (
+      

+        {childNode}
+      

+    )
+  }
+}
\ No newline at end of file
diff --git a/components/message/notice.vue b/components/message/notice.vue
deleted file mode 100755
index d1f0f73c..00000000
--- a/components/message/notice.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
diff --git a/components/message/notices.jsx b/components/message/notices.jsx
new file mode 100755
index 00000000..32e6fcd8
--- /dev/null
+++ b/components/message/notices.jsx
@@ -0,0 +1,77 @@
+import Vue from 'vue';
+import Notice from "./notice.jsx";
+import { getTranstionProp } from '../_tool/transition'
+
+let count = 0
+const timestamp = Date.now()
+function getUuid() {
+  return `k-message_${timestamp}_${count++}`
+}
+
+const Notices = {
+  props: { type: String },
+  data() {
+    return {
+      notices: []
+    };
+  },
+  methods: {
+    add(options) {
+      let { duration, close, closable, noticeType } = options
+      let key = getUuid()
+      options.name = key
+      options.duration = isNaN(Number(duration)) ? 3.5 : duration;
+      let timer;
+      let callback = () => {
+        (typeof close) === 'function' && close()
+        let index = this.notices.map(v => v.name).indexOf(key)
+        this.notices.splice(index, 1)
+        clearTimeout(timer);
+        timer = null;
+      };
+      options.duration > 0 && (timer = setTimeout(callback, options.duration * 1000));
+      if ((closable === true && noticeType == "message") || noticeType == "notice")
+        options.onClose = callback
+      this.notices.push(options);
+    }
+  },
+  render() {
+    const { type } = this
+    let transition = getTranstionProp()
+    delete transition.on.enter
+    delete transition.on.beforeEnter
+    transition.on.beforeLeave = (el) => {
+      el.style.height = window.getComputedStyle(el).height
+      el.style.opacity = 1
+    }
+    let kid = this.notices.map((item, i) => {
+      let props = { props: { ...item } }
+      let key = (item.name = item.name) || getUuid()
+      return 
+    })
+    return (
+      

+        
+          {kid}
+        
+      

+    )
+  }
+}
+
+Notices.newInstance = function (props = {}) {
+  const Notice = new Vue({
+    render(h) {
+      return h(Notices, {
+        props: props
+      });
+    }
+  });
+
+  const component = Notice.$mount();
+  document.body.appendChild(component.$el);
+  const notice = Notice.$children[0];
+  return notice
+}
+
+export default Notices
\ No newline at end of file
diff --git a/components/message/notices.vue b/components/message/notices.vue
deleted file mode 100755
index 2a2fbe90..00000000
--- a/components/message/notices.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
\ No newline at end of file
diff --git a/components/message/styles/index.less b/components/message/styles/index.less
index 608323df..2cfde36d 100755
--- a/components/message/styles/index.less
+++ b/components/message/styles/index.less
@@ -1,2 +1,98 @@
-@import './message.less';
-@import './notice.less';
\ No newline at end of file
+@import '../../styles/global.less';
+.k-message {
+  font-size: 14px;
+  line-height: 1.5;
+  color: @color;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  z-index: 1010;
+  width: 100%;
+  top: 16px;
+  left: 0;
+  pointer-events: none;
+  .k-message-box {
+    box-sizing: content-box;
+    padding: 0 12px 14px 12px;
+    text-align: center;
+    transition: all .3s;
+    // margin-top: -8px;
+  }
+  .k-message-content {
+    box-sizing: content-box;
+    line-height: 1.5;
+    padding: 10px 16px;
+    border-radius: @radius;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    background: #fff;
+    display: inline-block;
+    pointer-events: all;
+    .k-message-icon {
+      margin-right: 8px;
+      font-size: 18px;
+      vertical-align: middle;
+    }
+  }
+  .k-message-close {
+    font-size: 12px;
+    line-height: 1.5;
+    overflow: hidden;
+    cursor: pointer;
+    float: right;
+    margin-left: 15px;
+    &::before {
+      content: '\f2c0';
+      font-family: Ionicons;
+      color: #999;
+      font-size: 15px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.k-message-success .k-message-icon {
+  color: @success;
+}
+
+.k-message-error .k-message-icon {
+  color: @danger;
+}
+
+.k-message-info .k-message-icon {
+  color: @main;
+}
+
+.k-message-warning .k-message-icon {
+  color: @warning;
+}
+
+@keyframes msgIn {
+  from {
+    opacity: 0;
+    margin-top: -55px;
+  }
+  to {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+@keyframes msgOut {
+  from {
+    opacity: 1;
+    margin-top: -55px;
+  }
+  to {
+    opacity: 0;
+    margin-top: 0;
+  }
+}
+
+.k-message-slide-enter-active {
+  animation: msgIn .3s ease;
+}
+
+.k-message-slide-leave-active {
+  animation: msgOut .3s ease;
+}
\ No newline at end of file
diff --git a/components/message/styles/message.less b/components/message/styles/message.less
deleted file mode 100644
index d7079991..00000000
--- a/components/message/styles/message.less
+++ /dev/null
@@ -1,82 +0,0 @@
-@import '../../styles/global.less';
-.k-message {
-  font-size: 14px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: fixed;
-  z-index: 1010;
-  width: 100%;
-  top: 16px;
-  left: 0;
-  pointer-events: none;
-  .k-message-notice {
-    box-sizing: content-box;
-    padding: 8px;
-    text-align: center;
-    transition: all .3s;
-    // overflow: hidden;
-    &:first-child {
-      // margin-top: -8px;
-    }
-  }
-  .k-message-notice-content {
-    box-sizing: content-box;
-    line-height: 1.5;
-    padding: 10px 16px;
-    border-radius: @radius;
-    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    background: #fff;
-    display: inline-block;
-    pointer-events: all;
-    &>[class^="k-ion"], [class*=" k-ion"] {
-      margin-right: 5px;
-      font-size: 18px;
-      vertical-align: middle;
-    }
-  }
-  .k-message-close {
-    font-size: 12px;
-    line-height: 1.5;
-    overflow: hidden;
-    cursor: pointer;
-    float: right;
-    margin-left: 15px;
-    &::before {
-      content: '\f2c0';
-      font-family: Ionicons;
-      color: #999;
-      font-size: 15px;
-      vertical-align: middle;
-    }
-  }
-}
-
-.k-message-success .k-message-notice-content {
-  &>[class^="k-ion"], [class*=" k-ion"] {
-    color: @success;
-  }
-}
-
-.k-message-error .k-message-notice-content {
-  &>[class^="k-ion"], [class*=" k-ion"] {
-    color: @danger;
-  }
-}
-
-.k-message-info .k-message-notice-content {
-  &>[class^="k-ion"], [class*=" k-ion"] {
-    color: @main;
-  }
-}
-
-.k-message-warning .k-message-notice-content {
-  &>[class^="k-ion"], [class*=" k-ion"] {
-    color: @warning;
-  }
-}
\ No newline at end of file
diff --git a/components/modal/index.js b/components/modal/index.js
index 07076541..aed152a0 100644
--- a/components/modal/index.js
+++ b/components/modal/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Modal from './modal.vue'
+import Modal from './modal'
 import Button from '../button'
 
 let modalInstance;
diff --git a/components/modal/modal.vue b/components/modal/modal.jsx
similarity index 71%
rename from components/modal/modal.vue
rename to components/modal/modal.jsx
index 1ec1ff7f..fc3f8f82 100644
--- a/components/modal/modal.vue
+++ b/components/modal/modal.jsx
@@ -1,59 +1,9 @@
-
-
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/components/notice/demo/base.md b/components/notice/demo/base.md
new file mode 100644
index 00000000..e014dda1
--- /dev/null
+++ b/components/notice/demo/base.md
@@ -0,0 +1,26 @@
+
+
+#### 基础用法
+`Notice` 的基本用法
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/notice/demo/icon.md b/components/notice/demo/icon.md
new file mode 100644
index 00000000..3414f861
--- /dev/null
+++ b/components/notice/demo/icon.md
@@ -0,0 +1,28 @@
+
+#### 带图标的提醒
+通过调用不同的方法，可展示不同的类型
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/notice/demo/index.vue b/components/notice/demo/index.vue
new file mode 100644
index 00000000..f219c353
--- /dev/null
+++ b/components/notice/demo/index.vue
@@ -0,0 +1,18 @@
+ 
\ No newline at end of file
diff --git a/components/notice/demo/info.md b/components/notice/demo/info.md
new file mode 100644
index 00000000..24cb6976
--- /dev/null
+++ b/components/notice/demo/info.md
@@ -0,0 +1,11 @@
+# 通知提醒框
+全局展示通知提醒信息。
+
+## 何时使用
+在系统四个角显示通知提醒信息。经常用于以下情况：
+
+- 较为复杂的通知内容。
+- 带有交互的通知，给出用户下一步的行动点。
+- 系统主动推送。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/notice/index.js b/components/notice/index.js
new file mode 100644
index 00000000..e9eda0c0
--- /dev/null
+++ b/components/notice/index.js
@@ -0,0 +1,33 @@
+import Notices from '../message/notices.jsx'
+
+let noticeInstance;
+
+const getInstance = (type) => {
+  noticeInstance = noticeInstance || Notices.newInstance({ type })
+  return noticeInstance
+};
+
+let Notice = {
+  name: 'Notice',
+  open(options = {}) {
+    options = Object.assign({ type: 'default', noticeType: 'notice' }, options)
+    options.noticeType = 'notice'
+    // options.type = null
+    getInstance('notice').add(options);
+  },
+  destroy() {
+    if (noticeInstance) {
+      noticeInstance.destroy()
+      noticeInstance = null;
+      document.body.removeChild(document.getElementsByClassName('k-notice'));
+    }
+  }
+};
+
+['info', 'success', 'warning', 'error'].forEach(type => {
+  Notice[type] = (options) => {
+    return Notice.open({ type, ...options })
+  }
+});
+
+export default Notice;
\ No newline at end of file
diff --git a/components/notice/index.md b/components/notice/index.md
new file mode 100644
index 00000000..a86eb936
--- /dev/null
+++ b/components/notice/index.md
@@ -0,0 +1,26 @@
+### API
+组件提供了一些静态方法，使用方式如下
+ 
+  
+- `this.$Notice.info(options)`
+- `this.$Notice.success(options)`
+- `this.$Notice.warning(options)`
+- `this.$Notice.error(options)`
+
+  
+
+另外提供了全局配置和全局销毁的方法：
+ 
+  
+- `this.$Notice.open(options)`
+- `this.$Notice.destroy()`
+
+  
+参数 `options` 为对象，具体说明如下：
+
+| 属性       | 说明                   | 类型       | 默认值 |
+|----------|----------------------|----------|-----|
+| title    | 通知提醒的标题              | String   | -   |
+| content  | 提示内容                 | String   | -   |
+| duration | 自动关闭的延时，单位秒，不关闭可以写 0 | Number   | 3   |
+| close    | 关闭时的回调               | Function | -   |
\ No newline at end of file
diff --git a/components/message/styles/notice.less b/components/notice/styles/index.less
similarity index 48%
rename from components/message/styles/notice.less
rename to components/notice/styles/index.less
index e71c3c4d..211f6ad1 100644
--- a/components/message/styles/notice.less
+++ b/components/notice/styles/index.less
@@ -2,7 +2,7 @@
 .k-notice {
   font-size: 14px;
   line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
+  color: @color;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
@@ -16,10 +16,10 @@
   right: 0px;
   top: 24px;
   bottom: auto;
-  .k-notice-notice {
+  .k-notice-box {
     box-sizing: content-box;
     transition: all .3s ease-in-out;
-    padding: 16px;
+    padding: 16px 35px 16px 16px;
     border-radius: @radius;
     -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -29,62 +29,84 @@
     margin-bottom: 16px;
     overflow: hidden;
   }
+  .k-notice-has-icon {
+    padding-left: 45px;
+  }
   .k-notice-title {
-    margin-right: 16px;
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.85);
+    color: @titleColor;
     margin-bottom: 8px;
-    line-height: 24px;
+    line-height: 22px;
+    vertical-align: middle;
     display: inline-block;
   }
+  .k-notice-icon {
+    font-size: 22px;
+    margin-right: 8px;
+    position: absolute;
+    top: 17px;
+    left: 16px;
+  }
+  .k-notoce-desc {
+    font-size: 14px;
+    line-height: 1.5;
+  }
   .k-notice-close {
     position: absolute;
-    right: 22px;
-    top: 16px;
+    right: 12px;
+    top: 13px;
     outline: none;
     cursor: pointer;
-    color: rgba(0, 0, 0, 0.85);
+    color: @color;
     font-size: 14px;
+    display: block;
+    padding: 0 5px;
     &::before {
       content: '\f2c0';
       font-family: Ionicons;
-      color: #999;
     }
-  }
-  .k-notice-info, .k-notice-error, .k-notice-success, .k-notice-warning {
-    .k-notice-notice-content {
-      padding-left: 35px;
-      &::before {
-        position: absolute;
-        left: 22px;
-        top: 17px;
-        font-family: Ionicons;
-        font-size: 24px;
-      }
+    &:hover {
+      color: @danger;
     }
   }
-  .k-notice-info .k-notice-notice-content {
-    &::before {
-      color: @main;
-      content: '\f1a0';
-    }
+  .k-notice-info .k-notice-icon {
+    color: @main;
   }
-  .k-notice-error .k-notice-notice-content {
-    &::before {
-      content: '\f14e';
-      color: @danger;
-    }
+  .k-notice-error .k-notice-icon {
+    color: @danger;
   }
-  .k-notice-success .k-notice-notice-content {
-    &::before {
-      content: '\f14a';
-      color: @success;
-    }
+  .k-notice-success .k-notice-icon {
+    color: @success;
   }
-  .k-notice-warning .k-notice-notice-content {
-    &::before {
-      content: '\f104';
-      color: @warning;
-    }
+  .k-notice-warning .k-notice-icon {
+    color: @warning;
+  }
+}
+
+@keyframes noticeIn {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes noticeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(.5);
   }
+}
+
+.k-notice-slide-enter-active {
+  animation: noticeIn .3s ease;
+}
+
+.k-notice-slide-leave-active {
+  animation: noticeOut .3s ease;
 }
\ No newline at end of file
diff --git a/components/page/styles/index.less b/components/page/styles/index.less
index 5495f98f..8e252f3e 100644
--- a/components/page/styles/index.less
+++ b/components/page/styles/index.less
@@ -26,7 +26,7 @@
             margin-left: -1px;
             cursor: pointer;
             &:hover {
-                background-color: #f5f5f5;
+                background-color: @light;
                 border-color: @main;
             }
             &.active {
diff --git a/components/poptip/poptip.vue b/components/poptip/poptip.vue
index ac6f06ce..8871e4f1 100644
--- a/components/poptip/poptip.vue
+++ b/components/poptip/poptip.vue
@@ -28,7 +28,7 @@ import Button from "../button";
 import docClick from "../_tool/docClick";
 import transferDom from "../_tool/transferDom";
 import emitter from '@/mixins/emitter'
-import resize from '../_tool/winScroll'
+import resize from '../_tool/resize'
 export default {
   compontes: { "k-button": Button },
   directives: { docClick, transferDom, resize },
diff --git a/components/radio/demo/index.vue b/components/radio/demo/index.vue
index 5d11efca..65845a5c 100644
--- a/components/radio/demo/index.vue
+++ b/components/radio/demo/index.vue
@@ -1,5 +1,6 @@
  
\ No newline at end of file
+ 
diff --git a/components/radio/demo/info.md b/components/radio/demo/info.md
new file mode 100644
index 00000000..c5e36ce7
--- /dev/null
+++ b/components/radio/demo/info.md
@@ -0,0 +1,8 @@
+# 单选框
+单选框。
+
+## 何时使用
+- 用于在多个备选项中选中单个状态。
+- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/radio/group.jsx b/components/radio/group.jsx
index a9a9e843..6db943ad 100644
--- a/components/radio/group.jsx
+++ b/components/radio/group.jsx
@@ -1,3 +1,4 @@
+import { getChild } from '../_tool/utils'
 import Radio from './radio.jsx';
 import Button from './button.jsx';
 export default {
@@ -26,7 +27,7 @@ export default {
   },
   render() {
     const { options, $slots, type } = this
-    let kid = $slots.default
+    let kid = getChild($slots.default)
     if (options && options.length) {
       kid = options.map(option => {
         return type == 'button' ? (
diff --git a/components/select/demo/base.md b/components/select/demo/base.md
index b6a1e199..f6b8cc07 100644
--- a/components/select/demo/base.md
+++ b/components/select/demo/base.md
@@ -39,10 +39,5 @@ export default {
     };
   }
 }
-
-
+ 
 ```
\ No newline at end of file
diff --git a/components/select/demo/clearable.md b/components/select/demo/clearable.md
index 35c4115c..38c2e7d5 100644
--- a/components/select/demo/clearable.md
+++ b/components/select/demo/clearable.md
@@ -6,18 +6,31 @@
 ```tpl
 
+
 ```
\ No newline at end of file
diff --git a/components/select/demo/index.vue b/components/select/demo/index.vue
index 1f0218a2..8cd1614e 100644
--- a/components/select/demo/index.vue
+++ b/components/select/demo/index.vue
@@ -1,20 +1,29 @@
  
\ No newline at end of file
+ 
+
\ No newline at end of file
diff --git a/components/select/demo/info.md b/components/select/demo/info.md
new file mode 100644
index 00000000..91b418d2
--- /dev/null
+++ b/components/select/demo/info.md
@@ -0,0 +1,8 @@
+# Select 选择器
+下拉选择器。
+
+## 何时使用
+- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
+- 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/select/demo/m1.md b/components/select/demo/m1.md
deleted file mode 100644
index edd52e57..00000000
--- a/components/select/demo/m1.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-#### 多选
-通过 `clearable` 可控制组件是否显示清除按钮
-
-
-```tpl
-
-```
\ No newline at end of file
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
new file mode 100644
index 00000000..c50fa198
--- /dev/null
+++ b/components/select/demo/multiple.md
@@ -0,0 +1,50 @@
+
+#### 多选
+通过设置 `multiple` 值来呈现多选模式
+
+
+```tpl
+
+ 
+```
\ No newline at end of file
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
new file mode 100644
index 00000000..eff29b9a
--- /dev/null
+++ b/components/select/demo/search.md
@@ -0,0 +1,46 @@
+
+#### 过滤 和 远程搜索
+通过设置 `filterable` 值来呈现多选模式
+
+
+```tpl
+
+ 
+```
\ No newline at end of file
diff --git a/components/select/demo/select.js b/components/select/demo/select.js
deleted file mode 100644
index 7a33c358..00000000
--- a/components/select/demo/select.js
+++ /dev/null
@@ -1,99 +0,0 @@
-let code = {}
-
-code.base=`
-
-
-`
-
-code.size=`
-
-`
-
-code.clearable =`
-
-`
-
-code.search=`
-`
-
-code.disabled=`
-
-`
-
-
-export default code
\ No newline at end of file
diff --git a/components/select/demo/select.vue b/components/select/demo/select.vue
deleted file mode 100644
index fd8588e1..00000000
--- a/components/select/demo/select.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-
-
-
-
diff --git a/components/select/option.jsx b/components/select/option.jsx
index 0c3c6db1..f17683fe 100644
--- a/components/select/option.jsx
+++ b/components/select/option.jsx
@@ -42,7 +42,7 @@ export default {
         _value = groupContext.currentValue
       }
       if (groupContext.multiple) {
-        selected = _value.split(',').indexOf(value) !== -1
+        selected = _value.indexOf(value) !== -1
 
         iconNode = 
       } else {
diff --git a/components/select/select.jsx b/components/select/select.jsx
index e5f7ccef..a057a501 100644
--- a/components/select/select.jsx
+++ b/components/select/select.jsx
@@ -7,12 +7,14 @@ export default {
   props: {
     placeholder: { type: String, default: "请选择" },
     mini: Boolean,
-    multiple: Boolean,
-    transfer: { type: Boolean, default: false },
+    transfer: { type: Boolean, default: true },
     width: [Number, String],
-    value: [String, Number],
+    value: [String, Number, Array],
     clearable: Boolean,
-    disabled: Boolean
+    filterable: Boolean,
+    disabled: Boolean,
+    multiple: Boolean,
+    loading: Boolean
   },
   provide() {
     return {
@@ -21,16 +23,9 @@ export default {
   },
   data() {
     return {
-      visible: false,
-      dropdownWith: 0,
       left: 0,
-      fadeInBottom: false,
       top: 0,
       label: "",
-      children: [],
-      queryCount: 0,
-      selectItem: null,
-
       showDrop: false,
       showDropInit: false,
       currentValue: this.value || ''
@@ -47,45 +42,36 @@ export default {
       }
     }
   },
-  computed: {
-    isclearable() {
-      return this.clearable && !this.disabled && this.label;
-    },
-  },
-
   methods: {
     setLabel() {
-      if (this.$slots.default) {
+      let kid = this.$slots.default
+      if (kid) {
         let Label = this.label || ''
-        let Value = this.value || ''
+        let Value = this.value
         if (this.multiple) {
-          Label = Label ? Label.split(',') : []
-          Value = Value.split(',')
+          Label = []
+          Value = Value || []
         }
-        this.$slots.default.forEach(c => {
-          // console.log(x, this.value)
+        kid.forEach(c => {
           if (c.tag) {
             let { value, label } = c.componentOptions.propsData
-            label = label || c.componentOptions.children[0].text
-
+            label = label || (c.componentOptions.children[0].text || '').trim()
             if (this.multiple) {
-              if (Value.indexOf(value) !== -1) {
-                Label.push(value)
+              if (Value.indexOf(value) >= 0) {
+                Label.push(label)
               }
             } else if (Value === value) {
-              this.label = label
+              Label = label
               return false
             }
           }
         })
-        if (this.multiple) {
-          this.label = Label.map(l => l).join(',')
-        }
+        this.label = Label
       }
     },
-
     clear(e) {
       this.label = ''
+      this.currentValue = ''
       this.$emit("input", "");
       this.$emit("change", {});
       e.stopPropagation()
@@ -95,40 +81,25 @@ export default {
         return false;
       }
 
-      this.test()
+      this.setPosition()
       this.showDrop = !this.showDrop;
       this.showDropInit = true
+      if (this.filterable || ('search' in this.$listeners)) {
+        this.$refs.search.focus()
+      }
     },
-    test() {
+    setPosition() {
       if (!hasProp(this, 'width')) {
         this.width = this.$el.offsetWidth
       }
-
+      let _top = 0, _left = 0;
       if (this.transfer) {
-        let { top, left } = getElementPos(this.$el)
-        this.top = top
-        this.left = left
+        let { top, left, height } = getElementPos(this.$el)
+        _top = top + height + 3
+        _left = left + 1
       } else {
-        this.top = this.$el.offsetHeight + 3
+        _top = this.$el.offsetHeight + 3
       }
-    },
-    setPosition() {
-      let m = 3;
-      let rel = this.$refs.rel;
-      let dom = this.$refs.dom;
-
-      this.dropdownWith = rel.offsetWidth;
-      let relPos = this.getElementPos(rel);
-      let clientH = window.innerHeight;
-      let clientW = window.innerWidth;
-      // console.log(relPos)
-      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-      let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
-
-      let domH = dom.offsetHeight;
-      let relH = rel.offsetHeight;
-      if (this.transfer) this.left = relPos.left + 1 + scrollLeft;
-      //new
       if (clientH - relPos.top - relH - m < domH) {
         //空出来的高度不足以放下dom
         this.fadeInBottom = true;
@@ -137,21 +108,47 @@ export default {
         this.fadeInBottom = false;
         this.top = this.transfer ? relPos.top + relH + m + scrollTop : relH + m;
       }
+      this.top = _top
+      this.left = _left
+    },
+    setPosition1() {
+      // let m = 3;
+      // let rel = this.$refs.rel;
+      // let dom = this.$refs.dom;
+
+      // this.dropdownWith = rel.offsetWidth;
+      // let relPos = this.getElementPos(rel);
+      // let clientH = window.innerHeight;
+      // let clientW = window.innerWidth;
+      // // console.log(relPos)
+      // let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      // let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+
+      // let domH = dom.offsetHeight;
+      // let relH = rel.offsetHeight;
+      // if (this.transfer) this.left = relPos.left + 1 + scrollLeft;
+      // //new
+      // if (clientH - relPos.top - relH - m < domH) {
+      //   //空出来的高度不足以放下dom
+      //   this.fadeInBottom = true;
+      //   this.top = this.transfer ? relPos.top - m - domH + scrollTop : -(domH + m);
+      // } else {
+      //   this.fadeInBottom = false;
+      //   this.top = this.transfer ? relPos.top + relH + m + scrollTop : relH + m;
+      // }
     },
     change(item) {
       let { multiple, value, currentValue } = this
       if (multiple) {
         if (!hasProp(this, 'value')) {
-          value = currentValue
+          value = currentValue || []
         }
-        value = value.split(',')
         let index = value.indexOf(item.value)
         if (index === -1) {
           value.push(item.value)
         } else {
           value.splice(index, 1)
         }
-        value = value.join(',')
       } else {
         value = item.value
       }
@@ -159,15 +156,14 @@ export default {
         if (!multiple)
           this.label = item.label
         else {
-          let Label = this.label || ''
-          Label = Label ? Label.split(',') : []
+          let Label = this.label || []
           let index = Label.indexOf(item.label)
           if (index === -1) {
             Label.push(item.label)
           } else {
             Label.splice(index, 1)
           }
-          this.label = Label.map(l => l).join(',')
+          this.label = Label
         }
         this.currentValue = value
       }
@@ -176,34 +172,25 @@ export default {
       this.$emit("change", item);
       if (!multiple)
         this.showDrop = false
-
-
-      this.$nextTick(e => this.test());
+      this.$nextTick(e => this.setPosition());
     },
-    removeTag(l) {
-      let label = this.label.split(',')
-      let index = label.indexOf(l)
-      if (index === -1) {
-        label.push(item.label)
-      } else {
-        label.splice(index, 1)
-      }
-      this.label = label.map(l => l).join(',')
+    removeTag(e, i) {
+      let values = this.value || this.currentValue || []
+      let labels = this.label || []
+      this.change({ value: values[i], label: labels[i] })
+      setTimeout(e => this.setPosition(), 250)
+      e.stopPropagation()
     },
-    getCloseIcon(child){
-      console.log(child)
-      return 

-    }
   },
   mounted() {
-    this.setLabel()
+    this.$nextTick(e => this.setLabel())
   },
   render() {
     // console.log(h)
     let { disabled, mini, multiple,
       width, top, left, showDrop, showDropInit, $slots, placeholder,
       clear, removeTag,
-      clearable, label, value, toggleDrop, transfer } = this
+      clearable, label, toggleDrop, transfer } = this
     const classes = [
       "k-select",
       {
@@ -229,26 +216,29 @@ export default {
       // style["transform-origin"] = "center bottom 0px";
     }
     const empty = (
-      
暂无数据

+      !$slots.default
+        ? 
暂无数据

+        : null
     )
     const drop = (
       showDropInit ? 

         
    
           {$slots.default}
-          {/* 
  • 暂无数据...
    •  */}
+          {empty}
         

       
 : null
     )
-
-    const placeNode = (placeholder && !label
+    label = multiple ? (label || []) : label
+    const placeNode = (placeholder && (!label || !label.length)
       ? 
{placeholder}

       : null
     )
+    const tags = multiple ? label.map((c, i) => {c} removeTag(e, i)} />) : null
+
     const labelsNode = (multiple
       ? (
         

-          {label && (label.split(',')).map(c => {c}removeTag(c)} />)}
-          
+          {tags}
         

       )
       : 
{label}

@@ -261,9 +251,9 @@ export default {
         

           {placeNode}
           {labelsNode}
-          {/*  */}
-          {!multiple ?  : null}
+          {}
           {clearNode}
+          {this.filterable ?  : null}
         

         
           {drop}
diff --git a/components/select/styles/index.less b/components/select/styles/index.less
index 82933773..108f1832 100644
--- a/components/select/styles/index.less
+++ b/components/select/styles/index.less
@@ -26,14 +26,17 @@
     position: relative;
   }
   .k-select-labels {
-    padding: 5px 0 0 0;
+    padding: 3px 32px 0 0;
+    overflow: hidden;
     .k-select-tag {
       padding: 2px 22px 2px 5px;
       border: 1px solid @borderColor;
       border-radius: @radius;
-      margin: 0 0 5px 5px;
+      margin: 0 0 3px 5px;
       float: left;
       position: relative;
+      line-height: 18px;
+      overflow: hidden;
       .k-ion-ios-close {
         position: absolute;
         right: 3px;
@@ -43,21 +46,26 @@
         display: block;
         top: 50%;
         transform: translateY(-50%);
+        &:hover {
+          color: @danger;
+        }
       }
     }
-    .k-select-search {
-      border: none;
-      width: 0.75em;
-      height: 20px;
-      line-height: 20px;
-      vertical-align: middle;
-      margin-left: 5px;
-      margin-top: -5px;
-      padding: 0;
-      &:focus {
-        // border: none;
-        outline: none;
-      }
+  }
+  .k-select-search {
+    border: none;
+    width: 0.75em;
+    height: 20px;
+    padding: 0;
+    left: 5px;
+    top:50%;
+    background: none;
+    transform: translateY(-50%);
+    z-index: 10;
+    position: absolute;
+    &:focus {
+      // border: none;
+      outline: none;
     }
   }
   .k-select-placeholder {
@@ -95,49 +103,31 @@
   }
   .k-select-arrow {
     font-size: 18px;
-    position: absolute; //   border-left: 1px solid #ddd;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 32px;
-    line-height: 30px;
-    // background: #fff;
-    -moz-box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    line-height: 1;
     box-sizing: border-box;
-    text-align: center;
-    pointer-events: none;
+    transform: translateY(-50%) rotate(0deg);
+    transform-origin: center;
+    transition: transform .3s ease-in-out;
     &:after {
-      transition: all .3s ease-in-out;
-      position: absolute;
       content: '\F3D0';
       font-family: Ionicons;
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 32px;
-      line-height: 32px;
-      transform: rotate(0deg);
     }
   }
   .k-select-clearable {
     position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    line-height: 30px;
-    height: 100%;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
     display: none;
-    // background: #fff;
+    color: #999;
+    font-size: 15px;
+    background: #fff;
     &::before {
       content: "\f14e";
       font-family: Ionicons;
-      font-size: 15px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      text-align: center;
-      color: #999;
-      width: 100%;
     }
     &:hover {
       &::before {
@@ -185,7 +175,7 @@
     cursor: pointer;
     position: relative;
     &:hover {
-      background: #f5f5f5;
+      background: @light;
     }
     [class^="k-ion"], [class*=" k-ion"] {
       position: absolute;
@@ -201,10 +191,11 @@
     }
   }
   .k-select-item-selected {
-    background: @main;
-    color: #fff;
+    background: @light;
+    color: @main;
+    font-weight: 500;
     &:hover {
-      background: @main;
+      background: @light;
     }
     [class^="k-ion"], [class*=" k-ion"] {
       display: block;
@@ -233,15 +224,8 @@
     min-height: 25px;
   }
   .k-select-arrow {
-    line-height: 23px;
-    height: 23px;
-    width: 23px;
     font-size: 12px;
-    &::after {
-      line-height: 23px;
-      height: 23px;
-      width: 23px;
-    }
+    right: 8px;
   }
   .k-select-label {
     line-height: 23px;
@@ -249,19 +233,16 @@
     padding-right: 23px;
   }
   .k-select-clearable {
-    // top: 7px;
-    // right: 7px;
-    width: 23px;
-    line-height: 23px;
+    right: 9px;
     &::before {
       font-size: 12px;
     }
   }
   .k-select-labels {
-    padding: 2px 0 0 0;
+    padding: 2px 23px 0 0;
     .k-select-tag {
       padding: 2px 22px 2px 5px;
-      margin: 0 0 4px 4px;
+      margin: 0 0 3px 4px;
       line-height: 1;
       .k-ion-ios-close {
         right: 3px;
@@ -285,9 +266,7 @@
     box-shadow: 0 0 5px fade(@main, 75%);
   }
   .k-select-arrow {
-    &:after {
-      transform: rotate(180deg);
-    }
+    transform: translateY(-50%) rotate(180deg);
   }
 }
 
@@ -314,4 +293,34 @@
       display: none;
     }
   }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+}
+
+.k-select-tag-enter-active {
+  animation: zoomIn .2s ease-out;
+}
+
+.k-select-tag-leave-active {
+  animation: zoomOut .2s ease-out;
 }
\ No newline at end of file
diff --git a/components/styles.js b/components/styles.js
index 70abbe24..f5d5dbda 100644
--- a/components/styles.js
+++ b/components/styles.js
@@ -24,6 +24,7 @@ import './modal/styles';
 import './message/styles';
 import './message/styles';
 import './menu/styles';
+import './notice/styles';
 import './page/styles';
 import './poptip/styles';
 import './radio/styles';
diff --git a/components/styles/global.less b/components/styles/global.less
index 40511fd1..c315b02f 100644
--- a/components/styles/global.less
+++ b/components/styles/global.less
@@ -5,9 +5,13 @@
 @success: #00bb5d;
 @danger: #ff3300;
 @warning: #ffa500;
-@gray: #969696;
 @purple: #c13aff;
+@gray: #969696;
+@light: #f5f5f5;
 @dark: rgba(0, 0, 0, .75);
+@color: rgba(0, 0, 0, .75);
+@titleColor:rgba(0, 0, 0, .85);
+@maskColor:rgba(0, 0, 0, .6);
 @radius: ~'2px';
 @borderColor: #ddd;
 @disableBorder: #d0d0d0;
@@ -17,14 +21,12 @@
 //   background: @main;
 //   color: #fff;
 // }
-
 // *, :after, :before {
 //   box-sizing: border-box;
 //   margin: 0;
 //   -webkit-tap-highlight-color: transparent;
 //   outline: none;
 // }
-
 //下拉动画
 @keyframes dropDownIn {
   0% {
@@ -68,45 +70,9 @@
   }
 }
 
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-  }
-}
 
-@keyframes fadeOutRight {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-}
 
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-  }
-}
 
-@keyframes fadeOutLeft {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-}
 
 @keyframes fadeIn {
   from {
@@ -147,62 +113,9 @@
     filter: blur(5px)
   }
 }
+ 
+ 
 
-@keyframes loadloop {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0)
-  }
-  50% {
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg)
-  }
-  to {
-    -webkit-transform: rotate(1turn);
-    transform: rotate(1turn)
-  }
-}
-
-.zoomInX, .zoomOutX {
-  &.animated {
-    animation-duration: .3s;
-  }
-}
-
-@keyframes zoomInX {
-  from {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-    filter: blur(5px)
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomOutX {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-    filter: blur(5px)
-  }
-}
-
-.zoomInX {
-  animation-name: zoomInX;
-}
-
-.zoomOutX {
-  animation-name: zoomOutX;
-}
-
-.k-load-loop {
-  -webkit-animation: loadloop 1s linear infinite;
-  animation: loadloop 1s linear infinite
-}
 
 .fadeease-enter-active {
   animation: fadeEaseIn .3s;
diff --git a/components/switch/demo/base.md b/components/switch/demo/base.md
index ac69d935..43c19c32 100644
--- a/components/switch/demo/base.md
+++ b/components/switch/demo/base.md
@@ -10,9 +10,7 @@
     
     
     

-    

     
-
   
 
  
\ No newline at end of file
+ 
+
\ No newline at end of file
diff --git a/components/switch/demo/info.md b/components/switch/demo/info.md
new file mode 100644
index 00000000..dace5e41
--- /dev/null
+++ b/components/switch/demo/info.md
@@ -0,0 +1,8 @@
+# Switch 开关
+开关选择器。
+
+## 何时使用
+- 需要表示开关状态/两种状态之间的切换时；
+- 和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 565af087..f2dc3d61 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -1,6 +1,6 @@
 
 #### 文字 / 图标
-通过 `true-text` 和 `false-text` 设置选中和非选中呈现文字, 通过设置 `slot` 为 `(true|false)` 控制内容
+通过 `true-text` 和 `false-text` 设置选中和非选中呈现文字, 通过设置 `slot` 为 `(checked|unchecked)` 控制内容
 
 
 ```tpl
diff --git a/components/table/table.vue b/components/table/table.vue
index 5688652b..35af3a91 100644
--- a/components/table/table.vue
+++ b/components/table/table.vue
@@ -84,7 +84,6 @@ import { Checkbox } from "../checkbox";
 import Input from "../input";
 import Tooltip from "../tooltip";
 import Expand from "./expand.js";
-// import scroll from '../_tool/winScroll.js'
 let copyData = (data) => {
   const t = Object.prototype.toString.call(data)
   let o = t === '[object Array]' ? [] : (t === '[object Object]' ? {} : data)
diff --git a/components/tabs/tabs.vue b/components/tabs/tabs.vue
index a4faef1a..70cb5b32 100644
--- a/components/tabs/tabs.vue
+++ b/components/tabs/tabs.vue
@@ -31,7 +31,7 @@
 
  
\ No newline at end of file
diff --git a/components/timeline/demo/info.md b/components/timeline/demo/info.md
new file mode 100644
index 00000000..bef6ca87
--- /dev/null
+++ b/components/timeline/demo/info.md
@@ -0,0 +1,10 @@
+# 时间轴
+垂直展示的时间流信息。
+
+## 何时使用
+在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
+
+- 当有一系列信息需按时间排列时，可正序和倒序。
+- 需要有一条时间轴进行视觉上的串联时。。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/timeline/demo/mode.md b/components/timeline/demo/mode.md
new file mode 100644
index 00000000..03187703
--- /dev/null
+++ b/components/timeline/demo/mode.md
@@ -0,0 +1,34 @@
+
+#### 呈现方向
+指定 `mode` 可以改变呈现方向
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/timeline/index.js b/components/timeline/index.js
index d840f5e2..c2785d11 100644
--- a/components/timeline/index.js
+++ b/components/timeline/index.js
@@ -1,5 +1,5 @@
-import TimeLine from './timeline';
-import TimeLineItem from './timelineitem';
+import TimeLine from './timeline.jsx';
+import TimeLineItem from './timelineitem.jsx';
 
 
 export { TimeLine, TimeLineItem } 
\ No newline at end of file
diff --git a/components/timeline/index.md b/components/timeline/index.md
new file mode 100644
index 00000000..ec3261fd
--- /dev/null
+++ b/components/timeline/index.md
@@ -0,0 +1,7 @@
+### API
+| 属性    | 说明            | 类型     | 默认值 |
+|-------|---------------|--------|-----|
+| icon  | 时间轴 `item` 图标 | String | -   |
+| color | 时间轴 `item` 图标颜色 | String | -   |
+| dot   | 自定义时间轴点       | slot   | -   |
+| mode| 通过设置 `mode` 可以改变时间轴和内容的相对位置	`left` \| `alternate` \| `right`	|String|left|
\ No newline at end of file
diff --git a/components/timeline/styles/index.less b/components/timeline/styles/index.less
index 330390bc..4551104d 100644
--- a/components/timeline/styles/index.less
+++ b/components/timeline/styles/index.less
@@ -1,37 +1,96 @@
 @import '../../styles/global.less';
 .k-timeline {
-   background-color: #fff;
-   font-size: 13px;
-   overflow: hidden;
-   position: relative;
-   z-index: 1;
-   .k-time-line-item {
-      position: relative;
-      &:not(:last-child):before {
-         position: absolute;
-         width: 1px;
-         background: #ddd;
-         left: 7px;
-         content: "";
-         height: 100%;
-         top: 5px;
-      }
-   }
-   .k-time-line-dot {
+  background-color: #fff;
+  font-size: 13px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  .k-time-line-item {
+    position: relative;
+    &:before {
       position: absolute;
-      background: #fff;
-      top: 0;
-      left: 1px;
-      font-size: 16px;
-      width: auto;
-      height: 16px;
-      line-height: 16px;
-      color: @main;
-   }
-   .k-time-line-item-content {
-      padding: 1px 1px 10px 24px;
-      font-size: 12px;
-      position: relative;
-      top: 0;
-   }
+      width: 1px;
+      background: @borderColor;
+      left: 7px;
+      content: "";
+      height: 100%;
+      top: 8px;
+    }
+    &:last-child:before {
+      display: none;
+    }
+  }
+  .k-time-line-dot {
+    position: absolute;
+    background: #fff;
+    top: 4px;
+    left: 1px;
+    font-size: 16px;
+    color: @main;
+    line-height: 1;
+    border-radius: 50%;
+  }
+  .k-time-line-icon-default {
+    font-size: 12px;
+    left: 2.5px;
+    top: 5.5px;
+  }
+  .k-time-line-item-content {
+    padding: 0 0 20px 18px;
+    font-size: 13px;
+    position: relative;
+    line-height: 22px;
+    top: 0;
+    box-sizing: border-box;
+  }
+}
+
+.k-timeline-center {
+  width: 100%;
+  display: inline-block;
+  .k-time-line-item {
+    width: 50%;
+    &:nth-child(odd) {
+      left: 50%;
+      margin-left: -8px;
+    }
+    &:nth-child(even) {
+      text-align: right;
+      .k-time-line-dot {
+        left: 100%;
+        transform: translateX(-50%);
+      }
+      .k-time-line-item-content {
+        padding: 0 12px 20px 0;
+      }
+      &:before {
+        left: 100%;
+        margin-left: -1px;
+        z-index: 0;
+      }
+    }
+  }
+}
+
+.k-timeline-right {
+  text-align: right;
+  .k-time-line-item {
+    &:before {
+      left: 100%;
+      margin-left: -7px;
+    }
+  }
+  .k-time-line-dot {
+    left: 100%;
+    margin-left: -13px;
+  }
+  .k-time-line-icon-default {
+    margin-left: -11px;
+  }
+  .k-time-line-item-content {
+    padding-right: 18px
+  }
 }
\ No newline at end of file
diff --git a/components/timeline/timeline.jsx b/components/timeline/timeline.jsx
new file mode 100644
index 00000000..2bb71719
--- /dev/null
+++ b/components/timeline/timeline.jsx
@@ -0,0 +1,16 @@
+
+export default {
+  name: "TimeLine",
+  props: {
+    mode: { type: String, default: 'left' }
+  },
+  render() {
+    const classes = ['k-timeline', `k-timeline-${this.mode}`]
+    return (
+      
    
+        {this.$slots.default}
+      

+    )
+  }
+};
+
diff --git a/components/timeline/timeline.vue b/components/timeline/timeline.vue
deleted file mode 100644
index 539f8b95..00000000
--- a/components/timeline/timeline.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/components/timeline/timelineitem.jsx b/components/timeline/timelineitem.jsx
new file mode 100644
index 00000000..6cbd5777
--- /dev/null
+++ b/components/timeline/timelineitem.jsx
@@ -0,0 +1,26 @@
+import Icon from '../icon'
+export default {
+  name: "TimeLineItem",
+  props: {
+    color: String,
+    icon: String
+  },
+  render() {
+    const styles = { color: this.color }
+    let { icon } = this
+    const type = icon ? icon : "ios-radio-button-off";
+    const iconNode = this.$slots.dot || 
+    const iconCls = ['k-time-line-dot', { 'k-time-line-icon-default': !icon }]
+
+    return (
+      
  • 
+        
    
+          {iconNode}
+        
    
+        
    
+          {this.$slots.default}
+        
    
+      
    • 
+    )
+  }
+};
\ No newline at end of file
diff --git a/components/timeline/timelineitem.vue b/components/timeline/timelineitem.vue
deleted file mode 100644
index 470cb6d8..00000000
--- a/components/timeline/timelineitem.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index b96ab1a5..652c333f 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -16,7 +16,7 @@
  
\ No newline at end of file
diff --git a/docs/router.js b/docs/router.js
index 39195d26..cfc6cecb 100644
--- a/docs/router.js
+++ b/docs/router.js
@@ -21,11 +21,11 @@ let components = [
     //     { path: 'affix', component: () => import(/*webpackChunkName:'affix'*/'../components/affix/demo'), },
     //     { path: 'angular-kui', component: () => import(/*webpackChunkName:'angular-kui'*/'../components/angular-kui'), },
     { path: 'card', component: () => import(/*webpackChunkName:'card'*/'../components/card/demo'), },
-    //     { path: 'carousel', component: () => import(/*webpackChunkName:'carousel'*/'../components/carousel/demo'), },
-    //     { path: 'collapse', component: () => import(/*webpackChunkName:'collapse'*/'../components/collapse/demo'), },
+    { path: 'carousel', component: () => import(/*webpackChunkName:'carousel'*/'../components/carousel/demo'), },
+    { path: 'collapse', component: () => import(/*webpackChunkName:'collapse'*/'../components/collapse/demo'), },
     //     { path: 'colorpicker', component: () => import(/*webpackChunkName:'colorpicker'*/'../components/colorpicker'/demo), },
     //     { path: 'color', component: () => import(/*webpackChunkName:'color'*/'../components/color/demo'), },
-        { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'../components/checkbox/demo'), },
+    { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'../components/checkbox/demo'), },
     { path: 'button', component: () => import(/*webpackChunkName:'button'*/'../components/button/demo'), },
     { path: 'breadcrumb', component: () => import(/*webpackChunkName:'breadcrumb'*/'../components/breadcrumb/demo'), },
     //     { path: 'backtop', component: () => import(/*webpackChunkName:'backtop'*/'../components/backtop'/demo), },
@@ -43,22 +43,22 @@ let components = [
     //     { path: 'log', component: () => import(/*webpackChunkName:'log'*/'../components/log/demo'), },
     { path: 'layout', component: () => import(/*webpackChunkName:'layout'*/'../components/layout/demo'), },
     //     { path: 'loading', component: () => import(/*webpackChunkName:'loading'*/'../components/loading/demo'), },
-    //     { path: 'message', component: () => import(/*webpackChunkName:'message'*/'../components/message/demo'), },
+    { path: 'message', component: () => import(/*webpackChunkName:'message'*/'../components/message/demo'), },
     //     { path: 'modal', component: () => import(/*webpackChunkName:'modal'*/'../components/modal/demo'), },
     //     { path: 'menu', component: () => import(/*webpackChunkName:'menu'*/'../components/menu'/demo), },
-    //     { path: 'notice', component: () => import(/*webpackChunkName:'notice'*/'../components/notice/demo'), },
-        { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'../components/radio/demo'), },
+    { path: 'notice', component: () => import(/*webpackChunkName:'notice'*/'../components/notice/demo'), },
+    { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'../components/radio/demo'), },
     //     { path: 'react-kui', component: () => import(/*webpackChunkName:'react-kui'*/'../components/react-kui/demo'), },
-        { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
+    { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
     //     { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'../components/ssr/demo'), },
-        { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'../components/switch/demo'), },
+    { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'../components/switch/demo'), },
     //     { path: 'start', component: () => import(/*webpackChunkName:'start'*/'../components/start/demo'), },
     //     { path: 'steps', component: () => import(/*webpackChunkName:'steps'*/'../components/steps/demo'), },
     //     { path: 'sponsor', component: () => import(/*webpackChunkName:'sponsor'*/'../components/sponsor/demo'), },
     //     { path: 'table', component: () => import(/*webpackChunkName:'table'*/'../components/table/demo'), },
     { path: 'tag', component: () => import(/*webpackChunkName:'tag'*/'../components/tag/demo'), },
     //     { path: 'tabs', component: () => import(/*webpackChunkName:'tabs'*/'../components/tabs/demo'), },
-    //     { path: 'timeline', component: () => import(/*webpackChunkName:'timeline'*/'../components/timeline/demo'), },
+    { path: 'timeline', component: () => import(/*webpackChunkName:'timeline'*/'../components/timeline/demo'), },
     //     { path: 'tooltip', component: () => import(/*webpackChunkName:'tooltip'*/'../components/tooltip/demo'), },
     //     { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'../components/theme/demo'), },
     //     { path: 'tree', component: () => import(/*webpackChunkName:'tree'*/'../components/tree/demo'), },
-- 
Gitee


From 050a94c2ba06a2b8eb5861778613bcabb03bb76a Mon Sep 17 00:00:00 2001
From: chuchur 
Date: Mon, 9 Dec 2019 00:21:47 +0800
Subject: [PATCH 04/15] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E7=B3=BB=E5=88=97=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.dev.conf.js                  |    2 +-
 components/_tool/animate.js                |   45 +
 components/_tool/outsiteclick.js           |   14 +
 components/_tool/transfer.js               |    9 +-
 components/_tool/utils.js                  |    6 +-
 components/alert/alert.jsx                 |    2 +-
 components/alert/styles/index.less         |   10 +-
 components/badge/demo/index.vue            |    2 +-
 components/breadcrumb/styles/index.less    |    2 +-
 components/button/button.jsx               |    2 +
 components/button/demo/index.vue           |    4 +-
 components/button/styles/index.less        |   24 +-
 components/card/demo/index.vue             |    2 +-
 components/checkbox/checkbox.jsx           |    4 +-
 components/checkbox/demo/index.vue         |    2 +-
 components/checkbox/styles/index.less      |   33 +-
 components/collapse/demo/index.vue         |    2 +-
 components/datePicker/Untitled-1.vue       |   74 +
 components/datePicker/datecalendar.jsx     |  335 +++
 components/datePicker/demo/base.md         |   33 +
 components/datePicker/demo/index.vue       |   16 +
 components/datePicker/demo/info.md         |    7 +
 components/datePicker/index.js             |    4 +-
 components/datePicker/index.md             |   14 +
 components/datePicker/styles/calendar.less |  351 ++-
 components/dropdown/styles/index.less      |   16 +-
 components/grid/demo/index.vue             |    4 +-
 components/icon/demo/index.vue             |    4 +-
 components/icon/demo/info.md               |    2 +
 components/icon/demo/search.vue            |   43 +-
 components/icon/dist.json                  |    1 +
 components/icon/fonts/ionicons.eot         |  Bin 112662 -> 0 bytes
 components/icon/fonts/ionicons.svg         | 2090 --------------
 components/icon/fonts/ionicons.ttf         |  Bin 112484 -> 0 bytes
 components/icon/fonts/ionicons.woff        |  Bin 65916 -> 0 bytes
 components/icon/fonts/ionicons.woff2       |  Bin 50556 -> 0 bytes
 components/icon/icon.jsx                   |   19 +-
 components/icon/styles/index.less          | 2840 +-------------------
 components/input/demo/icon.md              |    2 +-
 components/input/demo/index.vue            |    2 +-
 components/input/input.jsx                 |    3 +-
 components/input/styles/index.less         |   67 +-
 components/menu/styles/index.less          |    2 +-
 components/message/demo/index.vue          |    2 +-
 components/message/notice.jsx              |    4 +-
 components/message/styles/index.less       |   10 +-
 components/notice/demo/index.vue           |    2 +-
 components/notice/styles/index.less        |    8 +-
 components/radio/demo/index.vue            |    2 +-
 components/select/demo/base.md             |    8 +-
 components/select/demo/filterable.md       |   52 +
 components/select/demo/index.vue           |   12 +-
 components/select/demo/search.md           |   82 +-
 components/select/index.md                 |   34 +-
 components/select/option.jsx               |    8 +-
 components/select/select.jsx               |  345 ++-
 components/select/styles/index.less        |  161 +-
 components/styles.js                       |    4 +-
 components/styles/global.less              |    2 +-
 components/switch/demo/index.vue           |    2 +-
 components/switch/styles/index.less        |    2 +-
 components/tag/styles/index.less           |   95 +-
 components/tag/tag.jsx                     |    3 +-
 components/timeline/demo/index.vue         |    2 +-
 components/timeline/styles/index.less      |   12 +-
 docs/components/header.vue                 |   54 +
 docs/components/index.vue                  |    2 +-
 docs/index.html                            |    3 +-
 docs/index.vue                             |   84 +-
 docs/layout.vue                            |   32 +-
 docs/main.js                               |   32 +-
 docs/menu.js                               |  112 +-
 docs/router.js                             |   50 +-
 docs/wave.js                               |  238 ++
 package.json                               |   26 +-
 75 files changed, 1878 insertions(+), 5701 deletions(-)
 create mode 100644 components/_tool/animate.js
 create mode 100644 components/_tool/outsiteclick.js
 create mode 100644 components/datePicker/Untitled-1.vue
 create mode 100644 components/datePicker/datecalendar.jsx
 create mode 100644 components/datePicker/demo/base.md
 create mode 100644 components/datePicker/demo/index.vue
 create mode 100644 components/datePicker/demo/info.md
 create mode 100644 components/datePicker/index.md
 create mode 100644 components/icon/dist.json
 delete mode 100755 components/icon/fonts/ionicons.eot
 delete mode 100755 components/icon/fonts/ionicons.svg
 delete mode 100755 components/icon/fonts/ionicons.ttf
 delete mode 100755 components/icon/fonts/ionicons.woff
 delete mode 100755 components/icon/fonts/ionicons.woff2
 create mode 100644 components/select/demo/filterable.md
 create mode 100644 docs/components/header.vue
 create mode 100644 docs/wave.js

diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index c04532d0..c636ea78 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -42,7 +42,7 @@ module.exports = merge(webpackBaseConfig, {
   performance: {
     hints: false,
   },
-  // devtool: '#source-map',
+  devtool: '#source-map',
   plugins: [
     new HtmlWebpackPlugin({
       favicon: './docs/assets/favicon.png',
diff --git a/components/_tool/animate.js b/components/_tool/animate.js
new file mode 100644
index 00000000..ef283186
--- /dev/null
+++ b/components/_tool/animate.js
@@ -0,0 +1,45 @@
+const timing = {
+  linear: function (timeFraction) {
+    return timeFraction
+  },
+  quad: function (timeFraction) {
+    return Math.pow(timeFraction, 2) //值越大 起步慢,但是加速度块
+  },
+  circ: function (timeFraction) { //匀加速
+    return 1 - Math.sin(Math.acos(timeFraction)); 
+  },
+  back:function(x, timeFraction) { // 回弹
+    return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
+  },
+  bounce(timeFraction) { //跳跳球
+    for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      if (timeFraction >= (7 - 4 * a) / 11) {
+        return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+      }
+    }
+  },
+  elastic:function(x, timeFraction) {  //悠悠
+    return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
+  }
+}
+export default function animate(options) {
+  window.requestAnimationFrame = window.requestAnimationFrame || function (fn) { return setTimeout(fn, 1000 / 60) }
+  window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+  var start = new Date()
+  options = Object.assign({
+    duration: 300,
+    timing: function (timeFraction) {
+      return timeFraction//Math.pow(timeFraction, 5)
+    }
+  }, options)
+  requestAnimationFrame(function animate(time) {
+    var timeFraction = (new Date() - start) / options.duration;
+    if (timeFraction > 1) timeFraction = 1;
+    var progress = options.timing(timeFraction)
+    // progress=
+    options.draw(progress);
+    if (timeFraction < 1 && timeFraction > 0) {
+      requestAnimationFrame(animate);
+    }
+  });
+}
\ No newline at end of file
diff --git a/components/_tool/outsiteclick.js b/components/_tool/outsiteclick.js
new file mode 100644
index 00000000..c3f86ff9
--- /dev/null
+++ b/components/_tool/outsiteclick.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+const SSR = Vue.prototype.$isServer
+export default {
+  bind(el, { value }) {
+    if (SSR) return;
+    if (typeof value == 'function') {
+      document.addEventListener('click', value)
+    }
+  },
+  unbind(el, { value }) {
+    if (typeof value == 'function')
+      document.removeEventListener('click', value)
+  }
+}
\ No newline at end of file
diff --git a/components/_tool/transfer.js b/components/_tool/transfer.js
index 1615206f..045255f4 100644
--- a/components/_tool/transfer.js
+++ b/components/_tool/transfer.js
@@ -5,18 +5,19 @@ export default {
       const parentNode = el.parentNode
       if (!parentNode) return false;
 
-      let empty = document.createComment('')
+      // let empty = document.createComment('')
       let box = document.createElement('div')
       box.style.top = 0
       box.style.left = 0
       box.style.width = '100%'
       box.style.position = 'absolute'
-      parentNode.replaceChild(empty, el)
+      let height = el.offsetHeight
+
+      // parentNode.replaceChild(empty, el)
       box.appendChild(el)
       document.body.appendChild(box)
-
       if (!el.__data) {
-        el.__data = { parentNode, empty, box }
+        el.__data = { parentNode, box, height }
       }
     }
   },
diff --git a/components/_tool/utils.js b/components/_tool/utils.js
index ff0bb0ab..4d528586 100644
--- a/components/_tool/utils.js
+++ b/components/_tool/utils.js
@@ -1,10 +1,14 @@
 export function isEmptyNode(vnode = {}) {
-  return !(vnode.tag || (vnode.text && vnode.text.trim().length))
+  return !(vnode.eml || vnode.tag || (vnode.text && vnode.text.trim().length))
 }
 export function getChild(child = []) {
   return child.filter(c => !isEmptyNode(c))
 }
 
+export function isNotEmpty(str) {
+  return str !== '' && str !== undefined && str !== null
+}
+
 export function hasProp(context, key) {
   const options = context.$options || {}
   const props = options.propsData || {}
diff --git a/components/alert/alert.jsx b/components/alert/alert.jsx
index 1439009d..6b4758fc 100644
--- a/components/alert/alert.jsx
+++ b/components/alert/alert.jsx
@@ -40,7 +40,7 @@ export default {
       warning: "ios-alert"
     };
     const iconNode = showIcon ?  : null
-    const closeIcon = closable ?  : null
+    const closeIcon = closable ?  : null
       description = 
    {description}
    
     const msg = 
    {(message || $slots.default)}
    
     const aniprop = getTranstionProp('k-alert-slide')
diff --git a/components/alert/styles/index.less b/components/alert/styles/index.less
index b1a889aa..1248fc96 100644
--- a/components/alert/styles/index.less
+++ b/components/alert/styles/index.less
@@ -15,7 +15,7 @@
       color: @warning;
       position: absolute;
       top: 8px;
-      left: 15px;
+      left: 10px;
       font-size: 20px;
    }
 }
@@ -54,18 +54,14 @@
 }
 
 .k-alert-close {
-   font-size: 12px;
+   font-size: 16px;
    position: absolute;
-   right: 8px;
+   right: 4px;
    top: 8px;
    cursor: pointer;
    text-decoration: none;
    color: @color;
    padding: 0px 5px;
-   &::before {
-      content: '\f2c0';
-      font-family: Ionicons;
-   }
    &:hover {
       text-decoration: none;
       color: @danger;
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index 5943233b..b1560179 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -14,7 +14,7 @@ export default {
         
         
         
-        
+        
       
     )
   }
diff --git a/components/breadcrumb/styles/index.less b/components/breadcrumb/styles/index.less
index 44551e64..b441e063 100644
--- a/components/breadcrumb/styles/index.less
+++ b/components/breadcrumb/styles/index.less
@@ -9,7 +9,7 @@
   color: rgba(0, 0, 0, .45);
   font-size: 14px;
   .k-breadcrumb-item {
-    [class^="k-ion"]{
+    .k-icon{
       margin-right: 4px;
     }
     &:hover {
diff --git a/components/button/button.jsx b/components/button/button.jsx
index 4eead507..b8c9181b 100644
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -10,6 +10,7 @@ export default {
       }
     },
     icon: String,
+    block: Boolean,
     mini: { type: Boolean, default: false },
     large: { type: Boolean, default: false },
     loading: Boolean,
@@ -34,6 +35,7 @@ export default {
         {
           [`k-btn-${type}`]: !!type,
           ["k-btn-mini"]: !!mini,
+          ["k-btn-block"]: !!this.block,
           ["k-btn-loading"]: loading,
           ["k-btn-icon-only"]: onlyIcon,
           ["k-btn-lg"]: !!large && !mini,
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 0b86ae92..61ed3dd7 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -11,14 +11,14 @@ export default {
   render() {
     return (
       
    
-        
+        
         
         
         
         
         
         
-        
+        
       
    
     )
   }
diff --git a/components/button/styles/index.less b/components/button/styles/index.less
index d7dde117..13b9d683 100644
--- a/components/button/styles/index.less
+++ b/components/button/styles/index.less
@@ -12,7 +12,7 @@
   user-select: none;
   z-index: 9;
   outline: none;
-  border:1px solid transparent;
+  border: 1px solid transparent;
   &:hover {
     opacity: .8;
     zoom: 0%;
@@ -20,9 +20,18 @@
   &:active {
     opacity: 1;
   }
-  &>[class^="k-ion"] +span, span +[class^="k-ion"] {
-    margin-left: 8px;
+  &>.k-icon +span, span +.k-icon {
+    margin-left: 4px;
   }
+  .k-icon {
+    font-size: 16px;
+    vertical-align: middle;
+    margin-top: -2px;
+  }
+}
+
+.k-btn-block {
+  width: 100%;
 }
 
 .k-btn-default {
@@ -49,6 +58,9 @@
   line-height: 23px;
   font-size: 12px;
   padding: 0 8px;
+  [class^="k-ion"] {
+    font-size: 12px;
+  }
 }
 
 .k-btn-lg {
@@ -56,6 +68,9 @@
   line-height: 38px;
   font-size: 14px;
   padding: 0 15px;
+  .k-icon {
+    font-size: 20px;
+  }
 }
 
 .k-btn-circle {
@@ -76,6 +91,9 @@
   background: none;
   border: none !important;
   color: @main;
+  &[disabled='disabled']{
+    background: none;
+  }
 }
 
 .k-btn-danger {
diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue
index d17d08b7..44a934af 100644
--- a/components/card/demo/index.vue
+++ b/components/card/demo/index.vue
@@ -10,7 +10,7 @@ export default {
         
         
         
-        
+        
       
     )
   }
diff --git a/components/checkbox/checkbox.jsx b/components/checkbox/checkbox.jsx
index a15e09d9..1c586228 100644
--- a/components/checkbox/checkbox.jsx
+++ b/components/checkbox/checkbox.jsx
@@ -1,4 +1,5 @@
 import { hasProp } from '../_tool/utils'
+import Icon from '../icon'
 export default {
   name: "Checkbox",
   props: {
@@ -63,10 +64,11 @@ export default {
         ["k-checkbox-indeterminate"]: indeterminate
       }
     ];
+    let inner = checked ?  : null
     return (
           
     )
diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue
index f412e3ed..03f3167a 100644
--- a/components/timeline/demo/index.vue
+++ b/components/timeline/demo/index.vue
@@ -12,7 +12,7 @@ export default {
         
         
         
-        
+        
       
     )
   }
diff --git a/components/timeline/styles/index.less b/components/timeline/styles/index.less
index 4551104d..4f0b953a 100644
--- a/components/timeline/styles/index.less
+++ b/components/timeline/styles/index.less
@@ -1,7 +1,7 @@
 @import '../../styles/global.less';
 .k-timeline {
   background-color: #fff;
-  font-size: 13px;
+  font-size: 12px;
   overflow: hidden;
   position: relative;
   z-index: 1;
@@ -27,7 +27,7 @@
     position: absolute;
     background: #fff;
     top: 4px;
-    left: 1px;
+    left: -.5px;
     font-size: 16px;
     color: @main;
     line-height: 1;
@@ -35,12 +35,12 @@
   }
   .k-time-line-icon-default {
     font-size: 12px;
-    left: 2.5px;
+    left: 1px;
     top: 5.5px;
   }
   .k-time-line-item-content {
     padding: 0 0 20px 18px;
-    font-size: 13px;
+    font-size: 12px;
     position: relative;
     line-height: 22px;
     top: 0;
@@ -85,10 +85,10 @@
   }
   .k-time-line-dot {
     left: 100%;
-    margin-left: -13px;
+    margin-left: -14.5px;
   }
   .k-time-line-icon-default {
-    margin-left: -11px;
+    margin-left: -12.5px;
   }
   .k-time-line-item-content {
     padding-right: 18px
diff --git a/docs/components/header.vue b/docs/components/header.vue
new file mode 100644
index 00000000..00eae60c
--- /dev/null
+++ b/docs/components/header.vue
@@ -0,0 +1,54 @@
+
+
\ No newline at end of file
diff --git a/docs/components/index.vue b/docs/components/index.vue
index f1bb8274..53169d95 100644
--- a/docs/components/index.vue
+++ b/docs/components/index.vue
@@ -8,7 +8,7 @@ export default {
       
    
         
         
-        
+        
       
    
     )
   }
diff --git a/docs/index.html b/docs/index.html
index af18c785..418f40c2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,8 +4,9 @@
 
     
     KUI - 高质量的UI组件库
-    
+    
     
+    
     
 
 
diff --git a/docs/index.vue b/docs/index.vue
index f67eded8..97c91246 100644
--- a/docs/index.vue
+++ b/docs/index.vue
@@ -1,29 +1,9 @@
 
 
-
\ No newline at end of file
diff --git a/components/datePicker/demo/mode.md b/components/datePicker/demo/mode.md
new file mode 100644
index 00000000..e84f7171
--- /dev/null
+++ b/components/datePicker/demo/mode.md
@@ -0,0 +1,22 @@
+
+#### 年/月/日/时间
+使用 `mode` 属性，可以自定义日期显示类型，提供 `year` `month` `date` `range`。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/datePicker/demo/size.md b/components/datePicker/demo/size.md
new file mode 100644
index 00000000..f05e7729
--- /dev/null
+++ b/components/datePicker/demo/size.md
@@ -0,0 +1,39 @@
+
+#### 尺寸
+通过 `mini` `large` 来设置选择框的大小呈现
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/datePicker/index.js b/components/datePicker/index.js
index caeb58f4..2cb85fc8 100644
--- a/components/datePicker/index.js
+++ b/components/datePicker/index.js
@@ -1,4 +1,4 @@
-// import DatePicker from './Datepicker'
-// export default DatePicker
-import DatePicker from './datecalendar.jsx'
-export default DatePicker
\ No newline at end of file
+import DatePicker from './datepicker.jsx'
+export default DatePicker
+// import DatePicker from './datecalendar.jsx'
+// export default DatePicker
\ No newline at end of file
diff --git a/components/datePicker/index.md b/components/datePicker/index.md
index 93a75dde..26b0bc6f 100644
--- a/components/datePicker/index.md
+++ b/components/datePicker/index.md
@@ -1,14 +1,15 @@
 ## API
-| 属性             | 说明                                                                         | 类型                  | 默认值        |
-|----------------|----------------------------------------------------------------------------|---------------------|------------|
-| value          | 默认时间值                                                                      | Date, Array, String | -          |
-| disabled       | 是否禁用                                                                       | Boolen              | false      |
-| mini           | 组件尺寸大小                                                                     | Boolean             | false      |
-| rangeSeparator | 日期区间间隔符                                                                    | String              | ～          |
-| clearable      | 是否显示清除图标                                                                   | Boolean             | false      |
-| placeholder    | 提示语                                                                        | String              | -          |
-| lang           | 本地化，提供2中语言切换 中英，zh，en                                                      | String              | zh         |
-| transfer       | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean             | false      |
-| disabledDate   | 范围分离                                                                       | Function            | -          |
-| format         | 时间格式化，支持YYYY-MM-DD HH:mm:ss                                                | String              | YYYY-MM-DD |
-| change         | 默认值改变之后的回调，返回当前选择的时间，字符串                                                   | Function            | -          |
+| 属性           | 说明                                                                         | 类型                  | 默认值        |
+|--------------|----------------------------------------------------------------------------|---------------------|------------|
+| value        | 默认时间值                                                                      | Date, Array, String | -          |
+| mode         | 使用 `mode` 属性，可以自定义日期显示类型，提供 `year` `month` `date` `range`。                 | String              | date       |
+| disabled     | 是否禁用组件                                                                     | Boolen              | false      |
+| mini         | 组件是否呈现小尺寸                                                                  | Boolean             | false      |
+| large        | 组件是否呈现大尺寸                                                                  | Boolean             | false      |
+| clearable    | 是否显示清除图标                                                                   | Boolean             | true       |
+| placeholder  | 提示语                                                                        | String, Array       | -          |
+| transfer     | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean             | false      |
+| disabledDate | 不可选择的日期                                                                    | Function            | -          |
+| disabledTime | 不可选择的时间                                                                    | Function            | -          |
+| format       | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)         | String              | YYYY-MM-DD |
+| change       | 默认值改变之后的回调，返回当前选择的时间，字符串                                                   | Function            | -          |
diff --git a/components/datePicker/styles/calendar.less b/components/datePicker/styles/calendar.less
index 882322a3..ea2d8f91 100644
--- a/components/datePicker/styles/calendar.less
+++ b/components/datePicker/styles/calendar.less
@@ -2,19 +2,24 @@
 .k-calendar {
   display: inline-block;
   user-select: none;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.342);
+  float: left;
+  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   &+.k-calendar {
     // border-left: solid 1px #eaeaea;
-    margin-left: 5px;
-    padding-left: 5px;
-    .k-calendar-time {
-      border-left: solid 5px #efefef;
-      box-sizing: content-box;
+    // margin-left: 5px;
+    //   padding-left: 5px;
+    //   .k-calendar-time {
+    //     border-left: solid 5px #efefef;
+    //     box-sizing: content-box;
+    //   }
+    .k-calendar-time-picker {
+      border-left: 1px solid @borderColor;
     }
   }
   .k-calendar-body {
     width: 215px;
     position: relative;
+    height: 215px;
   }
   .k-calendar-head {
     line-height: 32px;
@@ -70,7 +75,6 @@
       font-size: 12px;
       display: inline-block;
       text-align: center;
-      border: 1px solid transparent;
       box-sizing: border-box;
       // 
     }
@@ -83,16 +87,23 @@
     left: 0;
     top: 0;
     font-size: 0;
+    text-align: center;
     span {
       font-size: 12px;
       width: 56px;
-      margin: 25px 0 0 11.5px;
+      margin: 15px 6px
     }
   }
   .k-calendar-footer {
     border-top: 1px solid @borderColor;
     position: relative;
     z-index: 1;
+    padding: 5px 8px;
+    text-align: right;
+    height: 26px;
+    .k-calendar-btn-today {
+      float: left;
+    }
   }
   .k-calendar-week {
     font-weight: 500;
@@ -102,32 +113,35 @@
     color: @color;
     border-radius: @radius;
     position: relative;
-    // background: red;
     display: inline-block;
     text-align: center;
     overflow: hidden;
+    border: 1px solid transparent;
+    &:hover {
+      background: fade(@main, 15%);
+    }
+  }
+  .k-calendar-date-on {
+    background: fade(@main, 15%);
   }
   .k-calendar-date-out {
     color: @iconColor;
     background: none;
   }
-  .k-calendar-date:hover {
-    background: fade(@main, 30%);
-    border-radius: @radius;
-  }
-  .k-calendar-date-today {
+  span.k-calendar-date-today {
+    border: 1px solid @main;
     &:after {
       content: '';
       position: absolute;
       width: 5px;
       height: 5px;
       background: @main;
-      right: 5px;
-      top: 5px;
+      right: 1px;
+      top: 1px;
       border-radius: 50%;
     }
   }
-  .k-calendar-date-selected {
+  span.k-calendar-date-selected {
     color: #fff;
     font-weight: bold;
     background: @main;
@@ -146,10 +160,16 @@
       background: #fff;
     }
   }
-  .k-calendar-date-disabled {
+  span.k-calendar-date-disabled {
     cursor: not-allowed;
     color: @disableColor;
     background: @disableBack;
+    &.k-calendar-date-today {
+      border-color: @disableBorder;
+      &::after{
+        background: @disableBorder;
+      }
+    }
     &:hover {
       background: @disableBack;
     }
@@ -203,19 +223,15 @@
       &:last-child {
         border: none;
       }
+      li.k-calendar-time-disabled {
+        color: @disableColor;
+        cursor: not-allowed;
+      }
     }
     .k-calendar-time-selected {
       color: @main;
       font-weight: bold;
       background: @light;
-      &.k-calendar-time-disabled {}
-    }
-  }
-  .k-calendar-footer {
-    padding: 5px 8px;
-    text-align: right;
-    .k-calendar-btn-today {
-      float: left;
     }
   }
 }
\ No newline at end of file
diff --git a/components/datePicker/styles/datepicker.less b/components/datePicker/styles/datepicker.less
index 00289c04..d6b7dcc0 100644
--- a/components/datePicker/styles/datepicker.less
+++ b/components/datePicker/styles/datepicker.less
@@ -1,143 +1,145 @@
 @import '../../styles/global.less';
 .k-datepicker {
-    display: inline-block;
-    position: relative;
-    &:before {
-        content: '\F3F4';
-        font-family: Ionicons;
-        display: block;
-        position: absolute;
-        width: 32px;
-        height: 100%;
-        top: 0;
-        right: 0;
-        font-size: 21px;
-        line-height: 30px;
-        text-align: center;
-        color: #7f7f7f;
-    }
-    .k-datepicker-close {
-        background: #fff;
-        display: none;
-        position: absolute;
-        width: 30px;
-        height: 28px;
-        top: 3px;
-        right: 3px;
-        cursor: pointer;
-        &:before {
-            background: #fff;
-            // background: rgba(255, 0, 0, 0.37);
-            display: block;
-            content: "\f14e";
-            font-family: Ionicons;
-            font-size: 15px;
-            position: absolute;
-            text-align: center;
-            color: #999;
-            width: 100%;
-            height: 100%;
-            line-height: 28px;
-            border-radius: @radius;
-        }
-        &:hover:before {
-            // background-color: #afafaf;
-            color: #555;
-        }
-    }
-    &>.k-datepicker-input {
-        color: #666;
-        transition: all 200ms ease;
-        border: 1px solid #e5e5e5;
-        border-radius: @radius;
-        height: 32px;
-        box-sizing: border-box;
-        outline: none;
-        padding: 0 32px 0 12px;
-        font-size: 12.5px;
-        width: 100%;
-        user-select: none;
-        -ms-user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-    }
-    &>.k-datepicker-input.focus {
-        border-color: @main; // box-shadow: 0 0 5px rgba(59, 180, 242, 0.55);
-        // -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.55);
-        box-shadow: 0 0 5px fade(@main, 75%);
-    }
-    &>.k-datepicker-input:disabled {
-        cursor: not-allowed;
-        background-color: #eee; // border-color: #999;
-        -webkit-box-shadow: none;
-        opacity: .5;
-        box-shadow: none;
-    }
-    .k-datepicker-range {
-        min-width: 200px
-    }
-    .k-datepicker-range .k-datepicker-popup {
-        width: 415px;
-    }
-    .k-datepicker-bottom {
-        float: left;
-        width: 100%;
-        text-align: right;
-    }
-    .k-datepicker-btn {
-        padding: 5px 10px;
-        background: #1284e7;
-        color: #fff;
-        border-radius: 2px;
-        display: inline-block;
-        cursor: pointer;
-    }
+	display: inline-block;
+	// width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+	vertical-align: middle;
+	color: #495060;
+	background: #fff;
+	font-size: 12px;
+	position: relative;
+	border: 1px solid @borderColor;
+	min-height: 32px;
+	border-radius: @radius;
+	cursor: default;
+	user-select: none;
+	min-width: 175px;
+	transition: all .3s;
+	&:hover {
+		border-color: @main;
+	}
+	.k-datepicker-selection {
+		padding: 0 30px 0 9px;
+	}
+	.k-icon {
+		position: absolute;
+		right: 8px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: @iconColor;
+		font-size: 14px;
+		transition: all .3s;
+	}
+	.k-datepicker-placeholder, .k-datepicker-value {
+		transition: all .3s;
+		line-height: 30px;
+		color: @disableColor;
+		box-sizing: border-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.k-datepicker-value {
+		color: @color;
+	}
+	.k-datepicker-has-clear {
+		.k-datepicker-clearable {
+			display: none;
+			&:hover {
+				color: @color;
+			}
+		}
+		&:hover {
+			.k-datepicker-clearable {
+				display: block;
+			}
+			.k-icon-calendar {
+				display: none;
+			}
+		}
+	}
 }
 
-.k-datepicker-popup {
-    position: absolute;
-    //    transition: all 200ms ease;
-    opacity: 1;
-    transform: scaleY(1);
-    transform-origin: center top;
-    font-size: 12px;
-    background: #fff;
-    border: 1px solid #d9d9d9;
-    border-radius: @radius;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
-    outline: 0;
-    padding: 5px;
-    overflow: hidden;
-    z-index: 1001;
+.k-datepicker-range {
+	min-width: 307px;
+	.k-datepicker-placeholder, .k-datepicker-value {
+		display: inline-block;
+		// padding: 0 9px;
+		vertical-align: middle;
+		min-width: 130px;
+		text-align: center;
+	}
+	.k-datepicker-separator {
+		display: inline-block;
+		vertical-align: middle;
+		padding: 0 5px;
+	}
+	&.k-datepicker-large {
+		min-width: 347px;
+	}
+}
+
+.k-datepicker-range-dropdown {
+	width: 430px;
+}
+
+.k-datepicker-open {
+	border-color: @main;
+	box-shadow: 0 0 5px fade(@main, 75%);
+}
+
+.k-datepicker-dropdown {
+	position: absolute;
+	z-index: 1;
+	background: #fff;
 }
 
 .k-datepicker-mini {
-    line-height: 23px;
-    &>.k-datepicker-input {
-        height: 25px;
-        line-height: 23px;
-    }
-    .k-datepicker-close {
-        width: 23px;
-        height: 21px;
-        right: 2px;
-        &:before {
-            font-size: 12px;
-            height: 21px;
-            line-height: 21px;
-        }
-    }
-    &::before {
-        line-height: 25px;
-        width: 25px;
-        font-size: 16px;
-    }
+	min-height: 25px;
+	.k-datepicker-placeholder, .k-datepicker-value {
+		line-height: 23px;
+	}
+	.k-icon {
+		font-size: 12px;
+	}
+	.k-datepicker-selection {
+		padding: 0 23px 0 9px;
+	}
+}
+
+.k-datepicker-large {
+	min-height: 40px;
+	min-width: 190px;
+	.k-datepicker-placeholder, .k-datepicker-value {
+		line-height: 38px;
+		font-size: 14px;
+	}
+	.k-icon {
+		font-size: 16px;
+		right: 10px;
+	}
+	.k-datepicker-selection {
+		padding: 0 38px 0 9px;
+	}
 }
 
-.k-datepicker-clearable:hover:before {
-    // display: none;
+.k-datepicker-disabled {
+	border-color: @disableBorder;
+	color: @disableColor;
+	cursor: not-allowed;
+	background: @disableBack;
+	&:hover {
+		border-color: @disableBorder;
+	}
+	.k-datepicker-value {
+		color: @disableColor;
+	}
 }
 
-.k-datepicker-clearable:hover .k-datepicker-close {
-    display: block;
+.k-datepicker-dropdown {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	border-radius: @radius;
+	overflow: hidden;
 }
\ No newline at end of file
diff --git a/components/drawer/demo/index.vue b/components/drawer/demo/index.vue
index c84c5a40..c2897283 100644
--- a/components/drawer/demo/index.vue
+++ b/components/drawer/demo/index.vue
@@ -12,7 +12,7 @@ export default {
         
         
         
-        
+        
       
     )
   }
diff --git a/components/dropdown/demo/base.md b/components/dropdown/demo/base.md
new file mode 100644
index 00000000..413ca308
--- /dev/null
+++ b/components/dropdown/demo/base.md
@@ -0,0 +1,33 @@
+
+#### 基础用法
+通过 `v-model` 进行数据双向绑定
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/dropdown/demo/index.vue b/components/dropdown/demo/index.vue
new file mode 100644
index 00000000..043062e1
--- /dev/null
+++ b/components/dropdown/demo/index.vue
@@ -0,0 +1,16 @@
+ 
\ No newline at end of file
diff --git a/components/dropdown/demo/info.md b/components/dropdown/demo/info.md
new file mode 100644
index 00000000..413ca308
--- /dev/null
+++ b/components/dropdown/demo/info.md
@@ -0,0 +1,33 @@
+
+#### 基础用法
+通过 `v-model` 进行数据双向绑定
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/dropdown/index.md b/components/dropdown/index.md
new file mode 100644
index 00000000..a320514a
--- /dev/null
+++ b/components/dropdown/index.md
@@ -0,0 +1,13 @@
+## Dropdown API
+| 属性       | 说明                                                                         | 类型      | 默认值   |
+|----------|----------------------------------------------------------------------------|---------|-------|
+| trigger  | 触发方式,支持hover(默认), click, custom 3种方式                                       | String  | hover |
+| visible  | 是否显示下拉菜单，trigger为custom可用                                                  | Boolen  | false |
+| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
+## DropdownItem API
+| 属性       | 说明      | 类型      | 默认值   |
+|----------|---------|---------|-------|
+| icon     | 单项图标    | String  | -     |
+| disabled | 单项是否被禁用 | Boolen  | false |
+| selected | 单项是否被选中 | Boolean | false |
+| divided  | 单项是否有隔横 | Boolean | false |
\ No newline at end of file
diff --git a/components/index.js b/components/index.js
index 6d149760..6a5c19ba 100644
--- a/components/index.js
+++ b/components/index.js
@@ -24,6 +24,7 @@ import Message from './message'
 import Notice from './notice'
 import Page from './page'
 import Poptip from './poptip'
+import Popconfirm from './popconfirm'
 import { Radio, RadioGroup, RadioButton } from './radio'
 // import Scroll from './scroll'
 // import Slider from './slider'
@@ -57,7 +58,7 @@ const components = {
     Layout, Header, Footer, Content, Sider,
     Notice,
     Option,
-    Page, Poptip, Panel,
+    Page, Poptip, Popconfirm, Panel,
     Row, Radio, RadioGroup, RadioButton,
     /* Scroll, */ Steps, Step, Select, SubMenu, //Slider,
     Table, Tabs, TabPane, TimeLine, TimeLineItem, Tag, Tooltip, Tree, TreeSelect,
diff --git a/components/popconfirm/demo/base.md b/components/popconfirm/demo/base.md
new file mode 100644
index 00000000..73a5b8d8
--- /dev/null
+++ b/components/popconfirm/demo/base.md
@@ -0,0 +1,28 @@
+
+#### 基础用法
+最简单的用法。
+
+
+```tpl
+
+h
+```
\ No newline at end of file
diff --git a/components/popconfirm/demo/index.vue b/components/popconfirm/demo/index.vue
new file mode 100644
index 00000000..63c78986
--- /dev/null
+++ b/components/popconfirm/demo/index.vue
@@ -0,0 +1,29 @@
+ 
+
\ No newline at end of file
diff --git a/components/popconfirm/demo/info.md b/components/popconfirm/demo/info.md
new file mode 100644
index 00000000..5537e2d3
--- /dev/null
+++ b/components/popconfirm/demo/info.md
@@ -0,0 +1,9 @@
+## Popconfirm
+点击元素，弹出气泡式的确认框。
+
+## 何时使用
+目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
+
+和 ‘confirm’ 弹出的全屏居中模态对话框相比，交互形式更轻量。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/popconfirm/demo/local.md b/components/popconfirm/demo/local.md
new file mode 100644
index 00000000..4446e488
--- /dev/null
+++ b/components/popconfirm/demo/local.md
@@ -0,0 +1,36 @@
+
+#### 国际化
+使用 `okText` 和 `cancelText` 自定义按钮文字。
+
+
+```tpl
+
+  
+```
\ No newline at end of file
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
new file mode 100644
index 00000000..86fa2abd
--- /dev/null
+++ b/components/popconfirm/demo/placement.md
@@ -0,0 +1,110 @@
+
+#### 位置
+通过 `placement`控制方向, 位置有十二个方向。
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/popconfirm/index.js b/components/popconfirm/index.js
new file mode 100644
index 00000000..9f02d162
--- /dev/null
+++ b/components/popconfirm/index.js
@@ -0,0 +1,2 @@
+import Popconfirm from './popconfirm.jsx'
+export default Popconfirm
\ No newline at end of file
diff --git a/components/popconfirm/index.md b/components/popconfirm/index.md
new file mode 100644
index 00000000..5f4b6754
--- /dev/null
+++ b/components/popconfirm/index.md
@@ -0,0 +1,11 @@
+## API
+| 属性          | 说明                                                                                                                                                 | 类型           | 默认值   |
+|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------|--------------|-------|
+| title       | 显示的标题                                                                                                                                              | String,Slots | -     |
+| placement   | 提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom` | String       | top   |
+| width       | 展示的宽度,默认为内容区域的大小                                                                                                                                   | String       | -     |
+| transfer    | 是否将弹层放置于 `body` 内，在 `Tabs`、带有 `fixed` 的 `Table` 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果                                                                 | Boolean      | true |
+| ok-text     | 确定按钮的文字，                                                                                                                                           | String       | 确定    |
+| cancel-text | 取消按钮的文字，                                                                                                                                           | String       | 取消    |
+| cancel      | 点击取消的回调，                                                                                                                                           | Function     | -     |
+| ok          | 点击确定的回调，                                                                                                                                           | Function     | -     |
\ No newline at end of file
diff --git a/components/popconfirm/popconfirm.jsx b/components/popconfirm/popconfirm.jsx
new file mode 100644
index 00000000..b267f807
--- /dev/null
+++ b/components/popconfirm/popconfirm.jsx
@@ -0,0 +1,35 @@
+import PopBase from '../base/pop'
+export default {
+  name: 'Popconfirm',
+  props: {
+    dark: { type: Boolean, default: false },
+    transfer: { type: Boolean, default: true },
+    title: String,
+    width: [Number, String],
+    okText: { type: String, default: '确定' },
+    cancelText: { type: String, default: '取消' },
+    placement: {
+      validator(value) {
+        return (
+          ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-bottom", "left-top", "right", "right-top", "right-bottom"].indexOf(value) >= 0
+        );
+      },
+      default: "top"
+    },
+  },
+  render() {
+    let props = {
+      props: { preCls: 'popconfirm', ...this.$props, confirm: true },
+      on: {
+        'ok': e => this.$emit('ok'),
+        'cancel': e => this.$emit('cancel')
+      }
+    }
+    return (
+      
+        {this.$slots.default}
+        
+      
+    )
+  }
+};
\ No newline at end of file
diff --git a/components/popconfirm/styles/index.less b/components/popconfirm/styles/index.less
new file mode 100644
index 00000000..ca1635cc
--- /dev/null
+++ b/components/popconfirm/styles/index.less
@@ -0,0 +1,185 @@
+@import '../../styles/global.less';
+.k-popconfirm {
+  display: inline-block;
+  position: relative;
+}
+
+.k-popconfirm-content {
+  min-width: 200px;
+  // max-width: 300px;
+  font-size: 12px;
+  line-height: 1.5;
+  position: absolute;
+  z-index: 1001;
+  .k-popconfirm-inner {
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: @radius;
+  }
+  .k-popconfirm-inner-content {
+    padding: 18px 18px 10px 18px;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .k-icon {
+    position: absolute;
+    font-size: 18px;
+    color: @warning;
+    top: 19px;
+  }
+  .k-popconfirm-footer {
+    text-align: right;
+    padding-top: 10px;
+  }
+  .k-popconfirm-title {
+    padding: 0 0 0 24px;
+    font-size: 14px;
+  }
+  .k-popconfirm-arrow {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 4px solid transparent;
+    box-sizing: border-box;
+    transform: rotate(45deg);
+    background: #fff;
+  }
+  .k-popconfirm-footer {
+    text-align: right;
+    padding: 8px 16px 16px;
+    .k-btn {
+      margin-left: 10px;
+    }
+  }
+  &[k-placement^=top] {
+    .k-popconfirm-arrow {
+      bottom: 8px;
+      box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+    }
+    .k-popconfirm-inner {
+      margin-bottom: 12px;
+    }
+  }
+  &[k-placement=top] {
+    .k-popconfirm-arrow {
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+  &[k-placement=top-right] {
+    .k-popconfirm-arrow {
+      right: 10px;
+    }
+  }
+  &[k-placement=top-left] {
+    .k-popconfirm-arrow {
+      left: 10px;
+    }
+  }
+  &[k-placement^=bottom] {
+    .k-popconfirm-arrow {
+      top: 8px;
+      box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
+    }
+    .k-popconfirm-inner {
+      margin-top: 12px;
+    }
+  }
+  &[k-placement=bottom] {
+    .k-popconfirm-arrow {
+      left: 50%;
+    }
+  }
+  &[k-placement=bottom-left] {
+    .k-popconfirm-arrow {
+      left: 10px;
+    }
+  }
+  &[k-placement=bottom-right] {
+    .k-popconfirm-arrow {
+      right: 10px;
+    }
+  }
+  &[k-placement^=left] {
+    .k-popconfirm-arrow {
+      right: 8px;
+      box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+    }
+    .k-popconfirm-inner {
+      margin-right: 12px;
+    }
+  }
+  &[k-placement=left] {
+    .k-popconfirm-arrow {
+      top: 50%;
+      margin-top: -6px;
+    }
+  }
+  &[k-placement=left-bottom] {
+    .k-popconfirm-arrow {
+      bottom: 10px;
+    }
+  }
+  &[k-placement=left-top] {
+    .k-popconfirm-arrow {
+      top: 10px;
+    }
+  }
+  &[k-placement^=right] {
+    .k-popconfirm-arrow {
+      left: 8px;
+      box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+    }
+    .k-popconfirm-inner {
+      margin-left: 12px;
+    }
+  }
+  &[k-placement=right] {
+    .k-popconfirm-arrow {
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+  &[k-placement=right-top] {
+    .k-popconfirm-arrow {
+      top: 10px;
+    }
+  }
+  &[k-placement=right-bottom] {
+    .k-popconfirm-arrow {
+      bottom: 10px;
+    }
+  }
+}
+
+@keyframes pop-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(.8, .8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes pop-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.8, .8);
+  }
+}
+
+.k-popconfirm-fade-enter-active {
+  // transform-origin: center bottom;
+  animation: pop-zoom-in .3s;
+}
+
+.k-popconfirm-fade-leave-active {
+  // transform-origin: center bottom;
+  animation: pop-zoom-out .3s;
+}
\ No newline at end of file
diff --git a/components/poptip/demo/base.md b/components/poptip/demo/base.md
new file mode 100644
index 00000000..ecd4c859
--- /dev/null
+++ b/components/poptip/demo/base.md
@@ -0,0 +1,16 @@
+
+#### 基础用法
+最简单的用法，浮层的大小由内容区域决定。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/poptip/demo/index.vue b/components/poptip/demo/index.vue
new file mode 100644
index 00000000..23ea498c
--- /dev/null
+++ b/components/poptip/demo/index.vue
@@ -0,0 +1,29 @@
+ 
+
\ No newline at end of file
diff --git a/components/poptip/demo/info.md b/components/poptip/demo/info.md
new file mode 100644
index 00000000..02ac5cb2
--- /dev/null
+++ b/components/poptip/demo/info.md
@@ -0,0 +1,9 @@
+## Poptip
+点击/鼠标移入元素，弹出气泡式的卡片浮层。
+
+## 何时使用
+当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
+
+和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/poptip/demo/placement.md b/components/poptip/demo/placement.md
new file mode 100644
index 00000000..33e82664
--- /dev/null
+++ b/components/poptip/demo/placement.md
@@ -0,0 +1,111 @@
+
+#### 位置
+通过 `placement`控制方向, 位置有十二个方向。
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/poptip/demo/poptip.js b/components/poptip/demo/poptip.js
deleted file mode 100644
index 0144d293..00000000
--- a/components/poptip/demo/poptip.js
+++ /dev/null
@@ -1,63 +0,0 @@
-let code = {}
-
-code.base = `
-   
-
-
-   
-
-
-   
-`
-code.position = `
-
-
-
-
- 
-
-
-
-
-
-`
-code.slot = `
-   
-   
    
-    
-     
-     
-      
-      
-      
-     
-     
-      
-      
-      
-      
-     
-      
-      
-      
-     
-    
    姓名电话住址
    张山13256652545广东省深圳市宝安区软件产业基地三诺大厦19楼
     
    王二36254525658浙江省杭州市阿里西溪园区3A18楼
    
-   
    
-    `
-code.confirm = ` 
-   
-
- 
-  
- `
-
-code.longtext=`
-   
-
-
-   
-
-
-   
-`
-export default code
\ No newline at end of file
diff --git a/components/poptip/demo/poptip.vue b/components/poptip/demo/poptip.vue
deleted file mode 100644
index 12d8b4ec..00000000
--- a/components/poptip/demo/poptip.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-
-
diff --git a/components/poptip/demo/trigger.md b/components/poptip/demo/trigger.md
new file mode 100644
index 00000000..57d86b1f
--- /dev/null
+++ b/components/poptip/demo/trigger.md
@@ -0,0 +1,23 @@
+
+#### 触发模式
+通过 `trigger`来控制触发模式, 鼠标移入 `hover`、点击 `click`。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/poptip/index.js b/components/poptip/index.js
index 77ac3df9..d07d9c17 100644
--- a/components/poptip/index.js
+++ b/components/poptip/index.js
@@ -1,2 +1,2 @@
-import Poptip from './poptip'
+import Poptip from './poptip.jsx'
 export default Poptip
\ No newline at end of file
diff --git a/components/poptip/index.md b/components/poptip/index.md
new file mode 100644
index 00000000..bf3461ae
--- /dev/null
+++ b/components/poptip/index.md
@@ -0,0 +1,9 @@
+## API
+| 属性        | 说明                                                                                                                                                 | 类型            | 默认值   |
+|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------|---------------|-------|
+| trigger   | 触发方式，可选值为 `hover`（悬停）`click`（点击）                                                                                                                   | String        | click |
+| title     | 显示的标题                                                                                                                                              | String        | -     |
+| content   | 显示的正文内容                                                                                                                                            | slots         | -     |
+| placement | 提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom` | String        | top   |
+| width     | 展示的宽度,默认为内容区域的大小                                                                                                                                   | String,Number | -     |
+| transfer  | 是否将弹层放置于 `body` 内，在 `Tabs`、带有 `fixed` 的 `Table` 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果                                                                 | Boolean       | true  |
diff --git a/components/poptip/poptip.jsx b/components/poptip/poptip.jsx
new file mode 100644
index 00000000..585321b8
--- /dev/null
+++ b/components/poptip/poptip.jsx
@@ -0,0 +1,30 @@
+import PopBase from '../base/pop'
+export default {
+  name: 'Poptip',
+  props: {
+    trigger: { type: String, default: "hover" },
+    dark: { type: Boolean, default: false },
+    transfer: { type: Boolean, default: true },
+    title: String,
+    width: [Number, String],
+    placement: {
+      validator(value) {
+        return (
+          ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-bottom", "left-top", "right", "right-top", "right-bottom"].indexOf(value) >= 0
+        );
+      },
+      default: "top"
+    },
+  },
+  render() {
+    let props = {
+      props: { preCls: 'poptip', ...this.$props }
+    }
+    return (
+      
+        {this.$slots.default}
+        
+      
+    )
+  }
+};
\ No newline at end of file
diff --git a/components/poptip/poptip.vue b/components/poptip/poptip.vue
deleted file mode 100644
index 8871e4f1..00000000
--- a/components/poptip/poptip.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-
-
\ No newline at end of file
diff --git a/components/poptip/styles/index.less b/components/poptip/styles/index.less
index a91984fa..2ed31072 100644
--- a/components/poptip/styles/index.less
+++ b/components/poptip/styles/index.less
@@ -1,215 +1,182 @@
 @import '../../styles/global.less';
 .k-poptip {
-    display: inline-block;
-    position: relative;
+	display: inline-block;
+	position: relative;
 }
 
-.k-poptip-dom {
-    min-width: 200px;
-    max-width: 300px;
-    font-size: 12px;
-    line-height: 1.5;
-    position: absolute;
-    z-index: 1001;
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px;
-    white-space: nowrap;
-    border-radius: @radius;
-    background: #fff;
-    box-sizing: border-box; //    padding: 15px;
-    // margin: 10px;
-    [class^=k-ion] {
-        color: orange;
-        font-size: 20px;
-        margin-right: 5px;
-        float: left;
-    }
-    .k-poptip-footer {
-        text-align: right;
-        padding-top: 10px;
-    }
-    .k-poptip-title {
-        font-size: 14px;
-        margin: 0;
-        padding: 8px 16px;
-        position: relative;
-        border-bottom: 1px solid #eee;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .k-poptip-content {
-        padding: 8px 16px;
-        white-space: normal;
-    }
-    .k-poptip-arrow {
-        position: absolute;
-        width: 0;
-        height: 0;
-        bottom: -13px;
-        margin-left: -6px;
-        border: 6px solid transparent;
-        &::after {
-            content: "";
-            position: absolute;
-            border: 6px solid transparent;
-            top: -7px;
-            left: -6px;
-        }
-    } //ok
-    &[k-placement^=top] {
-        .k-poptip-arrow {
-            border-top-color: rgba(216, 216, 216, 0.6);
-            &::after {
-                border-top-color: white;
-            }
-        }
-    }
-    &[k-placement=top] {
-        .k-poptip-arrow {
-            left: 50%;
-        }
-    }
-    &[k-placement=top-right] {
-        .k-poptip-arrow {
-            right: 10px;
-        }
-    }
-    &[k-placement=top-left] {
-        .k-poptip-arrow {
-            left: 20px;
-        }
-    }
-    &[k-placement^=bottom] {
-        .k-poptip-arrow {
-            border-bottom-color: rgba(216, 216, 216, 0.6);
-            top: -12px;
-            &::after {
-                top: -5px;
-                border-bottom-color: white;
-            }
-        }
-    }
-    &[k-placement=bottom] {
-        .k-poptip-arrow {
-            left: 50%;
-        }
-    }
-    &[k-placement=bottom-left] {
-        .k-poptip-arrow {
-            left: 16px;
-        }
-    }
-    &[k-placement=bottom-right] {
-        .k-poptip-arrow {
-            right: 10px;
-        }
-    }
-    &[k-placement^=left] {
-        .k-poptip-arrow {
-            right: -12px;
-            border-left-color: rgba(216, 216, 216, 0.6);
-            &::after {
-                border-left-color: white;
-                top: -6px;
-                left: -7px;
-            }
-        }
-    }
-    &[k-placement=left] {
-        .k-poptip-arrow {
-            top: 50%;
-            margin-top: -6px;
-            ;
-        }
-    }
-    &[k-placement=left-bottom] {
-        .k-poptip-arrow {
-            bottom: 10px;
-        }
-    }
-    &[k-placement=left-top] {
-        .k-poptip-arrow {
-            top: 10px;
-        }
-    } //ok
-    &[k-placement^=right] {
-        .k-poptip-arrow {
-            left: -6px;
-            border-right-color: rgba(216, 216, 216, 0.6);
-            &::after {
-                border-right-color: white;
-                top: -6px;
-                left: -5px;
-            }
-        }
-    }
-    &[k-placement=right] {
-        .k-poptip-arrow {
-            top: 50%;
-            margin-top: -6px;
-            ;
-        }
-    }
-    &[k-placement=right-top] {
-        .k-poptip-arrow {
-            top: 10px;
-        }
-    }
-    &[k-placement=right-bottom] {
-        .k-poptip-arrow {
-            bottom: 10px;
-        }
-    }
+.k-poptip-content {
+	min-width: 200px;
+	// max-width: 300px;
+	font-size: 12px;
+	line-height: 1.5;
+	position: absolute;
+	z-index: 1001;
+	.k-poptip-inner {
+		background: #fff;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		border-radius: @radius;
+	}
+	.k-poptip-inner-content {
+		padding: 8px 16px;
+		box-sizing: border-box;
+	}
+	.k-poptip-title {
+		font-size: 14px;
+		font-weight: 500;
+		color: @color;
+		margin: 0;
+		padding: 8px 16px;
+		position: relative;
+		border-bottom: 1px solid #eee;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+	.k-poptip-arrow {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border: 4px solid transparent;
+		box-sizing: border-box;
+		transform: rotate(45deg);
+		background: #fff;
+	}
+	&[k-placement^=top] {
+		.k-poptip-arrow {
+			bottom: 8px;
+			box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+		}
+		.k-poptip-inner {
+			margin-bottom: 12px;
+		}
+	}
+	&[k-placement=top] {
+		.k-poptip-arrow {
+			left: 50%;
+			transform: translateX(-50%) rotate(45deg);
+		}
+	}
+	&[k-placement=top-right] {
+		.k-poptip-arrow {
+			right: 10px;
+		}
+	}
+	&[k-placement=top-left] {
+		.k-poptip-arrow {
+			left: 10px;
+		}
+	}
+	&[k-placement^=bottom] {
+		.k-poptip-arrow {
+			top: 8px;
+			box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
+		}
+		.k-poptip-inner {
+			margin-top: 12px;
+		}
+	}
+	&[k-placement=bottom] {
+		.k-poptip-arrow {
+			left: 50%;
+		}
+	}
+	&[k-placement=bottom-left] {
+		.k-poptip-arrow {
+			left: 10px;
+		}
+	}
+	&[k-placement=bottom-right] {
+		.k-poptip-arrow {
+			right: 10px;
+		}
+	}
+	&[k-placement^=left] {
+		.k-poptip-arrow {
+			right: 8px;
+			box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+		}
+		.k-poptip-inner {
+			margin-right: 12px;
+		}
+	}
+	&[k-placement=left] {
+		.k-poptip-arrow {
+			top: 50%;
+			margin-top: -6px;
+		}
+	}
+	&[k-placement=left-bottom] {
+		.k-poptip-arrow {
+			bottom: 10px;
+		}
+	}
+	&[k-placement=left-top] {
+		.k-poptip-arrow {
+			top: 10px;
+		}
+	}
+	&[k-placement^=right] {
+		.k-poptip-arrow {
+			left: 8px;
+			box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+		}
+		.k-poptip-inner {
+			margin-left: 12px;
+		}
+	}
+	&[k-placement=right] {
+		.k-poptip-arrow {
+			top: 50%;
+			transform: translateY(-50%) rotate(45deg);
+		}
+	}
+	&[k-placement=right-top] {
+		.k-poptip-arrow {
+			top: 10px;
+		}
+	}
+	&[k-placement=right-bottom] {
+		.k-poptip-arrow {
+			bottom: 10px;
+		}
+	}
 }
 
 .k-poptip-dark {
-    background-color: @dark;
-    color: #fff;
-    .k-poptip-title {
-        border-bottom: 1px solid rgba(0, 0, 0,.2);
-    }
-    &[k-placement^=top] {
-        .k-poptip-arrow {
-            &::after {
-                border-top-color: @dark;
-            }
-        }
-    }
-    &[k-placement^=bottom] {
-        .k-poptip-arrow {
-            &::after {
-                border-bottom-color: @dark;
-            }
-        }
-    }
-    &[k-placement^=left] {
-        .k-poptip-arrow {
-            &::after {
-                border-left-color: @dark;
-            }
-        }
-    }
-    &[k-placement^=right] {
-        .k-poptip-arrow {
-            &::after {
-                border-right-color: @dark;
-            }
-        }
-    }
+	background-color: @dark;
+	color: #fff;
+	.k-poptip-title {
+		border-bottom: 1px solid rgba(0, 0, 0, .2);
+	}
 }
 
-.k-poptip-confirm {
-    .k-poptip-title {
-        border: none;
-        padding: 16px 16px 8px;
-    }
-    .k-poptip-content {
-        padding: 16px 16px 0;
-    }
-    .k-poptip-message {
-        padding-left: 20px;
-    }
-    .k-poptip-footer {
-        text-align: right;
-        padding: 8px 16px 16px;
-    }
+@keyframes pop-zoom-in {
+	from {
+		opacity: 0;
+		transform: scale(.8, .8);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes pop-zoom-out {
+	from {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(.8, .8);
+	}
+}
+
+.k-poptip-fade-enter-active {
+	// transform-origin: center bottom;
+	animation: pop-zoom-in .3s;
+}
+
+.k-poptip-fade-leave-active {
+	// transform-origin: center bottom;
+	animation: pop-zoom-out .3s;
 }
\ No newline at end of file
diff --git a/components/select/select.jsx b/components/select/select.jsx
index a9a74e5a..67a730a9 100644
--- a/components/select/select.jsx
+++ b/components/select/select.jsx
@@ -14,7 +14,7 @@ export default {
   props: {
     placeholder: { type: String, default: "请选择" },
     mini: Boolean,
-    transfer: { type: Boolean, default: false },
+    transfer: { type: Boolean, default: true },
     width: [Number, String],
     value: [String, Number, Array],
     clearable: Boolean,
@@ -151,36 +151,38 @@ export default {
       }
     },
     setPosition() {
-      let _top = 0, _left = 0, _height = this.$el.offsetHeight, offset = 3;
+      let top = 0, left = 0, height = this.$el.offsetHeight, offset = 3;
       if (!hasProp(this, 'width')) {
         this.selectWidth = this.$el.offsetWidth
       }
-      let { top, left } = getElementPos(this.$el)
       if (this.transfer) {
-        _top = top + _height + offset
-        _left = left + 1
+        let pos = getElementPos(this.$el)
+        top = pos.top + height + offset
+        left = pos.left + 1
       } else {
-        _top = _height + offset
+        top = height + offset
       }
       if (this.$refs.dom) {
         let clientH = document.body.scrollHeight
         let domH = this.$refs.dom.offsetHeight
-        if (clientH - top - _height - offset < domH + 5) {
-          _top = this.transfer ? top - domH - offset : -(domH + 3)
+        if (clientH - top - height - offset < domH + 5) {
+          top = this.transfer ? top - domH - offset : -(domH + 3)
           this.placement = 'top'
         } else {
           this.placement = 'bottom'
         }
       }
 
-      this.top = _top
-      this.left = _left
+      this.top = top
+      this.left = left
     },
     change(item) {
       let { multiple, value, currentValue } = this
-      this.queryKey = ''
-      this.$refs.search.value = ''
-      this.$refs.search.style.width = ''
+      if (this.showSearch) {
+        this.queryKey = ''
+        this.$refs.search.value = ''
+        this.$refs.search.style.width = ''
+      }
       if (!multiple) {
         this.showDrop = false
         this.showSearch = false
diff --git a/components/select/styles/index.less b/components/select/styles/index.less
index 13bc0ef9..8987320a 100644
--- a/components/select/styles/index.less
+++ b/components/select/styles/index.less
@@ -100,12 +100,15 @@
     top: 0;
     z-index: 0;
     padding-left: 9px;
-    margin-right: 30px;
+    padding-right: 30px;
     overflow: hidden;
     text-overflow: ellipsis;
     color: @disableColor;
     top: 50%;
     transform: translateY(-50%);
+    white-space: nowrap;
+    max-width: 100%;
+    box-sizing: border-box;
   }
   /*  .k-select-placeholder {
       color: #888;
diff --git a/components/styles.js b/components/styles.js
index f0733d6e..e18e4878 100644
--- a/components/styles.js
+++ b/components/styles.js
@@ -5,19 +5,18 @@ import './backtop/styles';
 import './breadcrumb/styles';
 import './button/styles';
 import './card/styles';
-import './colorpicker/styles';
+import './colorPicker/styles';
 import './collapse/styles';
 import './carousel/styles';
 import './checkbox/styles';
-// import './datepicker/styles/calendar.less';
-// import './datepicker/styles/datepicker';
+import './datePicker/styles';
 import './drawer/styles';
 import './dropdown/styles';
 import './form/styles';
 import './icon/styles';
 import './grid/styles';
 import './input/styles';
-import './imagepreview/styles';
+import './imagePreview/styles';
 import './loading/styles';
 import './layout/styles';
 import './modal/styles';
@@ -27,6 +26,7 @@ import './menu/styles';
 import './notice/styles';
 import './page/styles';
 import './poptip/styles';
+import './popconfirm/styles';
 import './radio/styles';
 // import './scroll/scroll';
 import './select/styles';
diff --git a/components/tag/demo/index.vue b/components/tag/demo/index.vue
index d0132edc..27a8596f 100644
--- a/components/tag/demo/index.vue
+++ b/components/tag/demo/index.vue
@@ -12,7 +12,7 @@ export default {
         
         
         
-        
+        
       
     )
   }
diff --git a/components/tooltip/demo/base.md b/components/tooltip/demo/base.md
new file mode 100644
index 00000000..608967b9
--- /dev/null
+++ b/components/tooltip/demo/base.md
@@ -0,0 +1,16 @@
+
+#### 基础用法
+最简单的用法，浮层的大小由内容区域决定。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/tooltip/demo/embed.md b/components/tooltip/demo/embed.md
new file mode 100644
index 00000000..917c0640
--- /dev/null
+++ b/components/tooltip/demo/embed.md
@@ -0,0 +1,16 @@
+
+#### 基础用法
+最简单的用法，浮层的大小由内容区域决定。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/tooltip/demo/index.vue b/components/tooltip/demo/index.vue
new file mode 100644
index 00000000..864936d0
--- /dev/null
+++ b/components/tooltip/demo/index.vue
@@ -0,0 +1,29 @@
+ 
+
\ No newline at end of file
diff --git a/components/tooltip/demo/info.md b/components/tooltip/demo/info.md
new file mode 100644
index 00000000..1f5ce312
--- /dev/null
+++ b/components/tooltip/demo/info.md
@@ -0,0 +1,9 @@
+## Tooltip
+简单的文字提示气泡框。
+
+## 何时使用
+鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
+
+可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
new file mode 100644
index 00000000..e2841e89
--- /dev/null
+++ b/components/tooltip/demo/placement.md
@@ -0,0 +1,110 @@
+
+#### 位置
+通过 `placement`控制方向, 位置有十二个方向。
+
+
+```tpl
+
+
+```
\ No newline at end of file
diff --git a/components/tooltip/demo/tooltip.js b/components/tooltip/demo/tooltip.js
deleted file mode 100644
index 261dafa5..00000000
--- a/components/tooltip/demo/tooltip.js
+++ /dev/null
@@ -1,63 +0,0 @@
-let code = {}
-
-code.base =`
-  
-
-
-  
-`
-
-code.position =`
    
-  
-    
-  
-  
-    
-  
-  
-    
-  
-
    
-
    
-  
-    
-  
-  
-    
-  
-  
-    
-  
-
    
-
    
-  
-    
-  
-  
-    
-  
-  
-    
-  
-
    
-
    
-  
-    
-  
-  
-    
-  
-  
-    
-  
-
    `
-
-code.slot = `
-
-
    
-  我独占一行，然后....
    
-  我独占一行，然后....
-
    
-    `
-
-export default code
\ No newline at end of file
diff --git a/components/tooltip/demo/tooltip.vue b/components/tooltip/demo/tooltip.vue
deleted file mode 100644
index 43096d15..00000000
--- a/components/tooltip/demo/tooltip.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-
-
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index bec44667..b16c1031 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,2 +1,2 @@
-import Tooltip from './tooltip'
+import Tooltip from './tooltip.jsx'
 export default Tooltip
\ No newline at end of file
diff --git a/components/tooltip/index.md b/components/tooltip/index.md
new file mode 100644
index 00000000..64405752
--- /dev/null
+++ b/components/tooltip/index.md
@@ -0,0 +1,7 @@
+## API
+| 属性        | 说明                                                                                                                                                 | 类型           | 默认值  |
+|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------|--------------|------|
+| title     | 显示的标题                                                                                                                                              | String,Slots | -    |
+| placement | 提示框出现的位置，可选值为`top`，`top-left`，`top-right`，`bottom`，`bottom-left`，`bottom-right`，`left`，`left-top`，`left-bottom`，`right`，`right-top`，`right-bottom` | String       | top  |
+| width     | 展示的宽度,默认为内容区域的大小                                                                                                                                   | String       | -    |
+| transfer  | 是否将弹层放置于 `body` 内，在 `Tabs`、带有 `fixed` 的 `Table` 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果                                                                 | Boolean      | true |
\ No newline at end of file
diff --git a/components/tooltip/styles/index.less b/components/tooltip/styles/index.less
index 20559f48..9ff3a573 100644
--- a/components/tooltip/styles/index.less
+++ b/components/tooltip/styles/index.less
@@ -2,165 +2,166 @@
 .k-tooltip {
   display: inline-block;
   position: relative;
-  .k-tooltip-rel {
-    display: inline-block;
-  }
 }
 
-.k-tooltip-dom {
-  z-index: 800;
-  padding: 10px;
+.k-tooltip-content {
+  // min-width: 200px;
+  // max-width: 300px;
+  font-size: 12px;
+  line-height: 1.5;
   position: absolute;
-  .k-tooltip-content {
+  z-index: 1001;
+  .k-tooltip-inner {
+    background: @color;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: @radius;
+  }
+  .k-tooltip-title {
     padding: 6px 8px;
+    color: #fff;
     font-size: 14px;
-    line-height: 1.5;
-    max-width: 250px;
-    color: #000;
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px;
-    text-align: left;
-    text-decoration: none;
-    background-color: white;
-    border-radius: @radius; // -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.15);
-    // box-shadow: 0 2px 8px rgba(0,0,0,.15);
-    min-height: 32px;
-    box-sizing: border-box;
-    white-space: nowrap;
   }
-  .k-tooltip-content-breaked {
-    word-break: break-all;
-    white-space: normal;
-  }
-  .k-poptip-arrow {
+  .k-tooltip-arrow {
     position: absolute;
-    width: 17px;
-    height: 17px;
-    bottom: 0;
-    overflow: hidden;
-    &::after {
-      content: '';
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      transform: rotate(-45deg);
-      background: #fff;
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px;
-    }
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    box-sizing: border-box;
   }
   &[k-placement^=top] {
-    .k-poptip-arrow {
-      height: 6px;
-      bottom: 4px;
-      &::after {
-        top: -10px;
-        left: 2px;
-      }
+    .k-tooltip-arrow {
+      bottom: 7px;
+      border-width: 5px 5px 0 5px;
+      border-top-color: @color;
+    }
+    .k-tooltip-inner {
+      margin-bottom: 12px;
     }
   }
   &[k-placement=top] {
-    .k-poptip-arrow {
+    .k-tooltip-arrow {
       left: 50%;
-      margin-left: -6px;
+      transform: translateX(-50%);
     }
   }
   &[k-placement=top-right] {
-    .k-poptip-arrow {
-      right: 15px;
+    .k-tooltip-arrow {
+      right: 10px;
     }
   }
   &[k-placement=top-left] {
-    .k-poptip-arrow {
-      left: 15px;
+    .k-tooltip-arrow {
+      left: 10px;
     }
   }
   &[k-placement^=bottom] {
-    .k-poptip-arrow {
-      top: 4px;
-      height: 6px;
-      &::after {
-        top: 4px;
-      }
+    .k-tooltip-arrow {
+      top: 7px;
+      border-width: 0px 5px 5px 5px;
+      border-bottom-color: @color;
+    }
+    .k-tooltip-inner {
+      margin-top: 12px;
     }
   }
   &[k-placement=bottom] {
-    .k-poptip-arrow {
+    .k-tooltip-arrow {
       left: 50%;
-      margin-left: -6px;
     }
   }
   &[k-placement=bottom-left] {
-    .k-poptip-arrow {
-      left: 15px;
+    .k-tooltip-arrow {
+      left: 10px;
     }
   }
   &[k-placement=bottom-right] {
-    .k-poptip-arrow {
-      right: 15px;
+    .k-tooltip-arrow {
+      right: 10px;
     }
   }
   &[k-placement^=left] {
-    .k-poptip-arrow {
-      right: 4px;
-      width: 6px;
-      &::after {
-        top: 0px;
-        left: -10px;
-      }
+    .k-tooltip-arrow {
+      right: 7px;
+      border-width: 5px 0px 5px 5px;
+      border-left-color: @color;
+    }
+    .k-tooltip-inner {
+      margin-right: 12px;
     }
   }
   &[k-placement=left] {
-    .k-poptip-arrow {
+    .k-tooltip-arrow {
       top: 50%;
       margin-top: -6px;
     }
   }
   &[k-placement=left-bottom] {
-    .k-poptip-arrow {
-      bottom: 15px;
+    .k-tooltip-arrow {
+      bottom: 10px;
     }
   }
   &[k-placement=left-top] {
-    .k-poptip-arrow {
-      top: 15px;
+    .k-tooltip-arrow {
+      top: 10px;
     }
-  } //ok
+  }
   &[k-placement^=right] {
-    .k-poptip-arrow {
-      left: 4px;
-      width: 6px;
-      &::after {
-        top: 0px;
-        left: 4px;
-      }
+    .k-tooltip-arrow {
+      left: 7px;
+      border-width: 5px 5px 5px 0px;
+      border-right-color: @color;
+    }
+    .k-tooltip-inner {
+      margin-left: 12px;
     }
   }
   &[k-placement=right] {
-    .k-poptip-arrow {
+    .k-tooltip-arrow {
       top: 50%;
-      margin-top: -6px;
+      transform: translateY(-50%);
     }
   }
   &[k-placement=right-top] {
-    .k-poptip-arrow {
-      top: 15px;
+    .k-tooltip-arrow {
+      top: 10px;
     }
   }
   &[k-placement=right-bottom] {
-    .k-poptip-arrow {
-      bottom: 15px;
+    .k-tooltip-arrow {
+      bottom: 10px;
     }
   }
 }
 
-.k-tooltip-dark {
-  .k-tooltip-dom {
-    .k-tooltip-content {
-      background: @dark;
-      color: #fff;
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px;
-    }
-    .k-poptip-arrow::after {
-      background: rgba(0, 0, 0, 0.75);
-    }
+@keyframes pop-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(.8, .8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes pop-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1, 1);
   }
+  to {
+    opacity: 0;
+    transform: scale(.8, .8);
+  }
+}
+
+.k-tooltip-fade-enter-active {
+  // transform-origin: center bottom;
+  animation: pop-zoom-in .3s;
+}
+
+.k-tooltip-fade-leave-active {
+  // transform-origin: center bottom;
+  animation: pop-zoom-out .3s;
 }
\ No newline at end of file
diff --git a/components/tooltip/tooltip.jsx b/components/tooltip/tooltip.jsx
new file mode 100644
index 00000000..5c5eedc5
--- /dev/null
+++ b/components/tooltip/tooltip.jsx
@@ -0,0 +1,29 @@
+import PopBase from '../base/pop'
+export default {
+  name: 'Tooltip',
+  props: {
+    dark: { type: Boolean, default: false },
+    transfer: { type: Boolean, default: true },
+    title: String,
+    width: [Number, String],
+    placement: {
+      validator(value) {
+        return (
+          ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-bottom", "left-top", "right", "right-top", "right-bottom"].indexOf(value) >= 0
+        );
+      },
+      default: "top"
+    },
+  },
+  render() {
+    let props = {
+      props: { preCls: 'tooltip', ...this.$props },
+    }
+    return (
+      
+        {this.$slots.default}
+        
+      
+    )
+  }
+};
\ No newline at end of file
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
deleted file mode 100644
index 652c333f..00000000
--- a/components/tooltip/tooltip.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-
-
\ No newline at end of file
diff --git a/docs/a.less b/docs/a.less
new file mode 100644
index 00000000..bdf11366
--- /dev/null
+++ b/docs/a.less
@@ -0,0 +1 @@
+fdsfas
\ No newline at end of file
diff --git a/docs/assets/markdown.less b/docs/assets/markdown.less
index ba064f28..d1a77db7 100644
--- a/docs/assets/markdown.less
+++ b/docs/assets/markdown.less
@@ -405,6 +405,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .typo table thead th, .typo-table thead th {
   background: #f1f1f1;
+  white-space: nowrap;
 }
 
 .typo table caption {
diff --git a/docs/main.js b/docs/main.js
index efb499b3..349fe4c7 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -5,7 +5,7 @@ import router from './router'
 // import kui from '@/index'
 // import './assets/demo.less'
 // import './assets/atom-one-light.css'
-import '../components/styles'
+import '../components/styles.js'
 
 import './assets/index.less'
 
@@ -14,12 +14,9 @@ import kui from '../components'
 import Copy from 'vue-clipboard2'
 
 import Demo from './components/demo'
-import Api from './components/api'
 // import MD from './components/md'
 
 Vue.component('demo', Demo)
-// Vue.component('MD', MD)
-Vue.component('Api', Api)
 
 Vue.use(Copy)
 Vue.use(kui)
diff --git a/docs/menu.js b/docs/menu.js
index 126805d9..01ca35ae 100644
--- a/docs/menu.js
+++ b/docs/menu.js
@@ -13,8 +13,8 @@ const Nav = [
   {
     title: "基础组件",
     child: [
-      // { title: "图标", sub: "Icon", name: "icon", icon: "ios-heart" },
-      // { title: "按钮", sub: "Button", name: "button", icon: 'ios-square' },
+      { title: "图标", sub: "Icon", name: "icon", icon: "ios-heart" },
+      { title: "按钮", sub: "Button", name: "button", icon: 'ios-square' },
       // { title: "颜色", sub: "ColorPicker", name: "colorpicker", icon: 'ios-color-palette' },
       // { title: "栅格", sub: "Grid", name: "grid", icon: 'ios-grid' },
       // { title: "布局", sub: "Layout", name: "layout", icon: 'ios-albums' },
@@ -23,20 +23,20 @@ const Nav = [
   {
     title: "表单",
     child: [
-      { title: "输入框", sub: "Input", name: "input", icon: 'ios-create' },
-      { title: "多选框", sub: "Checkbox", name: "checkbox", icon: 'ios-checkbox' },
-      { title: "单选框", sub: "Radio", name: "radio", icon: 'ios-checkmark-circle' },
-      { title: "开关", sub: "Switch", name: "switch", icon: 'ios-switch' },
+      // { title: "输入框", sub: "Input", name: "input", icon: 'ios-create' },
+      // { title: "多选框", sub: "Checkbox", name: "checkbox", icon: 'ios-checkbox' },
+      // { title: "单选框", sub: "Radio", name: "radio", icon: 'ios-checkmark-circle' },
+      // { title: "开关", sub: "Switch", name: "switch", icon: 'ios-switch' },
       { title: "下拉框", sub: "Select", name: "select", icon: 'ios-arrow-down' },
-      { title: "日期", sub: "DatePicker", name: "datepicker", icon: 'ios-calendar' },
-      { title: "表格", sub: "Table", name: "table", icon: 'ios-grid' },
-      { title: "上传", sub: "Upload", name: "upload", icon: 'ios-cloud-upload' },
-      { title: "表单", sub: "Form", name: "form", icon: 'ios-list' },
+      { title: "日期选择框", sub: "DatePicker", name: "datepicker", icon: 'ios-calendar' },
+      // { title: "表格", sub: "Table", name: "table", icon: 'ios-grid' },
+      // { title: "上传", sub: "Upload", name: "upload", icon: 'ios-cloud-upload' },
+      // { title: "表单", sub: "Form", name: "form", icon: 'ios-list' },
     ]
   },
-  // {
-  //   title: '视图',
-  //   child: [
+  {
+    title: '视图',
+    child: [
   //     { title: "警告提示", sub: "Alert", name: "alert", icon: 'ios-alert' },
   //     { title: "徽标", sub: "Badge", name: "badge", icon: 'ios-mail-unread' },
   //     { title: "卡片", sub: "Card", name: "card", icon: 'ios-card' },
@@ -49,25 +49,26 @@ const Nav = [
   //     { title: "对话框", sub: "Modal", name: "modal", icon: 'ios-chatbubbles' },
   //     { title: "标签", sub: "Tag", name: "tag", icon: 'ios-bookmark' },
   //     { title: "时间轴", sub: "TimeLine", name: "timeline", icon: 'ios-time' },
-  //     { title: "气泡提示", sub: "Poptip", name: "poptip", icon: 'ios-chatbubbles' },
-  //     { title: "文字提示", sub: "Tooltip", name: "tooltip", icon: 'ios-text' },
+      { title: "气泡卡片", sub: "Poptip", name: "poptip", icon: 'ios-chatbubbles' },
+      { title: "气泡确认框", sub: "Popconfirm", name: "popconfirm", icon: 'ios-chatbubbles' },
+      { title: "文字提示", sub: "Tooltip", name: "tooltip", icon: 'ios-text' },
   //     { title: "树形控件", sub: "Tree", name: "tree", icon: 'ios-git-merge' },
   //     { title: "树选择", sub: "TreeSelect", name: "treeselect", icon: 'ios-git-pull-request' },
-  //   ]
-  // },
-  // {
-  //   title: '导航',
-  //   child: [
+    ]
+  },
+  {
+    title: '导航',
+    child: [
   //     { title: "图钉", sub: "Affix", name: "affix", icon: 'ios-pin' },
   //     { title: "面包屑", sub: "Breadcrumb", name: "breadcrumb", icon: 'ios-arrow-forward' },
   //     { title: "回到顶部", sub: "BackTop", name: "backtop", icon: 'md-arrow-up' },
-  //     { title: "下拉菜单", sub: "Dropdown", name: "dropdown", icon: 'ios-arrow-dropdown-circle' },
+      { title: "下拉菜单", sub: "Dropdown", name: "dropdown", icon: 'ios-arrow-dropdown-circle' },
   //     { title: "加载进度", sub: "Loading", name: "loading", icon: 'ios-pulse' },
   //     { title: "导航菜单", sub: "Menu", name: "menu", icon: 'ios-list' },
   //     { title: "分页", sub: "Page", name: "page", icon: 'ios-fastforward' },
   //     { title: "步骤条", sub: "Steps", name: "steps", icon: 'ios-done-all' },
   //     { title: "标签页", sub: "Tabs", name: "tabs", icon: 'ios-photos' },
-  //   ]
-  // },
+    ]
+  },
 ]
 export default Nav
\ No newline at end of file
diff --git a/docs/router.js b/docs/router.js
index 29cbcc59..f4cc5b91 100644
--- a/docs/router.js
+++ b/docs/router.js
@@ -9,11 +9,11 @@ Vue.use(Router)
 let router = []
 
 let docs = [
-    // { path: 'start', component: () => import(/*webpackChunkName:'start'*/'./views/start') },
-    // { path: 'log', component: () => import(/*webpackChunkName:'log'*/'./views/log') },
-    // { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'./views/ssr') },
-    // { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'./views/theme') },
-    // { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'./views/kui-loader') },
+    { path: 'start', component: () => import(/*webpackChunkName:'start'*/'./views/start') },
+    { path: 'log', component: () => import(/*webpackChunkName:'log'*/'./views/log') },
+    { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'./views/ssr') },
+    { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'./views/theme') },
+    { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'./views/kui-loader') },
 ]
 let components = [
     //     { path: 'about', component: () => import(/*webpackChunkName:'about'*/'../components/about'), },
@@ -26,19 +26,19 @@ let components = [
     //     { path: 'colorpicker', component: () => import(/*webpackChunkName:'colorpicker'*/'../components/colorpicker'/demo), },
     //     { path: 'color', component: () => import(/*webpackChunkName:'color'*/'../components/color/demo'), },
     // { path: 'checkbox', component: () => import(/*webpackChunkName:'checkbox'*/'../components/checkbox/demo'), },
-    // { path: 'button', component: () => import(/*webpackChunkName:'button'*/'../components/button/demo'), },
+    { path: 'button', component: () => import(/*webpackChunkName:'button'*/'../components/button/demo'), },
     // { path: 'breadcrumb', component: () => import(/*webpackChunkName:'breadcrumb'*/'../components/breadcrumb/demo'), },
     //     { path: 'backtop', component: () => import(/*webpackChunkName:'backtop'*/'../components/backtop'/demo), },
     // { path: 'badge', component: () => import(/*webpackChunkName:'badge'*/'../components/badge/demo'), },
-        { path: 'datepicker', component: () => import(/*webpackChunkName:'datepicker'*/'../components/datepicker/demo'), },
-    //     { path: 'dropdown', component: () => import(/*webpackChunkName:'dropdown'*/'../components/dropdown'/demo), },
+        { path: 'datepicker', component: () => import(/*webpackChunkName:'datepicker'*/'../components/datePicker/demo'), },
+        { path: 'dropdown', component: () => import(/*webpackChunkName:'dropdown'*/'../components/dropdown/demo'), },
     // { path: 'drawer', component: () => import(/*webpackChunkName:'drawer'*/'../components/drawer/demo'), },
     //     { path: 'form', component: () => import(/*webpackChunkName:'form'*/'../components/form'/demo), },
     //     { path: 'font', component: () => import(/*webpackChunkName:'font'*/'../components/font/demo'), },
     // { path: 'grid', component: () => import(/*webpackChunkName:'grid'*/'../components/grid/demo'), },
     //     { path: 'imagepreview', component: () => import(/*webpackChunkName:'image-preview'*/'../components/image-preview/demo'), },
     // { path: 'input', component: () => import(/*webpackChunkName:'input'*/'../components/input/demo'), },
-    // { path: 'icon', component: () => import(/*webpackChunkName:'icon'*/'../components/icon/demo'), },
+    { path: 'icon', component: () => import(/*webpackChunkName:'icon'*/'../components/icon/demo'), },
     //     { path: 'kui-loader', component: () => import(/*webpackChunkName:'kui-loader'*/'../components/kui-loader/demo'), },
     //     { path: 'log', component: () => import(/*webpackChunkName:'log'*/'../components/log/demo'), },
     { path: 'layout', component: () => import(/*webpackChunkName:'layout'*/'../components/layout/demo'), },
@@ -49,7 +49,7 @@ let components = [
     // { path: 'notice', component: () => import(/*webpackChunkName:'notice'*/'../components/notice/demo'), },
     // { path: 'radio', component: () => import(/*webpackChunkName:'radio'*/'../components/radio/demo'), },
     //     { path: 'react-kui', component: () => import(/*webpackChunkName:'react-kui'*/'../components/react-kui/demo'), },
-    // { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
+    { path: 'select', component: () => import(/*webpackChunkName:'select'*/'../components/select/demo'), },
     //     { path: 'ssr', component: () => import(/*webpackChunkName:'ssr'*/'../components/ssr/demo'), },
     // { path: 'switch', component: () => import(/*webpackChunkName:'switch'*/'../components/switch/demo'), },
     //     { path: 'start', component: () => import(/*webpackChunkName:'start'*/'../components/start/demo'), },
@@ -59,28 +59,31 @@ let components = [
     // { path: 'tag', component: () => import(/*webpackChunkName:'tag'*/'../components/tag/demo'), },
     //     { path: 'tabs', component: () => import(/*webpackChunkName:'tabs'*/'../components/tabs/demo'), },
     // { path: 'timeline', component: () => import(/*webpackChunkName:'timeline'*/'../components/timeline/demo'), },
-    //     { path: 'tooltip', component: () => import(/*webpackChunkName:'tooltip'*/'../components/tooltip/demo'), },
+        { path: 'tooltip', component: () => import(/*webpackChunkName:'tooltip'*/'../components/tooltip/demo'), },
     //     { path: 'theme', component: () => import(/*webpackChunkName:'theme'*/'../components/theme/demo'), },
     //     { path: 'tree', component: () => import(/*webpackChunkName:'tree'*/'../components/tree/demo'), },
     //     { path: 'treeselect', component: () => import(/*webpackChunkName:'treeselect'*/'../components/treeselect'), },
     //     { path: 'test', component: () => import(/*webpackChunkName:'test'*/'../components/test'), },
-    //     { path: 'poptip', component: () => import(/*webpackChunkName:'poptip'*/'../components/poptip/demo'), },
+    { path: 'poptip', component: () => import(/*webpackChunkName:'poptip'*/'../components/poptip/demo'), },
+    { path: 'popconfirm', component: () => import(/*webpackChunkName:'popconfirm'*/'../components/popconfirm/demo'), },
     //     { path: 'page', component: () => import(/*webpackChunkName:'page'*/'../components/page/demo'), },
     //     { path: 'upload', component: () => import(/*webpackChunkName:'upload'*/'../components/upload/demo'), },
 ];
 
+import layout from './layout'
 
 router.push(
     { path: '/', component: () => import(/*webpackChunkName:'home'*/'./index') },
     { path: '/test', component: () => import(/*webpackChunkName:'test'*/'./test') },
+    // { path: '/wwocao', component: () => import(/*webpackChunkName:'test'*/'./views/start') },
     {
-        path: '/components/',
-        component: () => import(/*webpackChunkName:'components'*/'./layout'),
+        path: '/components',
+        component: layout,
         children: components
     },
     {
-        path: '/docs/',
-        component: () => import(/*webpackChunkName:'docs'*/'./layout'),
+        path: '/docs',
+        component: layout,
         children: docs
     }
 )
diff --git a/docs/test.vue b/docs/test.vue
index e1852387..27596951 100644
--- a/docs/test.vue
+++ b/docs/test.vue
@@ -1,49 +1,14 @@
- 
-
-
-
-
+ 
\ No newline at end of file
diff --git a/docs/views/install.md b/docs/views/install.md
deleted file mode 100644
index 87c7c9e5..00000000
--- a/docs/views/install.md
+++ /dev/null
@@ -1,51 +0,0 @@
-## 安装 
-
-### CDN 引入 
-在页面上引入 js 和 css 文件即可开始使用:
-
-````html
-
-// 
-
-
-
-// 
-````
-### 示例
-````html
-
-
-
-  
-  kui example
-  
-  
-  
-
-
-  
    
-    Click me!
-    Welcome to use kui
-  
    
-  
-
-
-````
-### NPM 安装
-```sh
-$ npm install kui-vue --save
-#OR
-$ yarn add kui-vue
-```
\ No newline at end of file
diff --git a/package.json b/package.json
index be7caaa2..35e9509d 100755
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "scripts": {
         "start": "npm run dev",
         "test": "webpack-dev-server --config build/test.js",
-        "dev": "webpack-dev-server  --config build/webpack.dev.conf.js",
+        "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
         "build:docs": "node build/build.js docs",
         "build": "node build/build.js "
     },
@@ -44,52 +44,49 @@
         "email": "chuchur@qq.com"
     },
     "devDependencies": {
-        "@babel/core": "^7.7.5",
+        "@babel/core": "^7.7.7",
         "@babel/helper-module-imports": "^7.7.4",
         "@babel/plugin-syntax-dynamic-import": "^7.7.4",
         "@babel/plugin-syntax-jsx": "^7.7.4",
         "@babel/polyfill": "^7.7.0",
-        "@babel/preset-env": "^7.7.5",
+        "@babel/preset-env": "^7.7.7",
         "babel-helper-vue-jsx-merge-props": "^2.0.3",
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-vue-jsx": "^4.0.1",
         "babel-preset-env": "^1.7.0",
         "chalk": "^3.0.0",
-        "css-loader": "^3.2.1",
+        "css-loader": "^3.4.0",
         "file-loader": "^5.0.2",
         "html-webpack-plugin": "^3.2.0",
         "kui-loader": "^1.0.2",
         "less": "^3.10.3",
         "less-loader": "^5.0.0",
-        "mini-css-extract-plugin": "^0.8.0",
+        "mini-css-extract-plugin": "^0.9.0",
         "opn": "^6.0.0",
         "optimize-css-assets-webpack-plugin": "^5.0.3",
         "ora": "^4.0.3",
         "postcss-loader": "^3.0.0",
         "rimraf": "^3.0.0",
-        "style-loader": "^1.0.1",
+        "style-loader": "^1.1.2",
         "uglifyjs-webpack-plugin": "^2.2.0",
         "url-loader": "^3.0.0",
-        "vue": "^2.6.10",
+        "vue": "^2.6.11",
         "vue-clipboard2": "^0.3.1",
         "vue-hljs": "^1.1.2",
-        "vue-loader": "^15.7.2",
+        "vue-loader": "^15.8.3",
         "vue-router": "^3.1.3",
         "vue-style-loader": "^4.1.2",
-        "vue-template-compiler": "^2.6.10",
-        "webpack": "^4.41.2",
+        "vue-template-compiler": "^2.6.11",
+        "webpack": "^4.41.4",
         "webpack-cli": "^3.3.10",
-        "webpack-dev-server": "^3.9.0",
+        "webpack-dev-server": "^3.10.1",
         "webpack-merge": "^4.2.2",
         "webpack-simple-progress-plugin": "0.0.4",
         "webpackbar": "^4.0.0"
     },
     "dependencies": {
-        "@stencil/core": "^1.8.1",
-        "ionicons": "^4.6.3",
-        "ionicons-svg": "^3.0.0",
         "markdown-it-anchor": "^5.2.5",
-        "marked": "^0.7.0",
+        "marked": "^0.8.0",
         "moment": "^2.24.0",
         "vue-antd-md-loader": "^1.1.0",
         "vue-markdown-loader": "^2.4.1"
-- 
Gitee


From c4c7ae2831912995ec92b4e1630fef229c80e697 Mon Sep 17 00:00:00 2001
From: chuchur 
Date: Mon, 20 Jan 2020 15:53:46 +0800
Subject: [PATCH 06/15] =?UTF-8?q?=E5=AE=8C=E6=88=90page,select,tooltip,pop?=
 =?UTF-8?q?tip,colorpicker,backtop,affix=E7=9A=84=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/_tool/scroll.js                    |  14 +
 components/_tool/utils.js                     |   2 +-
 components/affix/affix.jsx                    | 116 +++++
 components/affix/affix.vue                    |  94 ----
 components/affix/demo/affix.js                |  38 --
 components/affix/demo/affix.vue               | 104 -----
 components/affix/demo/base.md                 |  13 +
 components/affix/demo/bottom.md               |  16 +
 components/affix/demo/callback.md             |  21 +
 components/affix/demo/container.md            |  27 ++
 components/affix/demo/index.vue               |  23 +
 components/affix/demo/info.md                 |   8 +
 components/affix/index.js                     |   2 +-
 components/affix/index.md                     |   6 +
 components/affix/styles/index.less            |   4 +-
 .../backtop/{backTop.vue => backtop.jsx}      |  38 +-
 components/backtop/demo/backtop.vue           |  91 ----
 components/backtop/demo/base.md               |  13 +
 .../backtop/demo/{backtop.js => custom.md}    |  23 +-
 components/backtop/demo/index.vue             |  19 +
 components/backtop/demo/info.md               |   7 +
 components/backtop/index.js                   |   2 +-
 components/backtop/index.md                   |   7 +
 components/backtop/styles/index.less          |  85 ++--
 components/card/demo/base.md                  |  18 +-
 components/card/demo/border.md                |  18 +-
 components/card/styles/index.less             |   4 +-
 components/colorPicker/canvasHelper.js        | 265 +++++++++++
 components/colorPicker/colorPicker.vue        | 259 -----------
 components/colorPicker/colorpicker.jsx        | 439 ++++++++++++++++++
 components/colorPicker/demo/base.md           |  21 +
 components/colorPicker/demo/colorpicker.vue   |  58 ---
 components/colorPicker/demo/colors.md         |  22 +
 components/colorPicker/demo/index.vue         |  22 +
 components/colorPicker/demo/info.md           |   6 +
 components/colorPicker/demo/mode.md           |  25 +
 components/colorPicker/demo/size.md           |  25 +
 components/colorPicker/img/marker.png         | Bin 652 -> 0 bytes
 components/colorPicker/img/mask.png           | Bin 2020 -> 0 bytes
 components/colorPicker/img/wheel.png          | Bin 11733 -> 0 bytes
 components/colorPicker/index.js               |   2 +-
 components/colorPicker/index.md               |   8 +
 components/colorPicker/picker.vue             | 237 ----------
 components/colorPicker/styles/index.less      | 324 +++++++------
 components/datePicker/datecalendar.jsx        |   2 -
 components/icon/demo/search.vue               |   3 +-
 components/index.js                           |   3 +-
 components/input/demo/icon.md                 |   4 +-
 components/input/styles/index.less            |   2 +-
 components/page/demo/base.md                  |  12 +
 components/page/demo/elevator.md              |  12 +
 components/page/demo/index.vue                |  24 +
 components/page/demo/info.md                  |   7 +
 components/page/demo/mini.md                  |  15 +
 components/page/demo/more.md                  |  12 +
 components/page/demo/size.md                  |  23 +
 components/page/index.md                      |  13 +
 components/page/page.jsx                      | 168 +++++++
 components/page/styles/index.less             | 185 +++++---
 .../demo/embed.md => progress/demo/base.md}   |   4 +-
 components/progress/demo/index.vue            |  25 +
 components/progress/demo/info.md              |  10 +
 components/progress/index.js                  |   0
 components/progress/index.md                  |   9 +
 components/progress/progress.jsx              |  13 +
 components/progress/styles/index.less         |   0
 components/select/demo/base.md                |   6 +-
 components/select/demo/filterable.md          |   1 +
 components/select/demo/multiple.md            |   2 +-
 components/select/demo/size.md                |   6 +
 components/select/select.jsx                  |  94 ++--
 components/select/styles/index.less           |  49 +-
 components/table/demo/base.md                 |  25 +
 components/table/demo/index.vue               |  18 +
 components/table/demo/info.md                 |   8 +
 components/table/index.md                     |  29 ++
 components/tooltip/demo/index.vue             |   2 -
 docs/assets/demo.less                         |  58 +--
 docs/assets/index.less                        |   2 +-
 docs/components/header.vue                    |  29 +-
 docs/layout.vue                               |  20 +-
 docs/main.js                                  |   1 -
 docs/menu.js                                  |  77 +--
 docs/router.js                                |  58 ++-
 package.json                                  |  20 +-
 85 files changed, 2191 insertions(+), 1386 deletions(-)
 create mode 100644 components/_tool/scroll.js
 create mode 100644 components/affix/affix.jsx
 delete mode 100644 components/affix/affix.vue
 delete mode 100644 components/affix/demo/affix.js
 delete mode 100644 components/affix/demo/affix.vue
 create mode 100644 components/affix/demo/base.md
 create mode 100644 components/affix/demo/bottom.md
 create mode 100644 components/affix/demo/callback.md
 create mode 100644 components/affix/demo/container.md
 create mode 100644 components/affix/demo/index.vue
 create mode 100644 components/affix/demo/info.md
 create mode 100644 components/affix/index.md
 rename components/backtop/{backTop.vue => backtop.jsx} (75%)
 delete mode 100644 components/backtop/demo/backtop.vue
 create mode 100644 components/backtop/demo/base.md
 rename components/backtop/demo/{backtop.js => custom.md} (31%)
 create mode 100644 components/backtop/demo/index.vue
 create mode 100644 components/backtop/demo/info.md
 create mode 100644 components/backtop/index.md
 create mode 100644 components/colorPicker/canvasHelper.js
 delete mode 100644 components/colorPicker/colorPicker.vue
 create mode 100644 components/colorPicker/colorpicker.jsx
 create mode 100644 components/colorPicker/demo/base.md
 delete mode 100644 components/colorPicker/demo/colorpicker.vue
 create mode 100644 components/colorPicker/demo/colors.md
 create mode 100644 components/colorPicker/demo/index.vue
 create mode 100644 components/colorPicker/demo/info.md
 create mode 100644 components/colorPicker/demo/mode.md
 create mode 100644 components/colorPicker/demo/size.md
 delete mode 100644 components/colorPicker/img/marker.png
 delete mode 100644 components/colorPicker/img/mask.png
 delete mode 100644 components/colorPicker/img/wheel.png
 create mode 100644 components/colorPicker/index.md
 delete mode 100644 components/colorPicker/picker.vue
 create mode 100644 components/page/demo/base.md
 create mode 100644 components/page/demo/elevator.md
 create mode 100644 components/page/demo/index.vue
 create mode 100644 components/page/demo/info.md
 create mode 100644 components/page/demo/mini.md
 create mode 100644 components/page/demo/more.md
 create mode 100644 components/page/demo/size.md
 create mode 100644 components/page/index.md
 create mode 100644 components/page/page.jsx
 rename components/{tooltip/demo/embed.md => progress/demo/base.md} (88%)
 create mode 100644 components/progress/demo/index.vue
 create mode 100644 components/progress/demo/info.md
 create mode 100644 components/progress/index.js
 create mode 100644 components/progress/index.md
 create mode 100644 components/progress/progress.jsx
 create mode 100644 components/progress/styles/index.less
 create mode 100644 components/table/demo/base.md
 create mode 100644 components/table/demo/index.vue
 create mode 100644 components/table/demo/info.md
 create mode 100644 components/table/index.md

diff --git a/components/_tool/scroll.js b/components/_tool/scroll.js
new file mode 100644
index 00000000..827cf162
--- /dev/null
+++ b/components/_tool/scroll.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+const SSR = Vue.prototype.$isServer
+export default {
+  bind(el, { value }) {
+    if (SSR) return;
+    if (typeof value == 'function') {
+      window.addEventListener('scroll', value)
+    }
+  },
+  unbind(el, { value }) {
+    if (typeof value == 'function')
+      window.removeEventListener('scroll', value)
+  }
+}
\ No newline at end of file
diff --git a/components/_tool/utils.js b/components/_tool/utils.js
index 3339e361..da4810d5 100644
--- a/components/_tool/utils.js
+++ b/components/_tool/utils.js
@@ -13,7 +13,7 @@ export function contains(ele, target) {
 }
 
 export function isNotEmpty(str) {
-  return str !== '' && str !== undefined && str !== null && str.length > 0
+  return str !== '' && str !== undefined && str !== null
 }
 
 export function hasProp(context, key) {
diff --git a/components/affix/affix.jsx b/components/affix/affix.jsx
new file mode 100644
index 00000000..763326fd
--- /dev/null
+++ b/components/affix/affix.jsx
@@ -0,0 +1,116 @@
+
+import scroll from '../_tool/scroll'
+import resize from '../_tool/resize'
+
+function getOffset(element, target) {
+  let { top, height, width } = element.getBoundingClientRect()
+  if (target === document) target = target.documentElement
+  let targetRect = (target !== window) ? target.getBoundingClientRect() : { top: 0, let: 0, bottom: 0 }
+
+  let scrollTop = (target !== window) ? target.scrollTop : target.pageYOffset
+  return {
+    top, height, width, scrollTop,
+    targetHeight: targetRect.height,
+    targetInnerHeight: target.innerHeight || target.clientHeight
+  }
+}
+
+export default {
+  name: 'Affix',
+  directives: { scroll, resize },
+  props: {
+    offsetTop: { type: Number, default: 0 },
+    offsetBottom: Number,
+    target: { type: Function, default: () => { } }
+  },
+  data() {
+    return {
+      showBlob: false,
+      width: 0,
+      height: 0,
+      offsetModeOfTop: false,
+      offsetModeOfBottom: false
+    }
+  },
+
+  mounted() {
+    let target = this.target()
+    if (target) {
+      target.addEventListener('scroll', e => {
+        // console.log(e)
+      })
+    }
+    this.updatePosition(window)
+  },
+  methods: {
+    updatePosition(e) {
+      // console.log(e)
+      let { offsetBottom, offsetTop, $refs } = this
+      if (this.showBlob) {
+        let { top, height, targetInnerHeight } = getOffset($refs.blob, document)
+
+        if (typeof offsetBottom != undefined && offsetBottom >= 0) {
+          // unfixedBottom
+          // this.offsetModeOfBottom = false
+          if (0 >= top + height + offsetBottom - targetInnerHeight) {
+            this.offsetModeOfBottom = false
+            this.showBlob = false
+          }
+        } else if (top >= offsetTop) { // unfixedTop
+          this.offsetModeOfTop = false
+          this.showBlob = false
+        }
+        if (!this.showBlob) {
+          this.showBlob = false
+          this.$emit('change', false)
+        }
+      } else {
+        let { top, height, width, targetInnerHeight } = getOffset($refs.blob, document)
+        if (typeof offsetBottom != undefined && offsetBottom >= 0) {
+          //fixedBottom
+          if (0 <= top + height + offsetBottom - targetInnerHeight) {
+            this.offsetModeOfBottom = true
+            this.showBlob = true
+          }
+        } else if (top <= offsetTop) { //fixedTop
+          this.showBlob = true
+          this.offsetModeOfTop = true
+        }
+        if (this.showBlob) {
+          this.showBlob = true
+          this.$emit('change', true)
+          this.width = width
+          this.height = height
+        }
+      }
+    }
+  },
+  render() {
+    let blobStyle = null, fixedStyle = null, classes = null;
+    if (this.showBlob) {
+      blobStyle = {
+        width: `${this.width}px`,
+        height: `${this.height}px`
+      }
+      fixedStyle = {
+        width: `${this.width}px`,
+        height: `${this.height}px`
+      }
+      if (this.offsetModeOfBottom) {
+        fixedStyle.bottom = `${this.offsetBottom}px`
+      }
+      if (this.offsetModeOfTop) {
+        fixedStyle.top = `${this.offsetTop}px`
+      }
+      classes = { ['k-affix']: this.showBlob }
+    }
+
+    return (
+      
    
+        
    
+          {this.$slots.default}
+        
    
+      
    
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/affix/affix.vue b/components/affix/affix.vue
deleted file mode 100644
index 582c0dc0..00000000
--- a/components/affix/affix.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/components/affix/demo/affix.js b/components/affix/demo/affix.js
deleted file mode 100644
index f9a97c6b..00000000
--- a/components/affix/demo/affix.js
+++ /dev/null
@@ -1,38 +0,0 @@
-let code = {}
-
-code.base = `
-  
-
-
-  
-`
-
-code.offset = `
-  
-
-
-  
-`
-
-code.callback = `
-  
-
-
-  
-
-
-`
-
-export default code
\ No newline at end of file
diff --git a/components/affix/demo/affix.vue b/components/affix/demo/affix.vue
deleted file mode 100644
index c1ab1305..00000000
--- a/components/affix/demo/affix.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-
-
diff --git a/components/affix/demo/base.md b/components/affix/demo/base.md
new file mode 100644
index 00000000..246311d7
--- /dev/null
+++ b/components/affix/demo/base.md
@@ -0,0 +1,13 @@
+
+#### 基本 
+最简单的用法。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/affix/demo/bottom.md b/components/affix/demo/bottom.md
new file mode 100644
index 00000000..9d3e5590
--- /dev/null
+++ b/components/affix/demo/bottom.md
@@ -0,0 +1,16 @@
+
+#### 基本 
+最简单的用法。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/affix/demo/callback.md b/components/affix/demo/callback.md
new file mode 100644
index 00000000..3f421063
--- /dev/null
+++ b/components/affix/demo/callback.md
@@ -0,0 +1,21 @@
+
+#### 固定状态改变的回调 
+可以获得是否固定的状态。
+
+
+```tpl
+
+ 
+```
\ No newline at end of file
diff --git a/components/affix/demo/container.md b/components/affix/demo/container.md
new file mode 100644
index 00000000..e320d4c4
--- /dev/null
+++ b/components/affix/demo/container.md
@@ -0,0 +1,27 @@
+
+#### 基本 
+最简单的用法。
+
+
+```tpl
+
+
+
+```
\ No newline at end of file
diff --git a/components/affix/demo/index.vue b/components/affix/demo/index.vue
new file mode 100644
index 00000000..e221de99
--- /dev/null
+++ b/components/affix/demo/index.vue
@@ -0,0 +1,23 @@
+ 
\ No newline at end of file
diff --git a/components/affix/demo/info.md b/components/affix/demo/info.md
new file mode 100644
index 00000000..aed0a301
--- /dev/null
+++ b/components/affix/demo/info.md
@@ -0,0 +1,8 @@
+## Affix 固钉
+将页面元素钉在可视范围。
+
+## 何时使用
+当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/affix/index.js b/components/affix/index.js
index bdd6a6e0..da7cf069 100644
--- a/components/affix/index.js
+++ b/components/affix/index.js
@@ -1,2 +1,2 @@
-import Affix from './affix'
+import Affix from './affix.jsx'
 export default Affix
\ No newline at end of file
diff --git a/components/affix/index.md b/components/affix/index.md
new file mode 100644
index 00000000..c05c0946
--- /dev/null
+++ b/components/affix/index.md
@@ -0,0 +1,6 @@
+## API
+| 属性           | 说明                                 | 类型            | 默认值 |
+|--------------|------------------------------------|---------------|-----|
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发                   | String,Number | 0   |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发                   | String,Number | -   |
+| change       | 在固定状态发生改变时触发,返回当前固定状态 `false` , `true` | Function      | -   |
\ No newline at end of file
diff --git a/components/affix/styles/index.less b/components/affix/styles/index.less
index 57319eed..09bfe3e3 100644
--- a/components/affix/styles/index.less
+++ b/components/affix/styles/index.less
@@ -1,5 +1,5 @@
 @import '../../styles/global.less';
 .k-affix {
-    position: fixed;
-    z-index: 1000;
+	position: fixed;
+	z-index: 1000;
 }
\ No newline at end of file
diff --git a/components/backtop/backTop.vue b/components/backtop/backtop.jsx
similarity index 75%
rename from components/backtop/backTop.vue
rename to components/backtop/backtop.jsx
index bcaffee1..296161c0 100644
--- a/components/backtop/backTop.vue
+++ b/components/backtop/backtop.jsx
@@ -1,18 +1,8 @@
-
-
+}; 
\ No newline at end of file
diff --git a/components/backtop/demo/backtop.vue b/components/backtop/demo/backtop.vue
deleted file mode 100644
index 1b6cb3fe..00000000
--- a/components/backtop/demo/backtop.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-
-
-
-
diff --git a/components/backtop/demo/base.md b/components/backtop/demo/base.md
new file mode 100644
index 00000000..c4ec07b5
--- /dev/null
+++ b/components/backtop/demo/base.md
@@ -0,0 +1,13 @@
+
+#### 基础用法
+默认位置距离页面右部和底部 50px，滚动至距顶端 400px 时显示。
+
+
+```tpl
+
+```
\ No newline at end of file
diff --git a/components/backtop/demo/backtop.js b/components/backtop/demo/custom.md
similarity index 31%
rename from components/backtop/demo/backtop.js
rename to components/backtop/demo/custom.md
index 01f5dfd3..194e759d 100644
--- a/components/backtop/demo/backtop.js
+++ b/components/backtop/demo/custom.md
@@ -1,9 +1,17 @@
-let code = {}
-code.base = ``
+
+#### 基础用法
+可以自定义回到顶部按钮的样式 `bottom` 为 `100px` 
+
 
-code.custom = `
-    
    UP
    
-    
+```tpl
+
 
-`
-export default code
\ No newline at end of file
+ 
+```
\ No newline at end of file
diff --git a/components/backtop/demo/index.vue b/components/backtop/demo/index.vue
new file mode 100644
index 00000000..7cf49cc0
--- /dev/null
+++ b/components/backtop/demo/index.vue
@@ -0,0 +1,19 @@
+ 
\ No newline at end of file
diff --git a/components/backtop/demo/info.md b/components/backtop/demo/info.md
new file mode 100644
index 00000000..ae7e091a
--- /dev/null
+++ b/components/backtop/demo/info.md
@@ -0,0 +1,7 @@
+## BackTop 回到顶部
+返回页面顶部的操作按钮。
+
+## 何时使用
+- 当页面内容区域比较长时；
+- 当用户需要频繁返回顶部查看相关内容时。
+## 代码演示
\ No newline at end of file
diff --git a/components/backtop/index.js b/components/backtop/index.js
index c279a41d..2dc41b0b 100644
--- a/components/backtop/index.js
+++ b/components/backtop/index.js
@@ -1,2 +1,2 @@
-import BackTop from './backTop'
+import BackTop from './backtop.jsx'
 export default BackTop
\ No newline at end of file
diff --git a/components/backtop/index.md b/components/backtop/index.md
new file mode 100644
index 00000000..5a6667b1
--- /dev/null
+++ b/components/backtop/index.md
@@ -0,0 +1,7 @@
+## API
+| 属性     | 说明                          | 类型            | 默认值 |
+|--------|-----------------------------|---------------|-----|
+| height | 页面滚动高度达到该值时才显示 `BackTop` 组件 | String,Number | 400 |
+| bottom | 组件距离底部的距离                   | String,Number | 40  |
+| right  | 组件距离右部的距离                   | String,Number | 40  |
+| click  | 点击按钮时触发                     | Function      | -   |
\ No newline at end of file
diff --git a/components/backtop/styles/index.less b/components/backtop/styles/index.less
index 4f9b9c01..184b103d 100644
--- a/components/backtop/styles/index.less
+++ b/components/backtop/styles/index.less
@@ -1,32 +1,59 @@
 @import '../../styles/global.less';
 .k-backtop {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    z-index: 10;
-    position: fixed;
-    right: 50px;
-    bottom: 50px;
-    height: 40px;
-    width: 40px;
-    cursor: pointer;
-    display: block;
-    overflow: hidden;
-    border-radius: @radius;
-    .k-backtop-content {
-        background-color: rgba(0, 0, 0, .45);
-        opacity: .5;
-        height: 40px;
-        transition: opacity .3s ease-in-out;
-        text-align: center;
-        line-height: 40px;
-        &:hover {
-            opacity: 1;
-        }
-        .k-ion-chevron-up {
-            font-size: 20px;
-            color: #fff;
-        }
-    }
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	z-index: 10;
+	position: fixed;
+	right: 50px;
+	bottom: 50px;
+	height: 40px;
+	width: 40px;
+	cursor: pointer;
+	display: block;
+	overflow: hidden;
+	border-radius: @radius;
+	.k-backtop-content {
+		background-color: rgba(0, 0, 0, .45);
+		opacity: .5;
+		height: 40px;
+		transition: opacity .3s ease-in-out;
+		text-align: center;
+		line-height: 40px;
+		color: #fff;
+		&:hover {
+			opacity: 1;
+		}
+		.k-ion {
+			font-size: 20px;
+			color: #fff;
+		}
+	}
+}
+
+@keyframes backtopIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes backtopOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.backtop-fade-enter-active {
+	animation: backtopIn .4s;
+}
+
+.backtop-fade-leave-active {
+	animation: backtopOut .4s;
 }
\ No newline at end of file
diff --git a/components/card/demo/base.md b/components/card/demo/base.md
index 01e99b76..28b0dc06 100644
--- a/components/card/demo/base.md
+++ b/components/card/demo/base.md
@@ -1,14 +1,14 @@
 
-#### 边框
-`bordered` 可以设置是否显示边框
+#### 基本用法
+通过 `title` 和 `icon` 可设置标题和图标
 
 
 ```tpl
 
-
 ```
\ No newline at end of file
diff --git a/components/card/demo/border.md b/components/card/demo/border.md
index 2cca95de..01e99b76 100644
--- a/components/card/demo/border.md
+++ b/components/card/demo/border.md
@@ -1,14 +1,14 @@
 
-#### 基本用法
-通过 `title` 和 `icon` 可设置标题和图标
+#### 边框
+`bordered` 可以设置是否显示边框
 
 
 ```tpl
 
+
 ```
\ No newline at end of file
diff --git a/components/card/styles/index.less b/components/card/styles/index.less
index bb932324..bb10aba2 100644
--- a/components/card/styles/index.less
+++ b/components/card/styles/index.less
@@ -8,9 +8,9 @@
     border-bottom: 1px solid #e9eaec;
     padding: 14px 16px;
     line-height: 1;
-    [class^="k-ion"] {
+    .k-icon {
       vertical-align: middle;
-      margin-right: 8px;
+      margin-right: 6px;
       font-size: 14px;
     }
     .k-card-title {
diff --git a/components/colorPicker/canvasHelper.js b/components/colorPicker/canvasHelper.js
new file mode 100644
index 00000000..9af3006c
--- /dev/null
+++ b/components/colorPicker/canvasHelper.js
@@ -0,0 +1,265 @@
+const COLOR_NAMES = { 'aliceblue': '#F0F8FF', 'antiquewhite': '#FAEBD7', 'aqua': '#00FFFF', 'aquamarine': '#7FFFD4', 'azure': '#F0FFFF', 'beige': '#F5F5DC', 'bisque': '#FFE4C4', 'black': '#000000', 'blanchedalmond': '#FFEBCD', 'blue': '#0000FF', 'blueviolet': '#8A2BE2', 'brown': '#A52A2A', 'burlywood': '#DEB887', 'cadetblue': '#5F9EA0', 'chartreuse': '#7FFF00', 'chocolate': '#D2691E', 'coral': '#FF7F50', 'cornflowerblue': '#6495ED', 'cornsilk': '#FFF8DC', 'crimson': '#DC143C', 'cyan': '#00FFFF', 'darkblue': '#00008B', 'darkcyan': '#008B8B', 'darkgoldenrod': '#B8860B', 'darkgray': '#A9A9A9', 'darkgrey': '#A9A9A9', 'darkgreen': '#006400', 'darkkhaki': '#BDB76B', 'darkmagenta': '#8B008B', 'darkolivegreen': '#556B2F', 'darkorange': '#FF8C00', 'darkorchid': '#9932CC', 'darkred': '#8B0000', 'darksalmon': '#E9967A', 'darkseagreen': '#8FBC8F', 'darkslateblue': '#483D8B', 'darkslategray': '#2F4F4F', 'darkslategrey': '#2F4F4F', 'darkturquoise': '#00CED1', 'darkviolet': '#9400D3', 'deeppink': '#FF1493', 'deepskyblue': '#00BFFF', 'dimgray': '#696969', 'dimgrey': '#696969', 'dodgerblue': '#1E90FF', 'firebrick': '#B22222', 'floralwhite': '#FFFAF0', 'forestgreen': '#228B22', 'fuchsia': '#FF00FF', 'gainsboro': '#DCDCDC', 'ghostwhite': '#F8F8FF', 'gold': '#FFD700', 'goldenrod': '#DAA520', 'gray': '#808080', 'grey': '#808080', 'green': '#008000', 'greenyellow': '#ADFF2F', 'honeydew': '#F0FFF0', 'hotpink': '#FF69B4', 'indianred ': '#CD5C5C', 'indigo ': '#4B0082', 'ivory': '#FFFFF0', 'khaki': '#F0E68C', 'lavender': '#E6E6FA', 'lavenderblush': '#FFF0F5', 'lawngreen': '#7CFC00', 'lemonchiffon': '#FFFACD', 'lightblue': '#ADD8E6', 'lightcoral': '#F08080', 'lightcyan': '#E0FFFF', 'lightgoldenrodyellow': '#FAFAD2', 'lightgray': '#D3D3D3', 'lightgrey': '#D3D3D3', 'lightgreen': '#90EE90', 'lightpink': '#FFB6C1', 'lightsalmon': '#FFA07A', 'lightseagreen': '#20B2AA', 'lightskyblue': '#87CEFA', 'lightslategray': '#778899', 'lightslategrey': '#778899', 'lightsteelblue': '#B0C4DE', 'lightyellow': '#FFFFE0', 'lime': '#00FF00', 'limegreen': '#32CD32', 'linen': '#FAF0E6', 'magenta': '#FF00FF', 'maroon': '#800000', 'mediumaquamarine': '#66CDAA', 'mediumblue': '#0000CD', 'mediumorchid': '#BA55D3', 'mediumpurple': '#9370DB', 'mediumseagreen': '#3CB371', 'mediumslateblue': '#7B68EE', 'mediumspringgreen': '#00FA9A', 'mediumturquoise': '#48D1CC', 'mediumvioletred': '#C71585', 'midnightblue': '#191970', 'mintcream': '#F5FFFA', 'mistyrose': '#FFE4E1', 'moccasin': '#FFE4B5', 'navajowhite': '#FFDEAD', 'navy': '#000080', 'oldlace': '#FDF5E6', 'olive': '#808000', 'olivedrab': '#6B8E23', 'orange': '#FFA500', 'orangered': '#FF4500', 'orchid': '#DA70D6', 'palegoldenrod': '#EEE8AA', 'palegreen': '#98FB98', 'paleturquoise': '#AFEEEE', 'palevioletred': '#DB7093', 'papayawhip': '#FFEFD5', 'peachpuff': '#FFDAB9', 'peru': '#CD853F', 'pink': '#FFC0CB', 'plum': '#DDA0DD', 'powderblue': '#B0E0E6', 'purple': '#800080', 'rebeccapurple': '#663399', 'red': '#FF0000', 'rosybrown': '#BC8F8F', 'royalblue': '#4169E1', 'saddlebrown': '#8B4513', 'salmon': '#FA8072', 'sandybrown': '#F4A460', 'seagreen': '#2E8B57', 'seashell': '#FFF5EE', 'sienna': '#A0522D', 'silver': '#C0C0C0', 'skyblue': '#87CEEB', 'slateblue': '#6A5ACD', 'slategray': '#708090', 'slategrey': '#708090', 'snow': '#FFFAFA', 'springgreen': '#00FF7F', 'steelblue': '#4682B4', 'tan': '#D2B48C', 'teal': '#008080', 'thistle': '#D8BFD8', 'tomato': '#FF6347', 'turquoise': '#40E0D0', 'violet': '#EE82EE', 'wheat': '#F5DEB3', 'white': '#FFFFFF', 'whitesmoke': '#F5F5F5', 'yellow': '#FFFF00', 'yellowgreen': '#9ACD32' };
+export function rgbToHex(r, g, b) {
+  [r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];
+  return "#" + ("000000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
+}
+export function hslToRgb(h, s, l) {
+  let r, g, b;
+  [h, s, l] = [limit(h, 0, 360) / 360, limit(s, 0, 100) / 100, limit(l, 0, 100) / 100];
+
+  if (s == 0) {
+    r = g = b = l; // achromatic
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = (2 * l) - q;
+
+    r = hue2rgb(p, q, h + (1 / 3));
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - (1 / 3));
+  }
+
+  return [r * 255, g * 255, b * 255].map(Math.round);
+}
+export function rgbToHsl(r, g, b) {
+  [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
+
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h, s, l = (max + min) / 2;
+
+  if (max == min) {
+    h = s = 0; // achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d) + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = ((b - r) / d) + 2;
+        break;
+      case b:
+        h = ((r - g) / d) + 4;
+        break;
+    }
+
+    h /= 6;
+  }
+
+  return [h * 360, s * 100, l * 100].map(Math.round);
+}
+export function rgbToHsv(r, g, b) {
+  [r, g, b] = [limit(r, 0, 255) / 255, limit(g, 0, 255) / 255, limit(b, 0, 255) / 255];
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h, s, v = max;
+  let d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+  return [h, s, v];
+}
+export function rgbToInt(r, g, b) {
+  return (r << 16) | (g << 8) | b;
+}
+
+export function intToRgb(int) {
+  return [
+    (int >> 16) & 255, //r
+    (int >> 8) & 255, //g
+    int & 255 //b
+  ];
+}
+export function parseColor(color, outFormat) {
+  outFormat = (outFormat || 'rgb');
+  if (color !== null && color !== undefined) {
+    let pp;
+    if ((pp = parseColorToRgba(color)) ||
+      ((pp = parseColorToHsla(color)) && (pp = [...hslToRgb(...pp), pp[3]]))) {
+
+      // se outFormat è un plain object quindi {} oppure new Object()
+      // if (typeof outFormat === 'object') {
+      let isobject = outFormat != null && typeof outFormat === 'object' && Array.isArray(outFormat) === false
+      if (isobject) {
+        return ['rgb', 'rgbcss', 'rgbcss4', 'rgba', 'rgbacss',
+          'hsl', 'hslcss', 'hslcss4', 'hsla', 'hslacss',
+          'hex', 'hexcss4', 'int'].reduce((m, f) => { m[f] = formatColor(pp, f); return m; }, outFormat || {});
+      } else {
+        // per sicurezza trasformo in stringa (potrebbe essere un numero)
+        return formatColor(pp, outFormat.toString().toLowerCase());
+      }
+    }
+  }
+
+  return undefined;
+}
+export function formatColor(pp, outFormat) {
+  switch (outFormat) {
+    case 'rgb':
+    default:
+      return pp.slice(0, 3);
+    case 'rgbcss':
+      return `rgb(${pp[0]}, ${pp[1]}, ${pp[2]})`;
+    case 'rgbcss4':
+      return `rgb(${pp[0]}, ${pp[1]}, ${pp[2]}, ${pp[3]})`;
+    case 'rgba':
+      return pp;
+    case 'rgbacss':
+      return `rgba(${pp[0]}, ${pp[1]}, ${pp[2]}, ${pp[3]})`;
+    case 'hsl':
+      return rgbToHsl(...pp);
+    case 'hslcss':
+      pp = rgbToHsl(...pp);
+      return `hsl(${pp[0]}, ${pp[1]}, ${pp[2]})`;
+    case 'hslcss4':
+      const hh = rgbToHsl(...pp);
+      return `hsl(${hh[0]}, ${hh[1]}, ${hh[2]}, ${pp[3]})`;
+    case 'hsla':
+      return [...rgbToHsl(...pp), pp[3]];
+    case 'hslacss':
+      const ha = rgbToHsl(...pp);
+      return `hsla(${ha[0]}, ${ha[1]}, ${ha[2]}, ${pp[3]})`;
+    case 'hex':
+      return rgbToHex(...pp);
+    case 'hexcss4':
+      return rgbToHex(...pp) + ('00' + parseInt(pp[3] * 255).toString(16)).slice(-2);
+    case 'int':
+      return rgbToInt(...pp);
+  }
+}
+export function nvl(value, def) {
+  return value === null || value === undefined ? def : value;
+}
+export function parseColorToHsla(color) {
+  if (Array.isArray(color)) {
+    color = [
+      limit(color[0], 0, 360),
+      limit(color[1], 0, 100),
+      limit(color[2], 0, 100),
+      limit(nvl(color[3], 1), 0, 1)
+    ];
+    return color;
+  } else {
+    const parsed = cssHslaToHsla(color);
+    if (parsed && parsed.length === 3) {
+      parsed.push(1);
+    }
+    return parsed;
+  }
+}
+
+export function parseColorToRgba(color) {
+  if (Array.isArray(color)) {
+    color = [
+      limit(color[0], 0, 255),
+      limit(color[1], 0, 255),
+      limit(color[2], 0, 255),
+      limit(nvl(color[3], 1), 0, 1)
+    ];
+    return color;
+  } else {
+    const parsed = cssColorToRgba(color) || cssRgbaToRgba(color);
+    if (parsed && parsed.length === 3) {
+      parsed.push(1);
+    }
+    return parsed;
+  }
+}
+export function cssHslToHsl(hsl) {
+  if (hsl) {
+    // hsl(int, int, int)
+    const [m, h, s, l] = /^hsl\((\d+)[\s,](\d+)[\s,](\d+)\)/i.exec(hsl) || [];
+    return m ? [limit(h, 0, 360), limit(s, 0, 100), limit(l, 0, 100)] : undefined;
+  }
+  return undefined;
+}
+
+export function cssHslaToHsla(hsla) {
+  if (hsla) {
+    // in CSS Colors Level 4 hsla() è un alias di hsl()
+    // hsl[a](int, int, int[, dec])
+    const [m, h, s, l, , a] = /^hsla?\((\d+)\s*[\s,]\s*(\d+)\s*[\s,]\s*(\d+)(\s*[\s,]\s*(\d*(.\d+)?))?\)/i.exec(hsla) || [];
+    return m ? [limit(h, 0, 255), limit(s, 0, 255), limit(l, 0, 255), limit(nvl(a, 1), 0, 1)] : undefined;
+  }
+  return undefined;
+}
+export function cssColorToRgba(color) {
+  if (color) {
+    const colorByName = COLOR_NAMES[color.toString().toLowerCase()];
+    // considero sia il formato esteso #RRGGGBB[AA] che quello corto #RGB[A]
+    // provo a estrarre i valori da colorByName solo se questo è valorizzato, altrimenti uso direttamente color
+    const [, , , r, g, b, a, , rr, gg, bb, aa] = /^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(colorByName || color) || [];
+    if (r !== undefined) {
+      return [
+        parseInt(r + r, 16),
+        parseInt(g + g, 16),
+        parseInt(b + b, 16),
+        a ? +((parseInt(a + a, 16)) / 255).toFixed(2) : 1
+      ];
+    } else if (rr !== undefined) {
+      return [
+        parseInt(rr, 16),
+        parseInt(gg, 16),
+        parseInt(bb, 16),
+        aa ? +((parseInt(aa, 16)) / 255).toFixed(2) : 1
+      ];
+    }
+  }
+  return undefined;
+}
+export function limit(value, min, max) {
+  value = +value;
+  return isNaN(value) ? min : (value < min ? min : (value > max ? max : value));
+}
+
+export function canvasHelper(canvas) {
+  const ctx = canvas.getContext('2d'),
+    width = canvas.width,
+    height = canvas.height;
+
+  const WBG = ctx.createLinearGradient(1, 1, 1, height - 1);
+  WBG.addColorStop(0, 'white')
+  WBG.addColorStop(1, 'black')
+
+  return {
+    setHue(hue) {
+      const colorGradient = ctx.createLinearGradient(1, 0, width - 1, 0)
+      colorGradient.addColorStop(0, `hsla(${hue},100%,50%,0)`)
+      colorGradient.addColorStop(1, `hsla(${hue},100%,50%,1)`)
+      ctx.fillStyle = WBG;
+      ctx.fillRect(0, 0, width, height)
+      ctx.fillStyle = colorGradient
+      ctx.globalCompositeOperation = 'multiply'
+      ctx.fillRect(0, 0, width, height)
+      ctx.globalCompositeOperation = 'source-over'
+    },
+    grabColor(x, y) {
+      return ctx.getImageData(x, y, 1, 1).data
+    },
+    findColor(r, g, b) {
+      const [, s, v] = rgbToHsv(r, g, b)
+      const x = s * width
+      const y = height - (v * height)
+      return [x, y]
+    }
+  }
+}
\ No newline at end of file
diff --git a/components/colorPicker/colorPicker.vue b/components/colorPicker/colorPicker.vue
deleted file mode 100644
index a8a16e45..00000000
--- a/components/colorPicker/colorPicker.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-
-
diff --git a/components/colorPicker/colorpicker.jsx b/components/colorPicker/colorpicker.jsx
new file mode 100644
index 00000000..ef56f08b
--- /dev/null
+++ b/components/colorPicker/colorpicker.jsx
@@ -0,0 +1,439 @@
+import { canvasHelper, limit, hslToRgb, rgbToHsl, parseColor, rgbToHex } from './canvasHelper'
+import Input from '../input'
+import Button from '../button'
+import Icon from '../icon'
+
+import { getElementPos } from '../_tool/utils'
+
+import transfer from "../_tool/transfer";
+import Resize from "../_tool/resize";
+import outsideclick from "../_tool/outsiteclick";
+
+const modes = ['rgba', 'hex', 'hsla']
+
+export default {
+  name: 'ColorPicker',
+  directives: { transfer, Resize, outsideclick },
+  props: {
+    value: String,
+    transfer: { type: Boolean, default: true },
+    showMode: { type: Boolean, default: false },
+    large: Boolean,
+    mini: Boolean,
+    mode: {
+      type: String, default: 'hex', validator: function (value) {
+        return modes.indexOf(value) !== -1
+      }
+    },
+    defalutColors: {
+      type: Array, default: () => ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000'],
+      validator: function (value) { return value.length <= 20 }
+    }
+  },
+  watch: {
+    value(v1, v2) {
+      if (v1 != v2)
+        this.valueChange('COLOR', v)
+    }
+  },
+  data() {
+    return {
+      currentMode: this.mode,
+      currentColor: this.value || '#000',
+      paintHelper: null,
+      hueHelper: null,
+      H: 0, S: 0, L: 0, A: 1,
+      R: 0, G: 0, B: 0,
+      HEX: '',
+      huePointer: {
+        x: 0
+      },
+      alphaPointer: {
+        x: 0,
+      },
+      paintPointer: {
+        x: 0, y: 0
+      },
+      placement: 'bottom',
+      showDrop: false,
+      showDropInit: false,
+      left: 0,
+      top: 0,
+      isMouseDown: false
+    }
+  },
+  methods: {
+    setPosition() {
+      let top = 0, left = 0, height = this.$el.offsetHeight, offset = 3;
+
+      if (this.transfer) {
+        let pos = getElementPos(this.$el)
+        top = pos.top + height + offset
+        left = pos.left + 1
+      } else {
+        top = height + offset
+      }
+      if (this.$refs.dom) {
+        let clientH = document.body.scrollHeight
+        let domH = this.$refs.dom.offsetHeight
+        if (clientH - top - height - offset < domH + 5) {
+          top = this.transfer ? top - domH - offset : -(domH + 3)
+          this.placement = 'top'
+        } else {
+          this.placement = 'bottom'
+        }
+      }
+
+      this.top = top
+      this.left = left
+    },
+    hidedrop(e) {
+      if (this.showDropInit && this.showDrop && !this.isMouseDown && !this.$el.contains(e.target) && !this.$refs.dom.contains(e.target)) {
+        this.showDrop = false
+        this.currentColor = this.value || '#000'
+      }
+    },
+    toggleDrop() {
+      if (this.disabled) {
+        return false;
+      }
+      if (!this.showDropInit) {
+
+        this.showDropInit = true
+        this.$nextTick(e => {
+          this.setShowDrop()
+
+          let { paint, hue, alpha } = this.$refs
+          this.paintHelper = canvasHelper(paint)
+
+          this.initHueCanvas(hue)
+          this.initAlphaCanvas(alpha)
+          this.initPaintCanvas(paint)
+
+          this.valueChange('COLOR', this.value)
+        })
+      } else {
+        this.setShowDrop()
+      }
+    },
+    setShowDrop() {
+      this.showDrop = !this.showDrop;
+      if (this.showDrop) {
+        this.$nextTick(e => this.setPosition())
+      } else {
+        this.currentColor = this.value || '#000'
+      }
+    },
+    updatePostion() {
+      //alpha
+      {
+        const x = 170 * this.A;
+        this.alphaPointer.x = (x - 7);
+      }
+      //updaet hue pointer
+      {
+        const x = 170 * this.H / 360;
+        this.huePointer.x = (x - 7);
+      }
+      //paint
+      {
+        const [r, g, b] = hslToRgb(this.H, this.S, this.L);
+        const [x, y] = this.paintHelper.findColor(r, g, b);
+        if (x >= 0) {
+          this.paintPointer.x = (x - 7);
+          this.paintPointer.y = (y - 7);
+        }
+      }
+
+    },
+    valueChange(prop, value) {
+      switch (prop) {
+        case 'COLOR':
+          [this.R, this.G, this.B, this.A] = parseColor(value, 'rgba') || [0, 0, 0, 1];
+          [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);
+          this.paintHelper.setHue(this.H);
+          this.updatePostion()
+          this.alphaCanvsSetHue(this.$refs.alpha)
+          break;
+        case 'HUE':
+          this.H = value;
+          [this.R, this.G, this.B] = hslToRgb(this.H, this.S, this.L)
+          this.paintHelper.setHue(value)
+          this.alphaCanvsSetHue(this.$refs.alpha)
+          break;
+        case 'RGB':
+          [this.R, this.G, this.B] = value
+          // [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);
+          let colors = rgbToHsl(this.R, this.G, this.B);
+          [this.H, this.S, this.L] = colors
+          this.alphaCanvsSetHue(this.$refs.alpha)
+          break;
+        case 'ALPHA':
+          this.A = value;
+          break;
+      }
+      this.setHEX()
+    },
+    setHEX() {
+      if (this.A != 1) {
+        this.HEX = parseColor([this.R, this.G, this.B, this.A], 'hexcss4');
+      } else {
+        this.HEX = rgbToHex(this.R, this.G, this.B);
+      }
+      this.currentColor = this.HEX
+    },
+    updateValue() {
+      let { mode } = this.mode,
+        value = null;
+      if (mode == 'hex') {
+        value = this.HEX
+      } else if (mode == 'rgba') {
+        value = `rgba(${this.R},${this.G},${this.B},${this.A})`
+      } else {
+        value = `hsla(${this.H},${this.S}%,${this.L}%,${this.A})`
+      }
+      this.currentColor = value
+      this.$emit('input', value)
+      this.$emit('change', value)
+      this.showDrop = false
+    },
+    setMode() {
+      let i = modes.indexOf(this.currentMode) + 1
+      i = i > 2 ? 0 : i
+      this.currentMode = modes[i]
+    },
+    initHueCanvas(canvas) {
+      const ctx = canvas.getContext('2d'),
+        setp = 1 / 360,
+        width = canvas.width,
+        height = canvas.height,
+        gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+      for (let i = 0; i <= 1; i += setp) {
+        gradient.addColorStop(i, `hsl(${360 * i},100%,50%)`)
+      }
+      ctx.fillStyle = gradient
+      ctx.fillRect(0, 0, width, height)
+
+      const onMouseMove = e => {
+        const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, width),
+          hue = Math.round(x * 360 / width)
+        this.huePointer.x = x - 7
+        this.valueChange('HUE', hue)
+      }
+
+      const onMouseUp = () => {
+        setTimeout(() => {
+          this.isMouseDown = false
+        }, 300);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp)
+      }
+
+      canvas.addEventListener('mousedown', e => {
+        this.isMouseDown = true
+        onMouseMove(e)
+        document.addEventListener('mousemove', onMouseMove)
+        document.addEventListener('mouseup', onMouseUp)
+        e.preventDefault()
+      })
+    },
+    alphaCanvsSetHue(canvas) {
+      const ctx = canvas.getContext('2d'),
+        { width, height } = canvas,
+        gradient = ctx.createLinearGradient(0, 0, width - 1, 0);
+      let { H, S, L } = this
+      ctx.clearRect(0, 0, width, height)
+      gradient.addColorStop(0, `hsla(${H},${S}%,${L}%,0)`)
+      gradient.addColorStop(1, `hsla(${H},${S}%,${L}%,1)`)
+      ctx.fillStyle = gradient
+      ctx.fillRect(0, 0, width, height)
+    },
+    initAlphaCanvas(canvas) {
+      this.alphaCanvsSetHue(canvas)
+      const { width, height } = canvas;
+      const onMouseMove = (e) => {
+        const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, width),
+          alpha = +(x / width).toFixed(2);
+        this.alphaPointer.x = (x - 7)
+        this.valueChange('ALPHA', alpha)
+      }
+
+      const onMouseUp = () => {
+        setTimeout(() => {
+          this.isMouseDown = false
+        }, 300);
+
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp)
+      }
+
+      canvas.addEventListener('mousedown', e => {
+        this.isMouseDown = true
+
+        onMouseMove(e);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp)
+        e.preventDefault()
+
+      })
+
+    },
+    initPaintCanvas(canvas) {
+      const { width, height } = canvas;
+      const onMouseMove = e => {
+        const x = limit(e.clientX - canvas.getBoundingClientRect().left, 0, width - 1),
+          y = limit(e.clientY - canvas.getBoundingClientRect().top, 0, height - 1),
+          color = this.paintHelper.grabColor(x, y)
+
+        this.paintPointer.x = x - 7
+        this.paintPointer.y = y - 7
+        this.valueChange('RGB', color)
+
+      }
+      const onMouseUp = () => {
+        setTimeout(() => {
+          this.isMouseDown = false
+        }, 300);
+
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp)
+      }
+
+      canvas.addEventListener('mousedown', e => {
+        this.isMouseDown = true
+
+        onMouseMove(e)
+        document.addEventListener('mousemove', onMouseMove)
+        document.addEventListener('mouseup', onMouseUp)
+        e.preventDefault()
+      })
+    },
+    renderPaint() {
+      let prop = {
+        class: 'k-color-picker-paint',
+        attrs: { width: 254, height: 136 },
+        ref: 'paint'
+      }
+      return 
+    },
+    renderAlpha() {
+      let prop = {
+        class: 'k-color-picker-alpha',
+        attrs: { width: 170, height: 13 },
+        ref: 'alpha'
+      }
+      return 
+    },
+    renderHue() {
+      let prop = {
+        class: 'k-color-picker-hue',
+        attrs: { width: 170, height: 13 },
+        ref: 'hue'
+      }
+      return 
+    },
+    renderValueInput(key) {
+      let prop = {
+        props: {
+          value: this[key] + ('SL'.indexOf(key) >= 0 ? '%' : ''),
+          mini: true,
+        },
+        on: {
+          "input": e => {
+            this[key] = e.replace('%', '')
+            // console.log(e,key)
+            if ('RGB'.indexOf(key) >= 0)
+              [this.H, this.S, this.L] = rgbToHsl(this.R, this.G, this.B);
+            this.updatePostion()
+            this.paintHelper.setHue(this.H)
+            this.alphaCanvsSetHue(this.$refs.alpha)
+          }
+        }
+      }
+      return 
+    },
+    renderValue() {
+      if (this.showMode) {
+        let { currentMode, renderValueInput } = this, node = []
+        if (currentMode == 'rgba') {
+          let keys = ['R', 'G', 'B', 'A']
+          let v = 
    {keys.map(k => renderValueInput(k))}
    
+          let k = 
    {keys.map(k => {k})}
    
+          node.push(v, k)
+        } else if (currentMode == 'hsla') {
+          let keys = ['H', 'S', 'L', 'A']
+          let v = 
    {keys.map(k => renderValueInput(k))}
    
+          let k = 
    {keys.map(k => {k})}
    
+          node.push(v, k)
+        } else { //hex
+          let v = 
    {renderValueInput('HEX')}
    
+          let k = 
    HEX
    
+          node.push(v, k)
+        }
+        let btn =