版本号

2026-08-02 17:28:44 +08:00
parent 8cb9b4f57b
commit f7c73247d6
9 changed files with 163 additions and 1 deletions
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import http from '../api/http'
+
+interface SystemVersionResponse {
+  version: string
+}
+
+const backendVersion = ref('获取中')
+const currentYear = new Date().getFullYear()
+const frontendVersion = __APP_VERSION__
+
+onMounted(async () => {
+  try {
+    const { data } = await http.get<SystemVersionResponse>('/system/version')
+    backendVersion.value = data.version ? `v${data.version}` : '未知'
+  } catch {
+    backendVersion.value = '未知'
+  }
+})
+</script>
+
+<template>
+  <footer class="site-footer" aria-label="网站版权与版本信息">
+    <div class="site-footer-inner">
+      <p>© {{ currentYear }} 明序教务 · 版权所有</p>
+      <div class="version-list" aria-label="系统版本">
+        <span>前端版本 <b>v{{ frontendVersion }}</b></span>
+        <span>后端版本 <b>{{ backendVersion }}</b></span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.site-footer {
+  position: relative;
+  z-index: 1;
+  border-top: 1px solid rgba(255, 255, 255, .1);
+  color: #d9e0f2;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
+    linear-gradient(112deg, #152550 0%, #1d326c 72%, #176a70 130%);
+  background-size: 28px 28px, auto;
+}
+
+.site-footer-inner {
+  min-height: 58px;
+  max-width: 1540px;
+  margin: 0 auto;
+  padding: 11px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.site-footer p {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: .04em;
+}
+
+.version-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.version-list span {
+  padding: 5px 9px;
+  border: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 4px;
+  color: #aeb9d8;
+  background: rgba(255, 255, 255, .055);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.version-list b {
+  margin-left: 5px;
+  color: #66d5c5;
+  font: 700 10px/1.2 Consolas, monospace;
+}
+
+@media (max-width: 600px) {
+  .site-footer-inner {
+    min-height: 72px;
+    padding: 10px 14px;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    gap: 7px;
+  }
+
+  .version-list {
+    width: 100%;
+  }
+
+  .version-list span {
+    flex: 1;
+    text-align: center;
+  }
+}
+</style>