solve fullscreen issue

src/components/SettingDialog.vue

@@ -1,8 +1,13 @@
 <script setup>
+import { ref } from 'vue';
 import { useSettings } from '../store/settings'
-
 const emit = defineEmits(["close"]);
-const { settings, changeScale } = useSettings();
+
+const store = useSettings();
+const settings = ref(store.settings);
+store.$subscribe((mutation, state) => {
+    settings.value.fullscreen = state.settings.fullscreen;
+})
 
 function handleCancel() {
     emit('close')
@@ -10,7 +15,11 @@ function handleCancel() {
 
 function handleConfirm() {
     // alert(JSON.stringify(settings, null, 2))
-    changeScale(settings.resolution.width, settings.resolution.height)
+    // changeScale(settings.resolution.width, settings.resolution.height)
+    if (settings.value.resolution.width < 480) store.settings.resolution.width = 480;
+    if (settings.value.resolution.width > 7680) store.settings.resolution.width = 7680;
+    if (settings.value.resolution.height < 270) store.settings.resolution.height = 270;
+    if (settings.value.resolution.height > 4320) store.settings.resolution.height = 4320;
     emit('close')
 }
 </script>
@@ -26,9 +35,9 @@ function handleConfirm() {
             </div>
             <div class="form-item">
                 <label for="resolution1">分辨率</label>
-                <input id="resolution1" type="number" v-model="settings.resolution.width" />
+                <input id="resolution1" type="number" min="480" max="7680" v-model="settings.resolution.width" />
                 <span>X</span>
-                <input id="resolution2" type="number" v-model="settings.resolution.height" />
+                <input id="resolution2" type="number" min="270" max="4320" v-model="settings.resolution.height" />
                 <span>px</span>
             </div>
             <div class="form-item selector">
@@ -173,11 +182,14 @@ button {
 }
 
 .modal {
-    position: fixed;
+    /* position: fixed;
+    height: 1080px;
+    width: 1920px; */
+    position: absolute;
+    height: 100%;
+    width: 100%;
     left: 0;
     top: 0;
-    height: 1080px;
-    width: 1920px;
     background: #0003;
     backdrop-filter: blur(3px);
     z-index: 999;

src/components/Tools.vue

@@ -5,31 +5,37 @@ import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 import SettingDialogVue from "./SettingDialog.vue";
 import { useSettings } from '../store/settings';
-
-const { settings } = useSettings();
-
+const store = useSettings();
+const settings = ref(store.settings)
+store.$subscribe((_, state) => {
+  settings.value.carousel = state.settings.carousel;
+})
 const visible = ref(false);
 function toHome() {
-  document.location.href = '/1-1'
+  // document.location.href = '/1-1'
+  document.location.reload()
 }
 function showDialog() {
   visible.value = true;
 }
 function toggleLunbo() {
-  settings.carousel = !settings.carousel;
+  settings.value.carousel = !settings.value.carousel;
 }
 </script>
 
 <template>
-  <div class="tools">
+  <div id="tools-bar" class="tools">
     <button @click="toHome">
       <IconBack />
     </button>
     <button @click="showDialog">
       <IconSetting />
     </button>
-    <button @click="toggleLunbo">
-      <IconExchange />
+    <button style="position: relative;" @click="toggleLunbo">
+      <span v-if="settings.carousel"
+        style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
+        {{ settings.carouselTime }}S</span>
+      <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
     </button>
   </div>
   <SettingDialogVue v-if="visible" @close="visible = false;" />
@@ -78,4 +84,5 @@ button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
   fill: #b1daff !important;
-}</style>
+}
+</style>