changes

app/pages/index.vue

@@ -2,7 +2,7 @@
   <AppLoading v-if="!$store.ready" />
   <ClientOnly v-else>
     <TopMenu @changeTab="changeTab" />
-    <div class="container">
+    <main>
       <div
         class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1"
         v-if="tab"
@@ -54,15 +54,18 @@
           v-bind="vbind"
         />
       </KeepAlive>
-    </div>
+    </main>
   </ClientOnly>
 </template>
 <script setup>
 const { $createMeta, $store, $copy, $id } = useNuxtApp();
 const componentMap = {};
 const componentKey = ref();
-var vbind = {};
-var tab, subtab, currentTab;
+const vbind = ref({});
+const tab = ref();
+const subtab = ref();
+const currentTab = ref();
+
 const toPascalCase = (str) => {
   if (!str || typeof str !== "string") return str;
   return str
@@ -70,18 +73,27 @@ const toPascalCase = (str) => {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join("");
 };
+
 function changeTab(_tab, _subtab) {
-  tab = _tab;
-  subtab = _subtab;
-  currentTab = subtab || tab;
-  if (currentTab.detail) {
-    vbind = $store.lang === "en" ? currentTab.detail_en || currentTab.detail : currentTab.detail;
+  tab.value = _tab;
+  subtab.value = _subtab;
+  currentTab.value = subtab.value || tab.value;
+  if (currentTab.value.detail) {
+    vbind.value =
+      $store.lang === "en" ? currentTab.value.detail_en || currentTab.value.detail : currentTab.value.detail;
   }
-  componentMap[vbind.component] = vbind.base || toPascalCase(vbind.component);
-  componentKey.value = vbind.component;
-  $store.commit("tabinfo", { tab, subtab, current: currentTab, vbind });
+  componentMap[vbind.value.component] = vbind.value.base || toPascalCase(vbind.value.component);
+  componentKey.value = vbind.value.component;
+
+  $store.commit("tabinfo", {
+    tab: tab.value,
+    subtab: subtab.value,
+    current: currentTab.value,
+    vbind: vbind.value,
+  });
+
   const meta = {
-    title: currentTab[$store.lang],
+    title: currentTab.value[$store.lang],
     image: undefined,
     description: "Utopia",
     type: "article",
@@ -89,25 +101,19 @@ function changeTab(_tab, _subtab) {
   };
   useHead($createMeta(meta));
 }
+
 function refresh() {
   const copy = $copy(componentKey.value) + $id();
   componentKey.value = undefined;
   setTimeout(() => (componentKey.value = copy));
 }
 </script>
-<style scoped>
-.container {
-  max-width: 1900px !important;
+<style lang="scss" scoped>
+@use "bulma/sass/utilities/mixins.scss" as *;
+main {
   padding: 1rem 2rem 2rem;
   @include mobile {
     padding: 1rem;
   }
-
-  .columns .column {
-    @include mobile {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }
 </style>