feat: 完成字段管理页面样式改造

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

@@ -1,56 +1,54 @@
 <template>
-  <el-dialog :visible="visible" :close-on-click-modal="false" @update:visible="handleVisibleChange" width="57%" center custom-class="custom-dialog"
+  <CustomDialog
-    :show-close="false" class="center-dialog">
+    :title="title"
-
+    :visible.sync="visible"
-    <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
+    width="57%"
-      <div style="font-size: 30px; color: #3d4566; margin-top: -15px; margin-bottom: 20px; text-align: center;">
+    class="provider-dialog-wrapper"
-        {{ title }}
+    @confirm="submit"
-      </div>
+    @close="handleClose"
-
+    :confirmLoading="saving"
-      <button class="custom-close-btn" @click="handleClose">×</button>
+  >
-
+    <div class="dialog-container">
-      <el-form :model="form" label-width="auto" :rules="rules" ref="form" class="custom-form">
+      <el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left" class="provider-form">
-        <div style="display: flex; gap: 20px; margin-bottom: 20px;">
+        <div class="form-row">
-          <el-form-item :label="$t('providerDialog.category')" prop="modelType" style="flex: 1;">
+          <el-form-item :label="$t('providerDialog.category')" prop="modelType" class="form-item">
-            <el-select v-model="form.modelType" :placeholder="$t('providerDialog.selectCategory')" class="custom-input-bg" style="width: 100%;">
+            <el-select v-model="form.modelType" :placeholder="$t('providerDialog.selectCategory')" class="custom-select">
               <el-option v-for="item in modelTypes" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
           </el-form-item>
 
-          <el-form-item :label="$t('providerDialog.code')" prop="providerCode" style="flex: 1;">
+          <el-form-item :label="$t('providerDialog.code')" prop="providerCode" class="form-item">
-            <el-input v-model="form.providerCode" :placeholder="$t('providerDialog.inputCode')" class="custom-input-bg"></el-input>
+            <el-input v-model="form.providerCode" :placeholder="$t('providerDialog.inputCode')" class="custom-input"></el-input>
           </el-form-item>
         </div>
 
-        <div style="display: flex; gap: 20px; margin-bottom: 20px;">
+        <div class="form-row">
-          <el-form-item :label="$t('providerDialog.name')" prop="name" style="flex: 1;">
+          <el-form-item :label="$t('providerDialog.name')" prop="name" class="form-item">
-            <el-input v-model="form.name" :placeholder="$t('providerDialog.inputName')" class="custom-input-bg"></el-input>
+            <el-input v-model="form.name" :placeholder="$t('providerDialog.inputName')" class="custom-input"></el-input>
           </el-form-item>
-          <el-form-item :label="$t('providerDialog.sort')" prop="sort" style="flex: 1;">
+          <el-form-item :label="$t('providerDialog.sort')" prop="sort" class="form-item">
-            <el-input-number v-model="form.sort" :min="0" controls-position="right" class="custom-input-bg"
+            <el-input-number v-model="form.sort" :min="0" controls-position="right" class="custom-input-number"
               style="width: 100%;"></el-input-number>
           </el-form-item>
         </div>
 
-        <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">
+        <div class="field-config-header">
-          {{ $t('providerDialog.fieldConfig') }}
+          <span class="field-config-title">{{ $t('providerDialog.fieldConfig') }}</span>
-          <div style="display: inline-block; float: right;">
+          <div class="field-config-actions">
-            <el-button type="primary" @click="addField" size="small" style="background: #5bc98c; border: none;"
+            <el-button type="primary" @click="addField" size="small" class="btn-add"
               :disabled="hasIncompleteFields">
               {{ $t('providerDialog.add') }}
             </el-button>
-            <el-button type="primary" @click="toggleSelectAllFields" size="small"
+            <el-button type="primary" @click="toggleSelectAllFields" size="small" class="btn-select-all">
-              style="background: #5f70f3; border: none; margin-left: 10px;">
               {{ isAllFieldsSelected ? $t('providerDialog.deselectAll') : $t('providerDialog.selectAll') }}
             </el-button>
