diff --git a/cutejava-front/src/utils/elementui/KitMessage.js b/cutejava-front/src/utils/elementui/KitMessage.js
index 68710f85..5b64544f 100644
--- a/cutejava-front/src/utils/elementui/KitMessage.js
+++ b/cutejava-front/src/utils/elementui/KitMessage.js
@@ -3,24 +3,36 @@ import Vue from 'vue'
  * 消息提示
  */
 export default {
-  Info: function(content) {
+  Info: function(content, duration = 3000) {
     Vue.prototype.$message({
-      message: content, type: 'info'
+      message: content,
+      type: 'info',
+      duration: duration,
+      showClose: duration <= 0
     })
   },
-  Success: function(content) {
+  Success: function(content, duration = 3000) {
     Vue.prototype.$message({
-      message: content, type: 'success'
+      message: content,
+      type: 'success',
+      duration: duration,
+      showClose: duration <= 0
     })
   },
-  Warning: function(content) {
+  Warning: function(content, duration = 3000) {
     Vue.prototype.$message({
-      message: content, type: 'warning'
+      message: content,
+      type: 'warning',
+      duration: duration,
+      showClose: duration <= 0
     })
   },
-  Error: function(content) {
+  Error: function(content, duration = 3000) {
     Vue.prototype.$message({
-      message: content, type: 'error'
+      message: content,
+      type: 'error',
+      duration: duration,
+      showClose: duration <= 0
     })
   }
 }
diff --git a/cutejava-front/src/utils/elementui/KitNotification.js b/cutejava-front/src/utils/elementui/KitNotification.js
index 0130a44b..73b48e2f 100644
--- a/cutejava-front/src/utils/elementui/KitNotification.js
+++ b/cutejava-front/src/utils/elementui/KitNotification.js
@@ -4,17 +4,29 @@ import Vue from 'vue'
  * 通知
  */
 export default {
-  Info: function(content) {
-    Vue.prototype.$notify({ message: content, type: 'info' })
-  }, Success: function(content) {
-    Vue.prototype.$notify({ message: content, type: 'success' })
-  }, SuccessDuration: function(content, durationTime) {
-    Vue.prototype.$notify({ message: content, type: 'success', duration: durationTime })
-  }, Warning: function(content) {
-    Vue.prototype.$notify({ message: content, type: 'warning' })
-  }, Error: function(content) {
-    Vue.prototype.$notify({ message: content, type: 'error' })
-  }, ErrorDuration: function(content, durationTime) {
-    Vue.prototype.$notify({ message: content, type: 'error', duration: durationTime })
+  Info: function(content, duration = 3000) {
+    Vue.prototype.$notify({
+      message: content,
+      type: 'info',
+      duration: duration
+    })
+  }, Success: function(content, duration = 3000) {
+    Vue.prototype.$notify({
+      message: content,
+      type: 'success',
+      duration: duration
+    })
+  }, Warning: function(content, duration = 3000) {
+    Vue.prototype.$notify({
+      message: content,
+      type: 'warning',
+      duration: duration
+    })
+  }, Error: function(content, duration = 3000) {
+    Vue.prototype.$notify({
+      message: content,
+      type: 'error',
+      duration: duration
+    })
   }
 }
diff --git a/cutejava-front/src/views/components/base/WebSocketDemo.vue b/cutejava-front/src/views/components/base/WebSocketDemo.vue
deleted file mode 100644
index 206920ac..00000000
--- a/cutejava-front/src/views/components/base/WebSocketDemo.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <el-card>
-    <div>
-      <el-input v-model="sendVal" style="width: 300px" />
-      <el-button @click="onConnectClick">连接</el-button>
-      <el-button @click="onSendClick">发送</el-button>
-      <el-button @click="onCloseClick">关闭</el-button>
-    </div>
-    <el-divider>返回内容</el-divider>
-    <div style="width: 300px;min-height: 200px">{{ responseTxt }}</div>
-  </el-card>
-</template>
-<script>
-import KitWsClient from '@/utils/KitWsClient'
-import { mapGetters } from 'vuex'
-
-export default {
-  data() {
-    return {
-      client: null,
-      sendVal: '',
-      responseTxt: ''
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'user'
-    ])
-  },
-  destroyed() {
-    if (this.client) {
-      this.client.close()
-    }
-  },
-  methods: {
-    onConnectClick() {
-      const that = this
-      // console.error('userInfo', that.user)
-      that.client = new KitWsClient(that.user.username)
-      that.client.connect(function(event) {
-        console.info('=============== MyWebSocket:event', event)
-      }, function(msgEvent) {
-        console.info('=============== MyWebSocket:msgEvent', msgEvent)
-        that.responseTxt = that.responseTxt + msgEvent.data + ''
-      })
-    },
-    onSendClick() {
-      if (this.client) {
-        this.client.sendData({
-          msgType: 'sc',
-          userIds: ['123456'],
-          content: this.sendVal
-        })
-        this.client.sendData({
-          msgType: 'gc',
-          content: this.sendVal
-        })
-      }
-    },
-    onCloseClick() {
-      if (this.client) {
-        this.client.close()
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-#btn {
-  display: inline-block;
-  padding: 3px 12px;
-  border-radius: 6px;
-  background-color: #eee;
-  color: #333;
-  cursor: pointer;
-}
-
-#btn:active {
-  background-color: #ddd;
-  color: #666;
-}
-</style>
diff --git a/cutejava-front/src/views/components/dev/CuteButton.vue b/cutejava-front/src/views/components/dev/CuteButton.vue
index a4e297f5..d4b34080 100644
--- a/cutejava-front/src/views/components/dev/CuteButton.vue
+++ b/cutejava-front/src/views/components/dev/CuteButton.vue
@@ -24,7 +24,7 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'primary'
+      default: 'normal'
     },
     icon: {
       type: String,
@@ -39,40 +39,33 @@ export default {
       default: false
     }
   },
-  computed: {
-    innerType() {
-      if (this.type) {
-        if (this.type === 'primary') {
-          return 'primary'
-        }
-        if (this.type === 'secondary') {
-          return 'primary'
-        }
-        if (this.type === 'normal') {
-          return null
-        }
-        if (this.type === 'text') {
-          return 'text'
-        }
+  data() {
+    return {
+      innerType: null,
+      innerPlain: false
+    }
+  },
+  created() {
+    if (this.type) {
+      if (this.type === 'primary') {
+        this.innerType = 'primary'
+        this.innerPlain = false
+      } else if (this.type === 'secondary') {
+        this.innerType = 'primary'
+        this.innerPlain = true
+      } else if (this.type === 'normal') {
+        this.innerType = null
+        this.innerPlain = false
+      } else if (this.type === 'text') {
+        this.innerType = 'text'
+        this.innerPlain = false
+      } else {
+        this.innerType = null
+        this.innerPlain = false
       }
-      return null
-    },
-    innerPlain() {
-      if (this.type) {
-        if (this.type === 'primary') {
-          return false
-        }
-        if (this.type === 'secondary') {
-          return true
-        }
-        if (this.type === 'normal') {
-          return false
-        }
-        if (this.type === 'text') {
-          return false
-        }
-      }
-      return false
+    } else {
+      this.innerType = null
+      this.innerPlain = false
     }
   },
   methods: {
diff --git a/cutejava-front/src/views/components/dev/CuteLink.vue b/cutejava-front/src/views/components/dev/CuteLink.vue
index 25a8253a..aca3807b 100644
--- a/cutejava-front/src/views/components/dev/CuteLink.vue
+++ b/cutejava-front/src/views/components/dev/CuteLink.vue
@@ -10,6 +10,7 @@
     :underline="false"
     :href="href"
     target="_blank"
+    :disabled="disabled"
   >{{ title }}</el-link>
 </template>
 
@@ -27,6 +28,11 @@ export default {
       type: String,
       required: true,
       default: 'https://gitee.com/odboy-tianjun'
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue
new file mode 100644
index 00000000..6d0dc55e
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteButtonDemo.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>触发提交/执行某个操作</li>
+      <li>页面内主、次操作之间需要明确的视觉层级（primary/secondary/normal/text）</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-button>默认按钮</cute-button>
+      <cute-button type="primary">主要按钮</cute-button>
+      <cute-button type="secondary">次要按钮</cute-button>
+      <cute-button type="normal">普通按钮</cute-button>
+      <cute-button type="text">文字按钮</cute-button>
+    </el-row>
+    <h4>禁用状态</h4>
+    <el-row>
+      <cute-button disabled>默认按钮</cute-button>
+      <cute-button disabled type="primary">主要按钮</cute-button>
+      <cute-button disabled type="secondary">次要按钮</cute-button>
+      <cute-button disabled type="normal">普通按钮</cute-button>
+      <cute-button disabled type="text">文字按钮</cute-button>
+    </el-row>
+    <h4>Loading状态</h4>
+    <el-row>
+      <cute-button loading>默认按钮</cute-button>
+      <cute-button loading type="primary">主要按钮</cute-button>
+      <cute-button loading type="secondary">次要按钮</cute-button>
+      <cute-button loading type="normal">普通按钮</cute-button>
+      <cute-button loading type="text">文字按钮</cute-button>
+    </el-row>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+
+export default {
+  name: 'CuteButtonDemo',
+  components: { CuteButton },
+  data() {
+    return {
+      apiData: [
+        { name: 'type', remark: '按钮类型', type: 'primary| secondary | normal | text', defaultValue: 'normal', required: '否' },
+        { name: 'icon', remark: '内置图标占位', type: '参考ElementUI icon', defaultValue: '-', required: '否' },
+        { name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'loading', remark: '载入状态（禁用点击，展示 loading）', type: 'boolean', defaultValue: 'false', required: '否' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue b/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue
new file mode 100644
index 00000000..1382f9e8
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/CuteLinkDemo.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>文字链接等</li>
+      <li>需要另起页面，不在当前页面打开</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-link title="百度一下" href="https://www.baidu.com" />
+    </el-row>
+    <h4>禁用状态</h4>
+    <el-row>
+      <cute-link title="百度一下" href="https://www.baidu.com" disabled />
+    </el-row>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteLink from '@/views/components/dev/CuteLink.vue'
+
+export default {
+  name: 'CuteLinkDemo',
+  components: { CuteLink },
+  data() {
+    return {
+      apiData: [
+        { name: 'title', remark: '按钮类型', type: 'primary| secondary | normal | text', defaultValue: 'normal', required: '否' },
+        { name: 'href', remark: '内置图标占位', type: '参考ElementUI icon', defaultValue: '-', required: '否' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
new file mode 100644
index 00000000..bd6c9d57
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>不离开当前场景完成增删改操作</li>
+      <li>需要确认用户的操作，明确操作会产生的结果，提醒告知用户</li>
+      <li>作为配置型功能及信息的容器</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-button @click="handleDeleteConfirm">删除确认框</cute-button>
+      <cute-button @click="handleDeleteMessageConfirm">删除确认框(自定义提示)</cute-button>
+      <cute-button @click="handleShowConfirm">确认内容消息框</cute-button>
+      <cute-button @click="handleTextInputConfirm">数据输入对话框</cute-button>
+    </el-row>
+    <h4>快捷调用</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import KitMessage from '@/utils/elementui/KitMessage'
+import KitDialog from '@/utils/elementui/KitDialog'
+
+export default {
+  name: 'KitDialogDemo',
+  components: { CuteButton },
+  data() {
+    return {
+      apiData: [
+        { name: 'message', remark: '自定义提示信息', type: 'string', defaultValue: '-', required: '否' },
+        { name: 'confirmCallBack', remark: '确定回调', type: '() => {}', defaultValue: '-', required: '否' },
+        { name: 'cancelCallBack', remark: '取消回调', type: '() => {}', defaultValue: '-', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleDeleteConfirm() {
+      KitDialog.DeleteConfirm(() => {
+        KitMessage.Success('确定回调')
+      }, () => {
+        KitMessage.Warning('取消回调')
+      })
+    },
+    handleDeleteMessageConfirm() {
+      KitDialog.DeleteMessageConfirm('请确认是否删除当前麦晓雯', () => {
+        KitMessage.Success('确定回调')
+      }, () => {
+        KitMessage.Warning('取消回调')
+      })
+    },
+    handleShowConfirm() {
+      KitDialog.ShowConfirm('温馨提醒', '这里是提醒的内容')
+    },
+    handleTextInputConfirm() {
+      KitDialog.TextInputConfirm('温馨提醒', /^[a-z]+$/, '正则校验输入值均为小写字母不通过', (value) => {
+        KitMessage.Success('确定回调，输入的值：' + value)
+      }, () => {
+        KitMessage.Warning('取消回调')
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
new file mode 100644
index 00000000..e120b301
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>当需要向用户展示操作结果时，如成功、失败、警告等状态反馈</li>
+      <li>系统级公告，全局类警示提示，模块类状态反馈（成功、警告、错误等）</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-button @click="handleInfoClick">Info 提示</cute-button>
+      <cute-button @click="handleWarningClick">Warning 提示</cute-button>
+      <cute-button @click="handleSuccessClick">Success 提示</cute-button>
+      <cute-button @click="handleErrorClick">Error 提示</cute-button>
+    </el-row>
+    <h4>快捷调用</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import KitMessage from '@/utils/elementui/KitMessage'
+
+export default {
+  name: 'KitMessageDemo',
+  components: { CuteButton },
+  data() {
+    return {
+      apiData: [
+        { name: 'content', remark: '内容', type: 'string | VNode', defaultValue: '-', required: '否' },
+        { name: 'duration', remark: '显示时间, 毫秒。设为 0 则不会自动关闭', type: 'number', defaultValue: '3000', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleInfoClick() {
+      KitMessage.Info('这是一段 Info 通知提示信息')
+    },
+    handleWarningClick() {
+      KitMessage.Warning('这是一段 Warning 通知提示信息')
+    },
+    handleSuccessClick() {
+      KitMessage.Success('这是一段 Success 通知提示信息')
+    },
+    handleErrorClick() {
+      KitMessage.Error('这是一段 Error 通知提示信息')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
new file mode 100644
index 00000000..5bb1b9e0
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    在系统四个角显示通知提醒信息。经常用于以下情况
+    <ul class="description">
+      <li>较为复杂的通知内容</li>
+      <li>带有交互的通知，给出用户下一步的行动点</li>
+      <li>系统主动推送</li>
+      <li>当需要向用户展示重要信息但又不希望打断用户当前操作时</li>
+      <li>当需要同时展示多个不同类型的通知信息时</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-row>
+      <cute-button @click="handleInfoClick">Info 通知</cute-button>
+      <cute-button @click="handleWarningClick">Warning 通知</cute-button>
+      <cute-button @click="handleSuccessClick">Success 通知</cute-button>
+      <cute-button @click="handleErrorClick">Error 通知</cute-button>
+    </el-row>
+    <h4>快捷调用</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import KitNotification from '@/utils/elementui/KitNotification'
+
+export default {
+  name: 'KitNotificationDemo',
+  components: { CuteButton },
+  data() {
+    return {
+      apiData: [
+        { name: 'content', remark: '内容', type: 'string | VNode', defaultValue: '-', required: '否' },
+        { name: 'duration', remark: '显示时间, 毫秒。设为 0 则不会自动关闭', type: 'number', defaultValue: '3000', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    handleInfoClick() {
+      KitNotification.Info('这是一段 Info 通知提示信息')
+    },
+    handleWarningClick() {
+      KitNotification.Warning('这是一段 Warning 通知提示信息')
+    },
+    handleSuccessClick() {
+      KitNotification.Success('这是一段 Success 通知提示信息')
+    },
+    handleErrorClick() {
+      KitNotification.Error('这是一段 Error 通知提示信息')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
new file mode 100644
index 00000000..46055d67
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>实时与服务器进行数据交互</li>
+      <li>服务器主动推送数据给客户端</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计） @Odboy（后端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <el-card>
+      <div>
+        <cute-button type="primary" @click="onConnectClick">连接</cute-button>
+        <el-input v-model="sendVal" style="width: 300px" placeholder="请输入要发送的内容" />
+        <cute-button type="secondary" @click="onSendClick">发送</cute-button>
+        <cute-button type="primary" @click="onCloseClick">关闭</cute-button>
+      </div>
+      <el-divider>返回内容</el-divider>
+      <div style="width: 300px;min-height: 200px">{{ responseTxt }}</div>
+    </el-card>
+    <h4>快捷调用</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="remark" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import KitWsClient from '@/utils/KitWsClient'
+import { mapGetters } from 'vuex'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+export default {
+  name: 'KitWsClientDemo',
+  components: { CuteButton },
+  data() {
+    return {
+      client: null,
+      sendVal: '',
+      responseTxt: '',
+      apiData: [
+        { name: 'username', remark: '用户名称。对应数据库中的唯一字段：username', type: 'string', defaultValue: '-', required: '是' }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  destroyed() {
+    if (this.client) {
+      this.client.close()
+    }
+  },
+  methods: {
+    onConnectClick() {
+      const that = this
+      // console.error('userInfo', that.user)
+      that.client = new KitWsClient(that.user.username)
+      that.client.connect(function(event) {
+        console.info('=============== KitWsClient:event', event)
+      }, function(msgEvent) {
+        console.info('=============== KitWsClient:msgEvent', msgEvent)
+        that.responseTxt = that.responseTxt + msgEvent.data + ''
+      })
+    },
+    onSendClick() {
+      if (this.client) {
+        this.client.sendData({
+          msgType: 'sc',
+          userIds: ['123456'],
+          content: this.sendVal
+        })
+        this.client.sendData({
+          msgType: 'gc',
+          content: this.sendVal
+        })
+      }
+    },
+    onCloseClick() {
+      if (this.client) {
+        this.client.close()
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>