From 7704a044298dc8da88551319ffbdd90434f6dfd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <sunchengsuncheng@gmail.com>
Date: Fri, 2 Jan 2026 18:58:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/public/service-worker.js     |  8 +++++++-
 Web/src/App.vue                  | 33 ++++++++++++++++++++++++++++++++
 Web/src/registerServiceWorker.js | 21 +++++++++++---------
 Web/src/views/PeriodicRecord.vue |  2 +-
 Web/src/views/SettingView.vue    |  2 ++
 5 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/Web/public/service-worker.js b/Web/public/service-worker.js
index b9bd96e..70fe1cb 100644
--- a/Web/public/service-worker.js
+++ b/Web/public/service-worker.js
@@ -15,10 +15,16 @@ self.addEventListener('install', (event) => {
         console.log('[Service Worker] 缓存文件');
         return cache.addAll(urlsToCache);
       })
-      .then(() => self.skipWaiting())
   );
 });
 
+// 监听跳过等待消息
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
 // 激活 Service Worker
 self.addEventListener('activate', (event) => {
   console.log('[Service Worker] 激活中...');
diff --git a/Web/src/App.vue b/Web/src/App.vue
index 4a57136..ea77e7c 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -20,6 +20,11 @@
         </van-tabbar-item>
       </van-tabbar>
       <GlobalAddBill @success="handleAddTransactionSuccess"/>
+      
+      <div v-if="needRefresh" class="update-toast" @click="updateServiceWorker">
+        <van-icon name="upgrade" class="update-icon" />
+        <span>新版本可用，点击刷新</span>
+      </div>
     </div>
   </van-config-provider>
 </template>
@@ -29,6 +34,7 @@ import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useMessageStore } from '@/stores/message'
 import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
+import { needRefresh, updateServiceWorker } from './registerServiceWorker'
 import '@/styles/common.css'
 
 const messageStore = useMessageStore()
@@ -221,4 +227,31 @@ const subscribeToPush = async () => {
   font-size: 12px;
   pointer-events: auto;
 }
+
+.update-toast {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--van-primary-color);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.update-toast:active {
+  transform: translateX(-50%) scale(0.95);
+}
+
+.update-icon {
+  font-size: 18px;
+}
 </style>
diff --git a/Web/src/registerServiceWorker.js b/Web/src/registerServiceWorker.js
index aae2477..bff071a 100644
--- a/Web/src/registerServiceWorker.js
+++ b/Web/src/registerServiceWorker.js
@@ -1,4 +1,13 @@
- 
+import { ref } from 'vue';
+
+export const needRefresh = ref(false);
+let swRegistration = null;
+
+export function updateServiceWorker() {
+  if (swRegistration && swRegistration.waiting) {
+    swRegistration.waiting.postMessage({ type: 'SKIP_WAITING' });
+  }
+}
 
 export function register() {
   if ('serviceWorker' in navigator) {
@@ -8,6 +17,7 @@ export function register() {
       navigator.serviceWorker
         .register(swUrl)
         .then((registration) => {
+          swRegistration = registration;
           console.log('[SW] Service Worker 注册成功:', registration.scope);
 
           // 检查更新
@@ -20,7 +30,7 @@ export function register() {
                 if (navigator.serviceWorker.controller) {
                   // 新的 Service Worker 已安装，提示用户刷新
                   console.log('[SW] 新版本可用，请刷新页面');
-                  showUpdateNotification();
+                  needRefresh.value = true;
                 } else {
                   // 首次安装
                   console.log('[SW] 内容已缓存，可离线使用');
@@ -59,13 +69,6 @@ export function unregister() {
   }
 }
 
-// 显示更新提示
-function showUpdateNotification() {
-  // 你可以使用 Vant 的 Dialog 或 Notify 组件
-  if (window.confirm('发现新版本，是否立即更新？')) {
-    window.location.reload();
-  }
-}
 
 // 请求通知权限
 export function requestNotificationPermission() {
diff --git a/Web/src/views/PeriodicRecord.vue b/Web/src/views/PeriodicRecord.vue
index e11c993..4edba57 100644
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -68,7 +68,7 @@
       </van-list>
 
       <!-- 底部安全距离 -->
-      <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
+      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
     </van-pull-refresh>
 
     <!-- 底部新增按钮 -->
diff --git a/Web/src/views/SettingView.vue b/Web/src/views/SettingView.vue
index 1f51c6a..b9d1ee2 100644
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -50,6 +50,8 @@
         <van-cell title="退出登录" is-link @click="handleLogout" />
       </van-cell-group>
     </div>
+    <!-- 底部安全距离 -->
+    <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
   </div>
 </template>