删除多余样式

main/manager-web/src/i18n/en.js

@@ -881,7 +881,12 @@ export default {
   'templateQuickConfig.templateNotFound': 'Template not found',
   'templateQuickConfig.fetchTemplateFailed': 'Failed to fetch template',
   'templateQuickConfig.fetchTemplateBackendError': 'Failed to fetch template, please check if the backend service is normal',
-    'warning': 'Warning',
+  'warning': 'Warning',
-    'info': 'Info'
+  'info': 'Info',
-  }
+  
-;
+  // agentTemplateManagement error handling
+  'agentTemplateManagement.invalidResponse': 'Invalid response object:',
+  'agentTemplateManagement.apiCallFailed': 'API call failed:',
+  'agentTemplateManagement.apiCallException': 'Exception occurred when calling API:',
+  'common.networkError': 'Network request failed'
+}

main/manager-web/src/i18n/zh_CN.js

@@ -878,5 +878,11 @@ export default {
   'templateQuickConfig.fetchTemplateFailed': '获取模板失败',
   'templateQuickConfig.fetchTemplateBackendError': '获取模板失败，请检查后端服务是否正常',
   'warning': '警告',
-  'info': '提示'
+  'info': '提示',
+
+// 在agentTemplateManagement部分添加以下内容
+  'agentTemplateManagement.invalidResponse': '无效的响应对象:',
+  'agentTemplateManagement.apiCallFailed': 'API调用失败:',
+  'agentTemplateManagement.apiCallException': '调用API时发生异常:',
+  'common.networkError': '网络请求失败'
 }

main/manager-web/src/i18n/zh_TW.js

@@ -883,5 +883,11 @@ export default {
   'templateQuickConfig.fetchTemplateBackendError': '獲取模板失敗，請檢查後端服務是否正常',
   'error': '錯誤',
   'warning': '警告',
-  'info': '提示'
+  'info': '提示',
+  
+  // agentTemplateManagement錯誤處理相關
+  'agentTemplateManagement.invalidResponse': '無效的回應物件:',
+  'agentTemplateManagement.apiCallFailed': 'API調用失敗:',
+  'agentTemplateManagement.apiCallException': '調用API時發生異常:',
+  'common.networkError': '網路請求失敗'
 }

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

@@ -1,14 +1,20 @@
 <template>
   <div class="welcome">
-    <HeaderBar />    
+    <HeaderBar />
 
     <div class="operation-bar">
-      <h2 class="page-title">{{ $t('agentTemplateManagement.title') }}</h2>
+      <h2 class="page-title">{{ $t("agentTemplateManagement.title") }}</h2>
       <div class="right-operations">
-        <el-input :placeholder="$t('agentTemplateManagement.searchPlaceholder')" v-model="search" class="search-input" clearable
+        <el-input
-          @keyup.enter.native="handleSearch" style="width: 240px" />
+          :placeholder="$t('agentTemplateManagement.searchPlaceholder')"
+          v-model="search"
+          class="search-input"
+          clearable
+          @keyup.enter.native="handleSearch"
+          style="width: 240px"
+        />
         <el-button class="btn-search" @click="handleSearch">
-          {{ $t('agentTemplateManagement.search') }}
+          {{ $t("agentTemplateManagement.search") }}
         </el-button>
       </div>
     </div>
@@ -18,53 +24,99 @@
       <div class="content-panel">
         <div class="content-area">
           <el-card class="template-card" shadow="never">
-            
+            <el-table
-            
+              ref="templateTable"
-            <el-table ref="templateTable" :data="templateList" style="width: 100%" v-loading="templateLoading"
+              :data="templateList"
-              :element-loading-text="$t('agentTemplateManagement.loading')" element-loading-spinner="el-icon-loading"
+              style="width: 100%"
+              v-loading="templateLoading"
+              :element-loading-text="$t('agentTemplateManagement.loading')"
+              element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255, 255, 255, 0.7)"
-              class="transparent-table" :header-cell-style="{padding: '10px 20px'}" :cell-style="{padding: '10px 20px'}"> <!-- 移除@row-click="handleRowClick" -->
+              class="transparent-table"
+              :header-cell-style="{ padding: '10px 20px' }"
+              :cell-style="{ padding: '10px 20px' }"
+            >
+              <!-- 移除@row-click="handleRowClick" -->
               <!-- 自定义选择列，实现表头是"选择"文字，数据行是小方框 -->
