setup settings store

src/components/RealtimeTable.vue

@@ -58,7 +58,7 @@ store.$subscribe((mutation, state) => {
 
 <style scoped>
 .realtime-table {
-  background: #00f3;
+  /* background: #00f3; */
   height: 160px;
   width: 80%;
   align-self: self-start;

src/components/SettingDialog.vue

@@ -1,21 +1,18 @@
 <script setup>
 import { ref } from 'vue';
+import { useSettings } from '../store/settings'
+
 const emit = defineEmits(["close"]);
-const setting = ref({
+const { settings } = useSettings();
-    resolution: {
-        width: null,
-        height: null
-    },
-    carousel: null,
-    fullscreen: false,
-    status: false,
-});
 
 function handleCancel() {
     emit('close')
 }
 
-function handleConfirm() { }
+function handleConfirm() {
+    // alert(JSON.stringify(settings, null, 2))
+    emit('close')
+}
 </script>
 
 <template>
@@ -24,25 +21,25 @@ function handleConfirm() { }
         <div class="main-content">
             <div class="form-item">
                 <label for="carousel">轮播时间</label>
-                <input id="carousel" type="number" v-model="setting.carousel" />
+                <input id="carousel" type="number" v-model="settings.carouselTime" />
                 <span>秒</span>
             </div>
             <div class="form-item">
                 <label for="resolution1">分辨率</label>
-                <input id="resolution1" type="number" v-model="setting.resolution.width" />
+                <input id="resolution1" type="number" v-model="settings.resolution.width" />
                 <span>X</span>
-                <input id="resolution2" type="number" v-model="setting.resolution.height" />
+                <input id="resolution2" type="number" v-model="settings.resolution.height" />
                 <span>px</span>
             </div>
             <div class="form-item selector">
                 <div class="opt opt1">
-                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[setting.fullscreen ? 'checked' : '']"
+                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[settings.fullscreen ? 'checked' : '']"
-                        v-model="setting.fullscreen" />
+                        v-model="settings.fullscreen" />
                     <label for="fullscreen">全屏显示</label>
                 </div>
                 <div class="opt opt2">
-                    <input type="checkbox" id="status" name="status" :class="[setting.status ? 'checked' : '']"
+                    <input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']"
-                        v-model="setting.status" />
+                        v-model="settings.eqStatus" />
                     <label for="status">设备状态</label>
                 </div>
             </div>

src/store/settings.js

@@ -4,13 +4,35 @@ import { ref } from "vue";
 export const useSettings = defineStore("settings", () => {
   const settings = ref({
     resolution: {
-      width: null,
+      width: 1920,
-      height: null,
+      height: 1080,
     },
-    carousel: null,
+    carousel: false,
+    carouselTime: 1000, // s
     fullscreen: false,
-    status: false,
+    eqStatus: false,
   });
-  function updateSettings() {}
+
-  return { settings, updateSettings };
+  function rewriteSettings(payload) {
+    settings.value = payload;
+  }
+
+  function updateSettings({ type, value }) {
+    switch (type) {
+      case "carousel":
+        settings.value.carousel = !settings.value.carousel;
+        break;
+      case "fullscreen":
+        settings.value.fullscreen = !settings.value.fullscreen;
+        break;
+      case "eq":
+        settings.value.eqStatus = !settings.value.eqStatus;
+        break;
+      case "resolution":
+        settings.value.resolution.height = value.height;
+        settings.value.resolution.width = value.width;
+        break;
+    }
+  }
+  return { settings, updateSettings, rewriteSettings };
 });