diff --git a/.env b/.env
index 315bc61576fadecee0a132c7e8ec323308abcb5f..381bfd3d5dde99120bd7382793d4907496451319 100644
--- a/.env
+++ b/.env
@@ -2,4 +2,4 @@ NODE_ENV=production
 VUE_APP_PREVIEW=true
 # 后端服务访问地址
 VUE_APP_API_BASE_URL=http://rest-api.easy-frame.top
-VUE_APP_VERSION=0.8.0
\ No newline at end of file
+VUE_APP_VERSION=0.8.1
\ No newline at end of file
diff --git a/.env.development b/.env.development
index dd8888fe983acbf9208fe754c2d745b12c6a6200..db1e9cae432453ec0ed51d98c679e3221610434d 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,6 @@ NODE_ENV=development
 VUE_APP_PREVIEW=true
 # 后端服务访问地址
 VUE_APP_API_BASE_URL=http://127.0.0.1
-VUE_APP_VERSION=0.8.0
+VUE_APP_VERSION=0.8.1
 # 代码生成 - 前端项目路径（填写前端项目所在磁盘路径）
 VUE_APP_FRONT_END_PATH=/Users/tengchong/workspaces/webStorm/vue/Easy-RESTful-UI
\ No newline at end of file
diff --git a/.env.preview b/.env.preview
index 315bc61576fadecee0a132c7e8ec323308abcb5f..381bfd3d5dde99120bd7382793d4907496451319 100644
--- a/.env.preview
+++ b/.env.preview
@@ -2,4 +2,4 @@ NODE_ENV=production
 VUE_APP_PREVIEW=true
 # 后端服务访问地址
 VUE_APP_API_BASE_URL=http://rest-api.easy-frame.top
-VUE_APP_VERSION=0.8.0
\ No newline at end of file
+VUE_APP_VERSION=0.8.1
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18a00a26b75a73c731887a1118ea75ef5cd44492..5f21a564b29cde5966b9cc00fddcd46f4b4bcaa9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,9 @@
 # 更新日志
+## [v.0.8.1] 2021-04-25
+- 修复代码生成步骤条跳过bug
+- 优化字典加载方式
+- 添加一些组件示例
+
 ## [v.0.8.0] 2021-02-24
 - 偏好设置数据保存在浏览器storage
 - 添加数据导入功能
@@ -25,4 +30,4 @@
 - 解决部分bug
 
 ## [v.0.4.0] 2021-01-01
