From 3c5ca9f14341f289f27d994747b62793c5477be8 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Mon, 22 Jun 2026 17:31:09 +0800
Subject: [PATCH 1/5] =?UTF-8?q?update:=20=E6=A8=A1=E5=9E=8B=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomDialog.vue           |   1 -
 .../src/components/ModelEditDialog.vue        | 434 +++++++-----------
 2 files changed, 163 insertions(+), 272 deletions(-)

diff --git a/main/manager-web/src/components/CustomDialog.vue b/main/manager-web/src/components/CustomDialog.vue
index 3e4263cf..66da8fe1 100644
--- a/main/manager-web/src/components/CustomDialog.vue
+++ b/main/manager-web/src/components/CustomDialog.vue
@@ -127,7 +127,6 @@ export default {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    margin-top: 15vh !important;
   }
 
   ::v-deep .el-dialog__header {
diff --git a/main/manager-web/src/components/ModelEditDialog.vue b/main/manager-web/src/components/ModelEditDialog.vue
index 7eb4e1a4..75a329d3 100644
--- a/main/manager-web/src/components/ModelEditDialog.vue
+++ b/main/manager-web/src/components/ModelEditDialog.vue
@@ -1,135 +1,107 @@
 <template>
-  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="57%" center custom-class="custom-dialog"
-    :show-close="false" class="center-dialog">
-    <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px">
-      <div style="
-          font-size: 30px;
-          color: #3d4566;
-          margin-top: -10px;
-          margin-bottom: 10px;
-          text-align: center;
-        ">
-        {{
-          modelData.duplicateMode
-            ? $t("modelConfigDialog.duplicateModel")
-            : $t("modelConfigDialog.editModel")
-        }}
-      </div>
-
-      <button class="custom-close-btn" @click="dialogVisible = false">×</button>
-
-      <div style="
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 10px;
-        ">
-        <div style="font-size: 20px; font-weight: bold; color: #3d4566">
-          {{ $t("modelConfigDialog.modelInfo") }}
+  <CustomDialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="57%"
+    class="model-edit-dialog"
+    :confirmLoading="saving"
+    @confirm="handleSave"
+    @close="handleClose"
+    @open="handleOpen"
+  >
+    <div class="dialog-scroll-body">
+    <div class="header-row">
+      <div class="section-title">{{ $t("modelConfigDialog.modelInfo") }}</div>
+      <div class="switch-group">
+        <div class="switch-item">
+          <span class="switch-label">{{ $t("modelConfigDialog.enable") }}</span>
+          <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
         </div>
-        <div style="display: flex; align-items: center; gap: 20px">
-          <div style="display: flex; align-items: center">
-            <span style="margin-right: 8px">{{ $t("modelConfigDialog.enable") }}</span>
-            <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
-          </div>
-          <div style="display: none; align-items: center">
-            <span style="margin-right: 8px">{{
-              $t("modelConfigDialog.setDefault")
-              }}</span>
-            <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
-          </div>
+        <div class="switch-item hidden">
+          <span class="switch-label">{{ $t("modelConfigDialog.setDefault") }}</span>
+          <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
         </div>
       </div>
+    </div>
 
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px"></div>
+    <div class="section-divider"></div>
 
-      <el-form :model="form" ref="form" label-width="auto" label-position="left" class="custom-form">
-        <div style="display: flex; gap: 20px; margin-bottom: 0">
-          <el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1">
-            <el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"
-              class="custom-input-bg"></el-input>
-          </el-form-item>
-          <el-form-item :label="$t('modelConfigDialog.modelCode')" prop="code" style="flex: 1">
-            <el-input v-model="form.modelCode" :placeholder="$t('modelConfigDialog.enterModelCode')"
-              class="custom-input-bg"></el-input>
-          </el-form-item>
-        </div>
-
-        <div style="display: flex; gap: 20px; margin-bottom: 0">
-          <el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1">
-            <el-select v-model="form.configJson.type" :placeholder="$t('modelConfigDialog.selectSupplier')"
-              class="custom-select custom-input-bg" style="width: 100%" @focus="loadProviders" filterable>
-              <el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('modelConfigDialog.sortOrder')" prop="sort" style="flex: 1">
-            <el-input v-model.number="form.sort" type="number" :placeholder="$t('modelConfigDialog.enterSortOrder')"
-              class="custom-input-bg"></el-input>
-          </el-form-item>
-        </div>
-
-        <el-form-item :label="$t('modelConfigDialog.docLink')" prop="docUrl" style="margin-bottom: 27px">
-          <el-input v-model="form.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"
-            class="custom-input-bg"></el-input>
+    <el-form :model="form" ref="form" label-width="auto" label-position="left">
+      <div class="form-row">
+        <el-form-item :label="$t('modelConfigDialog.modelName')" prop="name" style="flex: 1">
+          <el-input v-model="form.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"></el-input>
         </el-form-item>
-
-        <el-form-item :label="$t('modelConfigDialog.remark')" prop="remark" class="prop-remark">
-          <el-input v-model="form.remark" type="textarea" :rows="3" :placeholder="$t('modelConfigDialog.enterRemark')"
-            :autosize="{ minRows: 3, maxRows: 5 }" class="custom-input-bg"></el-input>
+        <el-form-item :label="$t('modelConfigDialog.modelCode')" prop="code" style="flex: 1">
+          <el-input v-model="form.modelCode" :placeholder="$t('modelConfigDialog.enterModelCode')"></el-input>
         </el-form-item>
-      </el-form>
-
-      <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px">
-        {{ $t("modelConfigDialog.callInfo") }}
       </div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px"></div>
 
-      <el-form :model="form.configJson" ref="callInfoForm" label-width="auto" class="custom-form">
-        <template v-for="(row, rowIndex) in chunkedCallInfoFields">
-          <div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0">
-            <el-form-item v-for="field in row" :key="field.prop" :label="field.label" :prop="field.prop"
-              style="flex: 1">
-              <template v-if="field.type === 'json-textarea'">
-                <el-input v-model="fieldJsonMap[field.prop]" type="textarea" :rows="3"
-                  :placeholder="$t('modelConfigDialog.enterJsonExample')" class="custom-input-bg"
-                  @change="(val) => handleJsonChange(field.prop, val)" @focus="
-                    isSensitiveField(field.prop)
-                      ? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop])
-                      : undefined
-                    " @blur="
-                    isSensitiveField(field.prop)
-                      ? handleJsonInputBlur(field.prop)
-                      : undefined
-                    "></el-input>
-              </template>
+      <div class="form-row">
+        <el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1">
+          <el-select v-model="form.configJson.type" :placeholder="$t('modelConfigDialog.selectSupplier')"
+            style="width: 100%" @focus="loadProviders" filterable>
+            <el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('modelConfigDialog.sortOrder')" prop="sort" style="flex: 1">
+          <el-input v-model.number="form.sort" type="number" :placeholder="$t('modelConfigDialog.enterSortOrder')"></el-input>
+        </el-form-item>
+      </div>
 