-              <el-table-column :label="$t('agentTemplateManagement.select')" align="center" min-width="100">
+              <el-table-column
+                :label="$t('agentTemplateManagement.select')"
+                align="center"
+                min-width="100"
+              >
                 <template slot-scope="scope">
-                  <el-checkbox v-model="scope.row.selected" @change="handleRowSelectionChange(scope.row)" @click.stop></el-checkbox>
+                  <el-checkbox
+                    v-model="scope.row.selected"
+                    @change="handleRowSelectionChange(scope.row)"
+                    @click.stop
+                  ></el-checkbox>
                 </template>
               </el-table-column>
               <!-- 模板名称 -->
-              <el-table-column :label="$t('agentTemplateManagement.templateName')" prop="agentName" min-width="250" show-overflow-tooltip>
+              <el-table-column
+                :label="$t('agentTemplateManagement.templateName')"
+                prop="agentName"
+                min-width="250"
+                show-overflow-tooltip
+              >
                 <template slot-scope="scope">
                   <span>{{ scope.row.agentName }}</span>
                 </template>
               </el-table-column>
               <!-- 修改为序号列，并移动到此处 -->
-              <el-table-column :label="$t('agentTemplateManagement.serialNumber')" min-width="120" align="center">
+              <el-table-column
+                :label="$t('agentTemplateManagement.serialNumber')"
+                min-width="120"
+                align="center"
+              >
                 <template slot-scope="scope">
                   <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                 </template>
               </el-table-column>
               <!-- 操作列 -->
-              <el-table-column :label="$t('agentTemplateManagement.action')" min-width="250" align="center">
+              <el-table-column
+                :label="$t('agentTemplateManagement.action')"
+                min-width="250"
+                align="center"
+              >
                 <template slot-scope="scope">
-                  <div style="display: flex; justify-content: center; gap: 15px;">
+                  <div style="display: flex; justify-content: center; gap: 15px">
-                    <el-button type="text" @click="editTemplate(scope.row)">{{ $t('agentTemplateManagement.editTemplate') }}</el-button>
+                    <el-button type="text" @click="editTemplate(scope.row)">{{
+                      $t("agentTemplateManagement.editTemplate")
+                    }}</el-button>
                     <!-- 修复：调用正确的方法名 -->
-                    <el-button type="text" @click="deleteTemplate(scope.row)">{{ $t('agentTemplateManagement.deleteTemplate') }}</el-button>
+                    <el-button type="text" @click="deleteTemplate(scope.row)">{{
+                      $t("agentTemplateManagement.deleteTemplate")
+                    }}</el-button>
                   </div>
                 </template>
               </el-table-column>
             </el-table>
-            
+
             <!-- 表格底部操作栏 -->
             <div class="table_bottom">
               <div class="ctrl_btn">
-                <el-button type="primary" @click="handleSelectAll" size="mini" class="select-all-btn">
+                <el-button
-                  {{ isAllSelected ? $t('agentTemplateManagement.deselectAll') : $t('agentTemplateManagement.selectAll') }}
+                  type="primary"
+                  @click="handleSelectAll"
+                  size="mini"
+                  class="select-all-btn"
+                >
+                  {{
+                    isAllSelected
+                      ? $t("agentTemplateManagement.deselectAll")
+                      : $t("agentTemplateManagement.selectAll")
+                  }}
                 </el-button>
                 <el-button type="success" @click="handleCreate" size="mini">
-                  {{ $t('agentTemplateManagement.createTemplate') }}
+                  {{ $t("agentTemplateManagement.createTemplate") }}
                 </el-button>
-                <el-button type="danger" @click="batchDeleteTemplate" :disabled="!hasSelected" size="mini">
+                <el-button
-                  {{ $t('agentTemplateManagement.batchDelete') }}
+                  type="danger"
+                  @click="batchDeleteTemplate"
+                  :disabled="!hasSelected"
+                  size="mini"
+                >
+                  {{ $t("agentTemplateManagement.batchDelete") }}
                 </el-button>
               </div>
 
