接入前端真实接口并标记邮件HTML清洗

client/src/layouts/ReservationAppShell.vue

@@ -35,7 +35,7 @@
       <header class="app-topbar">
         <div>
           <strong>{{ pageTitle }}</strong>
-          <small>{{ t('app.hotelContext') }}</small>
+          <small>{{ reservationHotelId }}</small>
         </div>
 
         <div class="app-topbar__actions">
@@ -96,6 +96,7 @@ import { computed, onMounted, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
+import { reservationHotelId } from '@/config/reservationConfig'
 import { fetchBackendHealth } from '@/services/healthService'
 import { useAppPreferencesStore, type SupportedLocale } from '@/stores/appPreferences'
 
@@ -338,23 +339,48 @@ async function checkHealth(): Promise<void> {
 
 @media (max-width: 780px) {
   .app-shell {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .app-sidebar {
     position: static;
     height: auto;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto;
-    align-items: center;
-    padding: 14px 18px;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto;
+    gap: 12px;
+    padding: 14px 18px 16px;
   }
 
   .app-nav {
-    justify-content: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .app-nav__item {
+    flex: 1 1 128px;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .app-nav__item span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app-nav__item.router-link-active {
+    box-shadow: inset 0 -3px 0 var(--th-color-blue-600);
+  }
+
+  .app-main {
+    grid-template-rows: auto 1fr;
   }
 
   .app-topbar {
+    min-height: var(--th-topbar-height);
     padding: 0 18px;
   }
 
@@ -366,4 +392,52 @@ async function checkHealth(): Promise<void> {
     padding: 18px;
   }
 }
+
+@media (max-width: 520px) {
+  .app-sidebar {
+    padding: 12px 14px;
+  }
+
+  .brand strong {
+    font-size: 14px;
+  }
+
+  .app-nav__item {
+    flex-basis: calc(50% - 4px);
+    font-size: 12px;
+    padding: 0 10px;
+  }
+
+  .app-topbar {
+    align-items: start;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+    padding: 12px 14px;
+  }
+
+  .app-topbar__actions {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .locale-switch {
+    flex: 1;
+    max-width: 136px;
+  }
+
+  .locale-switch button {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .theme-button {
+    flex: 0 0 38px;
+  }
+
+  .app-content {
+    padding: 14px;
+  }
+}
 </style>