加入版本显示

meshmap_frontend/src/App.vue

@@ -15,6 +15,7 @@ import AdminMapSource from './components/AdminMapSource.vue'
 import AdminMqttForward from './components/AdminMqttForward.vue'
 import AdminSignManagement from './components/AdminSignManagement.vue'
 import AdminUsers from './components/AdminUsers.vue'
+import AppFooter from './components/AppFooter.vue'
 import ChatPanel from './components/ChatPanel.vue'
 import ConfirmDeleteModal from './components/ConfirmDeleteModal.vue'
 import HelpPage from './components/HelpPage.vue'
@@ -838,6 +839,8 @@ onBeforeUnmount(() => {
       />
     </template>
 
+    <AppFooter />
+
     <ConfirmDeleteModal
       :open="!!pendingDeleteAction"
       :title="deleteModalTitle"

meshmap_frontend/src/api.ts

@@ -131,6 +131,10 @@ export function getHealth(): Promise<HealthStatus> {
   return getJSON<HealthStatus>('/api/health')
 }
 
+export function getBackendVersion(): Promise<{ version: string; commit: string }> {
+  return getJSON<{ version: string; commit: string }>('/api/version')
+}
+
 export function getHelpContent(): Promise<HelpContentResponse> {
   return getJSON<HelpContentResponse>('/api/help')
 }

meshmap_frontend/src/components/AppFooter.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getBackendVersion } from '../api'
+import { FRONTEND_VERSION } from '../version'
+
+const backendVersion = ref('-')
+const commitVersion = ref('-')
+
+onMounted(async () => {
+  try {
+    const res = await getBackendVersion()
+    backendVersion.value = res.version
+    commitVersion.value = res.commit
+  } catch {
+    backendVersion.value = '-'
+    commitVersion.value = '-'
+  }
+})
+</script>
+
+<template>
+  <footer class="app-footer">
+    <span>前端 v{{ FRONTEND_VERSION }}</span>
+    <span class="app-footer-sep">·</span>
+    <span>后端 v{{ backendVersion }}</span>
+    <span class="app-footer-sep">·</span>
+    <span>提交 {{ commitVersion }}</span>
+  </footer>
+</template>

meshmap_frontend/src/style.css

@@ -75,6 +75,20 @@ a {
   padding: 16px;
 }
 
+.app-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 12px;
+  color: var(--color-muted);
+}
+
+.app-footer-sep {
+  opacity: 0.5;
+}
+
 .topbar {
   display: flex;
   align-items: center;

meshmap_frontend/src/version.ts

@@ -0,0 +1 @@
+export const FRONTEND_VERSION = '0.1.0'