feat: 添加API连接状态显示页脚

在应用底部添加固定页脚显示当前连接的API地址
2026-01-18 19:08:04 +08:00
parent 8f6e5c8423
commit 9fc455cca4
4 changed files with 16 additions and 1 deletions
--- a/ionic-app/index.html
+++ b/ionic-app/index.html
@@ -23,6 +23,7 @@

  <body>
    <div id="app"></div>
+    <div id="api-footer" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--ion-toolbar-background, #f8f9fa); padding: 10px; text-align: center; font-size: 12px; color: var(--ion-text-color, #333); border-top: 1px solid #ddd;"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/ionic-app/src/App.vue
+++ b/ionic-app/src/App.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue'
+import { onMounted } from 'vue'
+
+const apiHost = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
+
+onMounted(() => {
+  const footer = document.getElementById('api-footer')
+  if (footer) {
+    footer.textContent = `连接: ${apiHost}`
+  }
+})
 </script>

 <template>