调整下拉框

src/views/AIPage/AIGeneralCourse.vue

@@ -61,10 +61,12 @@
           </div>
           <div class="dropdown-box">
             <!-- 下拉菜单 -->
-            <el-dropdown v-model="selectedGrade" @command="handleGradeSelect">
+            <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" @visible-change="handleVisibleChange">
               <el-button type="primary">
-                {{ selectedGrade
-                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                {{ selectedGrade }}
+                <!-- 根据下拉框状态显示不同的箭头图标 -->
+                <el-icon class="el-icon--right" v-if="!dropdownVisible"><ArrowDownBold /></el-icon>
+                <el-icon class="el-icon--right" v-else><ArrowUpBold /></el-icon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu class="dropdown-menu">
@@ -145,7 +147,8 @@ import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'
 import { ClassList, ClassOutline,ClassOutlineSc } from '@/api/class.js'
 //  Element Plus 组件引入
 import {
-  ArrowDown,
+  ArrowUpBold,
+  ArrowDownBold,
   ArrowRightBold,
   Expand,
   Reading,
@@ -167,6 +170,14 @@ const selectedGrade = ref('')
 // 添加抽屉显示状态
 const drawerVisible = ref(true)
 
+// 下拉框可见性状态
+const dropdownVisible = ref(false)
+
+// 处理下拉框显示/隐藏事件
+const handleVisibleChange = (visible) => {
+  dropdownVisible.value = visible
+}
+
 // 实操课
 const ClassOutlineScData = ref([])