调整配置弹窗 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);
     }
   }
 })