工具条按钮样式统一

frontend/src/views/teachBusiness/timetable/index.vue

@@ -86,20 +86,16 @@
             </el-form>
           </div>
 
-          <!-- 标题 -->
-          <div class="page-title">{{ pageTitle }}</div>
-
-          <!-- 下载操作按钮 -->
-          <el-card shadow="never" class="action-card">
-            <div class="button-row">
-              <el-button type="primary" plain size="mini" @click="handleExportPlan">学期教学实施计划</el-button>
-              <el-button type="primary" plain size="mini" @click="handleExportGrades">学期成绩表</el-button>
-              <el-button type="primary" plain size="mini" @click="handleExportCourses">课程列表另存Excel</el-button>
-            </div>
-          </el-card>
-
           <!-- 数据表格 -->
           <div class="table-card">
+            <div class="list-header">
+              <div class="list-title">{{ pageTitle }}</div>
+              <div class="list-actions">
+                <el-button type="primary" plain size="mini" @click="handleExportPlan">学期教学实施计划</el-button>
+                <el-button type="primary" plain size="mini" @click="handleExportGrades">学期成绩表</el-button>
+                <el-button type="primary" plain size="mini" @click="handleExportCourses">课程列表另存Excel</el-button>
+              </div>
+            </div>
             <el-table :data="shiftData" v-loading="loading" border stripe style="width: 100%">
               <el-table-column type="index" label="序号" width="60" align="center" />
               <el-table-column label="课程名称/课时系数" min-width="220" align="center">
@@ -445,21 +441,29 @@ export default {
     }
   }
 
-  .page-title {
+  .list-header {
-    font-size: 17px;
+    display: flex;
-    font-weight: 700;
+    align-items: center;
-    color: #303133;
+    justify-content: space-between;
-    text-align: center;
+    flex-wrap: wrap;
-    margin-bottom: 12px;
+    gap: 12px;
-  }
-
-  .action-card {
     margin-bottom: 12px;
 
-    .button-row {
+    .list-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: #303133;
+    }
+
+    .list-actions {
       display: flex;
+      align-items: center;
       flex-wrap: wrap;
       gap: 8px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
     }
   }
 }

frontend/src/views/teachNotice/index.vue

@@ -51,12 +51,14 @@
     <!-- 数据列表区域 -->
     <div class="list-heading">
       <div class="list-title">公告列表</div>
-      <el-button
+      <div class="list-actions">
-        type="primary"
+        <el-button
-        icon="el-icon-plus"
+          type="primary"
-        size="mini"
+          icon="el-icon-plus"
-        @click="handleAdd"
+          size="mini"
-      >新增</el-button>
+          @click="handleAdd"
+        >新增</el-button>
+      </div>
     </div>
     <el-table v-loading="loading" :data="noticeList" border :height="tableHeight">
       <el-table-column label="序号" type="index" align="center" width="70" />
@@ -483,6 +485,16 @@ export default {
     gap: 16px;
     margin-bottom: 12px;
   }
