a

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">
-    <!-- 左侧图标 -->
+    <!-- 左侧图标：支持 Vue 组件（Element 图标，线条）或字符串（如 FontAwesome class，可实心） -->
-    <el-icon 
+    <i v-if="leftIcon && isLeftIconString" :class="leftIcon" class="left-icon left-icon--fa"></i>
-      v-if="leftIcon" 
+    <el-icon v-else-if="leftIcon" :size="size" class="left-icon">
-      :size="size" 
-      class="left-icon">
       <component :is="leftIcon" />
     </el-icon>
-    
     <!-- 主要内容 -->
     <slot></slot>
     
-    <!-- 中间图标（如警告图标） -->
+    <!-- 中间图标：支持 Vue 组件或字符串（如 FontAwesome class） -->
-    <el-icon 
+    <i v-if="middleIcon && isMiddleIconString" :class="middleIcon" class="middle-icon middle-icon--fa"></i>
-      v-if="middleIcon" 
+    <el-icon v-else-if="middleIcon" :size="size" class="middle-icon">
-      :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  // 左侧图标组件
+  effect?: 'dark' | 'light' | 'plain'  // 主题，与 el-tag 一致
-  middleIcon?: any  // 中间图标组件（如警告图标）
+  leftIcon?: any  // 左侧图标：Vue 组件（Element 图标）或字符串（如 FontAwesome class 'fa-solid fa-circle-xmark'）
-  rightIcon?: any  // 右侧图标组件（默认为 Right null 则不显示）
+  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);   
-      
       .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;

src/views/admin/system/role/change-role.vue

@@ -4,11 +4,16 @@
 <!--      <el-form-item label="学校">-->
 <!--        <el-tag>{{schoolName}}</el-tag>-->
 <!--      </el-form-item>-->
-      <el-form-item label="角色">
+      <el-form-item label="角色" class="role-form-item">
-        <el-radio-group v-model="radio">
+        <el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole">
-          <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-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>
 
@@ -40,15 +45,16 @@ const open=()=>{
     visible.value=true
   })
 }
-const handleChangeRole=(label:any)=>{
+const handleChangeRole = (label: string) => {
-  let obj:any=allRole.find((v:any) => v.roleCode == label)
+  const obj = allRole.find((v: any) => v.roleCode === label)
-  Local.set("roleCode",obj.roleCode)
+  if (!obj) return
-  Local.set("roleName",obj.roleName)
+  Local.set('roleCode', obj.roleCode)
-  Local.set("roleId",obj.roleId)
+  Local.set('roleName', obj.roleName)
-  useMessage().success("操作成功")
+  Local.set('roleId', obj.roleId)
-  setTimeout(()=>{
+  useMessage().success('操作成功')
+  setTimeout(() => {
     window.location.reload()
-  },500)
+  }, 500)
 }
 
 const handleQuerySchoolName=()=>{
@@ -62,6 +68,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>

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>

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;
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding-left: 12px;
+  // border-left: 1px solid var(--el-border-color-lighter);
 }
 
 /* 表格 */