-              <el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type"
-                class="custom-input-bg" :show-password="field.type === 'password'" @focus="
+      <el-form-item :label="$t('modelConfigDialog.docLink')" prop="docUrl" style="margin-bottom: 27px">
+        <el-input v-model="form.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"></el-input>
+      </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-form-item>
+    </el-form>
+
+    <div class="section-title">{{ $t("modelConfigDialog.callInfo") }}</div>
+    <div class="section-divider"></div>
+
+    <el-form :model="form.configJson" ref="callInfoForm" label-width="auto">
+      <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"
+            style="flex: 1">
+            <template v-if="field.type === 'json-textarea'">
+              <el-input v-model="fieldJsonMap[field.prop]" type="textarea" :rows="3"
+                :placeholder="$t('modelConfigDialog.enterJsonExample')"
+                @change="(val) => handleJsonChange(field.prop, val)" @focus="
                   isSensitiveField(field.prop)
-                    ? handleInputFocus(field.prop, form.configJson[field.prop])
+                    ? handleJsonInputFocus(field.prop, fieldJsonMap[field.prop])
                     : undefined
                   " @blur="
-                  isSensitiveField(field.prop) ? handleInputBlur(field.prop) : undefined
+                  isSensitiveField(field.prop)
+                    ? handleJsonInputBlur(field.prop)
+                    : undefined
                   "></el-input>
-            </el-form-item>
-          </div>
-        </template>
-      </el-form>
-    </div>
+            </template>
 
-    <div style="display: flex; justify-content: center">
-      <el-button type="primary" @click="handleSave" class="save-btn" :loading="saving" :disabled="saving">
-        {{ $t("modelConfigDialog.save") }}
-      </el-button>
+            <el-input v-else v-model="form.configJson[field.prop]" :placeholder="field.placeholder" :type="field.type"
+              :show-password="field.type === 'password'" @focus="
+                isSensitiveField(field.prop)
+                  ? handleInputFocus(field.prop, form.configJson[field.prop])
+                  : undefined
+                " @blur="
+                isSensitiveField(field.prop) ? handleInputBlur(field.prop) : undefined
+                "></el-input>
+          </el-form-item>
+        </div>
+      </template>
+    </el-form>
     </div>
-  </el-dialog>
+  </CustomDialog>
 </template>
 
 <script>
