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>

packages/frontend/src/global.css

@@ -1,12 +1,14 @@
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
+  --border-color: #e0e0e0;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #1b1b1b;
     --text-color: #ffffff;
+    --border-color: #2c2c2c;
   }
 }
 
@@ -16,9 +18,9 @@
 }
 
 html, body {
-  width: 100vw;
-  height: 100vh;
-  font-size: 16px;
+  width: 100dvw;
+  height: 100dvh;
+  font-size: 14px;
   background-color: var(--bg-color);
   color: var(--text-color);
 }

packages/frontend/src/main.ts

@@ -14,6 +14,10 @@ const router = createRouter({
       path: "/",
       component: () => import("@/routes/index.vue"),
     },
+    {
+      path: "/setup",
+      component: () => import("@/routes/setup.vue"),
+    }
   ],
 });
 router.beforeEach(() => {

packages/frontend/src/routes/setup.vue

@@ -0,0 +1,18 @@
+<template>
+  <h1>Welcome setup wizard!!</h1>
+</template>
+
+<script lang="ts" setup>
+import serverInfo from "@/lib/account";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+if (!serverInfo.success) {
+  throw new Error();
+}
+
+if (serverInfo.isFirstAdminExists) {
+  router.replace("/");
+}
+</script>