会话ui

chat.vue

@@ -13,7 +13,14 @@
             <chat-room :close="hide" />
         </div>
         <div class="chat-panel h-100">
-        <el-button @click="terminate">结束</el-button>
+            <div class="buttons">
+                <el-button class="button" @click="terminate" round
+                    >结束会话</el-button
+                >
+                <el-button class="button" @click="terminate" round
+                    >添加成员</el-button
+                >
+            </div>
         </div>
     </div>
     <!-- </el-dialog> -->
@@ -24,6 +31,7 @@ import { Component, Vue } from "vue-property-decorator";
 import ChatList from "./chat-list.vue";
 import ChatRoom from "./chat-room.vue";
 import MessageList from "./message-list.vue";
+import buttonThrottle from "./utils/button-throttle";
 
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 
@@ -38,6 +46,7 @@ export default class Chat extends Vue {
     @chatStore.Action(ChatStore.ACTION_TERINATE_CHAT)
     private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT;
 
+    @buttonThrottle()
     private terminate() {
         this._terminate();
     }
@@ -45,13 +54,14 @@ export default class Chat extends Vue {
 </script>
 <style lang="less" scoped>
 .chat-con {
-  --chat-side-width: 200px;
+    --chat-list-width: 200px;
+    --chat-panel-width: 350px;
     position: fixed;
-  left:0;
-  right:0;
-  bottom:0;
-  top:64px;
-  z-index:99999;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 64px;
+    z-index: 99999;
     background: #fff;
 }
 .chat-list,
@@ -61,14 +71,22 @@ export default class Chat extends Vue {
     vertical-align: top;
 }
 .chat-list {
-  width: var(--chat-side-width);
+    width: var(--chat-list-width);
     border-right: 1px solid #e1e1e1;
 }
 .chat-area {
-  width: calc(100% - 2 * var(--chat-side-width) - 2px);
+    width: calc(100% - var(--chat-list-width) - var(--chat-panel-width) - 2px);
 }
 .chat-panel {
-  width: var(--chat-side-width);
+    position: relative;
+    width: var(--chat-panel-width);
     border-left: 1px solid #e1e1e1;
 }
+.buttons {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 20px;
+    text-align: center;
+}
 </style>