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"
+  <CustomDialog :visible.sync="localVisible" :title="$t('modelConfig.voiceManagement')" width="90%"
-    :close-on-click-modal="true">
+    :close-on-click-modal="true" :destroy-on-close="false" :footer="false" :append-to-body="true"
-    <button class="custom-close-btn" @click="handleClose">
+    @close="handleClose">
-      ×
-    </button>
     <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>
+      </CustomButton>
-      <el-button type="primary" size="mini" @click="addNew" style="background: #5bc98c;border: None;">
+      <CustomButton icon="el-icon-plus" size="small" type="add" @click="addNew">
         {{ $t('ttsModel.add') }}
-      </el-button>
+      </CustomButton>
-      <el-button type="primary" size="mini" @click="deleteRow(filteredTtsModels.filter(row => row.selected))"
+      <CustomButton icon="el-icon-delete" size="small" type="delete" @click="deleteRow(filteredTtsModels.filter(row => row.selected))">
-        style="background: red;border:None">{{ $t('ttsModel.delete') }}
+        {{ $t('ttsModel.delete') }}
-      </el-button>
+      </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-top: 10px;
-  padding: 15px 0;
+  text-align: left;
-  background: white;
 }
 
 /* 输入框自适应 */

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>
+                </CustomButton>
-                <el-button type="success" size="mini" @click="addModel" class="add-btn">
+                <CustomButton icon="el-icon-plus" type="add" size="mini" @click="addModel">
                   {{ $t("modelConfig.add") }}
-                </el-button>
+                </CustomButton>
-                <el-button
+                <CustomButton
+                  type="delete"
                   size="mini"
-                  type="danger"
                   icon="el-icon-delete"
                   @click="batchDelete"
                 >
                   {{ $t("modelConfig.delete") }}
-                </el-button>
+                </CustomButton>
-              </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>
               </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;