a

src/components/SearchForm/index.vue

@@ -1,32 +1,22 @@
 <template>
+	<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
+		<div class="search-form__bar" :class="{ 'search-form__bar--no-title': !filterTitle }">
+			<span v-if="filterTitle" class="search-form__title">
+				<el-icon class="search-form__title-icon"><Search /></el-icon>
+				{{ filterTitle }}
+			</span>
 			<div class="search-form-container">
 				<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
-			<!-- 直接展示的表单项 -->
 					<slot :visible="true" :expanded="isExpanded"></slot>
-
-			<!-- 可折叠的表单项区域 - 使用 display: contents 确保不影响布局 -->
 					<div v-show="isExpanded" class="collapsible-content">
 						<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
 					</div>
-			
-			<!-- 隐藏的检测元素，用于检测是否有可折叠内容 -->
 					<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
-				<slot :visible="false" :expanded="true">
+						<slot :visible="false" :expanded="true"></slot>
-					<!-- 如果插槽有内容，这里会被渲染，我们可以通过检查这个元素来判断 -->
-				</slot>
 					</div>
-
-			<!-- 操作按钮插槽（查询、重置等） -->
 					<slot name="actions"></slot>
-
-			<!-- 展开/收起按钮（在操作按钮之后） -->
 					<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
-				<el-button
+						<el-button link type="primary" @click="toggleExpand" class="toggle-btn">
-					link
-					type="primary"
-					@click="toggleExpand"
-					class="toggle-btn"
-				>
 							<el-icon style="margin-right: 4px">
 								<ArrowUp v-if="isExpanded" />
 								<ArrowDown v-else />
@@ -36,13 +26,22 @@
 					</el-form-item>
 				</el-form>
 			</div>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts" name="search-form">
 import { ref, watch, computed, onMounted, nextTick } from 'vue';
