From b9b1f8eb8c0d42fc080a5144cc2bd803e8d2f6e2 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Tue, 3 Feb 2026 21:34:17 +0800
Subject: [PATCH] =?UTF-8?q?docs(components):=20=E6=B7=BB=E5=8A=A0=E4=B8=9A?=
 =?UTF-8?q?=E5=8A=A1=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改CuteDeptTree组件布局属性从响应式栅格到固定span
- 调整CuteDeptTree组件中search事件触发时机优化
- 新增CuteDeptTreeDemo组件演示页面及API文档
- 新增CuteProductLineSelectDemo组件演示页面及API文档
- 新增CuteProductLineSelectProDemo组件演示页面及API文档
- 新增CuteSingleUserSelectDemo组件演示页面及API文档
- 新增CuteUserSelectDemo组件演示页面及API文档
- 删除旧的CuteBusinessDemo组件页面
- 在组件演示首页添加业务组件折叠面板展示
- 更新组件导入引用名称确保一致性
- 移除CuteOtherDemo中的CuteSectionTitle演示代码
- 重命名CuteSearchProForm为CuteSearchFormPro并更新引用
- 重命名CuteFormProDialog为CuteFormDialogPro并更新引用
---
 .../components/business/CuteDeptTree.vue      |   4 +-
 ...ormProDialog.vue => CuteFormDialogPro.vue} |   0
 ...earchProForm.vue => CuteSearchFormPro.vue} |   0
 .../views/componentsDemo/CuteBusinessDemo.vue | 112 ------------------
 .../views/componentsDemo/CuteOtherDemo.vue    |  10 +-
 .../componentsDemo/CuteSimpleTableDemo.vue    |   6 +-
 .../business/CuteDeptTreeDemo.vue             |  84 +++++++++++++
 .../business/CuteProductLineSelectDemo.vue    |  80 +++++++++++++
 .../business/CuteProductLineSelectProDemo.vue |  75 ++++++++++++
 .../business/CuteSingleUserSelectDemo.vue     |  76 ++++++++++++
 .../business/CuteUserSelectDemo.vue           |  77 ++++++++++++
 .../src/views/componentsDemo/index.vue        |  32 ++++-
 12 files changed, 430 insertions(+), 126 deletions(-)
 rename cutejava-front/src/views/components/dev/{CuteFormProDialog.vue => CuteFormDialogPro.vue} (100%)
 rename cutejava-front/src/views/components/dev/{CuteSearchProForm.vue => CuteSearchFormPro.vue} (100%)
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue

diff --git a/cutejava-front/src/views/components/business/CuteDeptTree.vue b/cutejava-front/src/views/components/business/CuteDeptTree.vue
index adfbb3bb..8ebce7ce 100644
--- a/cutejava-front/src/views/components/business/CuteDeptTree.vue
+++ b/cutejava-front/src/views/components/business/CuteDeptTree.vue
@@ -5,7 +5,7 @@
  * @created 2025-07-29
  -->
 <template>
-  <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+  <el-col :span="6">
     <div class="head-container">
       <el-input
         v-model="deptName"
