feat: 完成聊天记录、修改密码页面样式改造

main/manager-web/src/components/ChangePasswordDialog.vue

@@ -1,55 +1,42 @@
 <template>
   <form>
-    <el-dialog :visible.sync="dialogVisible"  width="24%" center>
-      <div
-        style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
-        <div
-          style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
-          <img loading="lazy" src="@/assets/login/shield.png" alt=""
-            style="width: 19px;height: 23px; filter: brightness(0) invert(1);" />
-        </div>
-        {{ $t('changePassword.title') }}
-      </div>
-      <div style="height: 1px;background: #e8f0ff;" />
-      <div style="margin: 22px 15px;">
-        <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
-          <div style="color: red;display: inline-block;">*</div>
+    <CustomDialog
+      :title="$t('changePassword.title')"
+      :visible.sync="dialogVisible"
+      width="600px"
+      @cancel="cancel"
+      @confirm="confirm">
+      <div class="password-form">
+        <div class="form-label">
+          <span class="required">*</span>
           {{ $t('changePassword.oldPasswordLabel') }}
         </div>
         <div class="input-46" style="margin-top: 12px;">
           <el-input :placeholder="$t('changePassword.oldPasswordPlaceholder')" v-model="oldPassword" type="password" show-password />
         </div>
-        <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
-          <div style="color: red;display: inline-block;">*</div>
+        <div class="form-label" style="margin-top: 12px;">
+          <span class="required">*</span>
           {{ $t('changePassword.newPasswordLabel') }}
         </div>
         <div class="input-46" style="margin-top: 12px;">
           <el-input :placeholder="$t('changePassword.newPasswordPlaceholder')" v-model="newPassword" type="password" show-password />
         </div>
-        <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
-          <div style="color: red;display: inline-block;">*</div>
+        <div class="form-label" style="margin-top: 12px;">
+          <span class="required">*</span>
           {{ $t('changePassword.confirmPasswordLabel') }}
         </div>
         <div class="input-46" style="margin-top: 12px;">
           <el-input :placeholder="$t('changePassword.confirmPasswordPlaceholder')" v-model="confirmNewPassword" type="password" show-password />
         </div>
       </div>
-      <div style="display: flex;margin: 15px 15px;gap: 7px;">
-        <div class="dialog-btn" @click="confirm">
-          {{ $t('changePassword.confirmButton') }}
-        </div>
-        <div class="dialog-btn" style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;" @click="cancel">
-          {{ $t('changePassword.cancelButton') }}
-        </div>
-      </div>
-    </el-dialog>
+    </CustomDialog>
   </form>
 </template>
 
 <script>
 import userApi from '@/apis/module/user';
 import { mapActions } from 'vuex';
-import { changeLanguage } from '@/i18n';
+import CustomDialog from '@/components/CustomDialog.vue';
 
 export default {
   name: 'ChangePasswordDialog',
@@ -67,6 +54,9 @@ export default {
       confirmNewPassword: ""
     }
   },
+  components: {
+    CustomDialog
+  },
   watch: {
     value(val) {
       this.dialogVisible = val;
@@ -100,7 +90,6 @@ export default {
           });
           this.logout().then(() => {
             this.$router.push('/login');
-            this.$emit('update:visible', false);
           });
         } else {
           this.$message.error(res.data.msg || this.$t('changePassword.changeFailed'));
@@ -108,10 +97,9 @@ export default {
       }, (err) => {
         this.$message.error(err.msg || this.$t('changePassword.changeFailed'));
       });
-      this.$emit('input', false);
+      this.dialogVisible = false;
     },
     cancel() {
-      this.dialogVisible = false;
       this.resetForm();
     },
     resetForm() {
@@ -124,38 +112,18 @@ export default {
 </script>
 
 <style scoped>
+
+.form-label {
+  text-align: left;
+}
+
+.required {
+  color: red;
+  display: inline-block;
+}
+
 .input-46 {
   background: #f6f8fb;
   border-radius: 15px;
 }
-
-.dialog-btn {
-  cursor: pointer;
-  flex: 1;
-  border-radius: 23px;
-  background: #5778ff;
-  height: 40px;
-  font-weight: 500;
-  font-size: 12px;
-  color: #fff;
-  line-height: 40px;
-  text-align: center;
-}
-
-::v-deep .el-dialog {
-  border-radius: 15px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-::v-deep .el-dialog__headerbtn {
-  display: none;
-}
-
-::v-deep .el-dialog__body {
-  padding: 4px 6px;
-}
-
-::v-deep .el-dialog__header {
-  padding: 10px;
-}
 </style>

main/manager-web/src/components/ChatHistoryDialog.vue

@@ -1,8 +1,12 @@
 <template>
-    <el-dialog
-        :title="$t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle') + (currentMacAddress ? '[' + currentMacAddress + ']' : '')"
-        :visible.sync="dialogVisible" width="80%" :before-close="handleClose" custom-class="chat-history-dialog">
-        <template slot="title">
+    <CustomDialog
+        :title="$t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle')"
+        :visible.sync="dialogVisible"
+        width="80%"
+        :footer="false"
+        :close-on-click-modal="false"
+        custom-class="chat-history-dialog">
+        <template v-slot:title>
             <span style="font-size: 18px;">
                 {{ $t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle') }}
                 <template v-if="currentMacAddress">
@@ -77,12 +81,13 @@
                 {{ $t('chatHistory.downloadCurrentSession') }}
             </el-button>
         </div>
-    </el-dialog>
+    </CustomDialog>
 </template>
 
 <script>
 import { debounce } from '@/utils'
 import Api from '@/apis/api';
+import CustomDialog from '@/components/CustomDialog.vue';
 import MacAddressMask from '@/components/MacAddressMask.vue';
 
 export default {
@@ -120,6 +125,7 @@ export default {
         };
     },
     components: {
+        CustomDialog,
         MacAddressMask,
     },
     watch: {
@@ -241,9 +247,6 @@ export default {
             this.isFirstLoad = true;
             this.expandedToolResults = {};
         },
-        handleClose() {
-            this.dialogVisible = false;
-        },
         loadSessions() {
             if (this.loading || (!this.isFirstLoad && !this.hasMore)) {
                 return;
@@ -635,11 +638,6 @@ export default {
     overflow: hidden;
 }
 
-.chat-history-dialog .el-dialog__header {
-    background-color: #e6f7ff;
-    padding: 15px 20px;
-}
-
 .chat-history-dialog .el-dialog__body {
     padding: 0;
     overflow: hidden;

main/manager-web/src/components/CustomDialog.vue

@@ -13,10 +13,12 @@
     @open="handleOpen"
   >
     <template slot="title">
-      <div class="dialog-title">
-        <img src="@/assets/knowledge-base/level.png" class="title-icon" />
-        <span>{{ title }}</span>
-      </div>
+      <slot name="title">
+        <div class="dialog-title">
+          <img src="@/assets/knowledge-base/level.png" class="title-icon" />
+          <span>{{ title }}</span>
+        </div>
+      </slot>
     </template>
     <slot></slot>
     <template slot="footer">