-- 添加系统设置、权限管理、系统监控、个人中心模块
\ No newline at end of file
+- 添加系统设置、权限管理、系统监控、个人中心模块
diff --git a/src/api/sys/user.js b/src/api/sys/user.js
index 5ae043fe6ff5e5ae608e975b722526a94506cddc..37ae499daf0f3d65e8e683427c4fc81d6a49a20d 100644
--- a/src/api/sys/user.js
+++ b/src/api/sys/user.js
@@ -21,14 +21,16 @@ export function select (params) {
  * 搜索
  *
  * @param keyword 关键字
+ * @param range 数据范围，可以选择哪些用户 'all' | 'currentDept'
  * @return Page<SysUser>
  */
-export function selectByKeyword (keyword) {
+export function selectByKeyword (keyword, range) {
   return request({
     url: `${baseUrl}keyword`,
     method: HTTP_METHOD.GET,
     params: {
-      keyword
+      keyword,
+      range
     }
   })
 }
diff --git a/src/components/Easy/data-entry/UserSearchSelect.vue b/src/components/Easy/data-entry/UserSearchSelect.vue
index 1ff2b15104f81191fa7b3addfcde8c18bd642889..a209118bf37bcdf3dd55dd18340ea23cfd35938b 100644
--- a/src/components/Easy/data-entry/UserSearchSelect.vue
+++ b/src/components/Easy/data-entry/UserSearchSelect.vue
@@ -32,7 +32,10 @@ export default {
   name: 'EUserSearchSelect',
   components: { EAvatar },
   props: {
-    mode: PropTypes.string.def(),
+    // 设置 Select 的模式为多选或标签 'default' | 'multiple' | 'tags' | 'combobox'
+    mode: PropTypes.string.def('default'),
+    // 数据范围，可以选择哪些用户 'all' | 'currentDept'
+    range: PropTypes.string.def('all'),
     placeholder: PropTypes.string.def('输入用户名、昵称、部门查询用户'),
     disabled: PropTypes.bool.def(false),
     allowClear: PropTypes.bool.def(true),
@@ -97,7 +100,7 @@ export default {
     selectUser (value) {
       if (isNotBlank(value)) {
         this.fetching = true
-        selectByKeyword(value).then(res => {
+        selectByKeyword(value, this.range).then(res => {
           this.selectOptions = res.data.data
           this.fetching = false
         })
diff --git a/src/components/Ellipsis/Ellipsis.vue b/src/components/Ellipsis/Ellipsis.vue
index 25eb7ee776473a01112ed8b0818aa2ccaa6a8996..7998a2a0da1990e980123b69bb25fac2ec1af88d 100644
--- a/src/components/Ellipsis/Ellipsis.vue
+++ b/src/components/Ellipsis/Ellipsis.vue
@@ -1,30 +1,17 @@
 <script>
 import Tooltip from 'ant-design-vue/es/tooltip'
 import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
 export default {
   name: 'Ellipsis',
   components: {
     Tooltip
   },
   props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-pro-ellipsis'
-    },
-    tooltip: {
-      type: Boolean
-    },
+    tooltip: PropTypes.bool.def(true),
     length: {
       type: Number,
       required: true
-    },
-    lines: {
-      type: Number,
-      default: 1
-    },
-    fullWidthRecognition: {
-      type: Boolean,
-      default: false
     }
   },
   methods: {
diff --git a/src/components/Ellipsis/index.md b/src/components/Ellipsis/index.md
index f528ac7f9f60dfa9b5b8c2331d8a31c9284ab243..e0b9a6abd463250cd3f60a642c21116e292796ab 100644
--- a/src/components/Ellipsis/index.md
+++ b/src/components/Ellipsis/index.md
@@ -1,6 +1,6 @@
 # Ellipsis 文本自动省略号
 
-文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+文本过长自动处理省略号，支持按照文本长度截取。
 
 
 
@@ -34,5 +34,5 @@ export default {
 
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
-tooltip | 移动到文本展示完整内容的提示 | boolean | -
-length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
\ No newline at end of file
+tooltip | 移动到文本展示完整内容的提示 | boolean | true 
+length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
diff --git a/src/components/NumberInfo/NumberInfo.vue b/src/components/NumberInfo/NumberInfo.vue
index bdde3e058b49555c444831a96da5f69d95b25533..1d44ccb4c1cc70725869b5c62c9a97188da9f3f8 100644
--- a/src/components/NumberInfo/NumberInfo.vue
+++ b/src/components/NumberInfo/NumberInfo.vue
@@ -28,7 +28,7 @@ export default {
       required: true
     },
     subTotal: {
-      type: Number,
+      type: [String, Number],
       required: true
     },
     subTitle: {
diff --git a/src/components/Other/CarbonAds.vue b/src/components/Other/CarbonAds.vue
deleted file mode 100644
index 1e53ba610ec92a3a60ffd3d48c361fea4a09fc39..0000000000000000000000000000000000000000
--- a/src/components/Other/CarbonAds.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script>
-const carbonUrl = '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=antdvcom'
-export default {
-  props: {
-    isMobile: Boolean
-  },
-  watch: {
-    $route (e, t) {
-      const adId = '#carbonads'
-      // if(isGitee) {
-      //   adId = '#cf';
-      // }
-      if (e.path !== t.path && this.$el.querySelector(adId)) {
-        this.$el.innerHTML = ''
-        this.load()
-      }
-      this.adInterval && clearInterval(this.adInterval)
-      this.adInterval = setInterval(() => {
-        if (!this.$el.querySelector(adId)) {
-          this.$el.innerHTML = ''
-          this.load()
-        }
-      }, 20000)
-    }
-  },
-  mounted () {
-    this.load()
-  },
-  methods: {
-    load () {
-      // if(isGitee) {
-      //   axios.get('https://api.codefund.app/properties/162/funder.html?template=horizontal')
-      //   .then(function (response) {
-      //     document.getElementById("codefund-ads").innerHTML = response.data;
-      //   });
-      // } else
-      if (carbonUrl) {
-        const e = document.createElement('script')
-        e.id = '_carbonads_js'
-        e.src = carbonUrl
-        this.$el.appendChild(e)
-      }
-    }
-  },
-  render () {
-    return <div id="carbon-ads" class={this.isMobile ? 'carbon-mobile' : ''} />
-  }
-}
-</script>
-<style lang="less">
-#carbon-ads {
-  width: 256px;
-  /* float: right; */
-  margin-top: 75px;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  padding: 0;
-  overflow: hidden;
-  z-index: 100;
-  background-color: #fff;
-  /* border-radius: 3px; */
-  font-size: 13px;
-  background: #f5f5f5;
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-}
-#carbonads {
-  overflow: hidden;
-}
-#carbon-ads a {
-  display: inline-block;
-  color: #7f8c8d;
-  font-weight: normal;
-}
-#carbon-ads span {
-  color: #7f8c8d;
-}
-#carbon-ads img {
-  float: left;
-  padding-right: 10px;
-}
-#carbon-ads .carbon-img,
-#carbon-ads .carbon-text {
-  display: block;
-  font-weight: normal;
-  color: #34495e;
-}
-#carbon-ads .carbon-text {
-  padding-top: 6px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-}
-#carbon-ads .carbon-poweredby {
-  color: #aaa;
-  font-weight: normal;
-  line-height: 1.2;
-  margin-top: 6px;
-}
-#carbon-ads.carbon-mobile {
-  width: 100%;
-  position: relative;
-  right: 0;
-  bottom: 0;
-  padding: 0;
-  margin-bottom: 15px;
-  margin-top: 5px;
-  .carbon-img {
-    float: left;
-    margin-right: 10px;
-  }
-}
-</style>
diff --git a/src/components/PageLoading/index.jsx b/src/components/PageLoading/index.jsx
index af6d6d61006d6863cdb0d122daac9cc24727706d..3d5b476146b15de2bc3887bace941aff830e2ab1 100644
--- a/src/components/PageLoading/index.jsx
+++ b/src/components/PageLoading/index.jsx
@@ -5,7 +5,7 @@ export const PageLoading = {
   props: {
     tip: {
       type: String,
-      default: 'Loading..'
+      default: 'Loading...'
     },
     size: {
       type: String,
diff --git a/src/components/TextArea/index.jsx b/src/components/TextArea/index.jsx
index 00aeb2fc417b769fdc4e7d3b04b1633c863b529a..28c38a287c5208550778d7fc03bf12a1e9636468 100644
--- a/src/components/TextArea/index.jsx
+++ b/src/components/TextArea/index.jsx
@@ -14,7 +14,6 @@ export default {
       type: String,
       default: 'ant-textarea-limit'
     },
-    // eslint-disable-next-line
     value: {
       type: String
     },
diff --git a/src/components/Trend/Trend.vue b/src/components/Trend/Trend.vue
index 526e1cc6901c48c726a40b125b35298d9a05efca..d770b862675c28b3eec81d789d6d8f7982d26143 100644
--- a/src/components/Trend/Trend.vue
+++ b/src/components/Trend/Trend.vue
@@ -19,15 +19,15 @@ export default {
       default: 'ant-pro-trend'
     },
     /**
-       * 上升下降标识：up|down
-       */
+     * 上升下降标识：up|down
+     */
     flag: {
       type: String,
       required: true
     },
     /**
-       * 颜色反转
-       */
+     * 颜色反转
+     */
     reverseColor: {
       type: Boolean,
       default: false
@@ -37,5 +37,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  @import "index";
+@import "index";
 </style>
diff --git a/src/components/_util/util.js b/src/components/_util/util.js
index 8f715da147b2ef8b6bfef8a368dbcede455eff01..82d3c2c9bb37fc3454b29073fa066b901ce74f51 100644
--- a/src/components/_util/util.js
+++ b/src/components/_util/util.js
@@ -16,7 +16,7 @@ export function filterEmpty (children = []) {
  * @param {*} str
  */
 export const getStrFullLength = (str = '') => {
-  str.split('').reduce((pre, cur) => {
+  return str.split('').reduce((pre, cur) => {
     const charCode = cur.charCodeAt(0)
     if (charCode >= 0 && charCode <= 128) {
       return pre + 1
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 6fb46c7637288506fc24b3aa8358f5369cced2a4..046565790a941d13e2d671ab17e3fd5c64ac3680 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -48,7 +48,6 @@ import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mu
 import defaultSettings from '@/config/defaultSettings'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import GlobalFooter from '@/components/GlobalFooter'
-import Ads from '@/components/Other/CarbonAds'
 import LogoSvg from '@/assets/logo.svg?inline'
 import BaseMenu from '@/components/RouteMenu'
 import { isNotBlank } from '@/utils/util'
@@ -62,7 +61,6 @@ export default {
     RightContent,
     GlobalFooter,
     LogoSvg,
-    Ads,
     BaseMenu
   },
   data () {
diff --git a/src/views/sample/components/data-display/Ellipsis.vue b/src/views/sample/components/data-display/Ellipsis.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88b0cbc5817f4efa505746a06d1506c02795cd04
--- /dev/null
+++ b/src/views/sample/components/data-display/Ellipsis.vue
@@ -0,0 +1,24 @@
+<template>
+  <a-card title="Ellipsis - 文字截取" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      文本过长自动处理省略号，支持按照文本长度截取。
+    </p>
+    <ellipsis :length="100">
+      There were injuries alleged in three cases in 2015, and a
+      fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+    </ellipsis>
+  </a-card>
+</template>
+
+<script>
+import Ellipsis from '@/components/Ellipsis/Ellipsis'
+export default {
+  name: 'SampleComponentsDataDisplayEllipsis',
+  components: { Ellipsis }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-display/NumberInfo.vue b/src/views/sample/components/data-display/NumberInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a322b4d60549408244129ac3b65bda386a724615
--- /dev/null
+++ b/src/views/sample/components/data-display/NumberInfo.vue
@@ -0,0 +1,43 @@
+<template>
+  <a-card title="NumberInfo - 数据文本" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      常用在数据卡片中，用于突出展示某个业务数据。
+    </p>
+
+    <a-row>
+      <a-col :lg="12">
+        <number-info
+          :sub-title="() => { return '周访问量' }"
+          :total="12"
+          status="up"
+          :sub-total="`2%`"></number-info>
+      </a-col>
+      <a-col :lg="12">
+        <number-info
+          :sub-title="() => { return '月访问量' }"
+          :total="12421"
+          status="down"
+          :sub-total="`5%`"></number-info>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script>
+import NumberInfo from '@/components/NumberInfo/NumberInfo'
+export default {
+  name: 'SampleComponentsDataDisplayNumberInfo',
+  components: { NumberInfo },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-display/Trend.vue b/src/views/sample/components/data-display/Trend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5dc33205cde7c44f3c3eb85ec10c5c4c1a26d90
--- /dev/null
+++ b/src/views/sample/components/data-display/Trend.vue
@@ -0,0 +1,33 @@
+<template>
+  <a-card title="Trend - 趋势标记" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
+    </p>
+
+    <trend flag="up">5%</trend>
+    <trend flag="down">5%</trend>
+    <a-divider>颜色反转</a-divider>
+    <trend flag="up" :reverse-color="true">5%</trend>
+    <trend flag="down" :reverse-color="true">5%</trend>
+  </a-card>
+</template>
+
+<script>
+import NumberInfo from '@/components/NumberInfo/NumberInfo'
+import Trend from '@/components/Trend/Trend'
+export default {
+  name: 'SampleComponentsDataDisplayTrend',
+  components: { Trend, NumberInfo },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-entry/Cron.vue b/src/views/sample/components/data-entry/Cron.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3dc1f2097750f474ce787fa2249c6510b690535
--- /dev/null
+++ b/src/views/sample/components/data-entry/Cron.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="sample-components-general">
+    <a-card title="Cron - Cron选择器" :bordered="false">
+      <p>可视化生成Cron表达式</p>
+      <a-form-model
+        ref="form"
+        :label-col="FORM_LAYOUT.labelCol"
+        :wrapper-col="FORM_LAYOUT.wrapperCol">
+        <a-row class="form-row" :gutter="16">
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Cron">
+              <e-cron v-model="value"/>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { FORM_LAYOUT, FULL_FORM_LAYOUT } from '@/utils/const/form'
+import ECron from '@/components/Easy/data-entry/corn/Cron'
+
+export default {
+  name: 'SampleComponentsDataEntryCron',
+  components: { ECron },
+  data () {
+    return {
+      FULL_FORM_LAYOUT: FULL_FORM_LAYOUT,
+      FORM_LAYOUT: FORM_LAYOUT,
+      value: '0 0 0 1/1 * ? *'
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-entry/Dict.vue b/src/views/sample/components/data-entry/Dict.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7c608e3fd3bf83313798e1ad40b4a43ea654699
--- /dev/null
+++ b/src/views/sample/components/data-entry/Dict.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="sample-components-general">
+    <a-card title="字典" :bordered="false">
+      <p>根据后端设置的字典数据封装了字典相关的Select、Radio、Checkbox和Tag组件</p>
+      <a-form-model
+        ref="form"
+        :label-col="FORM_LAYOUT.labelCol"
+        :wrapper-col="FORM_LAYOUT.wrapperCol">
+        <a-row class="form-row" :gutter="16">
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Select">
+              <e-dict-select v-model="sex" type="sex"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Select 多选">
+              <e-dict-select v-model="sexArray" mode="multiple" type="sex"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Radio">
+              <e-dict-radio v-model="sex" type="sex"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Checkbox">
+              <e-dict-checkbox v-model="sexArray" type="sex"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="Tags">
+              <e-dict-tag type="sex" code="1"/>
+              <e-dict-tag type="sex" code="2"/>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { FORM_LAYOUT, FULL_FORM_LAYOUT } from '@/utils/const/form'
+import EDictSelect from '@/components/Easy/data-entry/DictSelect'
+import EDictRadio from '@/components/Easy/data-entry/DictRadio'
+import EDictCheckbox from '@/components/Easy/data-entry/DictCheckbox'
+import EDictTag from '@/components/Easy/data-display/DictTag'
+
+export default {
+  name: 'SampleComponentsDataEntryDict',
+  components: { EDictTag, EDictCheckbox, EDictRadio, EDictSelect },
+  data () {
+    return {
+      FULL_FORM_LAYOUT: FULL_FORM_LAYOUT,
+      FORM_LAYOUT: FORM_LAYOUT,
+      sex: '1',
+      sexArray: ['1', '2']
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-entry/IconSelector.vue b/src/views/sample/components/data-entry/IconSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da3c56b8a0dd42c67140b27e1612cc6ae0ae230d
--- /dev/null
+++ b/src/views/sample/components/data-entry/IconSelector.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-card title="IconSelector - 图标选择器" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      图标选择器
+    </p>
+
+    <a-divider>直接在页面中显示</a-divider>
+    <icon-select/>
+    <a-divider>选择一个图标</a-divider>
+    <a-input v-model="icon" @click="handleIconInputClick" style="width: 200px">
+      <a-icon slot="addonAfter" v-if="icon != null && icon !== ''" :type="icon"/>
+    </a-input>
+
+    <a-modal width="960px" v-model="iconModalVisible" title="选择图标" @ok="handleOk">
+      <icon-select v-model="currentSelectedIcon" @change="handleIconChange"/>
+    </a-modal>
+  </a-card>
+</template>
+
+<script>
+import IconSelect from '@/components/IconSelector/IconSelector'
+export default {
+  name: 'SampleComponentsDataEntryIconSelector',
+  components: { IconSelect },
+  data () {
+    return {
+      // 显示图标对话框
+      iconModalVisible: false,
+      currentSelectedIcon: null,
+      icon: 'lock'
+    }
+  },
+  methods: {
+    handleIconInputClick () {
+      this.currentSelectedIcon = this.icon
+      this.iconModalVisible = true
+    },
+    handleOk () {
+      this.icon = this.currentSelectedIcon
+      this.iconModalVisible = false
+    },
+    handleIconChange (icon) {
+      this.currentSelectedIcon = icon
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-entry/LimitTextArea.vue b/src/views/sample/components/data-entry/LimitTextArea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f7d0abbc14aa7e74950162aaeb4f20a5d425ad8
--- /dev/null
+++ b/src/views/sample/components/data-entry/LimitTextArea.vue
@@ -0,0 +1,27 @@
+<template>
+  <a-card title="LimitTextArea - 文字数量提示" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      提示允许输入多少个字、已输入多少字
+    </p>
+    <limit-text-area v-model="value"/>
+  </a-card>
+</template>
+
+<script>
+import Ellipsis from '@/components/Ellipsis/Ellipsis'
+import LimitTextArea from '@/components/TextArea'
+export default {
+  name: 'SampleComponentsDataEntryLimitTextArea',
+  components: { LimitTextArea, Ellipsis },
+  data () {
+    return {
+      value: 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October.'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/data-entry/UserSearchSelect.vue b/src/views/sample/components/data-entry/UserSearchSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c86ec45a6cf77ea1415d793a2473abf1c951c918
--- /dev/null
+++ b/src/views/sample/components/data-entry/UserSearchSelect.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="sample-components-general">
+    <a-card title="EUserSearchSelect - 用户选择器" :bordered="false">
+      <a
+        slot="extra"
+        target="_blank"
+        href="http://rest-doc.easy-frame.top/front-end/components/data-entry/user-search-select.html">文档地址</a>
+      <p>
+        根据用户名、昵称、部门名称搜索，选择一个或多个用户
+      </p>
+      <a-form-model
+        ref="form"
+        :label-col="FORM_LAYOUT.labelCol"
+        :wrapper-col="FORM_LAYOUT.wrapperCol">
+        <a-row class="form-row" :gutter="16">
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="单选">
+              <e-user-search-select v-model="value1"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :lg="12" :sm="24">
+            <a-form-model-item label="限当前部门">
+              <e-user-search-select v-model="value3" range="currentDept"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :sm="24">
+            <a-form-model-item label="多选" :labelCol="FULL_FORM_LAYOUT.labelCol" :wrapperCol="FULL_FORM_LAYOUT.wrapperCol">
+              <e-user-search-select v-model="value2" mode="multiple"/>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import EUserSearchSelect from '@/components/Easy/data-entry/UserSearchSelect'
+import { FORM_LAYOUT, FULL_FORM_LAYOUT } from '@/utils/const/form'
+
+export default {
+  name: 'SampleComponentsDataEntryUserSearchSelect',
+  components: { EUserSearchSelect },
+  data () {
+    return {
+      FULL_FORM_LAYOUT: FULL_FORM_LAYOUT,
+      FORM_LAYOUT: FORM_LAYOUT,
+
+      value1: '1',
+      value2: ['1', '0d77057dcae2af878ee7bb336bb2f254'],
+      value3: ['1']
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/general/Button.vue b/src/views/sample/components/general/Button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..238e4cc98f5622f0b38a2ce47ee2fd28f2a76a3e
--- /dev/null
+++ b/src/views/sample/components/general/Button.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="sample-components">
+    <a-card title="Button - 按钮" :bordered="false">
+      <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+      <p>
+        我们将常用的按钮（新增、删除、修改等）封装成公用的组件，以保持在不同模块中按钮形式保持一致。
+      </p>
+      <a-row>
+        <a-col :lg="12">
+          <h3>常规按钮</h3>
+          <p>一般放到表格右上角</p>
+          <h4>EBtnAdd 新增</h4>
+          <p>打开新增页面</p>
+          <div class="btn-group">
+            <e-btn-add to="/sys/sample/input"/>
+            <!-- 自定义按钮文字 -->
+            <e-btn-add to="/sys/sample/input">自定义文字</e-btn-add>
+          </div>
+          <h4>EBtnRemoveBatch 删除</h4>
+          <p>批量删除数据</p>
+          <div class="btn-group">
+            <e-btn-remove-batch :ids="[1]" />
+            <!-- 自定义按钮文字 -->
+            <e-btn-remove-batch :ids="[1]" >自定义文字</e-btn-remove-batch>
+          </div>
+          <h4>EBtnSave 保存</h4>
+          <p>表单填写页面底部的保存</p>
+          <div class="btn-group">
+            <e-btn-save/>
+            <!-- 自定义按钮文字 -->
+            <e-btn-save>自定义文字</e-btn-save>
+          </div>
+          <h4>EBtnImport 导入</h4>
+          <p>通过Excel导入数据，点击打开导入页面</p>
+          <div class="btn-group">
+            <e-btn-import import-code="xxx"/>
+            <!-- 自定义按钮文字 -->
+            <e-btn-import import-code="xxx">自定义文字</e-btn-import>
+          </div>
+        </a-col>
+        <a-col :lg="12">
+          <h3>表格操作列按钮</h3>
+          <p>一般用于表格最后一列的操作列中。</p>
+          <h4>EBtnAddSub 新增下级</h4>
+          <p>打开新增页面并指定一个上级id</p>
+          <e-btn-add-sub to="/sys/sample/input" :params="{id: 'xxx'}"/>
+          <h4>EBtnEdit 修改</h4>
+          <p>打开修改页面</p>
+          <e-btn-edit to="/sys/sample/input"/>
+          <h4>EBtnInfo 查看</h4>
+          <p>打开查看页面</p>
+          <e-btn-info to="/sys/sample/info"/>
+          <h4>EBtnRemove 删除</h4>
+          <p>删除一条数据</p>
+          <e-btn-remove/>
+          <h4>EBtnWorkFlowStart 发起流程</h4>
+          <e-btn-work-flow-start
+            model-key="sample"
+            business-key="xxx"
+            business-title="工作名称"
+            business-details-path="views/sample/work-flow/Info"/>
+          <h4>EBtnWorkFlowProgress 审核进度</h4>
+          <e-btn-work-flow-progress business-key="xxx"/>
+          <h4>EBtnWorkFlowRevoke 撤销申请</h4>
+          <e-btn-work-flow-revoke business-key="xxx"/>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import EBtnAdd from '@/components/Easy/general/BtnAdd'
+import EBtnRemove from '@/components/Easy/general/BtnRemove'
+import EBtnRemoveBatch from '@/components/Easy/general/BtnRemoveBatch'
+import EBtnSave from '@/components/Easy/general/BtnSave'
+import EBtnImport from '@/components/Easy/general/BtnImport'
+import EBtnAddSub from '@/components/Easy/general/BtnAddSub'
+import EBtnEdit from '@/components/Easy/general/BtnEdit'
+import EBtnInfo from '@/components/Easy/general/BtnInfo'
+import EBtnWorkFlowStart from '@/components/Easy/general/work-flow/BtnStart'
+import EBtnWorkFlowProgress from '@/components/Easy/general/work-flow/BtnProgress'
+import EBtnWorkFlowRevoke from '@/components/Easy/general/work-flow/BtnRevoke'
+export default {
+name: 'SampleComponentsGeneralButton',
+  components: { EBtnWorkFlowRevoke, EBtnWorkFlowProgress, EBtnWorkFlowStart, EBtnInfo, EBtnEdit, EBtnAddSub, EBtnImport, EBtnSave, EBtnRemoveBatch, EBtnRemove, EBtnAdd }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sample/components/general/Loading.vue b/src/views/sample/components/general/Loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..37366f5b38369db0845f9857bd07994dc4b2c456
--- /dev/null
+++ b/src/views/sample/components/general/Loading.vue
@@ -0,0 +1,31 @@
+<template>
+  <a-card title="Loading - 加载提示" :bordered="false">
+    <a slot="extra" target="_blank" href="http://rest-doc.easy-frame.top/front-end/components/general.html">文档地址</a>
+    <p>
+      添加全局的loading状态
+    </p>
+    <div class="btn-group">
+      <a-button @click="showLoading(null)">显示Loading</a-button>
+      <a-button @click="showLoading('自定义文字')">自定义文字</a-button>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'SampleComponentsGeneralLoading',
+  methods: {
+    showLoading (tip) {
+      this.$loading.show({ tip: tip || null })
+
+      setTimeout(() => {
+        this.$loading.hide()
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>