-            <el-button type="danger" @click="batchRemoveFields" size="small"
+            <el-button type="danger" @click="batchRemoveFields" size="small" class="btn-batch-delete">
-              style="background: red; border: none; margin-left: 10px;">
               {{ $t('providerDialog.batchDelete') }}
             </el-button>
           </div>
         </div>
-        <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
+        <div class="divider"></div>
 
         <div class="fields-container">
           <el-table :data="form.fields" style="width: 100%;" border size="medium" :key="tableKey">
@@ -122,26 +120,27 @@
         </div>
       </el-form>
     </div>
-
+  </CustomDialog>
-    <div style="display: flex; justify-content: center;">
-      <el-button type="primary" @click="submit" class="save-btn" :loading="saving">{{ $t('providerDialog.save') }}</el-button>
-    </div>
-  </el-dialog>
 </template>
 
 <script>
+import CustomDialog from './CustomDialog.vue';
 export default {
+  name: 'ProviderDialog',
   props: {
     title: String,
     visible: Boolean,
     form: Object,
     modelTypes: Array
   },
+  components: {
+    CustomDialog
+  },
   data() {
     return {
       saving: false,
       isAllFieldsSelected: false,
-      tableKey: 0 // 用于强制表格重新渲染
+      tableKey: 0
     };
   },
   computed: {
@@ -199,16 +198,8 @@ export default {
       }));
     },
 
-    handleVisibleChange(val) {
-      this.$emit('update:visible', val);
-      if (!val) {
-        this.resetForm();
-      }
-    },
-
     handleClose() {
       this.resetForm();
-      this.$emit('update:visible', false);
       this.$emit('cancel');
     },
 
