From 94b5b8b7ab99760c9d1d059cc1e52e12f7dea2f1 Mon Sep 17 00:00:00 2001
From: guochunsi <1595020186@qq.com>
Date: Thu, 5 Feb 2026 15:35:46 +0800
Subject: [PATCH] a

---
 src/assets/styles/page-cards.scss             | 188 ++++++++++++++++
 src/components/SearchForm/index.vue           |  56 +++--
 src/theme/app.scss                            |   2 +-
 src/theme/element.scss                        |   6 +
 .../index.vue                                 | 211 ++++++++++--------
 src/views/professional/teacherbase/index.vue  |  94 +-------
 6 files changed, 352 insertions(+), 205 deletions(-)
 create mode 100644 src/assets/styles/page-cards.scss

diff --git a/src/assets/styles/page-cards.scss b/src/assets/styles/page-cards.scss
new file mode 100644
index 0000000..61e0884
--- /dev/null
+++ b/src/assets/styles/page-cards.scss
@@ -0,0 +1,188 @@
+/**
+ * 列表页卡片布局公共样式（筛选卡片 + 内容卡片 + 表头）
+ * 各业务模块通用，不限于专业模块
+ *
+ * 使用：@import '/@/assets/styles/page-cards.scss';
+ * 模板类名：.page-cards > .page-wrapper > .search-card / .content-card
+ */
+
+// 页面整体
+.page-cards {
+  padding: 12px;
+  min-height: 100%;
+  background: var(--el-bg-color-page, #f5f6f8);
+}
+
+// 页面包装器
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+// 筛选卡片
+.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 5px 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: 20px 20px 15px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  :deep(.el-card__body) {
+    padding: 15px 20px 20px;
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.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;
+}
+
+.action-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+// 小屏幕适配（≤768px）
+@media screen and (max-width: 768px) {
+  .page-cards {
+    padding: 8px;
+  }
+
+  .page-wrapper {
+    gap: 8px;
+  }
+
+  .search-card :deep(.el-card__body) {
+    padding: 12px 14px 4px 14px;
+  }
+
+  .content-card :deep(.el-card__header) {
+    padding: 14px 14px 12px;
+  }
+
+  .content-card :deep(.el-card__body) {
+    padding: 12px 14px 14px;
+  }
+
+  .card-header {
+    gap: 8px;
+  }
+
+  .card-title {
+    font-size: 14px;
+    .title-icon {
+      font-size: 15px;
+    }
+  }
+
+  .header-actions {
+    gap: 8px;
+  }
+
+  .action-group {
+    gap: 8px;
+    // 按钮间距
+    .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .header-right {
+    padding-left: 8px;
+  }
+}
+
+// 超小屏幕适配（≤576px）
+@media screen and (max-width: 576px) {
+  .page-cards {
+    padding: 6px;
+  }
+
+  .page-wrapper {
+    gap: 6px;
+  }
+
+  .search-card :deep(.el-card__body) {
+    padding: 10px 12px 14px 12px;
+  }
+
+  .content-card :deep(.el-card__header) {
+    padding: 12px 12px 10px;
+  }
+
+  .content-card :deep(.el-card__body) {
+    padding: 10px 12px 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .header-actions {
+    width: 100%;
+  }
+  .action-group {
+    gap: 6px;
+    // 按钮间距
+    .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .header-right {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 8px;
+    border-left: none;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+}
diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
index 4eae91a..cf562de 100644
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -1,27 +1,31 @@
 <template>
-	<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
+	<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle && props.showFilterTitle }">
 		<div class="search-form__bar">
 			<div class="search-form-container">
 				<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
 					<!-- 筛选 + 展开更多 放在同一表单项内，保证垂直对齐 -->
-					<el-form-item v-if="filterTitle || hasCollapsibleItems" class="search-form__left-group">
+					<el-form-item v-if="(filterTitle && props.showFilterTitle) || hasCollapsibleItems" class="search-form__left-group">
 						<div class="search-form__left-inner">
-							<span v-if="filterTitle" class="search-form__title">
+							<span v-if="filterTitle && props.showFilterTitle" class="search-form__title" :style="{ marginRight: hasCollapsibleItems ? '12px' : '0' }">
 								<el-icon class="search-form__title-icon"><Search /></el-icon>
 								{{ filterTitle }}
 							</span>
 							<el-button
 								v-if="hasCollapsibleItems"
-								link
 								type="primary"
 								class="toggle-btn"
 								@click="toggleExpand"
+								round
 							>
-								<el-icon style="margin-right: 4px">
-									<ArrowUp v-if="isExpanded" />
-									<ArrowDown v-else />
+								<el-icon
+									class="toggle-btn__icon"
+									:class="{ 'toggle-btn__icon--expanded': isExpanded }"
+								>
+									<CaretBottom />
 								</el-icon>
-								{{ isExpanded ? '收起' : '展开更多' }}
+								<span class="toggle-btn__text">
+									{{ isExpanded ? '收起筛选' : '更多筛选' }}
+								</span>
 							</el-button>
 						</div>
 					</el-form-item>
@@ -44,7 +48,7 @@
 
 <script setup lang="ts" name="search-form">
 import { ref, watch, computed, onMounted, nextTick } from 'vue';
-import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
+import { CaretBottom, Search } from '@element-plus/icons-vue';
 
 const props = defineProps({
 	/**
@@ -52,7 +56,14 @@ const props = defineProps({
 	 */
 	filterTitle: {
 		type: String,
-		default: '',
+		default: '筛选',
+	},
+	/**
+	 * 是否显示筛选标题文案（仅控制左侧「筛选」文字和图标）
+	 */
+	showFilterTitle: {
+		type: Boolean,
+		default: false,
 	},
 	/**
 	 * 表单数据模型
@@ -227,7 +238,6 @@ defineExpose({
 	gap: 6px;
 	flex-shrink: 0;
 	padding-right: 12px;
-	margin-right: 12px;
 	height: 32px;
 	line-height: 32px;
 	font-size: 14px;
@@ -261,13 +271,29 @@ defineExpose({
 		align-items: center;
 	}
 
+	.search-form__left-inner :deep(.toggle-btn__icon) {
+		transition: transform 0.25s ease;
+	}
+	.search-form__left-inner :deep(.toggle-btn__icon--expanded) {
+		transform: rotate(180deg);
+	}
+
 	.search-form__left-inner :deep(.toggle-btn) {
-		font-size: 14px;
-		font-weight: 500;
-		height: 32px;
+		padding: 0 12px;
 		display: inline-flex;
 		align-items: center;
-		border-radius: 6px;
+		font-weight: 500;
+		// 默认态直接使用 hover 的视觉样式
+		color: var(--el-color-primary);
+		background-color: var(--el-fill-color-lighter);
+		border: 1px solid var(--el-color-primary-light-7);
+		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+			border-color: var(--el-color-primary);
+			color: var(--el-color-primary);
+		}
 	}
 
 	:deep(.el-form-item:not(:has(.el-button))) {
diff --git a/src/theme/app.scss b/src/theme/app.scss
index cb0cf69..b4f5d26 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -50,7 +50,7 @@ body,
 	width: 100%;
 	height: 100%;
 	.layout-pd {
-		padding: 10px !important;
+		padding: 12px !important;
 		background: linear-gradient(135deg,#f5f7fa,#e9ecef);
 	}
 	.layout-flex {
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 29aa617..3a148c4 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -439,6 +439,12 @@
 	background-color: #f5f7ff;
 }
 
+/* 表格单元格内边距（全局）- 左右用默认，上下 9px */
+.el-table .el-table__body td,
+.el-table .el-table__header th {
+	padding: 9px 0;
+}
+
 /* scrollbar
 ------------------------------- */
 .el-scrollbar__bar {
diff --git a/src/views/professional/professionalqualificationrelation/index.vue b/src/views/professional/professionalqualificationrelation/index.vue
index 0cfb540..0f26e2c 100644
--- a/src/views/professional/professionalqualificationrelation/index.vue
+++ b/src/views/professional/professionalqualificationrelation/index.vue
@@ -1,87 +1,100 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <!-- 搜索表单 -->
-      <search-form 
-        v-show="showSearch" 
-        :model="search" 
-        ref="searchFormRef"
-        @keyup-enter="handleFilter"
-      >
-        <template #default="{ visible }">
-          <template v-if="visible">
-            <el-form-item label="审核状态" prop="state">
-              <el-select
-                v-model="search.state"
-                clearable
-                placeholder="请选择审核状态"
-              >
-                <el-option
-                  v-for="item in professionalState"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+  <div class="page-cards">
+    <div class="page-wrapper">
+      <!-- 筛选卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <search-form
+          :model="search"
+          ref="searchFormRef"
+          @keyup-enter="handleFilter"
+        >
+          <template #default="{ visible }">
+            <template v-if="visible">
+              <el-form-item label="审核状态" prop="state">
+                <el-select
+                  v-model="search.state"
+                  clearable
+                  placeholder="请选择审核状态"
+                >
+                  <el-option
+                    v-for="item in professionalState"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="工号" prop="teacherNo">
+                <el-input
+                  v-model="search.teacherNo"
+                  clearable
+                  placeholder="请输入工号"
                 />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="工号" prop="teacherNo">
-              <el-input
-                v-model="search.teacherNo"
-                clearable
-                placeholder="请输入工号"
-              />
-            </el-form-item>
-
-            <el-form-item label="姓名" prop="realName">
-              <el-input
-                v-model="search.realName"
-                clearable
-                placeholder="请输入姓名"
-              />
+              </el-form-item>
+              <el-form-item label="姓名" prop="realName">
+                <el-input
+                  v-model="search.realName"
+                  clearable
+                  placeholder="请输入姓名"
+                />
+              </el-form-item>
+            </template>
+          </template>
+          <template #actions>
+            <el-form-item>
+              <el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
+              <el-button @click="resetQuery" icon="Refresh">重置</el-button>
             </el-form-item>
           </template>
+        </search-form>
+      </el-card>
+
+      <!-- 列表内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Medal /></el-icon>
+              职业资格信息
+            </span>
+            <div class="header-actions">
+              <div class="action-group">
+                <el-button
+                  v-if="hasAuth('professional_professionalqualificationrelation_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>
         </template>
 
-        <!-- 操作按钮 -->
-        <template #actions>
-          <el-form-item>
-            <el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
-            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
-          </el-form-item>
-        </template>
-      </search-form>
-
-      <!-- 操作按钮 -->
-      <el-row>
-        <div class="mb15" style="width: 100%;">
-          <el-button
-            v-if="hasAuth('professional_professionalqualificationrelation_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>
-      </el-row>
-
-      <!-- 表格 -->
-      <el-table
-        ref="tableRef"
-        :data="state.dataList"
-        row-key="id"
-        v-loading="state.loading"
-        border
-        :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle"
-      >
+        <!-- 表格 -->
+        <el-table
+          ref="tableRef"
+          :data="state.dataList"
+          row-key="id"
+          v-loading="state.loading"
+          border
+          stripe
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+        >
         <el-table-column type="index" label="序号" width="60" align="center" />
         
         <el-table-column prop="state" label="审核状态" width="120" align="center">
@@ -172,27 +185,28 @@
             </el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-bind="state.pagination"
-        @current-change="currentChangeHandle"
-        @size-change="sizeChangeHandle"
-      />
-
-      <!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
-      <preview-file 
-        v-for="src in imgUrl" 
-        :key="src.title" 
-        :authSrc="src.url"
-        dialog-title="职业资格材料"
-      />
-
-      <!-- 子组件 -->
-      <DataForm ref="dataFormRef" @refreshData="handleFilter" />
-      <ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
+        <!-- 分页 -->
+        <pagination
+          v-bind="state.pagination"
+          @current-change="currentChangeHandle"
+          @size-change="sizeChangeHandle"
+        />
+      </el-card>
     </div>
+
+    <!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
+    <preview-file
+      v-for="src in imgUrl"
+      :key="src.title"
+      :authSrc="src.url"
+      dialog-title="职业资格材料"
+    />
+
+    <!-- 子组件 -->
+    <DataForm ref="dataFormRef" @refreshData="handleFilter" />
+    <ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
   </div>
 </template>
 
@@ -213,6 +227,8 @@ import { getLevelList } from '/@/api/professional/rsbase/professionalqualificati
 import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
 import { PROFESSIONAL_AUDIT_STATE_OPTIONS } from '/@/config/global'
 import { defineAsyncComponent } from 'vue'
+import { Medal } from '@element-plus/icons-vue'
+const RightToolbar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
 const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
 const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
 const DataForm = defineAsyncComponent(() => import('./form.vue'))
@@ -424,4 +440,5 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+@import '/@/assets/styles/page-cards.scss';
 </style>
diff --git a/src/views/professional/teacherbase/index.vue b/src/views/professional/teacherbase/index.vue
index c00a3c4..873c91e 100644
--- a/src/views/professional/teacherbase/index.vue
+++ b/src/views/professional/teacherbase/index.vue
@@ -1,13 +1,12 @@
 
 <template>
-  <div class="teacherbase-page">
+  <div class="page-cards">
     <div class="page-wrapper">
       <!-- 筛选条件卡片：标题由 SearchForm 组件内置 -->
       <el-card v-show="showSearch" class="search-card" shadow="never">
         <search-form
           :model="search"
           ref="searchFormRef"
-          filter-title="筛选"
           @keyup-enter="handleFilter(search)"
         >
         <template #default="{ visible }">
@@ -2698,96 +2697,7 @@
   
 </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 5px 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: 20px 20px 15px;
-      border-bottom: 1px solid var(--el-border-color-lighter);
-    }
-
-    :deep(.el-card__body) {
-      padding: 15px 20px 20px;
-    }
-  }
-
-  .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;
-  }
-
-  .header-right {
-    display: flex;
-    align-items: center;
-    padding-left: 10px;
-  }
-
-  // 主表格行高稍增加
-  .teacherbase-table {
-    :deep(.el-table__body td),
-    :deep(.el-table__header th) {
-      padding: 9px 0;
-    }
-  }
+  @import '/@/assets/styles/page-cards.scss';
 
   // 列表内链接与占位（主表格与弹窗内通用）
   :deep(.certificate-link) {