1、修改下拉搜索

2、语音显示波纹

src/components/ai/voice/VoiceInput.vue

@@ -5,10 +5,6 @@
       class="speech-btn"
       :class="{ 'recording': isRecording }"
     >
-      <el-icon v-if="!isRecording"><Microphone /></el-icon>
-      <el-icon v-else><Mute /></el-icon>
-      <!-- 显示倒计时（仅录音时显示） -->
-      <span v-if="isRecording" class="countdown-text">{{ countdown }}s</span>
       <div class="waveform-container" v-if="isRecording">
         <LiveWaveform
           :active="isRecording" 
@@ -20,6 +16,9 @@
           :sensitivity="1.2"
         />
       </div>
+      <el-icon v-if="!isRecording"><Microphone /></el-icon>
+      <!-- 显示倒计时（仅录音时显示） -->
+      <span v-if="isRecording" class="countdown-text">{{ countdown }}s</span>
     </button>
 
   </div>
@@ -27,7 +26,7 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { Microphone, Mute } from '@element-plus/icons-vue'
+import { Microphone } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import LiveWaveform from './LiveWaveform.vue'
 
@@ -77,7 +76,7 @@ const initSpeechRecognition = () => {
   const instance = new SpeechRecognition()
   instance.lang = props.lang
   instance.interimResults = true
-  // instance.continuous = true
+  instance.continuous = true
 
   instance.onresult = (event) => {
     // 遍历所有结果，包括临时结果

src/components/study/SelfDirectedLearning.vue

@@ -22,8 +22,6 @@
               @change="(value) => handleSelect(dropdown.key, value)"
               filterable
               class="custom-select"
-              :popper-append-to-body="false"
-              :teleported="false"
             >
               <template #prefix>
                 <el-icon><component :is="dropdown.icon" /></el-icon>
@@ -33,6 +31,7 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
+                class="provinces_select" 
               />
             </el-select>
           </div>
@@ -1173,10 +1172,10 @@ onMounted(async () => {
 }
 
 .dropdowns-container .custom-select :deep(.el-select__wrapper) {
-  background-color: #f1f0ff !important;
-  border: rpx(1) solid #a7a4ed !important;
-  border-radius: rpx(4) !important;
-  height: rpx(18) !important;
+  background-color: #f1f0ff;
+  border: rpx(1) solid #a7a4ed;
+  border-radius: rpx(4);
+  height: rpx(18);
 }
 
 .dropdowns-container .custom-select .el-select__input {
@@ -1194,8 +1193,8 @@ onMounted(async () => {
   color: black;
 }
 
-/* 下拉菜单样式 */
-.dropdowns-container .custom-select :deep(.el-select-dropdown) {
+/* 下拉菜单样式 伪元素选择器:global*/
+.dropdowns-container .custom-select :global(.el-select-dropdown) {
   min-width: rpx(50);
   width: auto;
   max-height: rpx(160);
@@ -1204,52 +1203,51 @@ onMounted(async () => {
   border: 1px white solid;
   background-color: rgb(255, 255, 255, 0.8);
   backdrop-filter: blur(rpx(5));
-  // box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown::-webkit-scrollbar) {
+.dropdowns-container .custom-select :global(.el-select-dropdown::-webkit-scrollbar) {
   width: rpx(2);
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown::-webkit-scrollbar-track) {
+.dropdowns-container .custom-select :global(.el-select-dropdown::-webkit-scrollbar-track) {
   background: #f1f1f1;
   border-radius: rpx(2);
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown::-webkit-scrollbar-thumb) {
+.dropdowns-container .custom-select :global(.el-select-dropdown::-webkit-scrollbar-thumb) {
   background: #c1c1c1;
   border-radius: rpx(2);
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown::-webkit-scrollbar-thumb:hover) {
+.dropdowns-container .custom-select :global(.el-select-dropdown::-webkit-scrollbar-thumb:hover) {
   background: #a8a8a8;
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown__item) {
-  font-size: rpx(8) !important;
-  color: black !important;
-  border-radius: rpx(5) !important;
-  width: auto !important;
-  min-width: rpx(35) !important;
-  height: rpx(20) !important;
-  margin-bottom: rpx(8) !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 0 rpx(8) !important;
+ .provinces_select {
+  font-size: rpx(8);
+  color: black;
+  border-radius: rpx(5);
+  width: auto;
+  min-width: rpx(35);
+  height: rpx(20);
+  margin-bottom: rpx(8);
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  padding: 0 rpx(8);
 }
 
-.dropdowns-container .custom-select :deep(.el-select-dropdown__item:hover),
-.dropdowns-container .custom-select :deep(.el-select-dropdown__item:focus),
-.dropdowns-container .custom-select :deep(.el-select-dropdown__item.is-active) {
+.provinces_select:hover,
+.provinces_select:focus,
+.provinces_select.is-active {
   background: linear-gradient(
     to bottom,
     #fee78a,
     #ffce1b
-  ) !important;
-  border: none !important;
-  outline: none !important;
-  color: black !important;
+  );
+  border: none;
+  outline: none;
+  color: black;
 }
 
 /* 确保下拉框点击时也没有边框 */

src/views/AIPage/aiGenerate/DialogContent.vue

@@ -95,6 +95,8 @@
           <VoiceInput 
             @voiceRecognized="handleVoiceRecognized" 
             @recordingStatusChanged="handleRecordingStatusChanged"
+            lang="zh-CN"
+            maxDuration="10"
           />
         </div>
         <!-- 语音输入按钮占位符 -->
@@ -1349,7 +1351,7 @@ onUnmounted(() => {
   &.recording {
     &::before {
       animation: pulse 2s infinite;
-      border-color: rgba(255, 80, 80, 0.6);
+      border-color: rgba(0, 100, 192, 0.6);
     }
 
     &::after {
@@ -1358,17 +1360,17 @@ onUnmounted(() => {
       width: 85%;
       height: 85%;
       border-radius: 50%;
-      border: rpx(2) solid rgba(255, 80, 80, 0.4);
+      border: rpx(2) solid rgba(0, 100, 192, 0.4);
       animation: pulse 2s infinite 0.5s;
     }
 
     :deep(.voice-input-container) {
       .speech-btn {
-        background: linear-gradient(135deg, #FFA0A0, #FF5050);
-        border-color: rgba(192, 0, 0, 1);
+        background: linear-gradient(135deg, #A0DCF0, #50BEF0);
+        border-color: rgba(0, 100, 192, 1);
 
         .el-icon {
-          color: #BE0000;
+          color: #0064BE;
         }
       }
     }
@@ -1432,11 +1434,13 @@ onUnmounted(() => {
       }
 
       .countdown-text {
-        display: none;
-      }
-
-      .waveform-container {
-        display: none;
+        display: block;
+        font-size: rpx(8);
+        color: #0064BE;
+        position: absolute;
+        bottom: rpx(5);
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
   }