latest-V.1

src/components/Settings.vue

@@ -1,17 +1,73 @@
 <template>
   <div class="settings-container">
-    <el-row class="popup-row">
-      <el-col :sm="24" :md="24">弹窗设置</el-col>
-      <el-col :sm="24" :md="24">
-        <el-checkbox v-model="isInteractivePopupEnabled" @change="handleInteractiveChange" style="color: aliceblue;">
-          开启交互式弹窗
-        </el-checkbox>
-      </el-col>
-      <el-col :sm="24" :md="24">
-        <el-checkbox v-model="isResponsivePopupEnabled" @change="handleResponsiveChange" style="color: aliceblue;">
-          开启响应式弹窗
-        </el-checkbox>
-      </el-col>
+    <el-row class="tip-row">
+
+      <div class="model-row">
+        <el-col :sm="24" :md="8">
+          <el-card style="max-width: 480px" >
+            <template #header>
+              弹窗模式设置
+            </template>
+            <el-row>
+              <el-col :sm="24" :md="24">
+                <el-checkbox v-model="isInteractivePopupEnabled" @change="handleInteractiveChange">
+                  开启交互式弹窗
+                </el-checkbox>
+              </el-col>
+              <el-col :sm="24" :md="24">
+                <el-checkbox v-model="isResponsivePopupEnabled" @change="handleResponsiveChange">
+                  开启响应式弹窗
+                </el-checkbox>
+              </el-col>
+            </el-row>
+            <template #footer>(Tips: 不支持同时生效,关闭状态无声音)</template>
+          </el-card>
+        </el-col>
+        <el-col :sm="24" :md="8">
+          <el-card style="max-width: 480px" >
+            <template #header>
+              <span>弹窗队列设置</span>
+            </template>
+            <el-col :sm="24" :md="24" style="margin:1vh 0;">
+              <el-button @click="loadNextNotification" size="small" type="primary">加载更多</el-button>
+            </el-col>
+            <el-col :sm="24" :md="24">
+              <el-button @click="clearAllNotifications" size="small" type="danger">清空所有</el-button>
+            </el-col>
+            <template #footer>(Tips: 交互模式下加载/清空累积弹窗提示)</template>
+          </el-card>
+        </el-col>
+        <el-col :sm="24" :md="8" class="audio-card">
+          <el-card style="max-width: 480px" >
+            <template #header>
+              <span>弹窗声音设置</span>
+            </template>
+            <el-col :sm="24" :md="24">
+              开启提示声音:&nbsp;&nbsp;&nbsp;
+              <el-switch v-model="isSoundEnabled" @change="handleSoundSwitch">开启振荡器发声</el-switch>
+            </el-col>
+            <el-row :gutter="20">
+              <el-col :sm="24" :md="5" >
+                <span>音量设置: </span>
+              </el-col>
+              <el-col :sm="24" :md="16">
+                <el-slider v-model="volume" :min="0" :max="1" :step="0.01" :disabled="isSoundEnabled"
+                  @change="previewSound" size="small" />
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :sm="24" :md="5" >
+                <span>音调设置: </span>
+              </el-col>
+              <el-col :sm="24" :md="16">
+                <el-slider v-model="frequency" :min="300" :max="1200" :step="10" :disabled="isSoundEnabled"
+                  @change="previewSound" size="small" />
+              </el-col>
+            </el-row>
+            <template #footer>(Tips: 开启后锁定声音设置)</template>
+          </el-card>
+        </el-col>
+      </div>
     </el-row>
     <el-row class="channel-row">
       <Channel />
@@ -20,26 +76,90 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, inject, onMounted } from 'vue';
+import { ref, inject, onMounted, onUnmounted, watch } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import type { GlobalWebSocket } from '@/utils/useGlobalWebSocket';
 import Channel from '@/components/Channel.vue';
 
+
 const isInteractivePopupEnabled = ref(false); // 交互式弹窗状态
 const isResponsivePopupEnabled = ref(false); // 响应式弹窗状态
-const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
 
