Merge pull request #3242 from xinnan-tech/update-theme

Update theme

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

@@ -291,6 +291,21 @@ export default {
 ::v-deep .el-dialog {
   margin-top: 6vh !important;
 }
+::v-deep .el-dialog__body {
+  max-height: 60vh;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+      width: 6px;
+    }
+  &::-webkit-scrollbar-thumb {
+    background: #a1c9fd;
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f0f3fe;
+    border-radius: 3px;
+  }
+}
 .add-model-dialog {
   .section-header {
     display: flex;

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

@@ -1,55 +1,42 @@
 <template>
   <form>
-    <el-dialog :visible.sync="dialogVisible"  width="24%" center>
+    <CustomDialog
-      <div
+      :title="$t('changePassword.title')"
-        style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
+      :visible.sync="dialogVisible"
-        <div
+      width="600px"
-          style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
+      @cancel="cancel"
-          <img loading="lazy" src="@/assets/login/shield.png" alt=""
+      @confirm="confirm">
-            style="width: 19px;height: 23px; filter: brightness(0) invert(1);" />
+      <div class="password-form">
-        </div>
+        <div class="form-label">
-        {{ $t('changePassword.title') }}
+          <span class="required">*</span>
-      </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>
           {{ $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 class="form-label" style="margin-top: 12px;">
-          <div style="color: red;display: inline-block;">*</div>
+          <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 class="form-label" style="margin-top: 12px;">
-          <div style="color: red;display: inline-block;">*</div>
+          <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;">
+    </CustomDialog>
-        <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>
   </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
+    <CustomDialog
-        :title="$t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle') + (currentMacAddress ? '[' + currentMacAddress + ']' : '')"
+        :title="$t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle')"
-        :visible.sync="dialogVisible" width="80%" :before-close="handleClose" custom-class="chat-history-dialog">
+        :visible.sync="dialogVisible"
-        <template slot="title">
+        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">
+      <slot name="title">
-        <img src="@/assets/knowledge-base/level.png" class="title-icon" />
+        <div class="dialog-title">
-        <span>{{ title }}</span>
+          <img src="@/assets/knowledge-base/level.png" class="title-icon" />
-      </div>
+          <span>{{ title }}</span>
+        </div>
+      </slot>
     </template>
     <slot></slot>
     <template slot="footer">

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

@@ -79,9 +79,10 @@
     </div>
 
     <!-- 分页 -->
-    <div class="table-footer" v-if="showPagination">
+    <div class="table-footer">
       <slot name="footer-btns"></slot>
       <CustomPagination
+        v-if="showPagination"
         :total="total"
         :current-page="currentPage"
         :page-size="pageSize"

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

@@ -53,7 +53,7 @@
       </el-form-item>
 
       <el-form-item :label="$t('modelConfigDialog.remark')" prop="remark" class="prop-remark">
-        <el-input v-model="form.remark" type="textarea" :rows="4" :placeholder="$t('modelConfigDialog.enterRemark')"></el-input>
+        <el-input v-model="form.remark" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }" :placeholder="$t('modelConfigDialog.enterRemark')"></el-input>
       </el-form-item>
     </el-form>
 
@@ -62,7 +62,7 @@
       <div class="section-divider"></div>
     </teleport>
 
-    <el-form :model="form.configJson" ref="callInfoForm" label-width="auto">
+    <el-form :model="form.configJson" ref="callInfoForm" label-width="auto" label-position="left">
       <template>
         <div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex" class="form-row">
           <el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop"
@@ -467,25 +467,22 @@ export default {
 ::v-deep .el-dialog {
   margin-top: 6vh !important;
 }
-.model-edit-dialog {
+::v-deep .el-dialog__body {
-  .dialog-scroll-body {
+  max-height: 60vh;
-    max-height: 72vh;
+  overflow-y: auto;
-    overflow-y: auto;
+  &::-webkit-scrollbar {
-    overflow-x: hidden;
-
-    &::-webkit-scrollbar {
       width: 6px;
     }
-    &::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
-      background: #a1c9fd;
+    background: #a1c9fd;
-      border-radius: 3px;
+    border-radius: 3px;
-    }
-    &::-webkit-scrollbar-track {
-      background: #f0f3fe;
-      border-radius: 3px;
-    }
   }
-
+  &::-webkit-scrollbar-track {
+    background: #f0f3fe;
+    border-radius: 3px;
+  }
+}
+.model-edit-dialog {
   .header-row {
     display: flex;
     justify-content: space-between;

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

@@ -1,55 +1,43 @@
 <template>
-  <el-dialog :title="title" :visible.sync="visible" width="520px" class="param-dialog-wrapper" :append-to-body="true"
+  <CustomDialog
-    :close-on-click-modal="false" :key="dialogKey" custom-class="custom-param-dialog" :show-close="false">
+    :title="title"
-    <div class="dialog-container">
+    :visible.sync="innerVisible"
-      <div class="dialog-header">
+    :confirm-loading="saving"
-        <h2 class="dialog-title">{{ title }}</h2>
+    width="600px"
-        <button class="custom-close-btn" @click="cancel">
+    @confirm="submit"
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    @cancel="cancel"
-            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+  >
-          </svg>
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left" class="param-form">
-        </button>
+      <el-form-item :label="$t('voicePrintDialog.voicePrintVector')" prop="audioId" class="form-item">
-      </div>
+        <el-select v-model="form.audioId" :placeholder="$t('voicePrintDialog.selectVoiceMessage')" class="custom-select">
+          <el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content" :value="item.audioId">
+            <span style="float: left">{{ item.content }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">
+              <i :class="getAudioIconClass(item.audioId)" @click.stop="playAudio(item.audioId)"
+                class="audio-icon"></i>
+            </span>
+          </el-option>
+        </el-select>
+      </el-form-item>
 
-      <el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left" class="param-form">
+      <el-form-item :label="$t('voicePrintDialog.name')" prop="sourceName" class="form-item">
-        <el-form-item :label="$t('voicePrintDialog.voicePrintVector')" prop="audioId" class="form-item">
+        <el-input v-model="form.sourceName" :placeholder="$t('voicePrintDialog.enterName')" class="custom-input"></el-input>
-          <el-select v-model="form.audioId" :placeholder="$t('voicePrintDialog.selectVoiceMessage')" class="custom-select">
+      </el-form-item>
-            <el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content" :value="item.audioId">
-              <span style="float: left">{{ item.content }}</span>
-              <span style="float: right; color: #8492a6; font-size: 13px">
-                <i :class="getAudioIconClass(item.audioId)" @click.stop="playAudio(item.audioId)"
-                  class="audio-icon"></i>
-              </span>
-            </el-option>
-          </el-select>
-        </el-form-item>
 
-        <el-form-item :label="$t('voicePrintDialog.name')" prop="sourceName" class="form-item">
+      <el-form-item :label="$t('voicePrintDialog.description')" prop="introduce" class="form-item remark-item">
-          <el-input v-model="form.sourceName" :placeholder="$t('voicePrintDialog.enterName')" class="custom-input"></el-input>
+        <el-input type="textarea" v-model="form.introduce" :placeholder="$t('voicePrintDialog.enterDescription')" :rows="3" class="custom-textarea"
-        </el-form-item>
+          maxlength="100" show-word-limit></el-input>
-
+      </el-form-item>
-        <el-form-item :label="$t('voicePrintDialog.description')" prop="introduce" class="form-item remark-item">
+    </el-form>
-          <el-input type="textarea" v-model="form.introduce" :placeholder="$t('voicePrintDialog.enterDescription')" :rows="3" class="custom-textarea"
+  </CustomDialog>
-            maxlength="100" show-word-limit></el-input>
-        </el-form-item>
-      </el-form>
-
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submit" class="save-btn" :loading="saving" :disabled="saving">
-          {{ $t('voicePrintDialog.save') }}
-        </el-button>
-        <el-button @click="cancel" class="cancel-btn">
-          {{ $t('voicePrintDialog.cancel') }}
-        </el-button>
-      </div>
-    </div>
-  </el-dialog>
 </template>
 
 <script>
 import api from '@/apis/api';
+import CustomDialog from './CustomDialog.vue';
 
 export default {
+  components: { CustomDialog },
   props: {
     title: {
       type: String,
@@ -74,7 +62,6 @@ export default {
   },
   data() {
     return {
-      dialogKey: Date.now(),
       saving: false,
       playingAudioId: null,
       audioElement: null,
@@ -94,6 +81,16 @@ export default {
       }
     };
   },
+  computed: {
+    innerVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    }
+  },
   methods: {
     getAudioIconClass(audioId) {
       if (this.playingAudioId === audioId) {
@@ -137,11 +134,11 @@ export default {
     submit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.saving = true; // 开始加载
+          this.saving = true;
           this.$emit('submit', {
             form: this.form,
             done: () => {
-              this.saving = false; // 加载完成
+              this.saving = false;
             }
           });
 
@@ -152,14 +149,14 @@ export default {
       });
     },
     cancel() {
-      this.saving = false; // 取消时重置状态
+      this.saving = false;
-      this.dialogKey = Date.now();
       this.$emit('cancel');
     }
   },
   watch: {
     visible(newVal) {
       if (newVal) {
+        this.saving = false;
         api.agent.getRecentlyFiftyByAgentId(this.agentId, ((data) => {
           this.valueTypeOptions = data.data.data.map(item => ({
             ...item
@@ -184,24 +181,6 @@ export default {
 };
 </script>
 
-<style>
-.custom-param-dialog {
-  border-radius: 16px !important;
-  overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
-  border: none !important;
-
-  .el-dialog__header {
-    display: none;
-  }
-
-  .el-dialog__body {
-    padding: 0 !important;
-    border-radius: 16px;
-  }
-}
-</style>
-
 <style scoped lang="scss">
 .audio-icon {
   font-size: 20px;
@@ -210,211 +189,98 @@ export default {
   color: #1890ff;
 }
 
-.param-dialog-wrapper {
+.param-form {
-  .dialog-container {
+  .form-item {
-    padding: 24px 32px;
+    margin-bottom: 20px;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  }
 
-  .dialog-header {
+    :deep(.el-form-item__label) {
-    position: relative;
+      color: #475569;
-    margin-bottom: 24px;
-    text-align: center;
-  }
-
-  .dialog-title {
-    font-size: 20px;
-    color: #1e293b;
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-  }
-
-  .custom-close-btn {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: none;
-    background: #f1f5f9;
-    color: #64748b;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    outline: none;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-    &:hover {
-      color: #ffffff;
-      background: #ef4444;
-      transform: rotate(90deg);
-      box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
-    }
-
-    svg {
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-  }
-
-  .param-form {
-    .form-item {
-      margin-bottom: 20px;
-
-      :deep(.el-form-item__label) {
-        color: #475569;
-        font-weight: 500;
-        padding-right: 12px;
-        text-align: right;
-        font-size: 14px;
-        letter-spacing: 0.2px;
-      }
-    }
-
-    .custom-input {
-      :deep(.el-input__inner) {
-        background-color: #ffffff;
-        border-radius: 8px;
-        border: 1px solid #e2e8f0;
-        height: 42px;
-        padding: 0 14px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        font-size: 14px;
-        color: #334155;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-        &:focus {
-          border-color: #3b82f6;
-          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-          background-color: #ffffff;
-        }
-
-        &::placeholder {
-          color: #94a3b8;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .custom-select {
-      width: 100%;
-
-      :deep(.el-input__inner) {
-        background-color: #ffffff;
-        border-radius: 8px;
-        border: 1px solid #e2e8f0;
-        height: 42px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        font-size: 14px;
-        color: #334155;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-        &:focus {
-          border-color: #3b82f6;
-          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-          background-color: #ffffff;
-        }
-
-        &::placeholder {
-          color: #94a3b8;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .custom-textarea {
-      :deep(.el-textarea__inner) {
-        background-color: #ffffff;
-        border-radius: 8px;
-        border: 1px solid #e2e8f0;
-        padding: 12px 14px;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        font-size: 14px;
-        color: #334155;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-        line-height: 1.5;
-
-        &:focus {
-          border-color: #3b82f6;
-          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-          background-color: #ffffff;
-        }
-
-        &::placeholder {
-          color: #94a3b8;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .remark-item :deep(.el-form-item__label) {
-      margin-top: -4px;
-    }
-  }
-
-  .dialog-footer {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0 0;
-    margin-top: 16px;
-
-    .save-btn {
-      width: 120px;
-      height: 42px;
-      font-size: 14px;
       font-weight: 500;
-      border-radius: 8px;
+      padding-right: 12px;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      text-align: right;
-      background: #3b82f6;
-      color: white;
-      border: none;
-      letter-spacing: 0.5px;
-      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
-
-      &:hover {
-        background: #2563eb;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
-      }
-
-      &:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 3px rgba(59, 130, 246, 0.2);
-      }
-    }
-
-    .cancel-btn {
-      width: 120px;
-      height: 42px;
       font-size: 14px;
-      font-weight: 500;
+      letter-spacing: 0.2px;
+    }
+  }
+
+  .custom-input {
+    :deep(.el-input__inner) {
+      background-color: #ffffff;
       border-radius: 8px;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      background: #ffffff;
-      color: #64748b;
       border: 1px solid #e2e8f0;
-      margin-left: 16px;
+      height: 42px;
-      letter-spacing: 0.5px;
+      padding: 0 14px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 14px;
+      color: #334155;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
-      &:hover {
+      &:focus {
-        background: #f8fafc;
+        border-color: #3b82f6;
-        color: #475569;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-        border-color: #cbd5e1;
+        background-color: #ffffff;
-        transform: translateY(-1px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
 
-      &:active {
+      &::placeholder {
-        transform: translateY(0);
+        color: #94a3b8;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        font-weight: 400;
       }
     }
   }
+
+  .custom-select {
+    width: 100%;
+
+    :deep(.el-input__inner) {
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #e2e8f0;
+      height: 42px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 14px;
+      color: #334155;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+      &:focus {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        background-color: #ffffff;
+      }
+
+      &::placeholder {
+        color: #94a3b8;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .custom-textarea {
+    :deep(.el-textarea__inner) {
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #e2e8f0;
+      padding: 12px 14px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 14px;
+      color: #334155;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      line-height: 1.5;
+
+      &:focus {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        background-color: #ffffff;
+      }
+
+      &::placeholder {
+        color: #94a3b8;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .remark-item :deep(.el-form-item__label) {
+    margin-top: -4px;
+  }
 }
 </style>

main/manager-web/src/views/VoicePrint.vue

@@ -1,35 +1,39 @@
 <template>
     <div class="welcome">
         <HeaderBar />
-
-        <div class="operation-bar">
-            <h2 class="page-title">{{ $t('voicePrint.pageTitle') }}</h2>
-        </div>
-
         <div class="main-wrapper">
             <div class="content-panel">
                 <div class="content-area">
                     <el-card class="voice-print-card" shadow="never">
-                        <el-table ref="paramsTable" :data="voicePrintList" class="transparent-table" v-loading="loading"
+                        <div class="operation-header">
-                           :element-loading-text="$t('voicePrint.loading')" element-loading-spinner="el-icon-loading"
+                            <h2 class="page-title">{{ $t('voicePrint.pageTitle') }}</h2>
-                          element-loading-background="rgba(255, 255, 255, 0.7)">
-                            <el-table-column :label="$t('voicePrint.name')" prop="sourceName" align="center"></el-table-column>
-                        <el-table-column :label="$t('voicePrint.description')" prop="introduce" align="center"></el-table-column>
-                        <el-table-column :label="$t('voicePrint.createTime')" prop="createDate" align="center"></el-table-column>
-                        <el-table-column :label="$t('voicePrint.action')" align="center">
-                                <template slot-scope="scope">
-                                    <el-button size="mini" type="text" @click="editVoicePrint(scope.row)">{{ $t('voicePrint.edit') }}</el-button>
-                                    <el-button size="mini" type="text"
-                                        @click="deleteVoicePrint(scope.row.id)">{{ $t('voicePrint.delete') }}</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-
-                        <div class="table_bottom">
-                            <div class="ctrl_btn">
-                                <el-button size="mini" type="success" @click="showAddDialog">{{ $t('voicePrint.add') }}</el-button>
-                            </div>
                         </div>
+                        <CustomTable
+                            ref="paramsTable"
+                            :data="voicePrintList"
+                            :columns="tableColumns"
+                            :loading="loading"
+                            :loading-text="$t('voicePrint.loading')"
+                            :show-operations="true"
+                            :operations-label="$t('voicePrint.action')"
+                            :total="total"
+                            :show-pagination="false"
+                            :current-page="currentPage"
+                            :page-size="pageSize"
+                            :page-size-options="pageSizeOptions"
+                            @size-change="handlePageSizeChange"
+                            @page-change="goToPage"
+                        >
+                            <template slot="operations" slot-scope="scope">
+                                <el-button size="mini" type="text" @click="editVoicePrint(scope.row)">{{ $t('voicePrint.edit') }}</el-button>
+                                <el-button size="mini" type="text" @click="deleteVoicePrint(scope.row.id)">{{ $t('voicePrint.delete') }}</el-button>
+                            </template>
+                            <template slot="footer-btns">
+                                <div class="ctrl_btn">
+                                    <CustomButton icon="el-icon-plus" type="add" size="small" @click="showAddDialog">{{ $t('voicePrint.add') }}</CustomButton>
+                                </div>
+                            </template>
+                        </CustomTable>
                     </el-card>
                 </div>
             </div>
@@ -49,42 +53,60 @@ import Api from "@/apis/api";
 import HeaderBar from "@/components/HeaderBar.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
 import VoicePrintDialog from "@/components/VoicePrintDialog.vue";
+import CustomButton from "@/components/CustomButton.vue";
+import CustomTable from "@/components/CustomTable.vue";
+
 export default {
-    components: { HeaderBar, VoicePrintDialog, VersionFooter },
+    components: { HeaderBar, VoicePrintDialog, VersionFooter, CustomButton, CustomTable },
     data() {
         return {
             voicePrintList: [],
+            allVoicePrints: [],
             loading: false,
             dialogVisible: false,
             dialogTitle: this.$t('voicePrint.addSpeaker'),
-            isAllSelected: false,
+            currentPage: 1,
+            pageSize: 10,
+            pageSizeOptions: [10, 20, 50, 100],
+            total: 0,
             paramForm: {
                 id: null,
                 audioId: '',
                 sourceName: '',
                 introduce: ''
             },
-            agentId: "1"
+            agentId: "1",
+            tableColumns: []
         };
     },
+    created() {
+        this.initTableColumns();
+    },
     mounted() {
         const agentId = this.$route.query.agentId;
         if (agentId) {
-            this.agentId = agentId
+            this.agentId = agentId;
             this.fetchVoicePrints();
         }
     },
     methods: {
+        initTableColumns() {
+            this.tableColumns = [
+                { prop: 'sourceName', label: this.$t('voicePrint.name'), align: 'center' },
+                { prop: 'introduce', label: this.$t('voicePrint.description'), align: 'center' },
+                { prop: 'createDate', label: this.$t('voicePrint.createTime'), align: 'center' }
+            ];
+        },
         fetchVoicePrints() {
             this.loading = true;
             Api.agent.getAgentVoicePrintList(this.agentId,
                 ({ data }) => {
                     this.loading = false;
                     if (data.code === 0) {
-                        this.voicePrintList = data.data.map(item => ({
+                        this.allVoicePrints = data.data;
-                            ...item,
+                        this.total = data.data.length;
-
+                        this.currentPage = 1;
-                        }));
+                        this.updatePagedData();
                     } else {
                         this.$message.error({
                             message: data.msg || this.$t('voicePrint.fetchFailed'),
@@ -94,6 +116,21 @@ export default {
                 }
             );
         },
+        updatePagedData() {
+            const start = (this.currentPage - 1) * this.pageSize;
+            this.voicePrintList = this.allVoicePrints.slice(start, start + this.pageSize);
+        },
+        handlePageSizeChange(val) {
+            this.pageSize = val;
+            this.currentPage = 1;
+            this.updatePagedData();
+        },
+        goToPage(page) {
+            if (page !== this.currentPage) {
+                this.currentPage = page;
+                this.updatePagedData();
+            }
+        },
         showAddDialog() {
             this.dialogTitle = this.$t('voicePrint.addSpeaker');
             this.paramForm = {
@@ -109,10 +146,8 @@ export default {
             this.paramForm = { ...row };
             this.dialogVisible = true;
         },
-
         handleSubmit({ form, done }) {
             if (form.id) {
-                // 编辑
                 Api.agent.updateAgentVoicePrint(form, ({ data }) => {
                     if (data.code === 0) {
                         this.$message.success({
@@ -125,7 +160,6 @@ export default {
                     done && done();
                 });
             } else {
-                // 新增
                 Api.agent.addAgentVoicePrint({
                     agentId: this.agentId,
                     audioId: form.audioId,
@@ -144,7 +178,6 @@ export default {
                 });
             }
         },
-        // 删除按钮
         deleteVoicePrint(id) {
             this.$confirm(this.$t('voicePrint.confirmDelete'), this.$t('voicePrint.warning'), {
                 confirmButtonText: this.$t('voicePrint.confirm'),
@@ -181,8 +214,8 @@ export default {
                     });
                 }
             });
-        },
+        }
-    },
+    }
 };
 </script>
 
@@ -202,46 +235,30 @@ export default {
 }
 
 .main-wrapper {
-    height: calc(100vh - 63px - 35px - 60px);
+    height: calc(100vh - 63px - 35px);
-    margin: 0 22px;
+    padding: 20px 22px 0;
-    border-radius: 15px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
-    background: rgba(237, 242, 255, 0.5);
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 }
 
-.operation-bar {
+.operation-header {
+    height: 56px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 16px 24px;
+    justify-content: space-between;
+    padding: 0 0 16px 0;
+    box-sizing: border-box;
 }
 
 .page-title {
+    font-weight: 500;
     font-size: 24px;
     margin: 0;
 }
 
-.right-operations {
-    display: flex;
-    gap: 10px;
-    margin-left: auto;
-}
-
-.search-input {
-    width: 240px;
-}
-
-.btn-search {
-    background: linear-gradient(135deg, #6b8cff, #a966ff);
-    border: none;
-    color: white;
-}
-
 .content-panel {
-    flex: 1;
     display: flex;
     overflow: hidden;
     height: 100%;
@@ -270,7 +287,7 @@ export default {
     overflow: hidden;
 
     ::v-deep .el-card__body {
-        padding: 15px;
+        padding: 14px 20px;
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -278,187 +295,8 @@ export default {
     }
 }
 
-.table_bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    // padding-bottom: 10px;
-}
-
 .ctrl_btn {
     display: flex;
-    gap: 8px;
-    padding-left: 26px;
-
-    .el-button {
-        min-width: 72px;
-        height: 32px;
-        padding: 7px 12px 7px 10px;
-        font-size: 12px;
-        border-radius: 4px;
-        line-height: 1;
-        font-weight: 500;
-        border: none;
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-
-        &:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-        }
-    }
-
-    .el-button--primary {
-        background: #5f70f3;
-        color: white;
-    }
-
-    .el-button--danger {
-        background: #fd5b63;
-        color: white;
-    }
-}
-
-.custom-pagination {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    .el-select {
-        margin-right: 8px;
-    }
-
-    .pagination-btn:first-child,
-    .pagination-btn:nth-child(2),
-    .pagination-btn:nth-last-child(2),
-    .pagination-btn:nth-child(3) {
-        min-width: 60px;
-        height: 32px;
-        padding: 0 12px;
-        border-radius: 4px;
-        border: 1px solid #e4e7ed;
-        background: #dee7ff;
-        color: #606266;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:hover {
-            background: #d7dce6;
-        }
-
-        &:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-    }
-
-    .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)) {
-        min-width: 28px;
-        height: 32px;
-        padding: 0;
-        border-radius: 4px;
-        border: 1px solid transparent;
-        background: transparent;
-        color: #606266;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:hover {
-            background: rgba(245, 247, 250, 0.3);
-        }
-    }
-
-    .pagination-btn.active {
-        background: #5f70f3 !important;
-        color: #ffffff !important;
-        border-color: #5f70f3 !important;
-
-        &:hover {
-            background: #6d7cf5 !important;
-        }
-    }
-
-    .total-text {
-        color: #909399;
-        font-size: 14px;
-        margin-left: 10px;
-    }
-}
-
-:deep(.transparent-table) {
-    background: white;
-    flex: 1;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .el-table__body-wrapper {
-        flex: 1;
-        overflow-y: auto;
-        max-height: none !important;
-    }
-
-    .el-table__header-wrapper {
-        flex-shrink: 0;
-    }
-
-    .el-table__header th {
-        background: white !important;
-        color: black;
-    }
-
-    &::before {
-        display: none;
-    }
-
-    .el-table__body tr {
-        background-color: white;
-
-        td {
-            border-top: 1px solid rgba(0, 0, 0, 0.04);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-        }
-    }
-}
-
-
-:deep(.el-checkbox__inner) {
-    background-color: #ffffff !important;
-    border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__inner:hover) {
-    border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-    background-color: #5f70f3 !important;
-    border-color: #5f70f3 !important;
-}
-
-@media (min-width: 1144px) {
-    .table_bottom {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 40px;
-    }
-
-    :deep(.transparent-table) {
-        .el-table__body tr {
-            td {
-                padding-top: 16px;
-                padding-bottom: 16px;
-            }
-
-            &+tr {
-                margin-top: 10px;
-            }
-        }
-    }
 }
 
 :deep(.el-table .el-button--text) {
@@ -468,94 +306,4 @@ export default {
 :deep(.el-table .el-button--text:hover) {
     color: #5a64b5;
 }
-
-.el-button--success {
-    background: #5bc98c;
-    color: white;
-}
-
-:deep(.el-table .cell) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.page-size-select {
-    width: 100px;
-    margin-right: 10px;
-
-    :deep(.el-input__inner) {
-        height: 32px;
-        line-height: 32px;
-        border-radius: 4px;
-        border: 1px solid #e4e7ed;
-        background: #dee7ff;
-        color: #606266;
-        font-size: 14px;
-    }
-
-    :deep(.el-input__suffix) {
-        right: 6px;
-        width: 15px;
-        height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 6px;
-        border-radius: 4px;
-    }
-
-    :deep(.el-input__suffix-inner) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-    }
-
-    :deep(.el-icon-arrow-up:before) {
-        content: "";
-        display: inline-block;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
-        border-top: 9px solid #606266;
-        position: relative;
-        transform: rotate(0deg);
-        transition: transform 0.3s;
-    }
-}
-
-:deep(.el-table) {
-    .el-table__body-wrapper {
-        transition: height 0.3s ease;
-    }
-}
-
-.el-table {
-    // --table-max-height: calc(100vh - 40vh);
-    max-height: var(--table-max-height);
-
-    .el-table__body-wrapper {
-        max-height: calc(var(--table-max-height) - 40px);
-    }
-}
-
-:deep(.el-loading-mask) {
-    background-color: rgba(255, 255, 255, 0.6) !important;
-    backdrop-filter: blur(2px);
-}
-
-:deep(.el-loading-spinner .circular) {
-    width: 28px;
-    height: 28px;
-}
-
-:deep(.el-loading-spinner .path) {
-    stroke: #6b8cff;
-}
-
-:deep(.el-loading-text) {
-    color: #6b8cff !important;
-    font-size: 14px;
-    margin-top: 8px;
-}
 </style>