样式优化

src/views/expert/list/index.vue

@@ -29,26 +29,30 @@
 
           <div class="filter-field">
             <span class="filter-label">按梯队搜索</span>
-            <div class="echelon-options" role="group" aria-label="按梯队搜索">
-              <button
-                type="button"
-                class="echelon-option"
-                :class="{ 'is-active': queryParams.echelon === undefined }"
-                @click="selectEchelon(undefined)"
-              >
-                全部
-              </button>
-              <button
+            <el-select v-model="queryParams.echelon" placeholder="请选择专家梯队" clearable>
+              <el-option
                 v-for="dict in getStrDictOptions(DICT_TYPE.RD_EXPERT_ECHELON)"
                 :key="dict.value"
-                type="button"
-                class="echelon-option"
-                :class="{ 'is-active': String(queryParams.echelon) === String(dict.value) }"
-                @click="selectEchelon(String(dict.value))"
-              >
-                {{ dict.label }}
-              </button>
-            </div>
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </div>
+
+          <div class="filter-field">
+            <span class="filter-label">按专业搜索</span>
+            <el-select
+              v-model="queryParams.specialDirection"
+              placeholder="请选择专业方向"
+              clearable
+            >
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.RD_EXPERT_TECHNICAL)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="Number(dict.value)"
+              />
+            </el-select>
           </div>
 
           <div class="filter-actions">
@@ -68,9 +72,11 @@
               <span class="cloud-title">词云搜索</span>
               <span class="cloud-hint">点击标签快速筛选专家专长</span>
             </div>
-            <span class="cloud-refresh">↻ 换一批</span>
+            <button type="button" class="cloud-toggle" @click="wordCloudVisible = !wordCloudVisible">
+              {{ wordCloudVisible ? '隐藏' : '显示' }}
+            </button>
           </div>
-          <div class="word-cloud">
+          <div v-if="wordCloudVisible" class="word-cloud">
             <button
               v-for="word in wordCloudWords"
               :key="word.text"
@@ -748,6 +754,7 @@ type ExpertGroup = {
 const selectedMember = ref('')
 const selectedEducation = ref('')
 const selectedTeam = ref('')
+const wordCloudVisible = ref(true)
 const drawerVisible = ref(false)
 const activeExpert = ref<ExpertProfile | null>(null)
 
@@ -755,6 +762,7 @@ const resetQueryParams = () => ({
   deptId: undefined,
   education: undefined,
   echelon: undefined,
+  specialDirection: undefined,
   expertName: undefined
 })
 
@@ -976,10 +984,6 @@ const handleWordClick = (word: string) => {
   queryParams.expertName = word
 }
 
-const selectEchelon = (value: string | undefined) => {
-  queryParams.echelon = value as any
-}
-
 const handleTeamSelectionChange = (rows: any[]) => {
   if (syncingTeamSelection.value) return
   const currentPageIds = teamList.value.map((item) => item.id)
@@ -1135,6 +1139,7 @@ const queryParams = reactive({
   deptId: undefined,
   education: undefined,
   echelon: undefined,
+  specialDirection: undefined,
   expertName: undefined
 })
 
@@ -1285,7 +1290,12 @@ onMounted(async () => {
 
 .filter-fields {
   display: grid;
-  grid-template-columns: minmax(220px, 0.9fr) minmax(180px, 0.78fr) minmax(250px, 1.22fr) auto;
+  grid-template-columns:
+    minmax(180px, 0.9fr)
+    minmax(160px, 0.78fr)
+    minmax(160px, 0.8fr)
+    minmax(180px, 0.9fr)
+    auto;
   align-items: end;
   gap: 18px;
 }
@@ -1403,7 +1413,7 @@ onMounted(async () => {
   font-size: 14px;
 }
 
-.cloud-refresh {
+.cloud-toggle {
   border: 0;
   padding: 0;
   color: #234395;