调整配置弹窗 UI

web/src/components/ConfigDialog.vue

@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <el-dialog
-        v-show="show"
-        title="聊天配置"
-        width="30%"
-        :before-close="beforeClose"
-    >
-      <span>正在努力开发中...</span>
-      <template #footer>
+  <el-dialog
+      v-model="$props.show"
+      title="聊天配置"
+      width="30%"
+      :before-close="beforeClose"
+  >
+    <span>正在努力开发中...</span>
+    <template #footer>
       <span class="dialog-footer">
-        <el-button @click="show = false">取消</el-button>
-        <el-button type="primary" @click="show = false">
+        <el-button @click="this.$emit('update:show', false)">取消</el-button>
+        <el-button type="primary" @click="save">
           保存
         </el-button>
       </span>
-      </template>
-    </el-dialog>
-  </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script>
@@ -24,14 +22,20 @@ import {defineComponent} from "vue"
 
 export default defineComponent({
   name: 'ConfigDialog',
-  data() {
-    return {
-      show: true
+  props: {
+    show: {
+      type: Boolean,
+      default: true
     }
   },
+  data() {
+    return {}
+  },
   methods: {
     beforeClose: function () {
-
+    },
+    save: function () {
+      this.$emit('update:show', false);
     }
   }
 })

web/src/views/Chat.vue

@@ -17,20 +17,22 @@
 
       <div class="input-box">
         <div class="input-container">
-          <el-input
-              v-model="inputValue"
-              :autosize="{ minRows: 1, maxRows: 10 }"
-              v-on:keydown="inputKeyDown"
-              v-on:focus="focus"
-              type="textarea"
-              placeholder="Input any thing here..."
-          />
+          <el-form ref="form">
+            <el-input
+                v-model="inputValue"
+                :autosize="{ minRows: 1, maxRows: 10 }"
+                v-on:keydown="inputKeyDown"
+                v-on:focus="focus"
+                type="textarea"
+                placeholder="Input any thing here..."
+            />
+          </el-form>
         </div>
 
         <div class="btn-container">
           <el-row>
             <el-button type="success" class="send" :disabled="sending" v-on:click="sendMessage">发送</el-button>
-            <el-button type="danger" class="config" circle @click="showDialog = true">
+            <el-button type="info" class="config" circle @click="showDialog = true">
               <el-icon>
                 <Tools/>
               </el-icon>
@@ -41,7 +43,7 @@
       </div><!-- end input box -->
     </div><!-- end container -->
 
-    <config-dialog v-model="showDialog"></config-dialog>
+    <config-dialog v-model:show="showDialog"></config-dialog>
   </div>
 </template>
 
@@ -114,12 +116,9 @@ export default defineComponent({
       }
 
     });
-    socket.addEventListener('close', () => {
+    socket.addEventListener('error', () => {
       ElMessage.error('会话发生异常，请刷新页面后重试');
     });
-    socket.addEventListener('error', event => {
-      ElMessage.error('WebSocket 连接发生错误: ' + event.message);
-    });
 
     this.socket = socket;