New: backendのtsconfig.jsonにesModuleInteropを追加 / Fix: 一部エンティティの時刻記録をdateからdatetimeに修正 / Fix: setup/initializationエンドポイントでのwebpushのimport方法の問題 / Chg: font-sizeを16pxから14pxに変更 / Chg: html, bodyのwidthとheightをvw/vhからdvw/dvhに変更 / Feat: レイアウトを作成 / New(frontend): /setupを作成

packages/frontend/src/Layout.vue

@@ -5,14 +5,60 @@
     :size="6"
   />
 
-  <main>
-    <RouterView
-      :key="$route.fullPath"
-    />
+  <main class="layout">
+    <div class="left-menu">
+      <div>
+        ホーム
+      </div>
+    </div>
+
+    <div class="route-main">
+      <RouterView
+        :key="$route.fullPath"
+      />
+    </div>
   </main>
 </template>
 
 <style scoped>
+main.layout {
+  display: flex;
+  gap: 1rem;
+  width: 100dvw;
+  height: 100dvh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.left-menu {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.left-menu div {
+  width: 6rem;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.4rem;
+  border-radius: 2rem;
+  padding: 1rem;
+  transition: all 100ms ease-in;
+}
+
+.left-menu div:hover {
+  background-color: var(--border-color);
+}
+
+.route-main {
+  border: 1px solid var(--border-color);
+  padding: 0.75rem;
+  border-radius: 1rem;
+  flex-grow: 1;
+}
+
 .router-progress {
   position: fixed;
   inset: 0.5rem 0.5rem 0 auto;
@@ -21,15 +67,18 @@
 </style>
 
 <script lang="ts" setup>
-import { RouterView } from "vue-router";
+import { RouterView, useRouter } from "vue-router";
 import routerStatus from "@/lib/router";
 import Progress from "@/components/Progress.vue";
-import { ref } from "vue";
 import serverInfo from "@/lib/account";
 
-const isBootFailed = ref<boolean>(false);
+const router = useRouter();
 
 if (!serverInfo.success) {
-  isBootFailed.value = true;
+  throw new Error();
+}
+
+if (!serverInfo.isFirstAdminExists) {
+  router.replace("/setup");
 }
 </script>