后端版本获取

components.d.ts

@@ -13,6 +13,8 @@ declare module '@vue/runtime-core' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']

src/static/common.less

@@ -83,12 +83,6 @@ html, body, #app, .layout {
     flex-basis: 0;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   }
-  > .layout-copy {
-    text-align: center;
-    padding-bottom: 12px;
-    color: var(--el-text-color-placeholder);
-    font-size: var(--el-font-size-extra-small);
-  }
 
   /* ===== 页面布局（用于带分页的表格页面）===== */
   .page-wrapper {

src/views/Home.vue

@@ -17,6 +17,7 @@
             <el-dropdown-menu>
               <el-dropdown-item command="home">返回首页</el-dropdown-item>
               <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
+              <el-dropdown-item command="about">关于</el-dropdown-item>
               <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -51,7 +52,6 @@
             </keep-alive>
           </router-view>
         </div>
-        <div class="layout-copy">2016-{{currentYear}} &copy; colorfulsweet 上次更新：{{ version }}</div>
       </el-main>
     </el-container>
   </el-container>
@@ -75,6 +75,17 @@
       </span>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="aboutModal" title="关于" width="420px">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="前端版本">
+        {{ version }}
+      </el-descriptions-item>
+      <el-descriptions-item label="后端版本">
+        {{ backendVersion }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -93,12 +104,13 @@ const router = useRouter()
 const route = useRoute()
 
 const version = __APP_VERSION__
-const currentYear = new Date().getFullYear()
 const defaultActiveMenuKey = ref<string | null>(null)
 const openMenuNames = ref<string[]>([])
 const mainViewReady = ref(false)
 
 const isDark = ref(false)
+const aboutModal = ref(false)
+const backendVersion = ref('未知')
 
 const menus = computed((): MenuGroup[] => {
   return allMenus
@@ -194,6 +206,9 @@ function dropdownMenuCommand(command: string): void {
     case 'home':
       router.push('/')
       break
+    case 'about':
+      openAboutDialog()
+      break
     case 'changePassword':
       changePwdModal.value = true
       break
@@ -205,6 +220,13 @@ function dropdownMenuCommand(command: string): void {
       break
   }
 }
+
+async function openAboutDialog(): Promise<void> {
+  aboutModal.value = true
+  backendVersion.value = '正在获取...'
+  backendVersion.value = await http.get<never, string>('/system/version')
+}
+
 function submitChangePassword(): void {
   changePwdForm.value?.validate(async (valid: boolean) => {
     if (!valid) return