feat: 完成模型配置页面样式改造

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;
 }
 
 /* 输入框自适应 */