Merge branch 'developer' of ssh://code.cyweb.top:30033/scj/zhxy/v3/cloud-ui into developer

2026-02-04 17:52:47 +08:00
parent b483e6a253 51e3e72bd1
commit 085fa4c83f
6 changed files with 396 additions and 106 deletions
--- a/src/components/ClickableTag/index.vue
+++ b/src/components/ClickableTag/index.vue
@@ -2,25 +2,21 @@
  <el-tag 
    :type="type" 
    :size="size" 
+    :effect="effect"
    :class="['clickable-tag', { 'has-action': actualRightIcon !== null}]"
    :style="{ width: width ? `${width}px` : 'auto' }"
    @click="handleClick">
-    <!-- 左侧图标 -->
-    <el-icon 
-      v-if="leftIcon" 
-      :size="size" 
-      class="left-icon">
+    <!-- 左侧图标：支持 Vue 组件（Element 图标，线条）或字符串（如 FontAwesome class，可实心） -->
+    <i v-if="leftIcon && isLeftIconString" :class="leftIcon" class="left-icon left-icon--fa"></i>
+    <el-icon v-else-if="leftIcon" :size="size" class="left-icon">
      <component :is="leftIcon" />
    </el-icon>
-    
    <!-- 主要内容 -->
    <slot></slot>
    
-    <!-- 中间图标（如警告图标） -->
-    <el-icon 
-      v-if="middleIcon" 
-      :size="size" 
-      class="middle-icon">
+    <!-- 中间图标：支持 Vue 组件或字符串（如 FontAwesome class） -->
+    <i v-if="middleIcon && isMiddleIconString" :class="middleIcon" class="middle-icon middle-icon--fa"></i>
+    <el-icon v-else-if="middleIcon" :size="size" class="middle-icon">
      <component :is="middleIcon" />
    </el-icon>
    
@@ -36,26 +32,32 @@

 <script setup lang="ts">
 import { computed } from 'vue'
-import { Right } from '@element-plus/icons-vue'
+import { InfoFilled, Right } from '@element-plus/icons-vue'

 interface Props {
  type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
  size?: 'large' | 'default' | 'small'
-  leftIcon?: any  // 左侧图标组件
-  middleIcon?: any  // 中间图标组件（如警告图标）
-  rightIcon?: any  // 右侧图标组件（默认为 Right null 则不显示）
+  effect?: 'dark' | 'light' | 'plain'  // 主题，与 el-tag 一致
+  leftIcon?: any  // 左侧图标：Vue 组件（Element 图标）或字符串（如 FontAwesome class 'fa-solid fa-circle-xmark'）
+  middleIcon?: any  // 中间图标：Vue 组件或字符串（如 FontAwesome class）
+  rightIcon?: any  // 右侧图标：默认 InfoFilled（表示「可查看详情」）；传 null 不显示；也可用 Right（跳转）、View（查看）等
  width?: string | number  // 自定义宽度
 }

 const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'default',
+  effect: 'light',
  leftIcon: undefined,
  middleIcon: undefined,
  rightIcon: undefined,
  width: undefined
 })