@@ -288,7 +279,7 @@ export default {
     },
 
     forceTableRerender() {
-      this.tableKey += 1; // 改变key值强制表格重新渲染
+      this.tableKey += 1;
     },
 
     submit() {
@@ -331,8 +322,7 @@ export default {
       }
       this.isAllFieldsSelected = false;
       this.forceTableRerender();
-    },
+    }
-
   },
   watch: {
     visible(val) {
@@ -344,97 +334,40 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-::v-deep .custom-dialog.el-dialog {
+.provider-dialog-wrapper {
-  margin-top: 0 !important;
+  .provider-form {
-  border-radius: 20px !important;
+    .form-row {
-}
+      display: flex;
-
+      gap: 20px;
-::v-deep .custom-dialog .el-dialog__header {
+      margin-bottom: 20px;
-  padding: 0;
+    }
-  border-bottom: none;
+    .form-item {
-}
+      flex: 1;
-
+      margin-bottom: 0;
-.custom-close-btn {
+    }
-  position: absolute;
+    .custom-select {
-  top: 20px;
+      width: 100%;
-  right: 20px;
+    }
-  width: 35px;
+    .custom-input-number {
-  height: 35px;
+      width: 100%;
-  border-radius: 50%;
+    }
-  border: 2px solid #cfcfcf;
+  }
-  background: none;
+  .field-config-header {
-  font-size: 30px;
+    display: flex;
-  font-weight: lighter;
+    align-items: center;
-  color: #cfcfcf;
+    justify-content: space-between;
-  cursor: pointer;
+    margin-bottom: 15px;
-  display: flex;
+    .field-config-title {
-  align-items: center;
+      font-size: 16px;
-  justify-content: center;
+      font-weight: 600;
-  z-index: 1;
+      color: #3d4566;
-  padding: 0;
+    }
-  outline: none;
+  }
-}
+  .divider {
-
+    height: 2px;
-.custom-close-btn:hover {
+    background: #e9e9e9;
-  color: #409EFF;
+    margin-bottom: 22px;
-  border-color: #409EFF;
+  }
-}
-
-.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;
-}
-
-.custom-input-bg .el-input__inner {
-  background-color: #f6f8fc;
-  height: 32px;
-}
-
-.custom-input-bg .el-input__inner::-webkit-input-placeholder {
-  color: #9c9f9e;
-}
-
-.fields-container {
-  margin-bottom: 20px;
-}
-
-.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;
-}
-
-.el-table {
-  border-radius: 4px;
-}
-
-.el-table::before {
-  display: none;
-}
-
-.el-table th,
-.el-table td {
-  padding: 8px 0;
-}
-
-.el-button.is-circle {
-  border-radius: 2px;
 }
 </style>

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

@@ -1,49 +1,20 @@
 <template>
   <div class="welcome">
     <HeaderBar />
-
-    <div class="operation-bar">
-      <h2 class="page-title">{{ $t('header.providerManagement') }}</h2>
-      <div class="right-operations">
-        <el-dropdown trigger="click" @command="handleSelectModelType" @visible-change="handleDropdownVisibleChange">
-          <el-button class="category-btn">
-            {{ $t('providerManagement.categoryFilter') }} {{ selectedModelTypeLabel }}<i class="el-icon-arrow-down el-icon--right"
-              :class="{ 'rotate-down': DropdownVisible }"></i>
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="">{{ $t('common.all') }}</el-dropdown-item>
-            <el-dropdown-item v-for="item in translatedModelTypes" :key="item.value" :command="item.value">
-              {{ item.label }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-input :placeholder="$t('providerManagement.searchPlaceholder')" v-model="searchName" class="search-input" @keyup.enter.native="handleSearch"
-          clearable />
-        <el-button class="btn-search" @click="handleSearch">{{ $t('common.search') }}</el-button>
-      </div>
-    </div>
-
     <div class="main-wrapper">
       <div class="content-panel">
         <div class="content-area">
           <el-card class="provider-card" shadow="never">
-            <el-table ref="providersTable" :data="filteredProvidersList" class="transparent-table" v-loading="loading"
+            <div class="operation-header">
-              element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+              <h2 class="page-title">{{ $t('header.providerManagement') }}</h2>
-              element-loading-background="rgba(255, 255, 255, 0.7)" :header-cell-class-name="headerCellClassName">
+              <div class="right-operations">
-              <el-table-column :label="$t('modelConfig.select')" align="center" width="120">
+                <el-input :placeholder="$t('providerManagement.searchPlaceholder')" v-model="searchName" class="search-input"
-                <template slot-scope="scope">
+                  @keyup.enter.native="handleSearch" clearable />
-                  <el-checkbox v-model="scope.row.selected"></el-checkbox>
+                  <el-dropdown trigger="click" @command="handleSelectModelType" @visible-change="handleDropdownVisibleChange">
-                </template>
+                    <CustomButton>
-              </el-table-column>
+                      {{ $t('providerManagement.categoryFilter') }}{{ selectedModelTypeLabel }}<i class="el-icon-arrow-down el-icon--right"
-
+                        :class="{ 'rotate-down': DropdownVisible }"></i>
-              <el-table-column :label="$t('providerManagement.category')" prop="modelType" align="center" width="200">
+                    </CustomButton>
-                <template slot="header" slot-scope="scope">
-                  <el-dropdown trigger="click" @command="handleSelectModelType"
-                    @visible-change="isDropdownOpen = $event">
-                    <span class="dropdown-trigger" :class="{ 'active': isDropdownOpen }">
-                      {{ $t('providerManagement.category') }}{{ selectedModelTypeLabel }} <i class="dropdown-arrow"
-                        :class="{ 'is-active': isDropdownOpen }"></i>
-                    </span>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item command="">{{ $t('common.all') }}</el-dropdown-item>
                       <el-dropdown-item v-for="item in translatedModelTypes" :key="item.value" :command="item.value">
@@ -51,66 +22,60 @@
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
-                </template>
+                <CustomButton icon="el-icon-search" type="confirm" @click="handleSearch">{{ $t('common.search') }}</CustomButton>
-                <template slot-scope="scope">
-                  <el-tag :type="getModelTypeTag(scope.row.modelType)">
-                    {{ getModelTypeLabel(scope.row.modelType) }}
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('providerManagement.providerCode')" prop="providerCode" align="center" width="150"></el-table-column>
-              <el-table-column :label="$t('common.name')" prop="name" align="center"></el-table-column>
-              <el-table-column :label="$t('providerManagement.fieldConfig')" align="center">
-                <template slot-scope="scope">
-                  <el-popover placement="top-start" width="400" trigger="hover">
-                    <div v-for="field in scope.row.fields" :key="field.key" class="field-item">
-                      <span class="field-label">{{ field.label }}:</span>
-                      <span class="field-type">{{ field.type }}</span>
-                      <span v-if="isSensitiveField(field.key)" class="sensitive-tag">{{ $t('common.sensitive') }}</span>
-                    </div>
-                    <el-button slot="reference" size="mini" type="text">{{ $t('providerManagement.viewFields') }}</el-button>
-                  </el-popover>
-                </template>
-              </el-table-column>
-              <el-table-column :label="$t('common.sort')" prop="sort" align="center" width="80"></el-table-column>
-              <el-table-column :label="$t('common.action')" align="center" width="180">
-                <template slot-scope="scope">
-                  <el-button size="mini" type="text" @click="editProvider(scope.row)">{{ $t('common.edit') }}</el-button>
-                  <el-button size="mini" type="text" @click="deleteProvider(scope.row)">{{ $t('common.delete') }}</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <div class="table_bottom">
-              <div class="ctrl_btn">
-                <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">
-                  {{ isAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
-                </el-button>
-                <el-button size="mini" type="success" @click="showAddDialog">{{ $t('common.add') }}</el-button>
-                <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelectedProviders">{{ $t('common.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('common.perPage', { number: item })" :value="item">
-                  </el-option>
-                </el-select>
-                <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
-                  {{ $t('common.firstPage') }}
-                </button>
-                <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">
-                  {{ $t('common.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('common.nextPage') }}
-                </button>
-                <span class="total-text">{{ $t('common.totalRecords', { number: total }) }}</span>
               </div>
             </div>
+            <CustomTable
+              ref="providersTable"
+              :data="filteredProvidersList"
+              :columns="tableColumns"
+              :loading="loading"
+              :show-selection="true"
+              :show-operations="true"
+              :operations-label="$t('common.action')"
+              :total="total"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :page-size-options="pageSizeOptions"
+              @size-change="handlePageSizeChange"
+              @page-change="goToPage"
+            >
+              <template slot="selection" slot-scope="scope">
+                <el-checkbox v-model="scope.row.selected"></el-checkbox>
+              </template>
+              <template slot="modelType" slot-scope="scope">
+                <el-tag :type="getModelTypeTag(scope.row.modelType)">
+                  {{ getModelTypeLabel(scope.row.modelType) }}
+                </el-tag>
+              </template>
+              <template slot="fields" slot-scope="scope">
+                <el-popover placement="top-start" width="400" trigger="hover">
+                  <div v-for="field in scope.row.fields" :key="field.key" class="field-item">
+                    <span class="field-label">{{ field.label }}:</span>
+                    <span class="field-type">{{ field.type }}</span>
+                    <span v-if="isSensitiveField(field.key)" class="sensitive-tag">{{ $t('common.sensitive') }}</span>
+                  </div>
+                  <el-button slot="reference" size="mini" type="text">{{ $t('providerManagement.viewFields') }}</el-button>
+                </el-popover>
+              </template>
+              <template slot="operations" slot-scope="scope">
+                <el-button size="mini" type="text" @click="editProvider(scope.row)">{{ $t('common.edit') }}</el-button>
+                <el-button size="mini" type="text" @click="deleteProvider(scope.row)">{{ $t('common.delete') }}</el-button>
+              </template>
+              <template slot="footer-btns">
+                <div class="ctrl_btn">
+                  <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">
+                    {{ $t('common.add') }}
+                  </CustomButton>
+                  <CustomButton size="small" type="delete" icon="el-icon-delete" @click="deleteSelectedProviders">
+                    {{ $t('common.delete') }}
+                  </CustomButton>
+                </div>
+              </template>
+            </CustomTable>
           </el-card>
         </div>
       </div>
@@ -131,9 +96,11 @@ import Api from "@/apis/api";
 import HeaderBar from "@/components/HeaderBar.vue";
 import ProviderDialog from "@/components/ProviderDialog.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
+import CustomButton from "@/components/CustomButton.vue";
+import CustomTable from "@/components/CustomTable.vue";
 
 export default {
-  components: { HeaderBar, ProviderDialog, VersionFooter },
+  components: { HeaderBar, ProviderDialog, VersionFooter, CustomButton, CustomTable },
   data() {
     return {
       searchName: "",
@@ -158,7 +125,7 @@ export default {
       dialogVisible: false,
       dialogTitle: "新增供应器",
       isAllSelected: false,
-      isDropdownOpen: false,
+      DropdownVisible: false,
       sensitive_keys: ["api_key", "personal_access_token", "access_token", "token", "secret", "access_key_secret", "secret_key"],
       providerForm: {
         id: null,
@@ -168,10 +135,11 @@ export default {
         fields: [],
         sort: 0
       },
-      DropdownVisible: false,
+      tableColumns: []
     };
   },
   created() {
+    this.initTableColumns();
     this.fetchProviders();
   },
   computed: {
@@ -186,41 +154,43 @@ export default {
       const selectedType = this.modelTypes.find(item => item.value === this.searchModelType);
       return selectedType ? `（${this.$t(selectedType.labelKey)}）` : "";
     },
-    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;
-    },
     filteredProvidersList() {
       return this.providersList;
-
-      // let list = this.providersList.filter(item => {
-      //   const nameMatch = item.name.toLowerCase().includes(this.searchName.toLowerCase());
-      //   const typeMatch = !this.searchModelType || item.model_type === this.searchModelType;
-      //   return nameMatch && typeMatch;
-      // });
-
-      // list.sort((a, b) => a.sort - b.sort);
-
-      // // 分页处理
-      // const start = (this.currentPage - 1) * this.pageSize;
-      // return list.slice(start, start + this.pageSize);
     }
   },
   methods: {
+    initTableColumns() {
+      this.tableColumns = [
+        {
+          prop: 'modelType',
+          label: this.$t('providerManagement.category'),
+          align: 'center',
+          width: 200
+        },
+        {
+          prop: 'providerCode',
+          label: this.$t('providerManagement.providerCode'),
+          align: 'center',
+          width: 150
+        },
+        {
+          prop: 'name',
+          label: this.$t('common.name'),
+          align: 'center'
+        },
+        {
+          prop: 'fields',
+          label: this.$t('providerManagement.fieldConfig'),
+          align: 'center'
+        },
+        {
+          prop: 'sort',
+          label: this.$t('common.sort'),
+          align: 'center',
+          width: 80
+        }
+      ];
+    },
     fetchProviders() {
       this.loading = true;
 
@@ -255,7 +225,6 @@ export default {
       this.fetchProviders();
     },
     handleSelectModelType(value) {
-      this.isDropdownOpen = false;
       this.searchModelType = value;
       this.handleSearch();
     },
@@ -288,26 +257,23 @@ export default {
     handleSubmit({ form, done }) {
       this.loading = true;
       if (form.id) {
-        // 编辑
         Api.model.updateModelProvider(form, ({ data }) => {
-
           if (data.code === 0) {
-            this.fetchProviders(); // 刷新表格
+            this.fetchProviders();
             this.$message.success({
-            message: this.$t('common.updateSuccess'),
+              message: this.$t('common.updateSuccess'),
-            showClose: true
+              showClose: true
-          });
+            });
           }
         });
       } else {
-        // 新增
         Api.model.addModelProvider(form, ({ data }) => {
           if (data.code === 0) {
-            this.fetchProviders(); // 刷新表格
+            this.fetchProviders();
             this.$message.success({
-            message: this.$t('common.addSuccess'),
+              message: this.$t('common.addSuccess'),
-            showClose: true
+              showClose: true
-          });
+            });
             this.total += 1;
           }
         });
@@ -339,10 +305,8 @@ export default {
         const ids = providers.map(provider => provider.id);
         Api.model.deleteModelProviderByIds(ids, ({ data }) => {
           if (data.code === 0) {
-
             this.isAllSelected = false;
-            this.fetchProviders(); // 刷新表格
+            this.fetchProviders();
-
             this.$message.success({
               message: this.$t('common.deleteSuccess'),
               showClose: true
@@ -390,57 +354,16 @@ export default {
       this.currentPage = 1;
       this.fetchProviders();
     },
-    headerCellClassName({ columnIndex }) {
-      if (columnIndex === 0) {
-        return "custom-selection-header";
-      }
-      return "";
-    },
-    selectionCellClassName() {
-      return "custom-selection-cell";
-    },
-    updateSelectionHeaderText() {
-      // 确保表格已渲染
-      this.$nextTick(() => {
-        if (this.$refs.providersTable && this.$refs.providersTable.$el) {
-          const headerCheckbox = this.$refs.providersTable.$el.querySelector('.custom-selection-header .el-checkbox .el-checkbox__label');
-          if (headerCheckbox) {
-            headerCheckbox.textContent = this.$t('modelConfig.select');
-          }
-        }
-      });
-    },
-    mounted() {
-      this.updateSelectionHeaderText();
-    },
-    updated() {
-      this.updateSelectionHeaderText();
-    },
-    goFirst() {
-      this.currentPage = 1;
-      this.fetchProviders();
-    },
-    goPrev() {
-      if (this.currentPage > 1) {
-        this.currentPage--;
-        this.fetchProviders();
-      }
-    },
-    goNext() {
-      if (this.currentPage < this.pageCount) {
-        console.log("this.currentPage", this.currentPage);
-        this.currentPage++;
-        this.fetchProviders();
-      }
-    },
     goToPage(page) {
-      this.currentPage = page;
+      if (page !== this.currentPage) {
-      this.fetchProviders();
+        this.currentPage = page;
+        this.fetchProviders();
+      }
     },
     handleDropdownVisibleChange(visible) {
       this.DropdownVisible = visible;
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -460,25 +383,24 @@ export default {
 }
 
 .main-wrapper {
-  // 顶部 63px 底部 35px 查询72px
+  // 顶部 63px 底部 35px
-  height: calc(100vh - 63px - 35px - 72px);
+  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 {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 16px 24px;
+  justify-content: space-between;
+  padding: 0 0 16px 0;
 }
 
 .page-title {
+  font-weight: 500;
   font-size: 24px;
   margin: 0;
 }
@@ -487,20 +409,14 @@ export default {
   display: flex;
   gap: 10px;
   margin-left: auto;
+  align-items: center;
 }
 
 .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%;
@@ -519,20 +435,17 @@ export default {
   flex-direction: column;
 }
 
-.el-card {
-  border: none;
-}
-
 .provider-card {
   background: white;
   flex: 1;
   display: flex;
   flex-direction: column;
+  border: none;
   box-shadow: none;
   overflow: hidden;
 
   ::v-deep .el-card__body {
-    padding: 15px;
+    padding: 14px 20px;
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -540,284 +453,8 @@ export default {
   }
 }
 
-.table_bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 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) {
-  color: #7079aa;
-}
-
-: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;
 }
 
 .field-item {
@@ -843,40 +480,6 @@ export default {
   }
 }
 
-.dropdown-trigger {
-  font-size: 14px;
-  color: #303133;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #409EFF;
-  }
-}
-
-.dropdown-trigger.active {
-  color: #409EFF;
-}
-
-.dropdown-arrow {
-  display: inline-block;
-  margin-left: 5px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid black;
-  position: relative;
-  transition: transform 0.3s ease;
-  transform: rotate(0deg);
-
-  &.is-active {
-    transform: rotate(180deg);
-    border-top-color: #409EFF;
-  }
-}
-
 .rotate-down {
   transform: rotate(180deg);
   transition: transform 0.3s ease;
@@ -886,41 +489,11 @@ export default {
   transition: transform 0.3s ease;
 }
 
-.dropdown-trigger {
+:deep(.el-table .el-button--text) {
-  font-size: 14px;
+  color: #7079aa;
-  color: #303133;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #409EFF;
-  }
 }
 
-.dropdown-trigger.active {
+:deep(.el-table .el-button--text:hover) {
-  color: #409EFF;
+  color: #5a64b5;
-}
-
-/* 确保选择列标题样式正确 */
-.custom-selection-header {
-  position: relative;
-}
-
-:deep(.custom-selection-header .el-checkbox) {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-}
-
-:deep(.custom-selection-header .el-checkbox__label) {
-  position: relative;
-  white-space: nowrap;
-}
-
-:deep(.custom-selection-cell) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 </style>