@@ -51,11 +51,11 @@ export default {
   },
   methods: {
     getDeptData(node, resolve) {
+      this.$emit('search', node)
       const params = {}
       if (typeof node !== 'object') {
         if (node) {
           params['name'] = node
-          this.$emit('search', node)
         }
       } else if (node.level !== 0) {
         params['pid'] = node.data.id
diff --git a/cutejava-front/src/views/components/dev/CuteFormProDialog.vue b/cutejava-front/src/views/components/dev/CuteFormDialogPro.vue
similarity index 100%
rename from cutejava-front/src/views/components/dev/CuteFormProDialog.vue
rename to cutejava-front/src/views/components/dev/CuteFormDialogPro.vue
diff --git a/cutejava-front/src/views/components/dev/CuteSearchProForm.vue b/cutejava-front/src/views/components/dev/CuteSearchFormPro.vue
similarity index 100%
rename from cutejava-front/src/views/components/dev/CuteSearchProForm.vue
rename to cutejava-front/src/views/components/dev/CuteSearchFormPro.vue
diff --git a/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue b/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue
deleted file mode 100644
index 9fb00a94..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteBusinessDemo.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div style="padding: 50px">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>表单值绑定</span>
-      </div>
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item label="用户" prop="user">
-          <!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
-          <cute-user-select v-model="form.user" />
-        </el-form-item>
-        <el-form-item label="部门" prop="dept">
-          <cute-dept-tree v-model="form.dept" />
-        </el-form-item>
-        <el-form-item label="产品线" prop="productLine">
-          <cute-product-line-select v-model="form.productLine" @detail="onProductLineDetailChange" />
-        </el-form-item>
-        <el-form-item label="产品线Pro" prop="productLinePro">
-          <cute-product-line-select-pro v-model="form.productLinePro" @detail="onProductLineDetailProChange" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
-          <el-button type="danger" @click="onReset('form')">重 置</el-button>
-          <el-button>取 消</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card style="margin-top: 10px">
-      <div slot="header" class="clearfix">
-        <span>用户选择框</span>
-      </div>
-      <cute-user-select @change="onUserSelectChange" />
-    </el-card>
-    <el-card style="margin-top: 10px">
-      <div slot="header" class="clearfix">
-        <span>部门树</span>
-      </div>
-      <cute-dept-tree @node-click="onDeptTreeNodeClick" @search="onDeptTreeSearch" />
-    </el-card>
-    <el-card style="margin-top: 10px">
-      <div slot="header" class="clearfix">
-        <span>产品线选择框</span>
-      </div>
-      <cute-product-line-select @change="onProductLineChange" @detail="onProductLineDetailChange" />
-    </el-card>
-    <el-card style="margin-top: 10px">
-      <div slot="header" class="clearfix">
-        <span>产品线选择框Pro</span>
-      </div>
-      <cute-product-line-select-pro @change="onProductLineDetailProChange" />
-    </el-card>
-  </div>
-</template>
-
-<script>
-
-import CuteUserSelect from '@/views/components/business/CuteUserSelect.vue'
-import CuteDeptTree from '@/views/components/business/CuteDeptTree.vue'
-import CuteProductLineSelect from '@/views/components/business/CuteProductLineSelect.vue'
-import CuteProductLineSelectPro from '@/views/components/business/CuteProductLineSelectPro.vue'
-
-export default {
-  name: 'CuteBusinessDemo',
-  components: { CuteProductLineSelectPro, CuteProductLineSelect, CuteDeptTree, CuteUserSelect },
-  data() {
-    return {
-      form: {
-        user: [],
-        dept: null,
-        productLine: null,
-        productLinePro: null
-      },
-      searchFormModel: {}
-    }
-  },
-  methods: {
-    onUserSelectChange(data) {
-      console.log('onUserSelectChange=', data)
-    },
-    onDeptTreeNodeClick(data) {
-      console.log('onDeptTreeNodeClick=', data)
-    },
-    onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          console.log('this.form=', this.form)
-        } else {
-          console.error('error submit!!')
-          return false
-        }
-      })
-    },
-    onReset(formName) {
-      this.$refs[formName].resetFields()
-    },
-    onDeptTreeSearch(key) {
-      console.log('onDeptTreeSearch:key', key)
-      console.log('onDeptTreeSearch:form.dept', this.form.dept)
-    },
-    onProductLineChange(data) {
-      console.log('onProductLineChange', data)
-    },
-    onProductLineDetailChange(data) {
-      console.log('onProductLineDetailChange', data)
-    },
-    onProductLineDetailProChange(data) {
-      console.log('onProductLineDetailProChange', data)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
index cec2db7c..8bcb898e 100644
--- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
@@ -39,12 +39,6 @@
         </template>
       </cute-search-form>
     </cute-screen-shot>
-    <cute-section-title title="段落标题 CuteSectionTitle" />
-    <cute-section-title title="主标题" sub-title="副标题" third-title="三级标题">
-      <cute-button type="danger">操作按钮1</cute-button>
-      <cute-button type="danger">操作按钮2</cute-button>
-      <cute-button type="danger">操作按钮3</cute-button>
-    </cute-section-title>
   </div>
 </template>
 
@@ -56,12 +50,12 @@ import CuteScreenShot from '@/views/components/dev/CuteScreenShot.vue'
 import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
 import CuteButton from '@/views/components/dev/CuteButton.vue'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
-import CuteSearchProForm from '@/views/components/dev/CuteSearchProForm.vue'
+import CuteSearchFormPro from '@/views/components/dev/CuteSearchFormPro.vue'
 
 export default {
   name: 'CuteOtherDemo',
   components: {
-    CuteSearchProForm,
+    CuteSearchProForm: CuteSearchFormPro,
     CuteTransfer,
     CuteButton,
     CuteSectionTitle,
diff --git a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
index f207f0de..a9ad57e3 100644
--- a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
@@ -123,11 +123,11 @@ import { FormatRowDateTimeStr } from '@/utils/KitUtil'
 import CuteButton from '@/views/components/dev/CuteButton.vue'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
 import CuteEditTable from '@/views/components/dev/CuteEditTable.vue'
-import CuteFormProDialog from '@/views/components/dev/CuteFormProDialog.vue'
+import CuteFormDialogPro from '@/views/components/dev/CuteFormDialogPro.vue'
 
 export default {
   name: 'CuteSimpleTableDemo',
-  components: { CuteFormProDialog, CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
+  components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
   data() {
     return {
       modeDataSource: [
@@ -214,7 +214,7 @@ export default {
           { required: true, message: '请选择活动区域', trigger: 'change' }
         ]
       },
-      // CuteFormProDialog
+      // CuteFormDialogPro
       createFormProModel: {},
       createFormProSchema: [
         { name: 'name', title: '姓名', type: 'input', required: true },
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
new file mode 100644
index 00000000..11037ea1
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>选择、绑定部门信息时</li>
+      <li>统一部门数据来源</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）@Odboy（后端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-dept-tree @node-click="onDeptTreeNodeClick" @search="onDeptTreeSearch" />
+    </el-row>
+    <h4>绑定表单</h4>
+    <el-row>
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="部门" prop="dept">
+          <cute-dept-tree v-model="form.dept" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
+          <el-button type="danger" @click="onReset('form')">重 置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteDeptTree from '@/views/components/business/CuteDeptTree.vue'
+
+export default {
+  name: 'CuteDeptTreeDemo',
+  components: { CuteDeptTree },
+  data() {
+    return {
+      form: {
+        dept: null
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'node-click', remark: '部门节点发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
+        { name: 'search', remark: '搜索部门回调事件', type: '(value) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onDeptTreeNodeClick(data) {
+      console.log('onDeptTreeNodeClick', data)
+    },
+    onDeptTreeSearch(key) {
+      console.log('onDeptTreeSearch:key', key)
+      console.log('onDeptTreeSearch:form.dept', this.form.dept)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log('onSubmit:form', this.form)
+        } else {
+          console.error('onSubmit:error submit!!')
+          return false
+        }
+      })
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
new file mode 100644
index 00000000..aa17eea0
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>选择、绑定部门明细信息，需要根部门和子部门以及路径的信息等</li>
+      <li>统一部门数据来源</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）@Odboy（后端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-product-line-select @change="onProductLineChange" @detail="onProductLineDetailChange" />
+    <h4>绑定表单</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="产品线" prop="productLine">
+        <cute-product-line-select v-model="form.productLine" @detail="onProductLineDetailChange" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
+        <el-button type="danger" @click="onReset('form')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteProductLineSelect from '@/views/components/business/CuteProductLineSelect.vue'
+
+export default {
+  name: 'CuteProductLineSelectDemo',
+  components: { CuteProductLineSelect },
+  data() {
+    return {
+      form: {
+        productLine: null
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'change', remark: '产品线发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
+        { name: 'detail', remark: '产品线明细发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onProductLineChange(data) {
+      console.log('onProductLineChange', data)
+    },
+    onProductLineDetailChange(data) {
+      console.log('onProductLineDetailChange', data)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log('onSubmit:form', this.form)
+        } else {
+          console.error('onSubmit:error submit!!')
+          return false
+        }
+      })
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
new file mode 100644
index 00000000..a2495ce8
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>选择、绑定部门明细信息，需要根部门和子部门以及路径的信息等</li>
+      <li>统一部门数据来源</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）@Odboy（后端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-product-line-select-pro @change="onProductLineDetailProChange" />
+    <h4>绑定表单</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="产品线Pro" prop="productLine">
+        <cute-product-line-select v-model="form.productLine" @detail="onProductLineDetailProChange" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
+        <el-button type="danger" @click="onReset('form')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteProductLineSelect from '@/views/components/business/CuteProductLineSelect.vue'
+import CuteProductLineSelectPro from '@/views/components/business/CuteProductLineSelectPro.vue'
+
+export default {
+  name: 'CuteProductLineSelectProDemo',
+  components: { CuteProductLineSelectPro, CuteProductLineSelect },
+  data() {
+    return {
+      form: {
+        productLine: null
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onProductLineDetailProChange(data) {
+      console.log('onProductLineDetailProChange', data)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log('onSubmit:form', this.form)
+        } else {
+          console.error('onSubmit:error submit!!')
+          return false
+        }
+      })
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
new file mode 100644
index 00000000..07d43d49
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>选择单个用户信息</li>
+      <li>支持用户姓名、手机号、邮箱、用户名查询</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-single-user-select v-model="user" @change="onUserSelectChange" />
+    <h4>绑定表单</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="用户" prop="user">
+        <cute-single-user-select v-model="form.user" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
+        <el-button type="danger" @click="onReset('form')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteSingleUserSelect from '@/views/components/business/CuteSingleUserSelect.vue'
+
+export default {
+  name: 'CuteSingleUserSelectDemo',
+  components: { CuteSingleUserSelect },
+  data() {
+    return {
+      user: '',
+      form: {
+        user: ''
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onUserSelectChange(data) {
+      console.log('onUserSelectChange', data)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log('onSubmit:form', this.form)
+        } else {
+          console.error('onSubmit:error submit!!')
+          return false
+        }
+      })
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue b/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
new file mode 100644
index 00000000..67b21d8e
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>选择多个用户信息</li>
+      <li>支持用户姓名、手机号、邮箱、用户名查询</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-user-select v-model="user" @change="onUserSelectChange" />
+    <h4>绑定表单</h4>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="用户" prop="user">
+        <!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
+        <cute-user-select v-model="form.user" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
+        <el-button type="danger" @click="onReset('form')">重 置</el-button>
+      </el-form-item>
+    </el-form>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteUserSelect from '@/views/components/business/CuteUserSelect.vue'
+
+export default {
+  name: 'CuteUserSelectDemo',
+  components: { CuteUserSelect },
+  data() {
+    return {
+      user: [],
+      form: {
+        user: []
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'array', defaultValue: '[]', required: '否' },
+        { name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    onUserSelectChange(data) {
+      console.log('onUserSelectChange', data)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log('onSubmit:form', this.form)
+        } else {
+          console.error('onSubmit:error submit!!')
+          return false
+        }
+      })
+    },
+    onReset(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index 5816435f..a99b5085 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -57,7 +57,25 @@
           </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
-      <el-tab-pane label="业务组件" name="business" />
+      <el-tab-pane label="业务组件" name="business">
+        <el-collapse accordion>
+          <el-collapse-item title="用户单选框 CuteSingleUserSelect" name="CuteSingleUserSelect">
+            <CuteSingleUserSelectDemo />
+          </el-collapse-item>
+          <el-collapse-item title="用户多选框 CuteUserSelect" name="CuteUserSelect">
+            <CuteUserSelectDemo />
+          </el-collapse-item>
+          <el-collapse-item title="部门树 CuteDeptTree" name="CuteDeptTree">
+            <CuteDeptTreeDemo />
+          </el-collapse-item>
+          <el-collapse-item title="产品线选择框 CuteProductLineSelect" name="CuteProductLineSelect">
+            <CuteProductLineSelectDemo />
+          </el-collapse-item>
+          <el-collapse-item title="产品线选择框Pro CuteProductLineSelectPro" name="CuteProductLineSelectPro">
+            <CuteProductLineSelectProDemo />
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
       <el-tab-pane label="高级组件" name="advanced" />
     </el-tabs>
   </cute-page>
@@ -81,10 +99,22 @@ import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vu
 import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
 import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue'
 import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue'
+import CuteUserSelectDemo from '@/views/componentsDemo/business/CuteUserSelectDemo.vue'
+import CuteSingleUserSelectDemo from '@/views/componentsDemo/business/CuteSingleUserSelectDemo.vue'
+import CuteProductLineSelectDemo from '@/views/componentsDemo/business/CuteProductLineSelectDemo.vue'
+import CuteProductLineSelectProDemo from '@/views/componentsDemo/business/CuteProductLineSelectProDemo.vue'
+import CuteDeptTree from '@/views/components/business/CuteDeptTree.vue'
+import CuteDeptTreeDemo from '@/views/componentsDemo/business/CuteDeptTreeDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteDeptTreeDemo,
+    CuteDeptTree,
+    CuteProductLineSelectProDemo,
+    CuteProductLineSelectDemo,
+    CuteSingleUserSelectDemo,
+    CuteUserSelectDemo,
     CuteTextAreaInputDemo,
     CuteHorizontalScrollBarDemo,
     CuteRichTextEditorDemo,