a

src/views/professional/professionaltitlerelation/index.vue

@@ -1,41 +1,9 @@
 <template>
   <div class="titlerelation-page">
     <div class="page-wrapper">
-      <!-- 方案 F：最上标题+右侧按钮，下方搜索，再下方表格 -->
+      <!-- 内容区：最上搜索，其次标题+按钮，再下方表格 -->
       <div class="content-block">
-        <!-- 最上：左侧图标+标题，右侧所有按钮 -->
-        <div class="content-block__header">
-          <span class="card-title">
-            <el-icon class="title-icon"><Document /></el-icon>
-            职称关系
-          </span>
-          <div class="header-actions">
-            <div class="action-group">
-              <el-button
-                v-if="hasAuth('professional_professionaltitlerelation_add')"
-                type="primary"
-                icon="FolderAdd"
-                @click="handleAdd"
-              >新增</el-button>
-              <el-button
-                v-if="hasAuth('professional_teacherbase_export')"
-                type="warning"
-                plain
-                icon="Download"
-                @click="handleDownLoadWord"
-                :loading="exportLoading"
-              >导出信息</el-button>
-            </div>
-            <div class="header-right">
-              <RightToolbar
-                v-model:showSearch="showSearch"
-                @queryTable="getDataList"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 下方：搜索区，方案 F 默认收起 -->
+        <!-- 最上：搜索区 -->
         <div v-show="showSearch" class="content-block__filter">
           <search-form
             :model="search"
@@ -118,6 +86,34 @@
           </search-form>
         </div>
 
+        <!-- 其次：左侧按钮，右侧 RightToolbar -->
+        <div class="content-block__header">
+          <div class="header-actions">
+            <div class="action-group">
+              <el-button
+                v-if="hasAuth('professional_professionaltitlerelation_add')"
+                type="primary"
+                icon="FolderAdd"
+                @click="handleAdd"
+              >新增</el-button>
+              <el-button
+                v-if="hasAuth('professional_teacherbase_export')"
+                type="warning"
+                plain
+                icon="Download"
+                @click="handleDownLoadWord"
+                :loading="exportLoading"
+              >导出信息</el-button>
+            </div>
+            <div class="header-right">
+              <RightToolbar
+                v-model:showSearch="showSearch"
+                @queryTable="getDataList"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- 再下方：表格 -->
         <el-table
           ref="tableRef"
@@ -247,7 +243,6 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick } from 'vue'
-import { Document } from '@element-plus/icons-vue'
 import { BasicTableProps, useTable } from '/@/hooks/table'
 import { useAuth } from '/@/hooks/auth'
 import { useMessage } from '/@/hooks/message'
@@ -486,10 +481,10 @@ onMounted(async () => {
   gap: 0;
 }
 
-/* 筛选：方案 F，内容区内置筛选区，默认收起 */
+/* 筛选：内容区最上方，无上外边距；与下方标题栏间距用 margin-bottom */
 .content-block__filter {
   padding: 16px 20px 5px 20px;
-  margin-top: 12px;
+  margin-top: 0;
   margin-bottom: 12px;
   background: var(--el-fill-color-light);
   border-radius: 8px;
@@ -535,21 +530,25 @@ onMounted(async () => {
 .header-actions {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
+  width: 100%;
 }
 
+/* 按钮间距按规范 10px；与 RightToolbar 区隔 */
 .action-group {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-wrap: wrap; 
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding-left: 12px;
+  // border-left: 1px solid var(--el-border-color-lighter);
 }
 
 /* 表格 */