|
@@ -1,4 +1,21 @@
|
|
|
<template>
|
|
<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">
|
|
<div class="desk-lamp-container">
|
|
|
<!-- 标题框 -->
|
|
<!-- 标题框 -->
|
|
@@ -9,30 +26,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
</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" />
|
|
<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 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">
|
|
<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>
|
|
<el-button class="control-button code-button" @click="handleViewCode">代码</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -157,7 +157,7 @@
|
|
|
<h2>工作区</h2>
|
|
<h2>工作区</h2>
|
|
|
<div id="blocklyDiv"></div>
|
|
<div id="blocklyDiv"></div>
|
|
|
<div class="controls">
|
|
<div class="controls">
|
|
|
- <button id="runCode" @click="runCode">运行代码</button>
|
|
|
|
|
|
|
+ <button id="runCode" @click="runCode" :disabled="isRecording">{{isRecording ? '执行中' : '运行代码'}}</button>
|
|
|
<button @click="clearWorkspace">清空工作区</button>
|
|
<button @click="clearWorkspace">清空工作区</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -1779,6 +1779,11 @@ button:hover {
|
|
|
background: #c0392b;
|
|
background: #c0392b;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+#runCode:disabled {
|
|
|
|
|
+ opacity: 0.6;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
#output {
|
|
#output {
|
|
|
// background: #1a2530;
|
|
// background: #1a2530;
|
|
|
background: rgba($color: #ffffff, $alpha: 0.5);
|
|
background: rgba($color: #ffffff, $alpha: 0.5);
|
|
@@ -1963,6 +1968,12 @@ textarea {
|
|
|
.run-button:hover {
|
|
.run-button:hover {
|
|
|
background-color: rgba(64, 169, 255, 1);
|
|
background-color: rgba(64, 169, 255, 1);
|
|
|
transform: translateY(-2px);
|
|
transform: translateY(-2px);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.run-button:disabled {
|
|
|
|
|
+ opacity: 0.6;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.code-button {
|
|
.code-button {
|
|
@@ -2022,7 +2033,7 @@ textarea {
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- z-index: 1000;
|
|
|
|
|
|
|
+ z-index: 1001;
|
|
|
backdrop-filter: blur(5px);
|
|
backdrop-filter: blur(5px);
|
|
|
}
|
|
}
|
|
|
|
|
|