docs: 所有组件添加简短说明

Author: coderyjw

src/components/Preview.vue

@@ -41,7 +41,7 @@ $border-color: #d9d9d9;
 
 .preview-container {
  border: 1px solid $border-color;
- margin: 16px 0px 32px;
+ margin: 32px 0px 32px;
  min-width: 300px;
  > h2 {
  font-size: 20px;

src/views/doc/affix/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="affix-doc-wrapper">
  <h1>固钉 Affix</h1>
+ <p>将页面元素固定在特定可视区域。</p>
  <div class="preview-wrapper">
  <Preview :component="AffixPreview1" />
  <Preview :component="AffixPreview2" />

src/views/doc/avatar/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="avatar-doc-wrapper">
  <h1>Avatar 头像</h1>
+ <p>Avatar 组件可以用来代表人物或对象</p>
  <div class="preview-wrapper">
  <Preview :component="AvatarPreview1" />
  <Preview :component="AvatarPreview2" />

src/views/doc/backtop/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="backtop-doc-wrapper">
  <h1>回到顶部 Backtop</h1>
+ <p>返回页面顶部的操作按钮</p>
  <div class="preview-wrapper">
  <Preview :component="BacktopPreview1" />
  <Preview :component="BacktopPreview2" />

src/views/doc/breadcrumb/index.vue

@@ -1,6 +1,9 @@
 <template>
  <div class="breadcrumb-doc-wrapper">
  <h1>面包屑 Breadcrumb</h1>
+ <p>
+ 显示当前页面的路径，快速返回之前的任意页面。
+ </p>
  <div class="preview-wrapper">
  <Preview :component="BreadcrumbPreview1" />
  <Preview :component="BreadcrumbPreview2" />

src/views/doc/button/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="button-doc-wrapper">
  <h1>Button 按钮</h1>
+ <p>常用的操作按钮。</p>
  <div class="preview-wrapper">
  <Preview :component="ButtonPreview1" />
  <Preview :component="ButtonPreview2" />

src/views/doc/checkbox/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="checkbox-doc-wrapper">
  <h1>Checkbox 单选框</h1>
+ <p>一组备选项中进行多选</p>
  <div class="preview-wrapper">
  <Preview :component="CheckboxPreview1" />
  <Preview :component="CheckboxPreview2" />

src/views/doc/dialog/index.vue

@@ -1,5 +1,6 @@
 <template>
  <h1>Dialog 对话框</h1>
+ <p>在保留当前页面状态的情况下，告知用户并承载相关操作。</p>
  <div class="preview-wrapper">
  <Preview :component="DialogPreview1" />
  <Preview :component="DialogPreview2" />

src/views/doc/divider/index.vue

@@ -1,6 +1,7 @@
 <template>
  <div class="divider-doc-wrapper">
  <h1>分割线 Divider</h1>
+ <p>区隔内容的分割线。</p>
  <div class="preview-wrapper">
  <Preview :component="DividerPreview1" />
  <Preview :component="DividerPreview2" />

src/views/doc/ellipsis/index.vue

@@ -1,6 +1,8 @@
 <template>
  <div class="ellipsis-doc-wrapper">
  <h1>Ellipsis 文本省略</h1>
+ <p>复杂度不会消失，只会转移。</p>
+ <p>当你听到一些人对于精致的概念模型侃侃而谈，请保持清醒。</p>
  <div class="preview-wrapper">
  <Preview :component="EllipsisPreview1" />
  <Preview :component="EllipsisPreview2" />