+import CustomDialog from './CustomDialog.vue';
 import Api from "@/apis/api";
 
 export default {
   name: "ModelEditDialog",
+  components: { CustomDialog },
   props: {
     visible: { type: Boolean, default: false },
     modelData: {
@@ -175,6 +147,11 @@ export default {
     };
   },
   computed: {
+    title() {
+      return this.modelData.duplicateMode
+        ? this.$t("modelConfigDialog.duplicateModel")
+        : this.$t("modelConfigDialog.editModel");
+    },
     chunkedCallInfoFields() {
       const chunkSize = 2;
       const result = [];
@@ -189,19 +166,11 @@ export default {
       this.resetProviders();
       this.loadProviders();
     },
-    dialogVisible(val) {
-      this.$emit("update:visible", val);
-      if (!val) {
-        this.resetForm();
-      } else if (val && this.modelData.id) {
-        this.loadModelData();
-      }
-    },
     visible(val) {
       this.dialogVisible = val;
-      if (val) {
-        this.loadProviders();
-      }
+    },
+    dialogVisible(val) {
+      this.$emit("update:visible", val);
     },
     "form.configJson.type"(newVal) {
       if (newVal && this.providersLoaded) {
@@ -210,6 +179,19 @@ export default {
     },
   },
   methods: {
+    handleOpen() {
+      this.loadProviders();
+      if (this.modelData.id) {
+        this.loadModelData();
+      }
+    },
+    handleClose() {
+      this.saving = false;
+      // 处理关闭弹窗闪动问题
+      setTimeout(() => {
+        this.resetForm();
+      }, 200)
+    },
     resetForm() {
       this.form = {
         id: "",
@@ -480,168 +462,78 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-dialog {
-  position: relative;
-  border-radius: 20px;
-  overflow: hidden;
-  background: white;
-  padding-bottom: 17px;
+::v-deep .el-dialog {
+  margin-top: 6vh !important;
 }
+.model-edit-dialog {
+  .dialog-scroll-body {
+    max-height: 72vh;
+    overflow-y: auto;
+    overflow-x: hidden;
 
-.custom-dialog .el-dialog__header {
-  padding: 0;
-  border-bottom: none;
-}
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #a1c9fd;
+      border-radius: 3px;
+    }
+    &::-webkit-scrollbar-track {
+      background: #f0f3fe;
+      border-radius: 3px;
+    }
+  }
 
-.center-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.custom-close-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-  border: 2px solid #cfcfcf;
-  background: none;
-  font-size: 30px;
-  font-weight: lighter;
-  color: #cfcfcf;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  padding: 0;
-  outline: none;
-}
+  .section-title {
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #3d4566;
+    text-align: left;
+  }
 
-.custom-close-btn:hover {
-  color: #409eff;
-  border-color: #409eff;
-}
+  .switch-group {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
 
-.custom-select .el-input__suffix {
-  background: #e6e8ea;
-  right: 6px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 9px;
-}
+  .switch-item {
+    display: flex;
+    align-items: center;
 
-.custom-select .el-input__suffix-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
+    &.hidden {
+      display: none;
+    }
 
-.custom-select .el-icon-arrow-up:before {
-  content: "";
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid #c0c4cc;
-  position: relative;
-  top: -2px;
-  transform: rotate(180deg);
-}
+    .switch-label {
+      margin-right: 8px;
+    }
+  }
 
-.custom-form .el-form-item {
-  margin-bottom: 20px;
-}
+  .section-divider {
+    height: 1px;
+    background: #e9e9e9;
+    margin-bottom: 16px;
+  }
 
-.custom-form .el-form-item__label {
-  color: #3d4566;
-  font-weight: normal;
-  text-align: right;
-  padding-right: 20px;
-}
+  .form-row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 0;
+  }
 
-.custom-form .el-form-item.prop-remark .el-form-item__label {
-  margin-top: -4px;
-}
-
-.custom-input-bg .el-input__inner::-webkit-input-placeholder,
-.custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
-  color: #9c9f9e;
-}
-
-.custom-input-bg .el-input__inner,
-.custom-input-bg .el-textarea__inner {
-  background-color: #f6f8fc;
-}
-
-.save-btn {
-  background: #e6f0fd;
-  color: #237ff4;
-  border: 1px solid #b3d1ff;
-  width: 150px;
-  height: 40px;
-  font-size: 16px;
-  transition: all 0.3s ease;
-}
-
-.save-btn:hover {
-  background: linear-gradient(to right, #237ff4, #9c40d5);
-  color: white;
-  border: none;
-}
-
-.custom-switch .el-switch__core {
-  border-radius: 20px;
-  height: 23px;
-  background-color: #c0ccda;
-  width: 35px;
-  padding: 0 20px;
-}
-
-.custom-switch .el-switch__core:after {
-  width: 15px;
-  height: 15px;
-  background-color: white;
-  top: 3px;
-  left: 4px;
-  transition: all 0.3s;
-}
-
-.custom-switch.is-checked .el-switch__core {
-  border-color: #b5bcf0;
-  background-color: #cfd7fa;
-  padding: 0 20px;
-}
-
-.custom-switch.is-checked .el-switch__core:after {
-  left: 100%;
-  margin-left: -18px;
-  background-color: #1b47ee;
-}
-
-[style*="display: flex"] {
-  gap: 20px;
-}
-
-.custom-input-bg .el-input__inner {
-  height: 32px;
-}
-
-.custom-form .el-form-item {
-  margin-bottom: 20px;
-}
-
-.custom-form .el-form-item__label {
-  color: #3d4566;
-  font-weight: normal;
-  text-align: right;
-  padding-right: 20px;
+  ::v-deep .el-input__inner {
+    height: 32px;
+  }
+  ::v-deep .el-form-item {
+    margin-bottom: 10px;
+  }
 }
 </style>

From ea48b948bf02deae9119e092d488c482e1398f4c Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Mon, 22 Jun 2026 17:58:35 +0800
Subject: [PATCH 2/5] =?UTF-8?q?update:=20=E6=A8=A1=E5=9E=8B=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=B0=E5=A2=9E=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddModelDialog.vue         | 248 ++++++------------
 .../src/components/ModelEditDialog.vue        |   8 +-
 2 files changed, 88 insertions(+), 168 deletions(-)

diff --git a/main/manager-web/src/components/AddModelDialog.vue b/main/manager-web/src/components/AddModelDialog.vue
index 58a4d3c8..f1a01a7b 100644
--- a/main/manager-web/src/components/AddModelDialog.vue
+++ b/main/manager-web/src/components/AddModelDialog.vue
@@ -1,39 +1,38 @@
 <template>
-  <el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="57%" center
-    custom-class="add-model-dialog" :show-close="false" class="center-dialog">
-    <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
-      <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
-        {{ $t('modelConfigDialog.addModel') }}
-      </div>
-
-      <button class="custom-close-btn" @click="handleClose">
-        ×
-      </button>
-
+  <CustomDialog
+    :visible.sync="dialogVisible"
+    :title="$t('modelConfigDialog.addModel')"
+    width="57%"
+    class="add-model-dialog"
+    :confirmLoading="saving"
+    @close="handleClose"
+    @confirm="confirm"
+  >
+    <div class="dialog-content">
       <!-- 模型信息部分 -->
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-        <div style="font-size: 20px; font-weight: bold; color: #3d4566;">{{ $t('modelConfigDialog.modelInfo') }}</div>
-        <div style="display: flex; align-items: center; gap: 20px;">
-          <div style="display: flex; align-items: center;">
-            <span style="margin-right: 8px;">{{ $t('modelConfigDialog.enable') }}</span>
+      <div class="section-header">
+        <div class="section-title">{{ $t('modelConfigDialog.modelInfo') }}</div>
+        <div class="switch-group">
+          <div class="switch-item">
+            <span>{{ $t('modelConfigDialog.enable') }}</span>
             <el-switch v-model="formData.isEnabled" class="custom-switch"></el-switch>
           </div>
-          <div style="display: none; align-items: center;">
-            <span style="margin-right: 8px;">{{ $t('modelConfigDialog.setDefault') }}</span>
+          <div class="switch-item" style="display: none;">
+            <span>{{ $t('modelConfigDialog.setDefault') }}</span>
             <el-switch v-model="formData.isDefault" class="custom-switch"></el-switch>
           </div>
         </div>
       </div>
 
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
-      <el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
-        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+      <div class="divider"></div>
+      <el-form :model="formData" label-width="auto" label-position="left" class="custom-form">
+        <div class="form-row">
           <el-form-item :label="$t('modelConfigDialog.modelId')" prop="id" style="flex: 1;">
             <el-input v-model="formData.id" :placeholder="$t('modelConfigDialog.enterModelId')" class="custom-input-bg"
               maxlength="32"></el-input>
           </el-form-item>
         </div>
-        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+        <div class="form-row">
           <el-form-item :label="$t('modelConfigDialog.modelName')" prop="modelName" style="flex: 1;">
             <el-input v-model="formData.modelName" :placeholder="$t('modelConfigDialog.enterModelName')"
               class="custom-input-bg"></el-input>
@@ -44,7 +43,7 @@
           </el-form-item>
         </div>
 
-        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+        <div class="form-row">
           <el-form-item :label="$t('modelConfigDialog.supplier')" prop="supplier" style="flex: 1;">
             <el-select v-model="formData.supplier" :placeholder="$t('modelConfigDialog.selectSupplier')"
               class="custom-select custom-input-bg" style="width: 100%;" @focus="loadProviders" filterable>
@@ -57,7 +56,6 @@
           </el-form-item>
         </div>
 
-
         <el-form-item :label="$t('modelConfigDialog.docLink')" prop="docLink" style="margin-bottom: 27px;">
           <el-input v-model="formData.docLink" :placeholder="$t('modelConfigDialog.enterDocLink')"
             class="custom-input-bg"></el-input>
@@ -70,13 +68,13 @@
         </el-form-item>
       </el-form>
 
-      <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">{{
-        $t('modelConfigDialog.callInfo') }}</div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
+      <teleport v-if="chunkedCallInfoFields.length">
+        <div class="section-title">{{ $t('modelConfigDialog.callInfo') }}</div>
+        <div class="divider"></div>
+      </teleport>
 
       <el-form :model="formData.configJson" label-width="auto" label-position="left" class="custom-form">
-        <div v-for="(row, rowIndex) in chunkedCallInfoFields" :key="rowIndex"
-          style="display: flex; gap: 20px; margin-bottom: 0;">
+        <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" style="flex: 1;">
             <el-input v-model="formData.configJson[field.prop]" :placeholder="field.placeholder"
               :type="field.type || 'text'" class="custom-input-bg" :show-password="field.type === 'password'">
@@ -85,19 +83,17 @@
         </div>
       </el-form>
     </div>
-
-    <div style="display: flex;justify-content: center;">
-      <el-button type="primary" @click="confirm" class="save-btn" :loading="saving" :disabled="saving">
-        {{ $t('modelConfigDialog.save') }}
-      </el-button>
-    </div>
-  </el-dialog>
+  </CustomDialog>
 </template>
 
 <script>
 import Api from '@/apis/api';
+import CustomDialog from './CustomDialog.vue';
 export default {
   name: 'AddModelDialog',
+  components: {
+    CustomDialog
+  },
   props: {
     visible: { type: Boolean, required: true },
     modelType: { type: String, required: true }
@@ -178,16 +174,10 @@ export default {
       });
       this.formData.configJson = { ...defaultConfig };
     },
-    handleVisibleChange(val) {
-      this.dialogVisible = val;
-      this.$emit('update:visible', val);
-      if (!val) {
-        this.resetForm();
-      }
-    },
 
     handleClose() {
       this.saving = false;
+      this.dialogVisible = false;
       this.$emit('update:visible', false);
     },
     initDynamicConfig() {
@@ -232,7 +222,7 @@ export default {
 
       try {
         this.$emit('confirm', submitData);
-        this.$emit('update:visible', false);
+        this.handleClose();
         this.resetForm();
       } catch (e) {
         console.error(e);
@@ -297,134 +287,64 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  margin-top: 6vh !important;
+}
 .add-model-dialog {
-  position: relative;
-  border-radius: 20px;
-  overflow: hidden;
-  background: white;
-  padding-bottom: 17px;
-}
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.add-model-dialog .el-dialog__header {
-  padding: 0;
-  border-bottom: none;
-}
+  .section-title {
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #3d4566;
+    text-align: left;
+  }
 
-.center-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .switch-group {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
 
-.center-dialog .el-dialog {
-  margin: 0 0 auto !important;
-  display: flex;
-  flex-direction: column;
-}
+  .switch-item {
+    display: flex;
+    align-items: center;
 
-.custom-close-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-  border: 2px solid #cfcfcf;
-  background: none;
-  font-size: 30px;
-  font-weight: lighter;
-  color: #cfcfcf;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  padding: 0;
-  outline: none;
-}
+    span {
+      margin-right: 8px;
+    }
+  }
 
-.custom-close-btn:hover {
-  color: #409EFF;
-  border-color: #409EFF;
-}
+  .divider {
+    height: 1px;
+    background: #e9e9e9;
+    margin-bottom: 16px;
+  }
 
-.custom-select .el-input__suffix {
-  background: #e6e8ea;
-  right: 6px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 9px;
-}
+  .form-row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 0;
+  }
 
-.custom-select .el-input__suffix-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.custom-select .el-icon-arrow-up:before {
-  content: "";
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid #c0c4cc;
-  position: relative;
-  top: -2px;
-  transform: rotate(180deg);
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 16px 20px;
+  }
 }
 
 .custom-form .el-form-item {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
-.custom-form .el-form-item__label {
-  color: #3d4566;
-  font-weight: normal;
-  text-align: right;
-  padding-right: 20px;
-
-}
-
-.custom-form .el-form-item.prop-remark .el-form-item__label {
-  margin-top: -4px;
-}
-
-.custom-input-bg .el-input__inner::-webkit-input-placeholder,
-.custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
-  color: #9c9f9e;
-}
-
-
-.custom-input-bg .el-input__inner,
-.custom-input-bg .el-textarea__inner {
-  background-color: #ffffff;
-}
-
-
-.save-btn {
-  background: #e6f0fd;
-  color: #237ff4;
-  border: 1px solid #b3d1ff;
-  width: 150px;
-  height: 40px;
-  font-size: 16px;
-  transition: all 0.3s ease;
-}
-
-.save-btn:hover {
-  background: linear-gradient(to right, #237ff4, #9c40d5);
-  color: white;
-  border: none;
-}
-
-
 .custom-switch .el-switch__core {
   border-radius: 20px;
   height: 23px;
@@ -439,7 +359,7 @@ export default {
   background-color: white;
   top: 3px;
   left: 4px;
-  transition: all .3s;
+  transition: all 0.3s;
 }
 
 .custom-switch.is-checked .el-switch__core {
@@ -454,12 +374,10 @@ export default {
   background-color: #1b47ee;
 }
 
-
-[style*="display: flex"] {
-  gap: 20px;
-}
-
 .custom-input-bg .el-input__inner {
   height: 32px;
 }
+::v-deep .el-input__inner {
+  height: 32px;
+}
 </style>
\ No newline at end of file
diff --git a/main/manager-web/src/components/ModelEditDialog.vue b/main/manager-web/src/components/ModelEditDialog.vue
index 75a329d3..82e0bee6 100644
--- a/main/manager-web/src/components/ModelEditDialog.vue
+++ b/main/manager-web/src/components/ModelEditDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <CustomDialog
-    :title="title"
+    :title="$t('modelConfigDialog.editModel')"
     :visible.sync="dialogVisible"
     width="57%"
     class="model-edit-dialog"
@@ -57,8 +57,10 @@
       </el-form-item>
     </el-form>
 
-    <div class="section-title">{{ $t("modelConfigDialog.callInfo") }}</div>
-    <div class="section-divider"></div>
+    <teleport v-if="chunkedCallInfoFields.length">
+      <div class="section-title">{{ $t("modelConfigDialog.callInfo") }}</div>
+      <div class="section-divider"></div>
+    </teleport>
 
     <el-form :model="form.configJson" ref="callInfoForm" label-width="auto">
       <template>

From 9705149b2ba91b68be19760c9e460f53460f1c2a Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 23 Jun 2026 14:14:29 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=8C=89=E9=92=AE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9Eadd=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomButton.vue           | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/main/manager-web/src/components/CustomButton.vue b/main/manager-web/src/components/CustomButton.vue
index f66359bd..dfb4d263 100644
--- a/main/manager-web/src/components/CustomButton.vue
+++ b/main/manager-web/src/components/CustomButton.vue
@@ -15,7 +15,7 @@ export default {
     type: {
       type: String,
       default: 'default',
-      validator: (val) => ['default', 'confirm', 'delete'].includes(val)
+      validator: (val) => ['default', 'confirm', 'delete', 'add'].includes(val)
     }
   }
 };
@@ -122,4 +122,37 @@ export default {
     cursor: not-allowed;
   }
 }
+
+.custom-button--add {
+  width: fit-content;
+  background: #52c41a;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+
+  &.el-button--small {
+    font-size: 14px;
+  }
+  &.el-button--medium {
+    padding: 12px 20px;
+  }
+
+  &:hover {
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+    transform: translateY(-2px);
+  }
+
+  &.is-disabled,
+  &.is-disabled:hover {
+    background: linear-gradient(to right, #a0e89a, #c4f0c0);
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    box-shadow: none;
+    transform: none;
+    cursor: not-allowed;
+  }
+}
 </style>

From f82f3641894ef5d4a5ddbefb472eb3ae2aac7af5 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 23 Jun 2026 14:15:32 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/components/TtsModel.vue |  77 ++----
 main/manager-web/src/views/ModelConfig.vue   | 241 ++-----------------
 2 files changed, 42 insertions(+), 276 deletions(-)

diff --git a/main/manager-web/src/components/TtsModel.vue b/main/manager-web/src/components/TtsModel.vue
index 6960af8f..6a33f289 100644
--- a/main/manager-web/src/components/TtsModel.vue
+++ b/main/manager-web/src/components/TtsModel.vue
@@ -1,9 +1,7 @@
 <template>
-  <el-dialog :visible.sync="localVisible" width="90%" @close="handleClose" :show-close="false" :append-to-body="true"
-    :close-on-click-modal="true">
-    <button class="custom-close-btn" @click="handleClose">
-      ×
-    </button>
+  <CustomDialog :visible.sync="localVisible" :title="$t('modelConfig.voiceManagement')" width="90%"
+    :close-on-click-modal="true" :destroy-on-close="false" :footer="false" :append-to-body="true"
+    @close="handleClose">
     <div class="scroll-wrapper">
       <div class="table-container" ref="tableContainer" @scroll="handleScroll">
         <el-table v-loading="loading" :data="filteredTtsModels" style="width: 100%;" class="data-table"
@@ -92,25 +90,27 @@
       </div>
     </div>
     <div class="action-buttons">
-      <el-button type="primary" size="mini" @click="toggleSelectAll" style="background: #606ff3;border: None">
+      <CustomButton :icon="selectAll ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" type="default" @click="toggleSelectAll">
         {{ selectAll ? $t('ttsModel.deselectAll') : $t('ttsModel.selectAll') }}
-      </el-button>
-      <el-button type="primary" size="mini" @click="addNew" style="background: #5bc98c;border: None;">
+      </CustomButton>
+      <CustomButton icon="el-icon-plus" size="small" type="add" @click="addNew">
         {{ $t('ttsModel.add') }}
-      </el-button>
-      <el-button type="primary" size="mini" @click="deleteRow(filteredTtsModels.filter(row => row.selected))"
-        style="background: red;border:None">{{ $t('ttsModel.delete') }}
-      </el-button>
+      </CustomButton>
+      <CustomButton icon="el-icon-delete" size="small" type="delete" @click="deleteRow(filteredTtsModels.filter(row => row.selected))">
+        {{ $t('ttsModel.delete') }}
+      </CustomButton>
     </div>
-  </el-dialog>
+  </CustomDialog>
 </template>
 
 <script>
 import Api from "@/apis/api";
 import AudioPlayer from './AudioPlayer.vue';
+import CustomDialog from './CustomDialog.vue';
+import CustomButton from './CustomButton.vue';
 
 export default {
-  components: { AudioPlayer },
+  components: { AudioPlayer, CustomDialog, CustomButton },
   props: {
     visible: {
       type: Boolean,
@@ -532,18 +532,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog {
-  border-radius: 8px !important;
-  overflow: hidden;
-  top: 1vh !important;
-}
-
-::v-deep .el-dialog__header {
-  display: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
 /* 表格样式 */
 ::v-deep .data-table .el-table__header th {
   color: black;
@@ -570,33 +558,6 @@ export default {
   border: none !important;
 }
 
-/* 关闭按钮 */
-.custom-close-btn {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 2px solid #cfcfcf;
-  background: none;
-  font-size: 30px;
-  font-weight: lighter;
-  color: #cfcfcf;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  padding: 0;
-  outline: none;
-}
-
-.custom-close-btn:hover {
-  color: #409EFF;
-  border-color: #409EFF;
-}
-
 /* 备注文本 */
 ::v-deep .remark-input .el-textarea__inner {
   border-radius: 4px;
@@ -691,11 +652,6 @@ export default {
   margin: 0 auto;
 }
 
-.action-buttons .el-button {
-  padding: 8px 15px;
-  font-size: 11px;
-}
-
 .edit-btn,
 .delete-btn,
 .save-btn {
@@ -727,9 +683,8 @@ export default {
 
 /* 按钮组定位调整 */
 .action-buttons {
-  position: static;
-  padding: 15px 0;
-  background: white;
+  padding-top: 10px;
+  text-align: left;
 }
 
 /* 输入框自适应 */
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index 0898ef0e..cd133354 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -105,7 +105,8 @@
                   > 
                     <el-switch
                       v-model="scope.row.isEnabled"
-                      class="custom-switch"
+                      active-color="#5778ff"
+                      inactive-color="#DCDFE6"
                       :active-value="1"
                       :inactive-value="0"
                       disabled
@@ -115,7 +116,8 @@
                   <el-switch
                     v-else
                     v-model="scope.row.isEnabled"
-                    class="custom-switch"
+                    active-color="#5778ff"
+                    inactive-color="#DCDFE6"
                     :active-value="1"
                     :inactive-value="0"
                     @change="handleStatusChange(scope.row)"
@@ -126,7 +128,8 @@
                 <template slot-scope="scope">
                   <el-switch
                     v-model="scope.row.isDefault"
-                    class="custom-switch"
+                    active-color="#5778ff"
+                    inactive-color="#DCDFE6"
                     :active-value="1"
                     :inactive-value="0"
                     @change="handleDefaultChange(scope.row)"
@@ -184,76 +187,33 @@
             </el-table>
             <div class="table-footer">
               <div class="batch-actions">
-                <el-button size="mini" type="primary" @click="selectAll">
+                <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" type="default" size="mini" @click="selectAll">
                   {{
                     isAllSelected
                       ? $t("modelConfig.deselectAll")
                       : $t("modelConfig.selectAll")
                   }}
-                </el-button>
-                <el-button type="success" size="mini" @click="addModel" class="add-btn">
+                </CustomButton>
+                <CustomButton icon="el-icon-plus" type="add" size="mini" @click="addModel">
                   {{ $t("modelConfig.add") }}
-                </el-button>
-                <el-button
+                </CustomButton>
+                <CustomButton
+                  type="delete"
                   size="mini"
-                  type="danger"
                   icon="el-icon-delete"
                   @click="batchDelete"
                 >
                   {{ $t("modelConfig.delete") }}
-                </el-button>
-              </div>
-              <div class="custom-pagination">
-                <el-select
-                  v-model="pageSize"
-                  @change="handlePageSizeChange"
-                  class="page-size-select"
-                >
-                  <el-option
-                    v-for="item in pageSizeOptions"
-                    :key="item"
-                    :label="$t('modelConfig.itemsPerPage', { items: item })"
-                    :value="item"
-                  >
-                  </el-option>
-                </el-select>
-
-                <button
-                  class="pagination-btn"
-                  :disabled="currentPage === 1"
-                  @click="goFirst"
-                >
-                  {{ $t("modelConfig.firstPage") }}
-                </button>
-                <button
-                  class="pagination-btn"
-                  :disabled="currentPage === 1"
-                  @click="goPrev"
-                >
-                  {{ $t("modelConfig.prevPage") }}
-                </button>
-
-                <button
-                  v-for="page in visiblePages"
-                  :key="page"
-                  class="pagination-btn"
-                  :class="{ active: page === currentPage }"
-                  @click="goToPage(page)"
-                >
-                  {{ page }}
-                </button>
-
-                <button
-                  class="pagination-btn"
-                  :disabled="currentPage === pageCount"
-                  @click="goNext"
-                >
-                  {{ $t("modelConfig.nextPage") }}
-                </button>
-                <span class="total-text">{{
-                  $t("modelConfig.totalRecords", { total })
-                }}</span>
+                </CustomButton>
               </div>
+              <CustomPagination
+                :total="total"
+                :current-page="currentPage"
+                :page-size="pageSize"
+                :page-size-options="pageSizeOptions"
+                @size-change="handlePageSizeChange"
+                @page-change="handlePageChange"
+              />
             </div>
           </el-card>
         </div>
@@ -288,9 +248,11 @@ import AddModelDialog from "@/components/AddModelDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 import ModelEditDialog from "@/components/ModelEditDialog.vue";
 import TtsModel from "@/components/TtsModel.vue";
+import CustomPagination from "@/components/CustomPagination.vue";
+import CustomButton from "@/components/CustomButton.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
 export default {
-  components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter },
+  components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog, VersionFooter, CustomPagination, CustomButton },
   data() {
     return {
       addDialogVisible: false,
@@ -334,24 +296,6 @@ export default {
         this.$t("modelConfig." + this.activeTab) || this.$t("modelConfig.modelConfig")
       );
     },
-    pageCount() {
-      return Math.ceil(this.total / this.pageSize);
-    },
-    visiblePages() {
-      const pages = [];
-      const maxVisible = 3;
-      let start = Math.max(1, this.currentPage - 1);
-      let end = Math.min(this.pageCount, start + maxVisible - 1);
-
-      if (end - start + 1 < maxVisible) {
-        start = Math.max(1, end - maxVisible + 1);
-      }
-
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-      return pages;
-    },
   },
 
   methods: {
@@ -481,9 +425,9 @@ export default {
           this.$message.info(this.$t("modelConfig.deleteCancelled"));
         });
     },
-    handleCurrentChange(page) {
+    handlePageChange(page) {
       this.currentPage = page;
-      this.$refs.modelTable.clearSelection();
+      this.loadData();
     },
     handleModelSave({ provideCode, formData, done }) {
       const modelType = this.activeTab;
@@ -558,28 +502,6 @@ export default {
       });
     },
 
-    // 分页器
-    goFirst() {
-      this.currentPage = 1;
-      this.loadData();
-    },
-    goPrev() {
-      if (this.currentPage > 1) {
-        this.currentPage--;
-        this.loadData();
-      }
-    },
-    goNext() {
-      if (this.currentPage < this.pageCount) {
-        this.currentPage++;
-        this.loadData();
-      }
-    },
-    goToPage(page) {
-      this.currentPage = page;
-      this.loadData();
-    },
-
     // 获取模型配置列表
     loadData() {
       this.loading = true; // 开始加载
@@ -793,50 +715,6 @@ export default {
   transition: border-color 0.2s;
 }
 
-::v-deep .page-size-select {
-  width: 100px;
-  margin-right: 8px;
-}
-
-::v-deep .page-size-select .el-input__inner {
-  height: 32px;
-  line-height: 32px;
-  border-radius: 4px;
-  border: 1px solid #e4e7ed;
-  background: #dee7ff;
-  color: #606266;
-  font-size: 14px;
-}
-
-::v-deep .page-size-select .el-input__suffix {
-  right: 6px;
-  width: 15px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 6px;
-  border-radius: 4px;
-}
-
-::v-deep .page-size-select .el-input__suffix-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-::v-deep .page-size-select .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;
-}
-
 ::v-deep .search-input .el-input__inner:focus {
   border-color: #6b8cff;
   outline: none;
@@ -1018,73 +896,6 @@ export default {
   padding-right: 10px;
 }
 
-/* 分页器 */
-.custom-pagination {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  /* 导航按钮样式 (首页、上一页、下一页) */
-  .pagination-btn:first-child,
-  .pagination-btn:nth-child(2),
-  .pagination-btn:nth-child(3),
-  .pagination-btn:nth-last-child(2) {
-    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(2)):not(:nth-child(3)):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;
-  }
-}
-
 .model-card {
   background: white;
   flex: 1;

From 04bfddf4577cc54eb453176282b79bcfed22ef5a Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 23 Jun 2026 14:54:45 +0800
Subject: [PATCH 5/5] =?UTF-8?q?update:=20=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomButton.vue           | 21 +++--
 .../src/views/AddressBookManagement.vue       | 13 ++-
 .../src/views/AgentTemplateManagement.vue     |  2 +-
 main/manager-web/src/views/DictManagement.vue |  2 +-
 .../src/views/KnowledgeBaseItem.vue           |  9 +-
 main/manager-web/src/views/ModelConfig.vue    | 86 +++++++++----------
 main/manager-web/src/views/OtaManagement.vue  |  2 +-
 .../src/views/ParamsManagement.vue            |  2 +-
 .../src/views/ProviderManagement.vue          |  2 +-
 .../src/views/ReplacementWordManagement.vue   |  2 +-
 main/manager-web/src/views/UserManagement.vue |  6 +-
 11 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/main/manager-web/src/components/CustomButton.vue b/main/manager-web/src/components/CustomButton.vue
index dfb4d263..05c3a769 100644
--- a/main/manager-web/src/components/CustomButton.vue
+++ b/main/manager-web/src/components/CustomButton.vue
@@ -27,12 +27,12 @@ export default {
   background: #4998ff;
   color: #ffffff;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.3s ease;
 
   &.el-button--small {
-    padding: 10px;
-    font-size: 14px;
+    padding: 9px 14px;
+    font-size: 12px;
   }
   &.el-button--medium {
     padding: 12px 20px;
@@ -62,11 +62,12 @@ export default {
   background: linear-gradient(to right, #4a7cfd, #8154fc);
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.3s ease;
 
   &.el-button--small {
-    font-size: 14px;
+    padding: 9px 14px;
+    font-size: 12px;
   }
   &.el-button--medium {
     padding: 12px 20px;
@@ -95,11 +96,12 @@ export default {
   background: #ff6b6b;
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.3s ease;
 
   &.el-button--small {
-    font-size: 14px;
+    padding: 9px 14px;
+    font-size: 12px;
   }
   &.el-button--medium {
     padding: 12px 20px;
@@ -128,11 +130,12 @@ export default {
   background: #52c41a;
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   transition: all 0.3s ease;
 
   &.el-button--small {
-    font-size: 14px;
+    padding: 9px 14px;
+    font-size: 12px;
   }
   &.el-button--medium {
     padding: 12px 20px;
diff --git a/main/manager-web/src/views/AddressBookManagement.vue b/main/manager-web/src/views/AddressBookManagement.vue
index 6aa85a8e..a8887eea 100644
--- a/main/manager-web/src/views/AddressBookManagement.vue
+++ b/main/manager-web/src/views/AddressBookManagement.vue
@@ -141,11 +141,9 @@
                 <p class="section-desc">{{ $t('addressBookManagement.setPermissionDesc', { count: selectedPermissions.length }) }}</p>
               </div>
               <div class="section-actions">
-                <el-button size="small" @click="handleCancel">{{ $t('common.cancel') }}</el-button>
-                <el-button size="small" @click="handleToggleSelectAll">
-                  {{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}
-                </el-button>
-                <el-button type="primary" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</el-button>
+                <CustomButton size="small" @click="handleCancel">{{ $t('common.cancel') }}</CustomButton>
+                <CustomButton size="small" @click="handleToggleSelectAll">{{ isAllSelected ? $t('addressBookManagement.deselectAll') : $t('addressBookManagement.selectAll') }}</CustomButton>
+                <CustomButton type="confirm" size="small" @click="handleSavePermissions">{{ $t('addressBookManagement.save') }}</CustomButton>
               </div>
             </div>
 
@@ -208,10 +206,11 @@ import VersionFooter from "@/components/VersionFooter.vue";
 import Api from "@/apis/api.js";
 import AddressBookApi from "@/apis/module/addressBook.js";
 import MacAddressMask from "@/components/MacAddressMask.vue";
+import CustomButton from "@/components/CustomButton.vue";
 
 export default {
   name: "AddressBookManagement",
-  components: { HeaderBar, VersionFooter, MacAddressMask },
+  components: { HeaderBar, VersionFooter, MacAddressMask, CustomButton },
   data() {
     return {
       searchKeyword: "",
@@ -946,8 +945,8 @@ export default {
     }
 
     .section-actions {
+      margin-top: 4px;
       display: flex;
-      gap: 8px;
     }
   }
 }
diff --git a/main/manager-web/src/views/AgentTemplateManagement.vue b/main/manager-web/src/views/AgentTemplateManagement.vue
index 272fb338..ebf3d075 100644
--- a/main/manager-web/src/views/AgentTemplateManagement.vue
+++ b/main/manager-web/src/views/AgentTemplateManagement.vue
@@ -54,7 +54,7 @@
                   <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
                     {{ isAllSelected ? $t("agentTemplateManagement.deselectAll") : $t("agentTemplateManagement.selectAll") }}
                   </CustomButton>
-                  <CustomButton icon="el-icon-plus" size="small" @click="showAddTemplateDialog">
+                  <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddTemplateDialog">
                     {{ $t("agentTemplateManagement.createTemplate") }}
                   </CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteTemplate">
diff --git a/main/manager-web/src/views/DictManagement.vue b/main/manager-web/src/views/DictManagement.vue
index 506b8fc6..21abdfef 100644
--- a/main/manager-web/src/views/DictManagement.vue
+++ b/main/manager-web/src/views/DictManagement.vue
@@ -65,7 +65,7 @@
                     size="small" @click="selectAllDictData">
                     {{ isAllDictDataSelected ? $t('dictManagement.deselectAll') : $t('dictManagement.selectAll') }}
                   </CustomButton>
-                  <CustomButton icon="el-icon-plus" size="small" @click="showAddDictDataDialog">
+                  <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDictDataDialog">
                     {{ $t('dictManagement.addDictData') }}
                   </CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDeleteDictData">
diff --git a/main/manager-web/src/views/KnowledgeBaseItem.vue b/main/manager-web/src/views/KnowledgeBaseItem.vue
index f0253b2a..9c0c3d92 100644
--- a/main/manager-web/src/views/KnowledgeBaseItem.vue
+++ b/main/manager-web/src/views/KnowledgeBaseItem.vue
@@ -14,9 +14,9 @@
           prefix-icon="el-icon-search"
           clearable
         />
-        <el-button size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</el-button>
-        <el-button size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</el-button>
-        <el-button size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</el-button>
+        <CustomButton size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</CustomButton>
+        <CustomButton type="add" size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</CustomButton>
+        <CustomButton type="confirm" size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</CustomButton>
       </div>
     </div>
     <div class="doc-grid" v-loading="docLoading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
@@ -85,6 +85,7 @@
 
 <script>
 import Api from "@/apis/api";
+import CustomButton from "@/components/CustomButton.vue";
 import CustomPagination from "@/components/CustomPagination.vue";
 
 const iconMap = {
@@ -101,7 +102,7 @@ const iconMap = {
 
 export default {
   name: 'LibraryItem',
-  components: { CustomPagination },
+  components: { CustomPagination, CustomButton },
   props: {
     kb: {
       type: Object,
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index cd133354..9531e809 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -187,19 +187,19 @@
             </el-table>
             <div class="table-footer">
               <div class="batch-actions">
-                <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" type="default" size="mini" @click="selectAll">
+                <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" type="default" size="small" @click="selectAll">
                   {{
                     isAllSelected
                       ? $t("modelConfig.deselectAll")
                       : $t("modelConfig.selectAll")
                   }}
                 </CustomButton>
-                <CustomButton icon="el-icon-plus" type="add" size="mini" @click="addModel">
+                <CustomButton icon="el-icon-plus" type="add" size="small" @click="addModel">
                   {{ $t("modelConfig.add") }}
                 </CustomButton>
                 <CustomButton
                   type="delete"
-                  size="mini"
+                  size="small"
                   icon="el-icon-delete"
                   @click="batchDelete"
                 >
@@ -747,53 +747,53 @@ export default {
   background: white;
 }
 
-.batch-actions {
-  display: flex;
-  gap: 8px;
-}
+// .batch-actions {
+//   display: flex;
+//   gap: 8px;
+// }
 
-.batch-actions .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);
-}
+// .batch-actions .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);
+// }
 
-.batch-actions .el-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
+// .batch-actions .el-button:hover {
+//   transform: translateY(-1px);
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+// }
 
-.batch-actions .el-button--primary {
-  background: #5f70f3 !important;
-  color: white;
-}
+// .batch-actions .el-button--primary {
+//   background: #5f70f3 !important;
+//   color: white;
+// }
 
-.batch-actions .el-button--success {
-  background: #5bc98c;
-  color: white;
-}
+// .batch-actions .el-button--success {
+//   background: #5bc98c;
+//   color: white;
+// }
 
-.batch-actions .el-button--danger {
-  background: #fd5b63;
-  color: white;
-}
+// .batch-actions .el-button--danger {
+//   background: #fd5b63;
+//   color: white;
+// }
 
-.batch-actions .el-button:first-child {
-  background: linear-gradient(135deg, #409eff, #6b8cff);
-  border: none;
-  color: white;
-}
+// .batch-actions .el-button:first-child {
+//   background: linear-gradient(135deg, #409eff, #6b8cff);
+//   border: none;
+//   color: white;
+// }
 
-.batch-actions .el-button:first-child:hover {
-  background: linear-gradient(135deg, #3a8ee6, #5a7cff);
-}
+// .batch-actions .el-button:first-child:hover {
+//   background: linear-gradient(135deg, #3a8ee6, #5a7cff);
+// }
 
 .el-table th ::v-deep .el-table__cell {
   overflow: hidden;
diff --git a/main/manager-web/src/views/OtaManagement.vue b/main/manager-web/src/views/OtaManagement.vue
index aaa325c1..bdb885de 100644
--- a/main/manager-web/src/views/OtaManagement.vue
+++ b/main/manager-web/src/views/OtaManagement.vue
@@ -52,7 +52,7 @@
                                         size="small" @click="handleSelectAll">
                                         {{ isAllSelected ? $t('otaManagement.deselectAll') : $t('otaManagement.selectAll') }}
                                     </CustomButton>
-                                    <CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
+                                    <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
                                         {{ $t('otaManagement.addNew') }}
                                     </CustomButton>
                                     <CustomButton size="small" type="delete" icon="el-icon-delete"
diff --git a/main/manager-web/src/views/ParamsManagement.vue b/main/manager-web/src/views/ParamsManagement.vue
index f81996c5..9176b49f 100644
--- a/main/manager-web/src/views/ParamsManagement.vue
+++ b/main/manager-web/src/views/ParamsManagement.vue
@@ -60,7 +60,7 @@
                   <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
                     {{ isAllSelected ? $t('paramManagement.deselectAll') : $t('paramManagement.selectAll') }}
                   </CustomButton>
-                  <CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
+                  <CustomButton icon="el-icon-plus" type="add" size="small" @click="showAddDialog">
                     {{ $t('paramManagement.add') }}
                   </CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedParams">
diff --git a/main/manager-web/src/views/ProviderManagement.vue b/main/manager-web/src/views/ProviderManagement.vue
index 42311bef..b5c5f0b5 100644
--- a/main/manager-web/src/views/ProviderManagement.vue
+++ b/main/manager-web/src/views/ProviderManagement.vue
@@ -67,7 +67,7 @@
                   <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
                     {{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
                   </CustomButton>
-                  <CustomButton icon="el-icon-plus" size="small" @click="showAddDialog">
+                  <CustomButton type="add" icon="el-icon-plus" size="small" @click="showAddDialog">
                     {{ $t('common.add') }}
                   </CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedProviders">
diff --git a/main/manager-web/src/views/ReplacementWordManagement.vue b/main/manager-web/src/views/ReplacementWordManagement.vue
index 718a2773..e1b82807 100644
--- a/main/manager-web/src/views/ReplacementWordManagement.vue
+++ b/main/manager-web/src/views/ReplacementWordManagement.vue
@@ -70,7 +70,7 @@
                   >
                     {{ allSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
                   </CustomButton>
-                  <CustomButton icon="el-icon-plus" size="small" @click="handleAdd">
+                  <CustomButton type="add" icon="el-icon-plus" size="small" @click="handleAdd">
                     {{ $t('replacementWordManagement.addFile') }}
                   </CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="handleBatchDelete">
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index f27aa267..f97e9563 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -52,12 +52,12 @@
                   <CustomButton :icon="isAllSelected ? 'el-icon-circle-close' : 'el-icon-circle-check'" size="small" @click="handleSelectAll">
                     {{ isAllSelected ? $t('user.deselectAll') : $t('user.selectAll') }}
                   </CustomButton>
-                  <CustomButton size="small" icon="el-icon-circle-check" @click="batchEnable">{{
-                    $t('user.enable')
-                    }}</CustomButton>
                   <CustomButton size="small" icon="el-icon-remove-outline" @click="batchDisable">
                     {{$t('user.disable') }}
                   </CustomButton>
+                  <CustomButton size="small" type="add" icon="el-icon-circle-check" @click="batchEnable">{{
+                    $t('user.enable')
+                    }}</CustomButton>
                   <CustomButton size="small" type="delete" icon="el-icon-delete" @click="batchDelete">{{ $t('user.delete')
                     }}</CustomButton>
                 </div>