弹窗双开关控制台存储

src/components/Settings.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="settings-container">
-   
     <el-row class="popup-row">
-      <el-checkbox v-model="isPopupEnabled" @change="handleCheckboxChange" style="color: aliceblue;">
-        开启弹窗
-      </el-checkbox>
+      <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>
-
     <el-row class="channel-row">
-      <Channel/>
+      <Channel />
     </el-row>
   </div>
 </template>
@@ -16,51 +22,114 @@
 <script lang="ts" setup>
 import { ref, inject, onMounted } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import type { GlobalWebSocket } from '../utils/useGlobalWebSocket';
-import  Channel from '@/components/Channel.vue';
+import type { GlobalWebSocket } from '@/utils/useGlobalWebSocket';
+import Channel from '@/components/Channel.vue';
 
-const isPopupEnabled = ref(false); // 控制弹窗状态
-const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket'); // 指定类型
+const isInteractivePopupEnabled = ref(false); // 交互式弹窗状态
+const isResponsivePopupEnabled = ref(false); // 响应式弹窗状态
+const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
 
-// 确保 globalWebSocket 已经注入成功
 if (!globalWebSocket) {
   throw new Error('globalWebSocket 注入失败');
 }
 
-// 从 localStorage 中读取勾选状态
+// 初始化时加载弹窗模式状态
 onMounted(() => {
-  const storedState = localStorage.getItem('isPopupEnabled');
-  isPopupEnabled.value = storedState === 'true';
-  
-  // 如果已经勾选且 WebSocket 还未连接，则连接 WebSocket
-  if (isPopupEnabled.value && !globalWebSocket.isWebSocketConnected.value) {
-    globalWebSocket.connectWebSocket();
-  }
+  isInteractivePopupEnabled.value = localStorage.getItem('isInteractivePopupEnabled') === 'true';
+  isResponsivePopupEnabled.value = localStorage.getItem('isResponsivePopupEnabled') === 'true';
+  updateWebSocketConnection();
 });
 
-// 当用户勾选或取消勾选时触发的函数
-const handleCheckboxChange = () => {
-  if (isPopupEnabled.value) {
-    // 如果复选框被勾选，弹出确认对话框
-    ElMessageBox.confirm('是否开启弹窗提示？', '提示', {
+// const handleInteractiveChange = () => {
+//   if (isInteractivePopupEnabled.value) {
+//     isResponsivePopupEnabled.value = false; 
+//     localStorage.setItem('isResponsivePopupEnabled', 'false');
+//   }
+//   localStorage.setItem('isInteractivePopupEnabled', String(isInteractivePopupEnabled.value));
+//   updateWebSocketConnection();
+// };
+
+// const handleResponsiveChange = () => {
+//   if (isResponsivePopupEnabled.value) {
+//     isInteractivePopupEnabled.value = false;
+//     localStorage.setItem('isInteractivePopupEnabled', 'false');
+//   }
+//   localStorage.setItem('isResponsivePopupEnabled', String(isResponsivePopupEnabled.value));
+//   updateWebSocketConnection();
+// };
+
+const handleInteractiveChange = () => {
+  if (isInteractivePopupEnabled.value) {
+    ElMessageBox.confirm('是否开启交互式弹窗提示？', '确认提示', {
       confirmButtonText: '是',
       cancelButtonText: '否',
       type: 'warning',
     })
       .then(() => {
-        // 用户点击确认，开启 WebSocket 并保存状态
-        localStorage.setItem('isPopupEnabled', 'true');
-        globalWebSocket.connectWebSocket();
+        isResponsivePopupEnabled.value = false;
+        localStorage.setItem('isResponsivePopupEnabled', 'false');
+
+        localStorage.setItem('isInteractivePopupEnabled', 'true');
+        updateWebSocketConnection();
       })
       .catch(() => {
-        // 用户取消勾选，重置状态
-        isPopupEnabled.value = false;
-        localStorage.setItem('isPopupEnabled', 'false');
+        isInteractivePopupEnabled.value = false;
       });
   } else {
-    // 如果复选框未勾选，关闭 WebSocket
+    ElMessageBox.confirm('是否关闭交互式弹窗？', '确认提示', {
+      confirmButtonText: '是',
+      cancelButtonText: '否',
+      type: 'warning',
+    })
+      .then(() => {
+        localStorage.setItem('isInteractivePopupEnabled', 'false');
+        updateWebSocketConnection();
+      })
+      .catch(() => {
+        isInteractivePopupEnabled.value = true;
+      });
+  }
+};
+
+
+const handleResponsiveChange = () => {
+  if (isResponsivePopupEnabled.value) {
+    ElMessageBox.confirm('是否开启响应式弹窗提示？', '确认提示', {
+      confirmButtonText: '是',
+      cancelButtonText: '否',
+      type: 'warning',
+    })
+      .then(() => {
+        isInteractivePopupEnabled.value = false;
+        localStorage.setItem('isInteractivePopupEnabled', 'false');
+        localStorage.setItem('isResponsivePopupEnabled', 'true');
+        updateWebSocketConnection();
+      })
+      .catch(() => {
+        isResponsivePopupEnabled.value = false;
+      });
+  } else {
+    ElMessageBox.confirm('是否关闭响应式弹窗？', '确认提示', {
+      confirmButtonText: '是',
+      cancelButtonText: '否',
+      type: 'warning',
+    })
+      .then(() => {
+        localStorage.setItem('isResponsivePopupEnabled', 'false');
+        updateWebSocketConnection();
+      })
+      .catch(() => {
+        isResponsivePopupEnabled.value = true;
+      });
+  }
+};
+
+// 根据开关状态更新 WebSocket 连接
+const updateWebSocketConnection = () => {
+  if (isInteractivePopupEnabled.value || isResponsivePopupEnabled.value) {
+    globalWebSocket.connectWebSocket();
+  } else {
     globalWebSocket.closeWebSocket();
-    localStorage.setItem('isPopupEnabled', 'false');
   }
 };
 </script>
@@ -69,11 +138,11 @@ const handleCheckboxChange = () => {
 .settings-container {
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: #F1F1F1;
   width: 100%;
   height: 100%;
-
 }
+
 .popup-row {
   margin-bottom: 20px;
   height: 20vh;
@@ -85,12 +154,11 @@ const handleCheckboxChange = () => {
   color: white;
 }
 
-.channel-row{
+.channel-row {
   margin: 1vh 2vw;
   width: 80vw;
   height: 70vh;
   background-color: #001529;
   border-radius: 8px;
 }
-
 </style>