src/api/version.ts

@@ -0,0 +1,10 @@
+import { API_BASE_URL, extractErrorMessage } from '@/api/http'
+import type { VersionInfo } from '@/types/version'
+
+export async function getVersionApi(): Promise<VersionInfo> {
+  const response = await fetch(`${API_BASE_URL}/version`)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to load API version'))
+  }
+  return response.json()
+}

src/types/version.ts

@@ -0,0 +1,5 @@
+export interface VersionInfo {
+  version: string
+  commit: string
+  buildTime: string
+}

src/views/AccountView.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { useListsStore } from '@/stores/lists'
 import { useAuthStore } from '@/stores/auth'
+import { getVersionApi } from '@/api/version'
+import type { VersionInfo } from '@/types/version'
 import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
 import InvitesPanel from '@/components/InvitesPanel.vue'
 
@@ -9,10 +11,27 @@ const listsStore = useListsStore()
 const authStore = useAuthStore()
 
 const showChangePassword = ref(false)
+const versionInfo = ref<VersionInfo | null>(null)
+const versionError = ref('')
+const isLoadingVersion = ref(false)
 
 onMounted(() => {
   listsStore.loadLists()
+  loadVersion()
 })
+
+async function loadVersion() {
+  isLoadingVersion.value = true
+  versionError.value = ''
+  try {
+    versionInfo.value = await getVersionApi()
+  } catch (err) {
+    versionError.value = err instanceof Error ? err.message : 'Failed to load API information'
+  } finally {
+    isLoadingVersion.value = false
+  }
+}
+
 </script>
 
 <template>
@@ -51,6 +70,27 @@ onMounted(() => {
       </p>
     </section>
 
+    <h1 class="section-heading">API information</h1>
+
+    <section class="card info-card">
+      <p v-if="isLoadingVersion" class="loading-text">Loading…</p>
+      <template v-else-if="versionInfo">
+        <p class="row">
+          <span>Version</span>
+          <strong class="mono-num">{{ versionInfo.version }}</strong>
+        </p>
+        <p class="row">
+          <span>Commit</span>
+          <strong class="mono-num">{{ versionInfo.commit }}</strong>
+        </p>
+        <p class="row">
+          <span>Build time</span>
+          <strong>{{ versionInfo.buildTime }}</strong>
+        </p>
+      </template>
+      <p v-else class="banner banner-error">{{ versionError }}</p>
+    </section>
+
     <ChangePasswordModal v-if="showChangePassword" @close="showChangePassword = false" />
   </main>
 </template>
@@ -107,4 +147,10 @@ onMounted(() => {
   margin-top: 0.6rem;
   padding: 0.5rem 1rem;
 }
+
+.loading-text {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin: 0;
+}
 </style>