⏪ Pick up the single-page application as frontend

web/src/layouts/master.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
+    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
+      <router-link :to="{ name: 'dashboard' }" class="flex gap-1">
+        <img src="/favicon.png" width="27" height="24" class="icon-filter" />
+        <h2 class="ml-2 text-lg font-500">Solarpass</h2>
+      </router-link>
+
+      <v-spacer />
+
+      <div class="me-2">
+        <notification-list />
+      </div>
+
+      <div>
+        <user-menu />
+      </div>
+    </div>
+  </v-app-bar>
+
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script setup lang="ts">
+import { useUserinfo } from "@/stores/userinfo"
+import NotificationList from "@/components/NotificationList.vue"
+import UserMenu from "@/components/UserMenu.vue"
+
+const id = useUserinfo()
+
+id.readProfiles()
+</script>
+
+<style scoped>
+.editor-fab {
+  position: fixed !important;
+  bottom: 16px;
+  right: 20px;
+}
+
+.icon-filter {
+  filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%);
+}
+</style>

web/src/layouts/user-center.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-container class="pt-6 px-6">
+    <v-row>
+      <v-col :cols="12" :xs="12" :sm="12" :md="4" :lg="3">
+        <v-card title="Navigation">
+          <v-list density="comfortable">
+            <v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
+            <v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" />
+            <v-list-item title="Personal Page" prepend-icon="mdi-sitemap" :to="{ name: 'personal-page' }" />
+            <v-list-item title="Security" prepend-icon="mdi-security" :to="{ name: 'security' }" />
+          </v-list>
+        </v-card>
+      </v-col>
+
+      <v-col :cols="12" :xs="12" :sm="12" :md="8" :lg="9">
+        <router-view />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script setup lang="ts">
+</script>