-if (!globalWebSocket) {
-  throw new Error('globalWebSocket 注入失败');
-}
+const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
+if (!globalWebSocket) throw new Error('globalWebSocket 注入失败');
+
+const { notificationSoundParams, setNotificationSoundParams } = globalWebSocket;
+const isSoundEnabled = ref(notificationSoundParams.isSoundEnabled);
+const volume = ref(notificationSoundParams.volume);
+const frequency = ref(notificationSoundParams.frequency);
+let audioContext: AudioContext | null = null;
+const loadNextNotification = () => {
+  if (globalWebSocket) globalWebSocket.loadNextNotification();
+};
+
+const clearAllNotifications = () => {
+  if (globalWebSocket) globalWebSocket.clearAllNotifications();
+};
+
+
 
 // 初始化时加载弹窗模式状态
 onMounted(() => {
   isInteractivePopupEnabled.value = localStorage.getItem('isInteractivePopupEnabled') === 'true';
   isResponsivePopupEnabled.value = localStorage.getItem('isResponsivePopupEnabled') === 'true';
+  isSoundEnabled.value = notificationSoundParams.isSoundEnabled;
+  volume.value = notificationSoundParams.volume;
+  frequency.value = notificationSoundParams.frequency;
   updateWebSocketConnection();
 });
 
+const handleSoundSwitch = () => {
+  setNotificationSoundParams({
+    isSoundEnabled: isSoundEnabled.value,
+    volume: volume.value,
+    frequency: frequency.value,
+  });
+  ElMessage.success(isSoundEnabled.value ? '提示音已开启，当前参数已锁定' : '提示音已关闭');
+};
+
+
+
+// 预览提示音
+const previewSound = () => {
+  if (audioContext) {
+    audioContext.close();
+  }
+  audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const oscillator = audioContext.createOscillator();
+  const gainNode = audioContext.createGain();
+
+  oscillator.type = 'triangle';
+  oscillator.frequency.setValueAtTime(frequency.value, audioContext.currentTime);
+  gainNode.gain.setValueAtTime(volume.value, audioContext.currentTime);
+
+  oscillator.connect(gainNode);
+  gainNode.connect(audioContext.destination);
+
+  oscillator.start();
+  setTimeout(() => {
+    oscillator.stop();
+    audioContext?.close();
+    audioContext = null;
+  }, 300); // 持续播放 300ms
+};
+
+watch([isSoundEnabled, volume, frequency], () => {
+  setNotificationSoundParams({
+    isSoundEnabled: isSoundEnabled.value,
+    volume: volume.value,
+    frequency: frequency.value,
+  });
+});
+
+
+
+
+
 // const handleInteractiveChange = () => {
 //   if (isInteractivePopupEnabled.value) {
 //     isResponsivePopupEnabled.value = false; 
@@ -132,6 +252,10 @@ const updateWebSocketConnection = () => {
     globalWebSocket.closeWebSocket();
   }
 };
+
+onUnmounted(() => {
+  audioContext?.close();
+});
 </script>
 
 <style scoped>
@@ -143,7 +267,9 @@ const updateWebSocketConnection = () => {
   height: 100%;
 }
 
-.popup-row {
+.tip-row {
+  display: flex;
+  flex-direction: column;
   margin-bottom: 20px;
   height: 20vh;
   width: 80vw;
@@ -154,6 +280,62 @@ const updateWebSocketConnection = () => {
   color: white;
 }
 
+.tip-row .el-card{
+  border: none !important;
+  color: white;
+}
+
+.tip-row .el-card .el-checkbox{
+  color: white;
+}
+
+::v-deep .tip-row .el-card__header {
+  background-color: #001529;
+  /* height: 3vh; */
+  padding: 1vh 0 1vh 1vw;
+  display: flex;
+  font-size: 18px;
+  font-weight: bold;
+  border-bottom: none !important;
+}
+
+::v-deep .tip-row .el-card__body {
+  background-color: #001529;
+  height: 12vh;
+  font-size: 16px;
+  /* border: 0px ; */
+}
+
+::v-deep .tip-row .el-card .is-always-shadow{
+  color: aqua;
+  
+}
+
+::v-deep .tip-row .el-card__footer {
+  background-color: #001529;
+
+  /* height: 3vh; */
+  padding: 0 1vw 0 0;
+  display: flex;
+  justify-content: end;
+  font-size: 14px;
+  font-weight: bold;
+  border-top: none !important;
+  color: #a8a3a3;
+}
+
+
+.model-row {
+  display: flex;
+  flex-direction: row;
+}
+
+::v-deep .audio-card .el-card__body {
+  padding: 1vh 1vw;
+  /* background-color: aqua; */
+}
+
+
 .channel-row {
   margin: 1vh 2vw;
   width: 80vw;