优化 增强应用的离线支持功能

src/App.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="app-container">
+    <!-- 网络状态指示器 -->
+    <div v-if="!isOnline" class="network-status">
+      <div class="offline-indicator">
+        <span class="offline-icon">⚠️</span>
+        <span class="offline-text">离线模式</span>
+      </div>
+    </div>
+
     <!-- 设置页面背景（列表页） -->
     <NoteListPage v-show="showBackgroundPage" class="background-page" />
 
@@ -20,10 +28,11 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted } from 'vue'
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import '@/common/base.css'
 import { initModalService } from '@/utils/modalService'
+import { addNetworkListener, removeNetworkListener, testOnline } from '@/utils/networkUtils'
 
 // 导入页面组件
 import NoteListPage from './pages/NoteListPage.vue'
@@ -32,6 +41,7 @@ import SettingsPage from './pages/SettingsPage.vue'
 const route = useRoute()
 const transitionName = ref('slide-left')
 const modalRef = ref()
+const isOnline = ref(navigator.onLine)
 
 // 计算是否为设置页面路由
 const isSettingsRoute = computed(() => {
@@ -43,6 +53,19 @@ const showBackgroundPage = computed(() => {
   return route.path === '/settings'
 })
 
+// 网络状态变化回调
+const handleOnline = () => {
+  isOnline.value = true
+  console.log('网络已连接')
+  // 可以在这里触发数据同步
+}
+
+const handleOffline = () => {
+  isOnline.value = false
+  console.log('网络已断开')
+  // 可以在这里显示离线提示
+}
+
 // 监听路由变化，动态设置过渡动画方向
 watch(
   () => route.path,
@@ -72,9 +95,15 @@ watch(
   }
 )
 
-// 初始化弹框服务
+// 初始化弹框服务和网络监听
 onMounted(() => {
   initModalService()
+  addNetworkListener(handleOnline, handleOffline)
+})
+
+// 移除网络监听
+onUnmounted(() => {
+  removeNetworkListener(handleOnline, handleOffline)
 })
 </script>
 
@@ -87,6 +116,38 @@ onMounted(() => {
   background-color: #f5f5f5; // 设置默认背景色，防止闪烁
 }
 
+// 网络状态指示器
+.network-status {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.offline-indicator {
+  background-color: #ff6b6b;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 0 0 4px 4px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+}
+
+.offline-icon {
+  margin-right: 8px;
+}
+
+.offline-text {
+  font-weight: 500;
+}
+
 // 背景页面样式
 .background-page {
   position: absolute;