调整布局

src/App.vue

@@ -18,6 +18,8 @@ export default defineComponent({
 
     window.onresize = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
+
+    document.body.classList.add("overflow-hidden");
     return {};
   },
 });

src/layouts/MainLayout.vue

@@ -5,19 +5,24 @@
       <top-tool-bar />
     </q-header>
 
-    <!-- drawer -->
-    <q-drawer
-      v-if="landspace"
-      v-model="data.show_left_drawer"
-      side="left"
-      bordered
-    >
-      <left-tool-bar />
-    </q-drawer>
-
     <!-- page -->
-    <q-page-container>
-      <router-view />
+    <q-page-container class="col">
+      <div class="row">
+        <!-- left -->
+        <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
+          <left-tool-bar />
+        </div>
+
+        <!-- cener content -->
+        <div class="col q-ma-sm">
+          <router-view />
+        </div>
+
+        <!-- left -->
+        <div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
+          <left-tool-bar />
+        </div>
+      </div>
     </q-page-container>
 
     <!-- fotter -->
@@ -29,7 +34,7 @@
     >
       <div class="text-center">SX</div>
     </q-footer>
-    <q-footer v-else elevated class="bg-white text-black" style="height: 40vh">
+    <q-footer v-else elevated class="bg-white text-black" style="height: 35vh">
       <left-tool-bar />
     </q-footer>
   </q-layout>

src/pages/WallPage.vue

@@ -177,10 +177,11 @@ const _initialize = async (options: _OptionsType) => {
       await Common.waitFor(100);
     }
 
-    _initSignalSourceTree(options).then(() => {
+    await _getApplicationConfig(options);
+
+    await _initSignalSourceTree(options).then(() => {
       _getWindows(options);
     });
-    _getApplicationConfig(options);
   }
 };
 
@@ -191,10 +192,6 @@ export default defineComponent({
   setup() {
     const $store = useStore();
     const $t = useI18n();
-    _initialize({
-      $t,
-      $store,
-    });
 
     const windows = computed({
       get: () => $store.state.windows,
@@ -213,31 +210,8 @@ export default defineComponent({
 
     const wall: Ref<HTMLElement | null> = ref(null);
 
-    const item_witdh = computed({
-      get: () => {
-        if (wall.value && wall.value.parentElement) {
-          return wall.value.parentElement.offsetWidth / wall_cols.value;
-        }
-        return 0;
-      },
-      set: (val) => $store.commit("setWallCol", val),
-    });
-
-    const item_height = computed({
-      get: () => {
-        if (wall.value && wall.value.parentElement) {
-          const wv_scaler =
-            $store.state.device_screen_width /
-            $store.state.device_screen_height;
-
-          return (
-            wall.value.parentElement.offsetHeight / wv_scaler / wall_rows.value
-          );
-        }
-        return 0;
-      },
-      set: (val) => $store.commit("setWallCol", val),
-    });
+    let item_witdh = ref(0);
+    const item_height = ref(0);
 
     const wall_width_scaler = ref(0);
     const wall_height_scaler = ref(0);
@@ -256,8 +230,22 @@ export default defineComponent({
       }
     };
 
+    const calcWallItemWH = () => {
+      item_witdh.value =
+        wall?.value?.parentElement?.offsetWidth ?? 0 / wall_cols.value;
+      if (wall.value && wall.value.parentElement) {
+        const wv_scaler =
+          $store.state.device_screen_width / $store.state.device_screen_height;
+        item_height.value =
+          wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
+      } else {
+        item_height.value = 0;
+      }
+    };
+
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       calcWallVWScaler();
+      calcWallItemWH();
     });
 
     interface _ResponseMessage {
@@ -348,23 +336,6 @@ export default defineComponent({
                       (item) => item.window_id == temp.window_id
                     );
                     if (window) {
-                      // $store.commit("setWindowPropertys", [
-                      //   {
-                      //     window,
-                      //     property_name: "playing",
-                      //     value: temp.playing,
-                      //   },
-                      //   {
-                      //     window,
-                      //     property_name: "focus",
-                      //     value: temp.focus,
-                      //   },
-                      //   {
-                      //     window,
-                      //     property_name: "muted",
-                      //     value: temp.muted,
-                      //   },
-                      // ]);
                       window.window_state; //
                       $store.commit("setWindowProperty", {
                         window,
@@ -388,7 +359,11 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => {
+    _initialize({
+      $t,
+      $store,
+    }).then(() => {
+      calcWallItemWH();
       calcWallVWScaler();
     });