+// 左侧/中间图标为字符串时（如 FontAwesome class）用 <i> 渲染，与 AuditState 实心一致
+const isLeftIconString = computed(() => typeof props.leftIcon === 'string')
+const isMiddleIconString = computed(() => typeof props.middleIcon === 'string')
+
 // 获取实际的右侧图标：未传值时使用默认图标，传 null 则不显示
 const actualRightIcon = computed(() => {
  if (props.rightIcon === null) return null
@@ -80,6 +82,11 @@ export default {
 <style scoped lang="scss">
 .clickable-tag {
  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  .left-icon {
+    margin-right: 4px;
+  }
  
  // 覆盖 el-tag 的内部结构
  :deep(.el-tag__content) {
@@ -91,10 +98,8 @@ export default {
  // 有交互功能时才显示手型光标和悬停效果
  &.has-action {
    cursor: pointer;
-    
    &:hover {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);   
      .right-icon {
        transform: translateX(2px);
      }
@@ -103,7 +108,6 @@ export default {
  .middle-icon {
    animation: pulse 1.5s ease-in-out infinite;
  }
-  
  .right-icon {
    opacity: 0.7;
    transition: all 0.2s;
--- a/src/layout/navBars/breadcrumb/asyncTaskDrawer.vue
+++ b/src/layout/navBars/breadcrumb/asyncTaskDrawer.vue
@@ -0,0 +1,150 @@
+<template>
+	<el-drawer
+		v-model="visible"
+		title="上传和下载任务"
+		direction="rtl"
+		size="50%"
+		destroy-on-close
+		@open="onOpen"
+	>
+		<el-tabs v-model="activeTab">
+			<el-tab-pane label="上传" name="upload" />
+			<el-tab-pane label="下载" name="download" />
+			<el-tab-pane label="其他" name="other" />
+		</el-tabs>
+
+		<div class="task-table-wrap">
+			<el-table
+				v-loading="loading[activeTab]"
+				:data="list[activeTab]"
+				height="calc(100vh - 240px)"
+				row-key="id"
+				:empty-text="emptyText"
+				size="small"
+				stripe
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+			>
+				<el-table-column label="所属模块" prop="moduleName" width="120" show-overflow-tooltip />
+				<el-table-column label="任务类型" prop="typeLabel" width="100" show-overflow-tooltip />
+				<el-table-column label="任务名称" prop="detailType" min-width="150" show-overflow-tooltip />
+				<el-table-column label="任务状态" align="center" show-overflow-tooltip>
+					<template #default="{ row }">
+						<el-tag>{{ row.status }}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="时间" width="150" show-overflow-tooltip>
+					<template #default="{ row }">
+						{{ formatTime(row) }}
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="task-pagination">
+				<el-pagination
+					v-model:current-page="pagination[activeTab].current"
+					v-model:page-size="pagination[activeTab].size"
+					:page-sizes="[10, 20, 50]"
+					:total="pagination[activeTab].total"
+					layout="prev, pager, next, sizes"
+					small
+					@current-change="onPageChange"
+					@size-change="onSizeChange"
+				/>
+			</div>
+		</div>
+	</el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue'
+import { fetchList } from '/@/api/basic/basicasynctask'
+
+type TaskTab = 'upload' | 'download' | 'other'
+
+const visible = ref(false)
+const activeTab = ref<TaskTab>('upload')
+const loading = reactive<Record<TaskTab, boolean>>({ upload: false, download: false, other: false })
+const list = reactive<Record<TaskTab, any[]>>({ upload: [], download: [], other: [] })
+const pagination = reactive<Record<TaskTab, { current: number; size: number; total: number }>>({
+	upload: { current: 1, size: 10, total: 0 },
+	download: { current: 1, size: 10, total: 0 },
+	other: { current: 1, size: 10, total: 0 },
+})
+
+/** Tab 对应接口 type：1 上传 2 下载 3 其他 */
+const TAB_TYPE_MAP: Record<TaskTab, number> = { upload: 1, download: 2, other: 3 }
+const EMPTY_TEXT_MAP: Record<TaskTab, string> = { upload: '暂无上传任务', download: '暂无下载任务', other: '暂无其他任务' }
+
+// 表格样式，参考主列表页通用样式
+const tableStyle = {
+	cellStyle: { textAlign: 'center' },
+	headerCellStyle: {
+		textAlign: 'center',
+		background: 'var(--el-table-row-hover-bg-color)',
+		color: 'var(--el-text-color-primary)',
+	},
+}
+
+const emptyText = computed(() => EMPTY_TEXT_MAP[activeTab.value])
+
+const loadList = async () => {
+	const type = activeTab.value
+	const p = pagination[type]
+	loading[type] = true
+	try {
+		const res = await fetchList({ type: TAB_TYPE_MAP[type], current: p.current, size: p.size })
+		const data = res?.data ?? res
+		const records = data?.records ?? []
+		const total = data?.total ?? 0
+		list[type] = Array.isArray(records) ? records : []
+		p.total = Number(total) || 0
+	} catch {
+		list[type] = []
+	} finally {
+		loading[type] = false
+	}
+}
+
+const onPageChange = (page: number) => {
+	pagination[activeTab.value].current = page
+	loadList()
+}
+
+const onSizeChange = (size: number) => {
+	pagination[activeTab.value].size = size
+	pagination[activeTab.value].current = 1
+	loadList()
+}
+
+const onOpen = () => {
+	loadList()
+}
+
+// 切换 Tab 时加载对应列表
+watch(activeTab, () => {
+	if (visible.value) loadList()
+})
+
+const formatTime = (item: any) => {
+	const t = item?.createTime ?? item?.create_time ?? item?.updateTime ?? item?.update_time ?? ''
+	return t ? (t.slice(0, 16).replace('T', ' ')) : '-'
+}
+
+const open = () => {
+	visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.task-table-wrap {
+	padding: 0 4px;
+}
+.task-pagination {
+	padding: 12px 0;
+	display: flex;
+	justify-content: flex-end;
+}
+</style>
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('user.title1')"></i>
 			</div>
@@ -10,7 +10,12 @@
 					<el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
-		</el-dropdown>
+		</el-dropdown> -->
+		<div class="layout-navbars-breadcrumb-user-icon" @click="onAsyncTaskClick">
+			<el-icon title="上传和下载任务">
+				<ele-FolderOpened />
+			</el-icon>
+		</div>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLockClick">
 			<el-icon :title="$t('layout.threeLockScreenTime')">
 				<ele-Lock />
@@ -76,6 +81,7 @@
 		<personal-drawer ref="personalDrawerRef"></personal-drawer>

    <change-role ref="ChangeRoleRef" />
+		<AsyncTaskDrawer ref="asyncTaskDrawerRef" />
 	</div>
 </template>

@@ -95,8 +101,10 @@ import { fetchUserMessageList } from '/@/api/admin/message';
 import {useFlowJob} from "/@/flow/stores/flowJob";


-const ChangeRoleRef=ref()
+const ChangeRoleRef = ref()
 const ChangeRole = defineAsyncComponent(() => import('/@/views/admin/system/role/change-role.vue'))
+const asyncTaskDrawerRef = ref()
+const AsyncTaskDrawer = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/asyncTaskDrawer.vue'))
 // 引入组件
 const GlobalWebsocket = defineAsyncComponent(() => import('/@/components/Websocket/index.vue'));
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
@@ -207,6 +215,10 @@ const onHandleCommandClick = (path: string) => {
 const onSearchClick = () => {
 	searchRef.value.openSearch();
 };
+// 上传/下载任务点击
+const onAsyncTaskClick = () => {
+	asyncTaskDrawerRef.value?.open();
+};
 // 语言切换
 const onLanguageChange = (lang: string) => {
 	Local.remove('themeConfig');
@@ -241,15 +253,25 @@ const getIsDot = () => {
 	});
 };

+// 登录后若存储中无角色信息则弹出角色切换框
+const openChangeRoleIfMissing = () => {
+	const hasRole = Local.get('roleCode') && Local.get('roleName') && Local.get('roleId')
+	if (!hasRole) {
+		nextTick(() => {
+			setTimeout(() => ChangeRoleRef.value?.open(), 100)
+		})
+	}
+}
+
 // 页面加载时
 onMounted(() => {
 	if (Local.get('themeConfig')) {
 		initI18nOrSize('globalComponentSize', 'disabledSize');
 		initI18nOrSize('globalI18n', 'disabledI18n');
 	}
-    useFlowJob().topJobList()
-
-	getIsDot();
+	useFlowJob().topJobList()
+	getIsDot()
+	openChangeRoleIfMissing()
 });
 </script>

--- a/src/views/admin/system/role/change-role.vue
+++ b/src/views/admin/system/role/change-role.vue
@@ -1,60 +1,86 @@
 <template>
-  <el-dialog v-model="visible" title="角色切换" width="50%">
+  <el-dialog
+    v-model="visible"
+    title="角色切换"
+    width="50%"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :before-close="handleBeforeClose"
+  >
    <el-form>
 <!--      <el-form-item label="学校">-->
 <!--        <el-tag>{{schoolName}}</el-tag>-->
 <!--      </el-form-item>-->
-      <el-form-item label="角色">
-        <el-radio-group v-model="radio">
-          <el-radio-button v-for="(item,index) in allRole"  :key="index" :label="item.roleCode" @click.native="handleChangeRole(item.roleCode)">{{item.roleName}}</el-radio-button>
+      <el-form-item label="角色" class="role-form-item">
+        <el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole">
+          <el-radio-button
+            v-for="item in allRole"
+            :key="item.roleCode"
+            :label="item.roleCode"
+          >
+            {{ item.roleName }}
+          </el-radio-button>
        </el-radio-group>
-
      </el-form-item>
    </el-form>


    <template #footer>
-<!--      <el-button type="primary" @click="handleChangeRole">切换</el-button>-->
-      <el-button  @click="visible=false">关 闭</el-button>
+      <!--      <el-button type="primary" @click="handleChangeRole">切换</el-button>-->
+      <el-button @click="handleFooterClose">关 闭</el-button>
    </template>
  </el-dialog>
 </template>

 <script setup lang="ts">
-import {listAllRole} from '/@/api/admin/role'
-import {Local, Session} from '/@/utils/storage';
-import {useMessage} from "/@/hooks/message";
-// import {querySchoolName} from "/@/api/admin/tenant"
+import { listAllRole } from '/@/api/admin/role'
+import { Local } from '/@/utils/storage'
+import { useMessage } from '/@/hooks/message'

-const visible=ref(false)
-const radio=ref('')
-const allRole=reactive([])
-// const schoolName=ref('')
+const visible = ref(false)
+const radio = ref('')
+const allRole = reactive<any[]>([])

-const open=()=>{
-  visible.value=true
-  // handleQuerySchoolName()
-  listAllRole().then(res=>{
-    Object.assign(allRole,res.data)
-    radio.value=Local.get("roleCode")
-    visible.value=true
+const open = () => {
+  visible.value = true
+  listAllRole().then((res) => {
+    Object.assign(allRole, res.data)
+    radio.value = Local.get('roleCode')
+    visible.value = true
  })
 }
-const handleChangeRole=(label:any)=>{
-  let obj:any=allRole.find((v:any) => v.roleCode == label)
-  Local.set("roleCode",obj.roleCode)
-  Local.set("roleName",obj.roleName)
-  Local.set("roleId",obj.roleId)
-  useMessage().success("操作成功")
-  setTimeout(()=>{
-    window.location.reload()
-  },500)
+
+const canClose = () => {
+  if (!radio.value) {
+    useMessage().warning('请选择一个角色')
+    return false
+  }
+  return true
 }

-const handleQuerySchoolName=()=>{
-  // querySchoolName({id:Session.get("tenantId")}).then((res:any)=>{
-  //   schoolName.value=res.data
-  // })
+const handleBeforeClose = (done: () => void) => {
+  if (!canClose()) return
+  done()
+}
+
+const handleFooterClose = () => {
+  if (!canClose()) return
+  visible.value = false
+}
+
+const handleChangeRole = (label: string) => {
+  const obj = allRole.find((v: any) => v.roleCode === label)
+  if (!obj) return
+  Local.set('roleCode', obj.roleCode)
+  Local.set('roleName', obj.roleName)
+  Local.set('roleId', obj.roleId)
+  useMessage().success('操作成功')
+  setTimeout(() => {
+    // 切换角色后统一回到首页，避免停留在诸如 jsonflow/run-job/do-job 等内部路由
+    window.location.hash = '#/'
+    window.location.reload()
+  }, 500)
 }

 defineExpose({
@@ -62,6 +88,28 @@ defineExpose({
 })
 </script>

-<style scoped>
+<style scoped lang="scss">
+.role-form-item {
+  :deep(.el-form-item__content) {
+    flex-wrap: wrap;
+  }
+}
+.role-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;

+  /* 每个按钮独立边框，换行后左侧也有边线 */
+  :deep(.el-radio-button) {
+    margin: 0;
+  }
+  :deep(.el-radio-button__inner) {
+    border-radius: 6px !important;
+    border: 1px solid var(--el-border-color) !important;
+    margin-left: 0 !important;
+  }
+  :deep(.el-radio-button.is-active .el-radio-button__inner) {
+    border-color: var(--el-color-primary) !important;
+  }
+}
 </style>
--- a/src/views/professional/professionalteacherhonor/index.vue
+++ b/src/views/professional/professionalteacherhonor/index.vue
@@ -83,9 +83,45 @@
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        
-        <el-table-column prop="state" label="审核状态" width="120" align="center">
+        <el-table-column prop="state" label="审核状态" width="130" align="center">
          <template #default="scope">
-            <AuditState :state="scope.row.state" :options="auditStateOptions" />
+            <DetailPopover
+              v-if="scope.row.state === '-2' && scope.row.backReason"
+              title="审核详情"
+              placement="top"
+              :width="300"
+              :items="[
+                { label: '审核状态', layout: 'horizontal', content: getAuditStateTagConfig(scope.row.state)?.label },
+                { label: '驳回理由', content: scope.row.backReason, contentClass: 'reason-content' }
+              ]"
+            >
+              <template #reference>
+                <ClickableTag
+                  :type="getAuditStateTagConfig(scope.row.state)?.type || 'danger'"
+                  :left-icon="getAuditStateTagConfig(scope.row.state)?.leftIcon"
+                  :effect="getAuditStateTagConfig(scope.row.state)?.effect || 'dark'"                
+                >
+                  {{ getAuditStateTagConfig(scope.row.state)?.label || '已驳回' }}
+                </ClickableTag>
+              </template>
+              <template #content-0>
+                <ClickableTag
+                  :type="getAuditStateTagConfig(scope.row.state)?.type || 'danger'"
+                  :left-icon="getAuditStateTagConfig(scope.row.state)?.leftIcon"
+                  :effect="getAuditStateTagConfig(scope.row.state)?.effect || 'dark'"
+                  :right-icon="null"
+                >
+                  {{ getAuditStateTagConfig(scope.row.state)?.label || '已驳回' }}
+                </ClickableTag>
+              </template>
+              <template #content-1>
+                <div class="reason-content">
+                  <el-icon class="reason-icon"><Warning /></el-icon>
+                  <span>{{ scope.row.backReason }}</span>
+                </div>
+              </template>
+            </DetailPopover>
+            <AuditState v-else :state="scope.row.state" :options="auditStateOptions" />
          </template>
        </el-table-column>
        
@@ -114,8 +150,6 @@
          </template>
        </el-table-column>
        
-        <el-table-column prop="backReason" label="驳回理由" min-width="150" align="center" show-overflow-tooltip />
-        
        <el-table-column label="操作" width="280" align="center" fixed="right">
          <template #default="scope">
            <el-button
@@ -158,7 +192,6 @@
              type="danger"
              link
              icon="delete"
-              style="margin-left: 12px"
              @click="handleDel(scope.row)">删除
            </el-button>
          </template>
@@ -199,10 +232,12 @@ import {
  examObj, 
  delObj
 } from '/@/api/professional/professionaluser/professionalteacherhonor'
-import { PROFESSIONAL_AUDIT_STATE_OPTIONS } from '/@/config/global'
+import { PROFESSIONAL_AUDIT_STATE_OPTIONS, getStatusConfig } from '/@/config/global'
 import { defineAsyncComponent } from 'vue'
 const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
 const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
+const ClickableTag = defineAsyncComponent(() => import('/@/components/ClickableTag/index.vue'))
+const DetailPopover = defineAsyncComponent(() => import('/@/components/DetailPopover/index.vue'))
 const ProfessionalBackResaon = defineAsyncComponent(() => import('/@/views/professional/common/professional-back-resaon.vue'))
 const DataForm = defineAsyncComponent(() => import('./form.vue'))
 const previewFile = defineAsyncComponent(() => import('/@/components/tools/preview-file.vue'))
@@ -217,6 +252,13 @@ const { professional_state: professionalState } = useDict('professional_state')
 // 审核状态选项
 const auditStateOptions = PROFESSIONAL_AUDIT_STATE_OPTIONS

+// 审核状态转 ClickableTag 配置（用 options 的 icon 字符串，与 AuditState 一致为实心）
+const getAuditStateTagConfig = (state: string | number) => {
+  const opt = getStatusConfig(auditStateOptions, state)
+  if (!opt) return null
+  return { type: opt.type, label: opt.label, leftIcon: opt.icon, effect: opt.effect || 'dark' }
+}
+
 // 无权限即无节点
 const { hasAuth } = useAuth()

@@ -369,4 +411,29 @@ const handleDownLoadWord = async () => {
 </script>

 <style lang="scss" scoped>
+/* 驳回理由展示（与 backSchoolCheckin 一致） */
+.reason-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #fef0f0;
+  border-radius: 4px;
+  border-left: 3px solid #f56c6c;
+
+  .reason-icon {
+    color: #f56c6c;
+    font-size: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  span {
+    color: #f56c6c;
+    font-size: 13px;
+    line-height: 1.6;
+    word-break: break-all;
+    flex: 1;
+  }
+}
 </style>
--- a/src/views/professional/professionaltitlerelation/index.vue
+++ b/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);
 }

 /* 表格 */