-import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
+import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
 
 const props = defineProps({
+	/**
+	 * 筛选标题（如「筛选」），传入时在表单左侧显示标题+竖线，与表单项同一行
+	 */
+	filterTitle: {
+		type: String,
+		default: '',
+	},
 	/**
 	 * 表单数据模型
 	 */
@@ -77,6 +76,7 @@ const props = defineProps({
 const emit = defineEmits(['expand-change', 'keyup-enter']);
 
 const formModel = props.model;
+const { filterTitle } = props;
 const formRef = ref();
 const isExpanded = ref(props.defaultExpanded);
 const hasCollapsibleContent = ref(false);
@@ -183,8 +183,57 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.search-form__bar {
+	display: flex;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	gap: 4px 0;
+	min-height: 32px;
+
+	&--no-title {
+		display: block;
+	}
+}
+
+.search-form__title {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	padding-right: 14px;
+	margin-right: 14px;
+	height: 32px;
+	line-height: 32px;
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--el-text-color-regular);
+
+	&::after {
+		content: '';
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 1px;
+		height: 14px;
+		background: var(--el-border-color);
+	}
+}
+
+.search-form__title-icon {
+	font-size: 15px;
+	color: var(--el-color-primary);
+}
+
 .search-form-container {
-	// 直接使用全局样式 el-form--inline，只需要覆盖特殊样式
+	flex: 1;
+	min-width: 0;
+
+	:deep(.el-form-item:not(:has(.el-button))) {
+		margin-bottom: 14px;
+		margin-right: 16px;
+	}
 
 	:deep(.el-form--inline) {
 		.collapse-trigger-item {
@@ -196,21 +245,8 @@ defineExpose({
 			padding: 0;
 			font-size: 14px;
 		}
-		
-		// 如果需要自定义宽度，可以覆盖全局样式（默认使用全局的 240px）
-		// 如果需要改为 200px，取消下面的注释
-		// .el-form-item {
-		// 	& > .el-input,
-		// 	.el-cascader,
-		// 	.el-select,
-		// 	.el-date-editor,
-		// 	.el-autocomplete {
-		// 		width: 200px;
-		// 	}
-		// }
 	}
 
-	// 可折叠内容区域 - 使用 contents 让包装器不影响布局
 	.collapsible-content {
 		display: contents;
 	}

src/components/TableColumnControl/index.vue

@@ -1,17 +1,29 @@
 <template>
   <div class="table-column-control">
+    <template v-if="slots.trigger">
       <el-button
         :type="triggerType"
-      :icon="slots.trigger ? undefined : Menu"
         :size="triggerSize"
         :circle="triggerCircle"
         :link="triggerLink"
         @click="visible = true"
       >
-      <slot name="trigger">
+        <slot name="trigger"></slot>
-        {{ triggerText || '列显隐' }}
-      </slot>
       </el-button>
+    </template>
+    <template v-else>
+      <el-tooltip class="item" effect="dark" content="列设置" placement="top">
+        <el-button
+          circle
+          :type="triggerType"
+          :size="triggerSize"
+          style="margin-left: 0;"
+          @click="visible = true"
+        >
+          <el-icon><Menu /></el-icon>
+        </el-button>
+      </el-tooltip>
+    </template>
     
     <el-dialog
       v-model="visible"

src/views/professional/teacherbase/index.vue

@@ -1,12 +1,13 @@
 
 <template>
-  <div class="layout-padding">
+  <div class="teacherbase-page">
-    <div class="layout-padding-auto layout-padding-view">
+    <div class="page-wrapper">
-      <!-- 搜索表单 -->
+      <!-- 筛选条件卡片：标题由 SearchForm 组件内置 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
         <search-form
-        v-show="showSearch" 
           :model="search"
           ref="searchFormRef"
+          filter-title="筛选"
           @keyup-enter="handleFilter(search)"
         >
         <template #default="{ visible }">
@@ -191,81 +192,70 @@
           </el-form-item>
         </template>
         </search-form>
+      </el-card>
 
-      <!-- 操作按钮 -->
+      <!-- 列表内容卡片 -->
-      <el-row>
+      <el-card class="content-card" shadow="never">
-        <div class="mb15" style="width: 100%; display: flex; justify-content: space-between; align-items: center;">
+        <template #header>
-          <div>
+          <div class="card-header">
-            <!-- 主要操作：新增 -->
+            <span class="card-title">
+              <el-icon class="title-icon"><User /></el-icon>
+              教师基础信息
+            </span>
+            <div class="header-actions">
+              <div class="action-group">
                 <el-button
+                  v-if="permissions.professional_teacherbase_add"
                   type="primary"
                   icon="FolderAdd"
-              @click="handleAdd"
+                  @click="handleAdd">新增
-              v-if="permissions.professional_teacherbase_add">新 增
                 </el-button>
-
-            <!-- 查询操作：使用 primary plain 样式，统一协调 -->
-            <!-- <el-button 
-              type="primary" 
-              plain
-              icon="User"
-              class="ml10"
-              v-if="permissions.professional_teacherbase_status_lock"
-              @click="handelQuickSeach(4)">双师
-            </el-button> -->
-
-            <!-- 设置操作：使用默认样式，中性灰色 -->
                 <el-button
-              icon="Lock"
-              class="ml10"
                   v-if="permissions.professional_teacherbase_status_lock"
+                  icon="Lock"
                   @click="dialogVisible.statusDialogFormVisible=true">状态锁定
                 </el-button>
-
-            <!-- 导出操作：使用 warning plain 样式，橙色边框，表示数据导出 -->
                 <el-button
+                  v-if="permissions.professional_teacherbase_export"
                   type="warning"
                   plain
                   icon="Download"
-              class="ml10"
+                  :loading="exportLoading"
-              v-if="permissions.professional_teacherbase_export"
+                  @click="handleDownLoadWord('')">导出WORD
-              @click="handleDownLoadWord('')" 
-              :loading="exportLoading">导出WORD
                 </el-button>
                 <el-button
+                  v-if="permissions.professional_teacherbase_export"
                   type="warning"
                   plain
                   icon="Download"
-              class="ml10"
+                  :loading="exportLoading"
-              v-if="permissions.professional_teacherbase_export"
+                  @click="handleExportDialog">自定义导出
-              @click="handleExportDialog" 
-              :loading="exportLoading">自定义导出
                 </el-button>
-            
-            <!-- 导入操作：使用 primary plain 样式，蓝色边框，保持项目默认样式 -->
                 <el-button
+                  v-if="permissions.professional_teacherinfo_import"
                   type="primary"
                   plain
                   icon="UploadFilled"
-              class="ml10"
+                  :loading="exportLoading"
-              v-if="permissions.professional_teacherinfo_import"
+                  @click="handleImportDialog">导入信息
-              @click="handleImportDialog" 
-              :loading="exportLoading">导入信息
                 </el-button>
               </div>
-          
+              <div class="header-right">
-          <!-- 列显示控制 - 使用自动提取，靠右显示 -->
+                <RightToolbar
+                  v-model:showSearch="showSearch"
+                  @queryTable="getDataList"
+                >
                 <TableColumnControl
                   ref="tableColumnControlRef"
                   :table-ref="tableRef"
                   v-model="visibleTableColumns"
                   storage-key="teacherbase-table-columns"
-            trigger-type="default"
+                />
-            trigger-link
+                </RightToolbar>
-          >
-          </TableColumnControl>
               </div>
-      </el-row>
+            </div>
+          </div>
+        </template>
 
         <!-- 表格 -->
         <el-table
@@ -273,6 +263,9 @@
           :data="state.dataList"
           v-loading="state.loading"
           border
+          stripe
+          row-key="teacherNo"
+          class="teacherbase-table"
         >
         <!-- 调试：检查 tableRef -->
         <!-- tableRef 会在组件挂载后自动赋值 -->
@@ -335,7 +328,7 @@
                   }
                 ]">
                 <template #reference>
-                  <span class="certificate-link" style="color: var(--el-color-primary); cursor: pointer;">
+                  <span class="certificate-link">
                     查看详情
                     <el-icon class="title-icon"><InfoFilled /></el-icon>
                   </span>
@@ -355,7 +348,7 @@
           
           <TableColumn label="操作" width="150" align="center" fixed="right">
             <template #default="scope">
-              <div style="display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap;">
+              <div class="op-cell">
                 <el-button
                   v-if="permissions.professional_teacherbase_edit"
                   type="primary"
@@ -382,9 +375,9 @@
         @currentChange="currentChangeHandle"
         @sizeChange="sizeChangeHandle"
       />
+      </el-card>
     </div>
 
-
     <!--1 职工基础信息-->
     <el-dialog v-model="dialogFromVisible" width="90%" :title="nowUserInfo.userName" class="employee-info-dialog">
 
@@ -2705,6 +2698,111 @@
   
 </script>
 <style lang="scss" scoped>
+  // 页面整体布局
+  .teacherbase-page {
+    padding: 12px;
+    min-height: 100%;
+    background: var(--el-bg-color-page, #f5f6f8);
+  }
+
+  .page-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  // 筛选卡片（标题栏与表单样式在 SearchForm 组件内）
+  .search-card {
+    border-radius: 8px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    background: var(--el-bg-color);
+
+    :deep(.el-card__body) {
+      padding: 18px 20px;
+    }
+  }
+
+  // 列表内容卡片
+  .content-card {
+    border-radius: 8px;
+    border: 1px solid var(--el-border-color-lighter);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    background: var(--el-bg-color);
+
+    :deep(.el-card__header) {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-card__body) {
+      padding: 18px;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .card-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--el-text-color-primary);
+
+    .title-icon {
+      font-size: 16px;
+      color: var(--el-color-primary);
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .action-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  // 列表内链接与占位（主表格与弹窗内通用）
+  :deep(.certificate-link) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--el-color-primary) !important;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    &:hover {
+      color: var(--el-color-primary-light-3) !important;
+      text-decoration: underline;
+    }
+    .title-icon {
+      font-size: 14px;
+      opacity: 0.8;
+    }
+  }
+  .empty-text {
+    color: var(--el-text-color-secondary, #909399);
+  }
+
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
@@ -2922,47 +3020,35 @@
       color: #c0c4cc;
       font-size: 14px;
     }
+  }
 
-    // 资格证书链接样式
+  // 列表操作列
-    :deep(.certificate-link){
+  .op-cell {
-      display: inline-flex;
+    display: flex;
     align-items: center;
-      gap: 4px;
+    justify-content: center;
-      color: var(--el-color-primary)!important;
+    flex-wrap: nowrap;
-      cursor: pointer;
+    white-space: nowrap;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        color: var(--el-color-primary-light-3)!important;
-        text-decoration: underline;
-      }
-      
-      .title-icon {
-        font-size: 14px;
-        opacity: 0.8;
-      }
-    }
-    
-    .empty-text {
-      color: #909399;
-    }
-    
-  }
-
-  // 弹窗内容区域样式优化 - 只优化外层容器，不修改组件内部样式
-  .employee-info-dialog {
-    // 只优化弹窗外层，不修改内部组件样式
   }
 
   // 响应式优化
   @media (max-width: 1200px) {
+    .teacherbase-page {
+      padding: 12px;
+    }
+    .card-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .header-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
     .base-info-form {
       padding: 20px;
-      
       .form-section {
         padding: 16px;
         margin-bottom: 24px;
-        
         .section-title {
           font-size: 15px;
           margin-bottom: 16px;
@@ -2971,6 +3057,21 @@
     }
   }
 
-  
+  @media (max-width: 768px) {
+    .teacherbase-page {
+      padding: 8px;
+    }
+    .action-group {
+      flex-direction: column;
+      width: 100%;
+      .el-button {
+        width: 100%;
+      }
+    }
+    .header-right {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
 </style>