🎉 Setup Pass frontend project

DysonNetwork.Pass/Client/src/assets/main.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+@layer theme, base, components, utilities;
+
+@layer base {
+  body {
+    font-family: 'Nunito Variable', sans-serif;
+  }
+}

DysonNetwork.Pass/Client/src/layouts/default.vue

@@ -0,0 +1,25 @@
+<template>
+  <n-layout>
+    <n-layout-header class="border-b-1">Solar Network ID</n-layout-header>
+    <n-layout-content embedded content-style="padding: 24px;">
+      <slot />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script lang="ts" setup>
+import { NLayout, NLayoutHeader, NLayoutContent } from 'naive-ui'
+</script>
+
+<style scoped>
+.n-layout-header,
+.n-layout-footer {
+  padding: 8px 24px;
+  border-color: var(--n-border-color);
+  text-align: center;
+}
+
+.n-layout-content {
+  height: calc(100vh - 40px);
+}
+</style>

DysonNetwork.Pass/Client/src/main.ts

@@ -0,0 +1,16 @@
+import '@fontsource-variable/nunito';
+
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import Root from './root.vue'
+import router from './router'
+
+const app = createApp(Root)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

DysonNetwork.Pass/Client/src/root.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import LayoutDefault from './layouts/default.vue'
+
+import { RouterView } from 'vue-router'
+import { NGlobalStyle, NConfigProvider } from 'naive-ui'
+</script>
+
+<template>
+  <n-config-provider :theme-overrides="{ common: { fontFamily: 'Nunito Variable' } }">
+    <n-global-style />
+    <layout-default>
+      <router-view />
+    </layout-default>
+  </n-config-provider>
+</template>

DysonNetwork.Pass/Client/src/router/index.ts

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: () => import('../views/index.vue'),
+    },
+  ],
+})
+
+export default router

DysonNetwork.Pass/Client/src/views/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="h-full relative flex items-center justify-center">
+    <n-card class="max-w-lg" title="About">
+      <p><b>Solarpass</b> is the universal account for the Solar Network.</p>
+      <p>
+        It provide the capability for both developers and users to well managed their data across
+        multiple services.
+      </p>
+
+      <p class="mt-4 opacity-75 text-xs">
+        <span v-if="version == null">Loading...</span>
+        <span v-else
+          >v{{ version.version }} @ {{ version.commit.substring(0, 6) }}
+          {{ version.updatedAt }}</span
+        >
+      </p>
+    </n-card>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { NCard } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+
+const version = ref<any>(null)
+
+async function fetchVersion() {
+  const resp = await fetch('/api/version')
+  version.value = await resp.json()
+}
+
+onMounted(() => fetchVersion())
+</script>
+
+<style scoped>
+/* Add any specific styles here if needed, though Tailwind should handle most. */
+</style>