From 895a902d962ddd4c60347d39cf34cd4ffc4b6cc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Thu, 30 Apr 2026 11:34:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E7=89=88=E6=9C=AC=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts        |  2 ++
 src/static/common.less |  6 ------
 src/views/Home.vue     | 26 ++++++++++++++++++++++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index f464920..eab8558 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/static/common.less b/src/static/common.less
index c4e32e7..edbdc39 100644
--- a/src/static/common.less
+++ b/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 {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 88751d8..349a3d3 100644
--- a/src/views/Home.vue
+++ b/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