会话ui

chat.vue

 <template>
-  <!-- <el-dialog
+    <!-- <el-dialog
     class="chat-dialog-con"
     :close-on-click-modal="false"
     :visible="visible"
     @close="hide"
   > -->
     <div class="chat-con">
-      <div class="h-100 chat-list">
-        <chat-list />
-      </div>
-      <div v-if="chatId != null" class="h-100 chat-area">
-        <chat-room :close="hide" />
-      </div>
-      <div class="chat-panel h-100">
-        <el-button @click="terminate">结束</el-button>
-      </div>
+        <div class="h-100 chat-list">
+            <chat-list />
+        </div>
+        <div v-if="chatId != null" class="h-100 chat-area">
+            <chat-room :close="hide" />
+        </div>
+        <div class="chat-panel h-100">
+            <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> -->
+    <!-- </el-dialog> -->
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
@@ -24,51 +31,62 @@ 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";
 
 @Component({ components: { MessageList, ChatRoom, ChatList } })
 export default class Chat extends Vue {
-  @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
-  private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
+    @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
+    private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
-  @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
-  private readonly hide!: ChatStore.MUTATION_HIDE_CHAT;
+    @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
+    private readonly hide!: ChatStore.MUTATION_HIDE_CHAT;
 
-  @chatStore.Action(ChatStore.ACTION_TERINATE_CHAT)
-  private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT;
+    @chatStore.Action(ChatStore.ACTION_TERINATE_CHAT)
+    private readonly _terminate!: ChatStore.ACTION_TERINATE_CHAT;
 
-  private terminate() {
-    this._terminate();
-  }
+    @buttonThrottle()
+    private terminate() {
+        this._terminate();
+    }
 }
 </script>
 <style lang="less" scoped>
 .chat-con {
-  --chat-side-width: 200px;
-  position: fixed;
-  left:0;
-  right:0;
-  bottom:0;
-  top:64px;
-  z-index:99999;
-  background: #fff;
+    --chat-list-width: 200px;
+    --chat-panel-width: 350px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 64px;
+    z-index: 99999;
+    background: #fff;
 }
 .chat-list,
 .chat-area,
 .chat-panel {
-  display: inline-block;
-  vertical-align: top;
+    display: inline-block;
+    vertical-align: top;
 }
 .chat-list {
-  width: var(--chat-side-width);
-  border-right: 1px solid #e1e1e1;
+    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);
-  border-left: 1px solid #e1e1e1;
+    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>