@@ -85,20 +137,19 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-import HeaderBar from '@/components/HeaderBar';
+import HeaderBar from "@/components/HeaderBar";
-import agentApi from '@/apis/module/agent';
+import agentApi from "@/apis/module/agent";
 
 export default {
-  name: 'AgentTemplateManagement',
+  name: "AgentTemplateManagement",
   components: {
-    HeaderBar
+    HeaderBar,
   },
- 
+
   // 1. 首先确保在 data 部分添加了 isAllSelected 状态
   data() {
     return {
@@ -107,93 +158,106 @@ export default {
       templateLoading: false,
       selectedTemplates: [],
       isAllSelected: false, // 添加全选状态
-      
+
-      search: '',
+      search: "",
       // 分页相关数据
       pageSizeOptions: [10, 20, 50, 100],
       currentPage: 1,
       pageSize: 10,
-      total: 0
+      total: 0,
-    }
+    };
   },
   created() {
-    this.loadTemplateList()
+    this.loadTemplateList();
   },
   // 在computed部分添加hasSelected属性
   computed: {
-      pageCount() {
+    pageCount() {
-        return Math.ceil(this.total / this.pageSize)
+      return Math.ceil(this.total / this.pageSize);
-      },
-      visiblePages() {
-        return this.getVisiblePages()
-      },
-      hasSelected() {
-        return this.selectedTemplates.length > 0
-      }
     },
+    visiblePages() {
+      return this.getVisiblePages();
+    },
+    hasSelected() {
+      return this.selectedTemplates.length > 0;
+    },
+  },
   methods: {
     // 加载模板列表
     // 改进loadTemplateList方法的错误处理逻辑
     loadTemplateList() {
-      this.templateLoading = true
+      this.templateLoading = true;
       const params = {
         page: this.currentPage,
-        limit: this.pageSize
+        limit: this.pageSize,
-      }
+      };
       if (this.search) {
-        params.agentName = this.search
+        params.agentName = this.search;
       }
-      
+
       try {
-        agentApi.getAgentTemplatesPage(params, (res) => {
+        agentApi.getAgentTemplatesPage(
-          // 更健壮的响应处理逻辑
+          params,
-          if (res && typeof res === 'object') {
+          (res) => {
-            if (res.data && res.data.code === 0) {
+            // 更健壮的响应处理逻辑
-              const responseData = res.data.data || {}
+            if (res && typeof res === "object") {
-              // 为每个模板添加selected属性
+              if (res.data && res.data.code === 0) {
-              this.templateList = Array.isArray(responseData.list) ? 
+                const responseData = res.data.data || {};
-                responseData.list.map(item => ({ ...item, selected: false })) : []
+                // 为每个模板添加selected属性
-              this.total = typeof responseData.total === 'number' ? responseData.total : 0
+                this.templateList = Array.isArray(responseData.list)
+                  ? responseData.list.map((item) => ({ ...item, selected: false }))
+                  : [];
+                this.total =
+                  typeof responseData.total === "number" ? responseData.total : 0;
+              } else {
+                console.error(
+                  this.$t("agentTemplateManagement.fetchTemplateFailed"),
+                  res
+                );
+                this.templateList = [];
+                this.total = 0;
+                this.$message.error(
+                  res?.data?.msg || this.$t("agentTemplateManagement.fetchTemplateFailed")
+                );
+              }
             } else {
-              console.error('获取模板列表失败:', res)
+              console.error(this.$t("agentTemplateManagement.invalidResponse"), res);
-              this.templateList = []
+              this.templateList = [];
-              this.total = 0
+              this.total = 0;
-              this.$message.error(res?.data?.msg || '获取模板列表失败')
+              this.$message.error(
+                this.$t("agentTemplateManagement.fetchTemplateBackendError")
+              );
             }
-          } else {
+            this.templateLoading = false;
-            console.error('无效的响应对象:', res)
+          },
-            this.templateList = []
+          (error) => {
-            this.total = 0
+            console.error(this.$t("agentTemplateManagement.apiCallFailed"), error);
-            this.$message.error('获取模板列表失败')
+            this.templateList = [];
+            this.total = 0;
+            this.templateLoading = false;
+            this.$message.error(this.$t("common.networkError"));
           }
-          this.templateLoading = false
+        );
-        }, (error) => {
-          console.error('API调用失败:', error)
-          this.templateList = []
-          this.total = 0
-          this.templateLoading = false
-          this.$message.error('网络请求失败')
-        })
       } catch (error) {
-        console.error('调用API时发生异常:', error)
+        console.error(this.$t("agentTemplateManagement.apiCallException"), error);
-        this.templateList = []
+        this.templateList = [];
-        this.total = 0
+        this.total = 0;
-        this.templateLoading = false
+        this.templateLoading = false;
-        this.$message.error('加载模板列表时发生错误')
+        this.$message.error(this.$t("agentTemplateManagement.fetchTemplateBackendError"));
       }
     },
 
     // 搜索模板
     handleSearch() {
       if (this.search) {
-        const searchValue = this.search.toLowerCase()
+        const searchValue = this.search.toLowerCase();
-        const filteredList = this.templateList.filter(template => 
+        const filteredList = this.templateList.filter((template) =>
           template.agentName.toLowerCase().includes(searchValue)
-        )
+        );
-        this.templateList = filteredList
+        this.templateList = filteredList;
-        this.total = filteredList.length
+        this.total = filteredList.length;
       } else {
-        this.loadTemplateList()
+        this.loadTemplateList();
       }
     },
 
@@ -202,222 +266,225 @@ export default {
     showAddTemplateDialog() {
       // 跳转到模板快速配置页面，不传递templateId参数表示新增
       this.$router.push({
-        path: '/template-quick-config'
+        path: "/template-quick-config",
-      })
+      });
     },
-    
+
     // 添加handleCreate方法，与模板中绑定的按钮保持一致
     handleCreate() {
       this.showAddTemplateDialog();
     },
-    
+
     // 保留原有的editTemplate方法
     // 编辑模板
     editTemplate(row) {
       // 跳转到模板快速配置页面，并传递模板ID参数
       this.$router.push({
-        path: '/template-quick-config',
+        path: "/template-quick-config",
-        query: { templateId: row.id }
+        query: { templateId: row.id },
-      })
+      });
     },
 
     // 删除模板
     deleteTemplate(row) {
-      this.$confirm(this.$t('agentTemplateManagement.confirmSingleDelete'), this.$t('common.warning'), {
+      this.$confirm(
-        confirmButtonText: this.$t('common.confirm'),
+        this.$t("agentTemplateManagement.confirmSingleDelete"),
-        cancelButtonText: this.$t('common.cancel'),
+        this.$t("common.warning"),
-        type: 'warning'
+        {
-      }).then(() => {
+          confirmButtonText: this.$t("common.confirm"),
-        agentApi.deleteAgentTemplate(row.id, (res) => {
+          cancelButtonText: this.$t("common.cancel"),
-          // 添加调试日志
+          type: "warning",
-          console.log('删除模板响应:', res);
+        }
-          
+      )
-          if (res && typeof res === 'object') {
+        .then(() => {
-            // 检查res.data是否存在且包含code=0
+          agentApi.deleteAgentTemplate(row.id, (res) => {
-            if (res.data && res.data.code === 0) {
+            // 添加调试日志
-              this.$message.success(this.$t('agentTemplateManagement.deleteSuccess'))
+            console.log("删除模板响应:", res);
-              this.loadTemplateList()
+
+            if (res && typeof res === "object") {
+              // 检查res.data是否存在且包含code=0
+              if (res.data && res.data.code === 0) {
+                this.$message.success(this.$t("agentTemplateManagement.deleteSuccess"));
+                this.loadTemplateList();
+              } else {
+                this.$message.error(
+                  res?.data?.msg || this.$t("agentTemplateManagement.deleteFailed")
+                );
+              }
             } else {
-              this.$message.error(res?.data?.msg || this.$t('agentTemplateManagement.deleteFailed'))
+              console.error("无效的响应对象:", res);
+              this.$message.error(this.$t("agentTemplateManagement.deleteBackendError"));
             }
-          } else {
+          });
-            console.error('无效的响应对象:', res);
-            this.$message.error(this.$t('agentTemplateManagement.deleteBackendError'))
-          }
         })
-      }).catch(() => {
+        .catch(() => {
-        this.$message.info(this.$t('common.deleteCancelled'))
+          this.$message.info(this.$t("common.deleteCancelled"));
-      })
+        });
     },
 
     // 修改batchDeleteTemplate方法，使用selectedTemplates
     // 批量删除模板 - 完全重写这个方法
     batchDeleteTemplate() {
       if (this.selectedTemplates.length === 0) {
-        this.$message.warning(this.$t('agentTemplateManagement.selectTemplate'))
+        this.$message.warning(this.$t("agentTemplateManagement.selectTemplate"));
-        return
+        return;
       }
 
-      this.$confirm(this.$t('agentTemplateManagement.confirmBatchDelete', { count: this.selectedTemplates.length }), this.$t('common.warning'), {
+      this.$confirm(
-        confirmButtonText: this.$t('common.confirm'),
+        this.$t("agentTemplateManagement.confirmBatchDelete", {
-        cancelButtonText: this.$t('common.cancel'),
+          count: this.selectedTemplates.length,
-        type: 'warning'
+        }),
-      }).then(() => {
+        this.$t("common.warning"),
-        // 确保参数格式正确 - 将id数组作为请求体
+        {
-        const ids = this.selectedTemplates.map(template => template.id)
+          confirmButtonText: this.$t("common.confirm"),
-        console.log('批量删除的模板ID:', ids)
+          cancelButtonText: this.$t("common.cancel"),
-        
+          type: "warning",
-        agentApi.batchDeleteAgentTemplate(ids, (res) => {
+        }
-          // 添加更健壮的响应处理
+      )
-          console.log('批量删除响应:', res)
+        .then(() => {
-          if (res && typeof res === 'object') {
+          // 确保参数格式正确 - 将id数组作为请求体
-            if (res.data && res.data.code === 0) {
+          const ids = this.selectedTemplates.map((template) => template.id);
-              this.$message.success(this.$t('agentTemplateManagement.batchDeleteSuccess'))
+          console.log("批量删除的模板ID:", ids);
-              // 重新加载模板列表
+
-              this.loadTemplateList()
+          agentApi.batchDeleteAgentTemplate(ids, (res) => {
-              // 清空选中状态
+            console.log("批量删除响应:", res);
-              this.selectedTemplates = []
+            if (res && typeof res === "object") {
-              this.isAllSelected = false
+              if (res.data && res.data.code === 0) {
+                this.$message.success(
+                  this.$t("agentTemplateManagement.batchDeleteSuccess")
+                );
+                // 重新加载模板列表
+                this.loadTemplateList();
+                // 清空选中状态
+                this.selectedTemplates = [];
+                this.isAllSelected = false;
+              } else {
+                this.$message.error(
+                  res?.data?.msg || this.$t("agentTemplateManagement.batchDeleteFailed")
+                );
+              }
             } else {
-              this.$message.error(res?.data?.msg || this.$t('agentTemplateManagement.batchDeleteFailed'))
+              console.error("无效的响应对象:", res);
+              this.$message.error(this.$t("agentTemplateManagement.deleteBackendError"));
             }
-          } else {
+          });
-            console.error('无效的响应对象:', res)
-            this.$message.error(this.$t('agentTemplateManagement.deleteBackendError'))
-          }
         })
-      }).catch(() => {
+        .catch(() => {
-        this.$message.info(this.$t('common.deleteCancelled'))
+          this.$message.info(this.$t("common.deleteCancelled"));
-      })
+        });
     },
 
-
-
     // 分页相关方法
     // 添加日期格式化函数
     formatDate(dateString) {
-      if (!dateString) return ''
+      if (!dateString) return "";
-      const date = new Date(dateString)
+      const date = new Date(dateString);
-      const year = date.getFullYear()
+      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const month = String(date.getMonth() + 1).padStart(2, "0");
-      const day = String(date.getDate()).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, "0");
-      const hours = String(date.getHours()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, "0");
-      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, "0");
-      const seconds = String(date.getSeconds()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, "0");
-      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
-    
+
     // 完善分页相关方法
     handlePageChange(page) {
-      this.currentPage = page
+      this.currentPage = page;
-      this.loadTemplateList()
+      this.loadTemplateList();
     },
-    
+
     handlePageSizeChange(size) {
-      this.pageSize = size
+      this.pageSize = size;
-      this.currentPage = 1
+      this.currentPage = 1;
-      this.loadTemplateList()
+      this.loadTemplateList();
     },
-    
+
     goFirst() {
-      this.currentPage = 1
+      this.currentPage = 1;
     },
     goPrev() {
-      this.currentPage--
+      this.currentPage--;
     },
     goNext() {
-      this.currentPage++
+      this.currentPage++;
     },
     goToPage(page) {
-      this.currentPage = page
+      this.currentPage = page;
     },
     getVisiblePages() {
-      const pages = []
+      const pages = [];
-      const totalPages = this.pageCount
+      const totalPages = this.pageCount;
-      const currentPage = this.currentPage
+      const currentPage = this.currentPage;
-      
+
       if (totalPages <= 7) {
         for (let i = 1; i <= totalPages; i++) {
-          pages.push(i)
+          pages.push(i);
         }
       } else {
         if (currentPage <= 4) {
           for (let i = 1; i <= 5; i++) {
-            pages.push(i)
+            pages.push(i);
           }
-          pages.push('...')
+          pages.push("...");
-          pages.push(totalPages)
+          pages.push(totalPages);
         } else if (currentPage >= totalPages - 3) {
-          pages.push(1)
+          pages.push(1);
-          pages.push('...')
+          pages.push("...");
           for (let i = totalPages - 4; i <= totalPages; i++) {
-            pages.push(i)
+            pages.push(i);
           }
         } else {
-          pages.push(1)
+          pages.push(1);
-          pages.push('...')
+          pages.push("...");
           for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-            pages.push(i)
+            pages.push(i);
           }
-          pages.push('...')
+          pages.push("...");
-          pages.push(totalPages)
+          pages.push(totalPages);
         }
       }
-      
+
-      return pages
+      return pages;
     },
-    
+
     // 修改handleSelectAll方法
     handleSelectAll() {
-      this.isAllSelected = !this.isAllSelected
+      this.isAllSelected = !this.isAllSelected;
-      this.templateList.forEach(row => {
+      this.templateList.forEach((row) => {
-        row.selected = this.isAllSelected
+        row.selected = this.isAllSelected;
-      })
+      });
       // 更新选中的模板列表
-      this.selectedTemplates = this.isAllSelected ? [...this.templateList] : []
+      this.selectedTemplates = this.isAllSelected ? [...this.templateList] : [];
     },
-    
+
     // 处理行选择变化
     handleRowSelectionChange(row) {
       // 查找选中的模板
-      this.selectedTemplates = this.templateList.filter(template => template.selected);
+      this.selectedTemplates = this.templateList.filter((template) => template.selected);
       // 更新全选状态
-      this.isAllSelected = this.templateList.length > 0 && this.selectedTemplates.length === this.templateList.length;
+      this.isAllSelected =
+        this.templateList.length > 0 &&
+        this.selectedTemplates.length === this.templateList.length;
     },
-
+  },
-    // 修改handleRowClick方法，移除选中状态切换逻辑
+};
-    handleRowClick(row, event, column) {
-    // 完全移除选中状态切换的逻辑，只允许通过复选框点击来选择
-    // 保留方法以避免可能的事件处理问题
-    },
-
-  }
-}
 </script>
 
 <style scoped lang="scss">