+  .list-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+  }
   .list-title {
     font-size: 16px;
     font-weight: 600;

frontend/src/views/teachOffice/elective/index.vue

@@ -71,31 +71,6 @@
       </div>
     </div>
 
-    <!-- ==================== 4. 操作按钮区域 ==================== -->
-    <div class="section-card action-card">
-      <div class="section-heading section-heading--compact">
-        <div>
-          <h2 class="section-title">选修课操作</h2>
-          <p class="section-description">新建选修课，或对已选数据执行批量操作</p>
-        </div>
-      </div>
-      <div class="action-row">
-        <el-button type="primary" icon="el-icon-plus" @click="handleOpenNew">新建选修课</el-button>
-        <el-button type="primary" plain icon="el-icon-circle-check" @click="handleOpenEarly">
-          所选批量开放报名
-        </el-button>
-        <el-button type="warning" plain icon="el-icon-remove-outline" @click="handleCancelEarly">
-          所选批量取消开放报名
-        </el-button>
-        <el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
-          批量停止报名
-        </el-button>
-        <!-- <el-button icon="el-icon-refresh" @click="handleReverseRange">
-          所选批量根据学员反向确定班次范围
-        </el-button> -->
-      </div>
-    </div>
-
     <!-- ==================== 5. 文件上传区域 ==================== -->
     <div class="section-card upload-card">
       <div class="section-heading section-heading--compact">
@@ -118,10 +93,19 @@
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <div class="section-card table-card">
-      <div class="section-heading section-heading--compact table-heading">
+      <div class="list-header">
-        <div>
+        <div class="list-title">选修课列表<span class="list-sub">共 {{ total }} 条数据</span></div>
-          <h2 class="section-title">选修课列表</h2>
+        <div class="list-actions">
-          <p class="section-description">共 {{ total }} 条数据</p>
+          <el-button type="primary" icon="el-icon-plus" @click="handleOpenNew">新建选修课</el-button>
+          <el-button type="primary" plain icon="el-icon-circle-check" @click="handleOpenEarly">
+            所选批量开放报名
+          </el-button>
+          <el-button type="warning" plain icon="el-icon-remove-outline" @click="handleCancelEarly">
+            所选批量取消开放报名
+          </el-button>
+          <el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
+            批量停止报名
+          </el-button>
         </div>
       </div>
       <el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
@@ -534,20 +518,6 @@ export default {
   align-items: center;
 }
 
-// ==================== 4. 操作按钮区域 ====================
-.action-card {
-  .action-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
 // ==================== 5. 文件上传区域 ====================
 .upload-card {
   .upload-row {
@@ -581,6 +551,39 @@ export default {
 
 // ==================== 6. 数据表格区域 ====================
 .table-card {
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+
+      .list-sub {
+        margin-left: 10px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+
+    .list-actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
+  }
+
   .main-table {
     ::v-deep .cell {
       font-size: 12px;

frontend/src/views/teachOffice/office/index.vue

@@ -42,21 +42,16 @@
     </el-form>
 
     <!-- 操作按钮区域 -->
-    <el-row :gutter="10" class="mb8">
+    <div class="list-header">
-      <el-col :span="1.5">
+      <div class="list-title">教研室列表</div>
+      <div class="list-actions">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
         <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="openImport">导入</el-button>
-      </el-col>
-      <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleDownloadTemplate">模板下载</el-button>
-      </el-col>
-      <el-col :span="1.5">
         <el-button type="success" plain icon="el-icon-refresh" size="mini" :loading="alignLoading" @click="handleAlignDepts">对齐组织部门</el-button>
-      </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </div>
-    </el-row>
+    </div>
 
     <!-- 数据列表区域 -->
     <el-table v-loading="loading" :data="officeList" border :height="tableHeight">
@@ -412,8 +407,30 @@ export default {
 
 <style scoped lang="scss">
 .teach-office {
-  .mb8 {
+  .list-header {
-    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 12px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .list-actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
   }
 
   .sync-tip {

frontend/src/views/teachOffice/shiftSemester/index.vue

@@ -44,34 +44,31 @@
       </el-form>
     </el-card>
 
-    <!-- ==================== 2. 工具栏按钮区 ==================== -->
+    <!-- ==================== 2. 班次学期信息列表 ==================== -->
-    <div class="list-toolbar">
-      <div class="left-group">
-        <el-button type="primary" icon="el-icon-plus" @click="handleBatchAdd">批量创建班次学期</el-button>
-        <el-button type="primary" plain icon="el-icon-document-add" @click="handleAdd">新增</el-button>
-        <el-button type="primary" plain icon="el-icon-edit" :disabled="!currentRow" @click="handleEdit">编辑</el-button>
-        <el-button type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="handleDelete">删除所选</el-button>
-        <el-button type="primary" plain icon="el-icon-date" :disabled="!selection.length" @click="handleQuickSetDates">快速设定学期日期</el-button>
-        <el-button type="primary" plain icon="el-icon-download" :disabled="!currentRow" @click="handleAbsorbDates">吸取预设日期</el-button>
-        <el-button type="primary" plain icon="el-icon-notebook-2" :disabled="!selection.length" @click="handleSetJxrw">批量设置教学任务</el-button>
-        <el-button type="primary" plain :disabled="!selection.length" @click="handleSetXqdc">批量学期第次</el-button>
-        <el-button type="primary" plain :disabled="!selection.length" @click="handleSetKfjypk">开放教员排课</el-button>
-        <el-button type="warning" plain :disabled="selection.length < 2" @click="handleWaveMerge">预设合班</el-button>
-        <el-button type="warning" plain :disabled="!selection.length" @click="handleWaveSplit">预设拆班</el-button>
-        <el-button type="primary" plain :disabled="!selection.length" @click="handleBatchGenerateTasks">批量生成必修课程</el-button>
-      </div>
-      <div class="right-group">
-        <el-button type="success" plain icon="el-icon-date" :disabled="!currentRow" @click="handleEditEventCalendar">编辑班历</el-button>
-        <el-button type="success" plain icon="el-icon-calendar" :disabled="!currentRow" @click="handleEditCalendar">编辑班次教学任务</el-button>
-        <el-button type="success" plain icon="el-icon-data-line" :disabled="!currentRow" @click="handleAllocation">教学配当</el-button>
-        <el-button type="success" plain icon="el-icon-download" :disabled="!selection.length" @click="handleExportAllocation">导出配当</el-button>
-        <el-button type="primary" plain icon="el-icon-upload2" :disabled="!selection.length" @click="handlePublishRunning">发布运行课表</el-button>
-        <el-button type="danger" plain icon="el-icon-delete-solid" :disabled="!selection.length" @click="handleWithdrawRunning">删除运行课表</el-button>
-      </div>
-    </div>
-
-    <!-- ==================== 3. 班次学期信息列表 ==================== -->
     <el-card shadow="never" class="table-card">
+      <div class="list-header">
+        <div class="list-title">班次学期列表</div>
+        <div class="list-actions">
+          <el-button type="primary" icon="el-icon-plus" @click="handleBatchAdd">批量创建班次学期</el-button>
+          <el-button type="primary" plain icon="el-icon-document-add" @click="handleAdd">新增</el-button>
+          <el-button type="primary" plain icon="el-icon-edit" :disabled="!currentRow" @click="handleEdit">编辑</el-button>
+          <el-button type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="handleDelete">删除所选</el-button>
+          <el-button type="primary" plain icon="el-icon-date" :disabled="!selection.length" @click="handleQuickSetDates">快速设定学期日期</el-button>
+          <el-button type="primary" plain icon="el-icon-download" :disabled="!currentRow" @click="handleAbsorbDates">吸取预设日期</el-button>
+          <el-button type="primary" plain icon="el-icon-notebook-2" :disabled="!selection.length" @click="handleSetJxrw">批量设置教学任务</el-button>
+          <el-button type="primary" plain :disabled="!selection.length" @click="handleSetXqdc">批量学期第次</el-button>
+          <el-button type="primary" plain :disabled="!selection.length" @click="handleSetKfjypk">开放教员排课</el-button>
+          <el-button type="warning" plain :disabled="selection.length < 2" @click="handleWaveMerge">预设合班</el-button>
+          <el-button type="warning" plain :disabled="!selection.length" @click="handleWaveSplit">预设拆班</el-button>
+          <el-button type="primary" plain :disabled="!selection.length" @click="handleBatchGenerateTasks">批量生成必修课程</el-button>
+          <el-button type="success" plain icon="el-icon-date" :disabled="!currentRow" @click="handleEditEventCalendar">编辑班历</el-button>
+          <el-button type="success" plain icon="el-icon-calendar" :disabled="!currentRow" @click="handleEditCalendar">编辑班次教学任务</el-button>
+          <el-button type="success" plain icon="el-icon-data-line" :disabled="!currentRow" @click="handleAllocation">教学配当</el-button>
+          <el-button type="success" plain icon="el-icon-download" :disabled="!selection.length" @click="handleExportAllocation">导出配当</el-button>
+          <el-button type="primary" plain icon="el-icon-upload2" :disabled="!selection.length" @click="handlePublishRunning">发布运行课表</el-button>
+          <el-button type="danger" plain icon="el-icon-delete-solid" :disabled="!selection.length" @click="handleWithdrawRunning">删除运行课表</el-button>
+        </div>
+      </div>
       <el-table
         ref="tableRef"
         v-loading="loading"
@@ -1000,26 +997,36 @@ export default {
     margin-bottom: 16px;
   }
 
-  // ========== 2. 工具栏按钮区 ==========
+  // ========== 2. 数据表格区 ==========
-  .list-toolbar {
+  .table-card {
-    display: flex;
+    .list-header {
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 16px;
-
-    .left-group,
-    .right-group {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 12px;
-    }
+      margin-bottom: 16px;
-  }
+
+      .list-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+        white-space: nowrap;
+      }
+
+      .list-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: 8px;
+
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+      }
+    }
 
-  // ========== 3. 数据表格区 ==========
-  .table-card {
     .class-table {
       width: 100%;
     }

frontend/src/views/teachOffice/subject/index.vue

@@ -52,23 +52,6 @@
 
     </el-card>
 
-    <!-- ==================== 3. 操作按钮区域 ==================== -->
-    <el-card shadow="never" class="action-card">
-      <div class="section-heading section-heading--compact">
-        <div>
-          <h2 class="section-title">课程科目操作</h2>
-          <p class="section-description">维护课程科目，或下载业务数据与导入模板</p>
-        </div>
-      </div>
-      <div class="action-row">
-        <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
-        <el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
-      </div>
-      <div class="action-row">
-        <el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
-      </div>
-    </el-card>
-
     <!-- ==================== 4. 文件上传区域 ==================== -->
     <el-card shadow="never" class="upload-card">
       <div class="section-heading section-heading--compact">
@@ -92,10 +75,12 @@
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <el-card shadow="never" class="table-card">
-      <div class="section-heading section-heading--compact table-heading">
+      <div class="list-header">
-        <div>
+        <div class="list-title">课程科目列表<span class="list-sub">共 {{ total }} 条数据</span></div>
-          <h2 class="section-title">课程科目列表</h2>
+        <div class="list-actions">
-          <p class="section-description">共 {{ total }} 条数据</p>
+          <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
+          <el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
+          <el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
         </div>
       </div>
       <el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
@@ -642,22 +627,6 @@ export default {
 
 }
 
-// ==================== 3. 操作按钮区域 ====================
-.action-card {
-  margin-bottom: 16px;
-
-  .action-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
 // ==================== 4. 文件上传区域 ====================
 .upload-card {
   margin-bottom: 16px;
@@ -702,6 +671,39 @@ export default {
 
 // ==================== 6. 数据表格区域 ====================
 .table-card {
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+
+      .list-sub {
+        margin-left: 10px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+
+    .list-actions {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    }
+  }
+
   .pagination-wrapper {
     display: flex;
     justify-content: flex-end;

frontend/src/views/teachOffice/taskPlan/index.vue

@@ -36,30 +36,27 @@
       </el-form>
     </el-card>
 
-    <!-- ==================== 2. 操作区域 ==================== -->
+    <!-- ==================== 2. 数据表格 ==================== -->
-    <div class="list-toolbar">
-      <div class="left-group">
-        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建教学任务</el-button>
-        <el-button
-          type="success"
-          icon="el-icon-position"
-          :disabled="!selection.length"
-          @click="handleBatchPublish"
-        >批量发布（{{ selection.length }}）</el-button>
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          :disabled="!selection.length"
-          @click="handleBatchDelete"
-        >批量删除（{{ selection.length }}）</el-button>
-      </div>
-      <div class="right-group">
-        <el-button icon="el-icon-collection" @click="openOfficeSummary">教研室任务书汇总</el-button>
-      </div>
-    </div>
-
-    <!-- ==================== 3. 数据表格 ==================== -->
     <el-card shadow="never" class="table-card">
+      <div class="list-header">
+        <div class="list-title">教学任务列表</div>
+        <div class="list-actions">
+          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建教学任务</el-button>
+          <el-button
+            type="success"
+            icon="el-icon-position"
+            :disabled="!selection.length"
+            @click="handleBatchPublish"
+          >批量发布（{{ selection.length }}）</el-button>
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            :disabled="!selection.length"
+            @click="handleBatchDelete"
+          >批量删除（{{ selection.length }}）</el-button>
+          <el-button icon="el-icon-collection" @click="openOfficeSummary">教研室任务书汇总</el-button>
+        </div>
+      </div>
       <el-table
         v-loading="loading"
         :data="tableData"
@@ -660,26 +657,34 @@ export default {
     }
   }
 
-  // ========== 2. 工具栏 ==========
+  // ========== 2. 数据表格区域 ==========
-  .list-toolbar {
+  .table-card {
-    display: flex;
+    .list-header {
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 16px;
-
-    .left-group,
-    .right-group {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       flex-wrap: wrap;
-      gap: 10px;
+      gap: 12px;
-    }
+      margin-bottom: 16px;
-  }
+
+      .list-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .list-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+      }
+    }
 
-  // ========== 3. 数据表格区域 ==========
-  .table-card {
     .task-table {
       width: 100%;
     }

frontend/src/views/teachOffice/teacher/index.vue

@@ -33,21 +33,18 @@
     </el-card>
 
     <!-- 教员列表 -->
-    <div class="list-title">教员列表：</div>
-    <div class="list-toolbar">
-      <div class="left-group">
-        <el-button type="primary" icon="el-icon-plus" @click="handleNew">新建</el-button>
-        <el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteSelected">删除所选</el-button>
-      </div>
-      <div class="right-group">
-        <el-button icon="el-icon-upload2" @click="openImportDialog">导入</el-button>
-        <el-button icon="el-icon-download" @click="handleExport">导出</el-button>
-        <el-button icon="el-icon-document" @click="handleDownloadTemplate">下载模板</el-button>
-        <el-button type="success" plain icon="el-icon-refresh" :loading="alignLoading" @click="handleAlignUsers">对齐到用户表</el-button>
-      </div>
-    </div>
-
     <el-card shadow="never" class="table-card">
+      <div class="list-header">
+        <div class="list-title">教员列表</div>
+        <div class="list-actions">
+          <el-button type="primary" icon="el-icon-plus" @click="handleNew">新建</el-button>
+          <el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteSelected">删除所选</el-button>
+          <el-button icon="el-icon-upload2" @click="openImportDialog">导入</el-button>
+          <el-button icon="el-icon-download" @click="handleExport">导出</el-button>
+          <el-button icon="el-icon-document" @click="handleDownloadTemplate">下载模板</el-button>
+          <el-button type="success" plain icon="el-icon-refresh" :loading="alignLoading" @click="handleAlignUsers">对齐到用户表</el-button>
+        </div>
+      </div>
       <el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
         @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="50" align="center" />
@@ -1363,33 +1360,35 @@ export default {
     }
   }
 
-  .list-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-    margin-bottom: 12px;
-  }
-
-  .list-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 16px;
-
-    .left-group,
-    .right-group {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-  }
-
   .table-card {
     margin-bottom: 16px;
 
+    .list-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .list-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .list-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 12px;
+
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+      }
+    }
+
     ::v-deep(.el-table) {
       width: 100%;
     }