fix(AppLayout): pin background to viewport so page no longer scrolls past footer

<v-img cover min-height="100dvh"> was forcing v-responsive to size itself
to the image's natural aspect ratio (1692px wide × 2333/3500 ≈ 1128px tall),
making the page 1128px tall on a 769px viewport. The bottom ~360px had no
white overlay, so scrolling past the footer leaked the unwrapped image.

Replace <v-img> with a position:fixed <div class="app-bg"> using
background-image: cover, and move the white overlay from inline style to
scoped .app-content CSS. Page scrollHeight dropped 1128 → 781; max scroll
359 → 12 (just v-main's slight overflow).

Verified: background still renders washed-out behind content, edit dialog
opens correctly (pointer-events: none doesn't block v-overlay/v-dialog),
all routes still work.
Co-Authored-By: Claude <noreply@anthropic.com>

src/components/AppLayout.vue

 <template>
   <v-app>
-    <v-img
-      src="/src/assets/images/login.jpg"
-      cover
-      min-height="100dvh"
-      style="object-position: center top;"
-    >
-      <v-layout min-height="100dvh" style="background: rgba(255, 255, 255, 0.85);">
-        <AppHeader :drawer-active="drawerActive" @toggle-drawer="toggleDrawer" @logout="showLogoutDialog = true" />
-        <AppFooter />
-        <AppDrawer v-model="drawerActive" />
-        <v-main>
-          <v-container fluid class="pt-4 pb-0">
-            <v-breadcrumbs :items="breadcrumbs">
-              <template #item="{ item }">
-                <v-breadcrumbs-item
-                  :disabled="item.disabled"
-                  :to="item.to"
-                  :exact="true"
-                >
-                  <v-icon v-if="item.icon" :icon="item.icon" size="small" class="me-1" />
-                  {{ item.title }}
-                </v-breadcrumbs-item>
-              </template>
-            </v-breadcrumbs>
-          </v-container>
-          <slot></slot>
-        </v-main>
-      </v-layout>
-    </v-img>
+    <!--
+      装饰背景：position: fixed 让它严格按视口尺寸铺满，不会像 v-img+cover
+      那样被图片自身宽高比撑高（那样会撑到 width × (image.h/image.w) =
+      1128px+，让页面能往下滚动到 footer 之下的空白背景）。
+      真正的白色半透明蒙层在 v-layout 上，所以图片仍以 ~15% 透明度透出。
+    -->
+    <div class="app-bg" aria-hidden="true"></div>
+    <v-layout min-height="100dvh" class="app-content">
+      <AppHeader :drawer-active="drawerActive" @toggle-drawer="toggleDrawer" @logout="showLogoutDialog = true" />
+      <AppFooter />
+      <AppDrawer v-model="drawerActive" />
+      <v-main>
+        <v-container fluid class="pt-4 pb-0">
+          <v-breadcrumbs :items="breadcrumbs">
+            <template #item="{ item }">
+              <v-breadcrumbs-item
+                :disabled="item.disabled"
+                :to="item.to"
+                :exact="true"
+              >
+                <v-icon v-if="item.icon" :icon="item.icon" size="small" class="me-1" />
+                {{ item.title }}
+              </v-breadcrumbs-item>
+            </template>
+          </v-breadcrumbs>
+        </v-container>
+        <slot></slot>
+      </v-main>
+    </v-layout>
     <!-- 登出确认对话框 -->
     <v-dialog v-model="showLogoutDialog" max-width="400">
       <v-card>
@@ -160,4 +160,28 @@ const breadcrumbs = computed(() => {
 </script>
 
 <style scoped>
+/*
+ * 背景图片：固定在视口，覆盖整屏；用 background-image 替代 <v-img cover>，
+ * 避免 v-img 的 v-responsive 容器按图片自身宽高比撑高（width × 2333/3500 ≈
+ * 1128px），导致页面能滚到 footer 之下。
+ * pointer-events: none — 不抢交互。
+ */
+.app-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background: url('@/assets/images/login.jpg') center top / cover no-repeat;
+  pointer-events: none;
+}
+
+/*
+ * v-layout 的白色半透明蒙层从 inline style 挪到这里（也保留 rgba 不变）。
+ * 加 position: relative + z-index: 1，让内容层在 .app-bg 之上，
+ * 否则 v-app 的 flex 排版可能把 .app-bg 盖住。
+ */
+.app-content {
+  position: relative;
+  z-index: 1;
+  background: rgba(255, 255, 255, 0.85);
+}
 </style>