-/* 首先确保html和body元素有正确的背景设置 */
+/* 基础背景和布局设置 */
-:global(html),
-:global(body) {
-  background: #f5f7fa;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
 .welcome {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
-  background-size: cover;
   background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
-  -webkit-background-size: cover;
+  background-size: cover;
-  -o-background-size: cover;
   overflow: hidden;
   width: 100%;
 }
 
+/* 操作栏样式 */
 .operation-bar {
   display: flex;
   justify-content: space-between;
@@ -446,6 +513,7 @@ export default {
   color: white;
 }
 
+/* 主容器样式 */
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
@@ -479,6 +547,7 @@ export default {
   position: relative;
 }
 
+/* 模板卡片样式 */
 .template-card {
   border: none;
   box-shadow: none;
@@ -496,45 +565,77 @@ export default {
   }
 }
 
+/* 表格样式 - 优化整合版 */
 .transparent-table {
   width: 100%;
-  /* 关键：为表格容器设置最大高度，确保有足够空间将按钮推到底部 */
   flex: 1;
   min-height: 0;
 }
 
-/* 添加表格内部容器的样式，确保表格本身有高度限制 */
 :deep(.el-table) {
   height: 100%;
   display: flex;
   flex-direction: column;
   --table-max-height: calc(100vh - 42vh);
   max-height: var(--table-max-height);
-  
+
-  .el-table__body-wrapper {
+  /* 表格头部样式 */
-    flex: 1;
+  .el-table__header th {
-    overflow-y: auto;
+    padding: 8px 0 !important;
-    overflow-x: auto;
+    height: 40px !important;
+  }
+
+  .el-table__header th .cell {
+    color: #303133 !important;
+    font-weight: 600;
+  }
+
+  /* 表格主体样式 */
+  .el-table__body {
+    .el-table__row td {
+      padding: 12px 0 !important;
+      border-bottom: 1px solid #ebeef5;
+    }
+    .el-table__row:hover {
+      background-color: #f5f7fa;
+    }
+  }
+
+  /* 表格按钮样式 */
+  .el-button--text {
+    color: #7079aa;
+  }
+
+  .el-button--text:hover {
+    color: #5a64b5;
+  }
+
+  /* 单元格文本样式 */
+  .cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
-// 表格底部操作栏
+/* 表格底部操作栏 */
 .table_bottom {
   display: flex;
   justify-content: space-between !important;
   align-items: center;
-  margin-top: auto; /* 关键：使用auto margin将按钮栏推到底部 */
+  margin-top: auto;
-  padding: 0 20px 15px !important; /* 增加底部padding，让按钮看起来更靠下 */
+  padding: 0 20px 15px !important;
   width: 100% !important;
   box-sizing: border-box !important;
 }
 
+/* 控制按钮样式 */
 .ctrl_btn {
   display: flex;
   gap: 8px;
   padding-left: 0 !important;
   margin-left: 0 !important;
-  
+
   .el-button {
     min-width: 72px;
     height: 32px;
@@ -557,154 +658,13 @@ export default {
     background: #5f70f3;
     color: white;
   }
-
   .el-button--success {
     background: #5bc98c;
     color: white;
   }
-
   .el-button--danger {
     background: #fd5b63;
     color: white;
   }
 }
-
+</style>
-// 自定义分页样式
-.custom-pagination {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto !important;
-  padding-right: 0 !important;
-  margin-right: 0 !important;
-}
-
-// 调整分页按钮样式
-.pagination-btn:last-child {
-  margin-right: 0;
-}
-  .el-select {
-    margin-right: 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;
-  }
-
-
-// 表格内部样式调整
-:deep(.el-table__header th) {
-  padding: 8px 0 !important;
-  height: 40px !important;
-}
-
-:deep(.el-table__header th .cell) {
-  color: #303133 !important;
-  font-weight: 600;
-}
-
-:deep(.el-table__body) {
-  .el-table__row td {
-    padding: 12px 0 !important;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .el-table__row:hover {
-    background-color: #f5f7fa;
-  }
-}
-
-:deep(.el-table .el-button--text) {
-  color: #7079aa;
-}
-
-:deep(.el-table .el-button--text:hover) {
-  color: #5a64b5;
-}
-
-:deep(.el-table .cell) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// 选择框样式
-:deep(.el-checkbox__inner) {
-  background-color: #ffffff !important;
-  border-color: #dcdfe6 !important;
-  width: 16px !important;
-  height: 16px !important;
-  border-radius: 2px !important;
-}
-
-:deep(.el-checkbox__inner:hover) {
-  border-color: #c0c4cc !important;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-  background-color: #5f70f3 !important;
-  border-color: #5f70f3 !important;
-}
-
-// 调整表格最大高度
-:deep(.el-table) {
-  --table-max-height: calc(100vh - 42vh);
-  max-height: var(--table-max-height);
-  .el-table__body-wrapper {
-    max-height: calc(var(--table-max-height) - 40px);
-  }
-}
-</style>