虚拟实验室

1、语音收音问题处理
2、代码页面中收音框置顶可现

src/views/blockly/Blockly.vue

@@ -1,4 +1,21 @@
 <template>
+  <!-- 收音状态显示区域 -->
+  <div v-if="isRecording" class="recording-status-container">
+    <div class="recording-text">正在收音...</div>
+    <div class="waveform-container">
+      <LiveWaveform
+        :active="isRecording" 
+        :processing="false"
+        :height="50"
+        :barWidth="3"
+        :barGap="1"
+        :barRadius="1"
+        :sensitivity="1.2"
+      />
+    </div>
+    <div v-if="recordingCountdown <= 5" class="recording-countdown">{{ recordingCountdown }}秒</div>
+  </div>
+
   <!-- 智能台灯 -->
   <div class="desk-lamp-container">
     <!-- 标题框 -->
@@ -9,30 +26,13 @@
       </div>
     </div>
 
-    <!-- 收音状态显示区域 - 添加这段代码 -->
-    <div v-if="isRecording" class="recording-status-container">
-      <div class="recording-text">正在收音...</div>
-      <div class="waveform-container">
-        <LiveWaveform
-          :active="isRecording" 
-          :processing="false"
-          :height="50"
-          :barWidth="3"
-          :barGap="1"
-          :barRadius="1"
-          :sensitivity="1.2"
-        />
-      </div>
-      <div v-if="recordingCountdown <= 5" class="recording-countdown">{{ recordingCountdown }}秒</div>
-    </div>
-
     <img :src="device.image" alt="智能台灯" class="full-screen-image" />
     <!-- 使用动态样式设置灯光遮罩 -->
     <div v-if="state.lamp.isLightOn"  :style="{ '--lamp-color': state.lamp.color,'--lamp-opacity': state.lamp.brightness / 100 }" class="lamp-light-mask"></div>
 
     <!-- 右下角按钮组 -->
     <div class="button-group">
-      <el-button class="control-button run-button" @click="toggleLight">运行</el-button>
+      <el-button class="control-button run-button" @click="toggleLight" :disabled="isRecording">{{isRecording ? '执行中' : '运行'}}</el-button>
       <el-button class="control-button code-button" @click="handleViewCode">代码</el-button>
     </div>
 
@@ -157,7 +157,7 @@
         <h2>工作区</h2>
         <div id="blocklyDiv"></div>
         <div class="controls">
-          <button id="runCode" @click="runCode">运行代码</button>
+          <button id="runCode" @click="runCode" :disabled="isRecording">{{isRecording ? '执行中' : '运行代码'}}</button>
           <button @click="clearWorkspace">清空工作区</button>
         </div>
       </div>
@@ -1779,6 +1779,11 @@ button:hover {
   background: #c0392b;
 }
 
+#runCode:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 #output {
   // background: #1a2530;
   background: rgba($color: #ffffff, $alpha: 0.5);
@@ -1963,6 +1968,12 @@ textarea {
 .run-button:hover {
   background-color: rgba(64, 169, 255, 1);
   transform: translateY(-2px);
+  color: white;
+}
+
+.run-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .code-button {
@@ -2022,7 +2033,7 @@ textarea {
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   text-align: center;
-  z-index: 1000;
+  z-index: 1001;
   backdrop-filter: blur(5px);
 }
 

src/views/blockly/Blockly2.vue

@@ -1,4 +1,21 @@
 <template>
+  <!-- 收音状态显示区域 -->
+  <div v-if="isRecording" class="recording-status-container">
+    <div class="recording-text">正在收音...</div>
+    <div class="waveform-container">
+      <LiveWaveform
+        :active="isRecording" 
+        :processing="false"
+        :height="50"
+        :barWidth="3"
+        :barGap="1"
+        :barRadius="1"
+        :sensitivity="1.2"
+      />
+    </div>
+    <div v-if="recordingCountdown <= 5" class="recording-countdown">{{ recordingCountdown }}秒</div>
+  </div>
+
   <!-- 智能台灯 -->
   <div  class="desk-lamp-container">
     <!-- 标题框 -->
@@ -9,23 +26,6 @@
       </div>
     </div>
 
-    <!-- 收音状态显示区域 -->
-    <div v-if="isRecording" class="recording-status-container">
-      <div class="recording-text">正在收音...</div>
-      <div class="waveform-container">
-        <LiveWaveform
-          :active="isRecording" 
-          :processing="false"
-          :height="50"
-          :barWidth="3"
-          :barGap="1"
-          :barRadius="1"
-          :sensitivity="1.2"
-        />
-      </div>
-      <div v-if="recordingCountdown <= 5" class="recording-countdown">{{ recordingCountdown }}秒</div>
-    </div>
-
     <!-- 智能家居 -->
     <div class="image-overlay-container">
       <img :src="baseMap" alt="智能家居" class="full-screen-image base-image" />
@@ -39,7 +39,7 @@
 
     <!-- 右下角按钮组 -->
     <div class="button-group">
-      <el-button class="control-button run-button" @click="executeCode">运行</el-button>
+      <el-button class="control-button run-button" @click="executeCode" :disabled="isRecording">{{isRecording ? '执行中' : '运行'}}</el-button>
       <el-button class="control-button code-button" @click="handleViewCode">代码</el-button>
     </div>
     
@@ -165,7 +165,7 @@
         <h2>工作区</h2>
         <div id="blocklyDiv"></div>
         <div class="controls">
-          <button id="runCode" @click="executeCode">运行代码</button>
+          <button id="runCode" @click="executeCode" :disabled="isRecording">{{isRecording ? '执行中' : '运行代码'}}</button>
           <button @click="clearWorkspace">清空工作区</button>
         </div>
       </div>
@@ -2096,6 +2096,11 @@ button:hover {
   background: #c0392b;
 }
 
+#runCode:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 #output {
   // background: #1a2530;
   background: rgba($color: #ffffff, $alpha: 0.5);
@@ -2290,6 +2295,12 @@ textarea {
 .run-button:hover {
   background-color: rgba(64, 169, 255, 1);
   transform: translateY(-2px);
+  color: white;
+}
+
+.run-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .code-button {
@@ -2349,7 +2360,7 @@ textarea {
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   text-align: center;
-  z-index: 1000;
+  z-index: 1500;
   backdrop-filter: blur(5px);
 }