suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PWA支持
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 14s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Details

Browse Source
This commit is contained in:
孙诚
2025-12-25 14:15:43 +08:00
parent b14efd8d16
commit a9dfcdaa5c
19 changed files with 485 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/PWA-README.md Normal file
View File

@@ -0,0 +1 @@

28
Web/index.html
View File

@@ -1,15 +1,37 @@
<!DOCTYPE html>
<html lang="">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no">
<!-- PWA - 让应用在添加到主屏幕后以全屏模式运行 -->
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="账单管理">
<link rel="apple-touch-icon" href="/icons/icon-152x152.svg">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.svg">
<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.svg">
<link rel="apple-touch-icon" sizes="128x128" href="/icons/icon-128x128.svg">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.svg">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.svg">
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.svg">
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.svg">
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.svg">
<!-- Android Chrome -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1989fa">
<!-- Microsoft -->
<meta name="msapplication-TileColor" content="#1989fa">
<meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
<meta name="description" content="个人账单管理与邮件解析系统">
<meta name="keywords" content="账单管理,邮件解析,财务管理">
<title>账单管理</title>
</head>

10
Web/public/icons/icon-128x128.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad128" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="128" height="128" fill="url(#grad128)" rx="12.8"/>
<text x="50%" y="50%" font-size="51.2" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

10
Web/public/icons/icon-144x144.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad144" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="144" height="144" fill="url(#grad144)" rx="14.4"/>
<text x="50%" y="50%" font-size="57.6" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

10
Web/public/icons/icon-152x152.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="152" height="152" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad152" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="152" height="152" fill="url(#grad152)" rx="15.200000000000001"/>
<text x="50%" y="50%" font-size="60.800000000000004" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 582 B

10
Web/public/icons/icon-192x192.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad192" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="192" height="192" fill="url(#grad192)" rx="19.200000000000003"/>
<text x="50%" y="50%" font-size="76.80000000000001" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 581 B

10
Web/public/icons/icon-384x384.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="384" height="384" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad384" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="384" height="384" fill="url(#grad384)" rx="38.400000000000006"/>
<text x="50%" y="50%" font-size="153.60000000000002" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 582 B

10
Web/public/icons/icon-512x512.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad512" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="512" height="512" fill="url(#grad512)" rx="51.2"/>
<text x="50%" y="50%" font-size="204.8" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 555 B

10
Web/public/icons/icon-72x72.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad72" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="72" height="72" fill="url(#grad72)" rx="7.2"/>
<text x="50%" y="50%" font-size="28.8" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 547 B

10
Web/public/icons/icon-96x96.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad96" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1989fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0b5fd6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="96" height="96" fill="url(#grad96)" rx="9.600000000000001"/>
<text x="50%" y="50%" font-size="38.400000000000006" fill="white" text-anchor="middle" dy=".35em" font-family="Arial, Microsoft YaHei, sans-serif" font-weight="bold">账</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

4
Web/public/icons/icon-temp.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width='512' height='512' xmlns='http://www.w3.org/2000/svg'>
<rect width='512' height='512' fill='#1989fa'/>
<text x='50%' y='50%' font-size='200' fill='white' text-anchor='middle' dy='.3em' font-family='Arial, sans-serif' font-weight='bold'>账</text>
</svg>

76
Web/public/manifest.json Normal file
View File

@@ -0,0 +1,76 @@
{
"name": "账单管理系统",
"short_name": "账单管理",
"description": "个人账单管理与邮件解析系统",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1989fa",
"orientation": "portrait-primary",
"icons": [
{
"src": "/icons/icon-72x72.svg",
"sizes": "72x72",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-96x96.svg",
"sizes": "96x96",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-128x128.svg",
"sizes": "128x128",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-144x144.svg",
"sizes": "144x144",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-152x152.svg",
"sizes": "152x152",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-192x192.svg",
"sizes": "192x192",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-384x384.svg",
"sizes": "384x384",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512x512.svg",
"sizes": "512x512",
"type": "image/svg+xml",
"purpose": "any maskable"
}
],
"categories": ["finance", "productivity"],
"screenshots": [],
"shortcuts": [
{
"name": "查看账单",
"short_name": "账单",
"description": "快速查看账单列表",
"url": "/",
"icons": [
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96"
}
]
}
]
}

141
Web/public/service-worker.js Normal file
View File

@@ -0,0 +1,141 @@
const CACHE_NAME = 'emailbill-v1';
const urlsToCache = [
'/',
'/index.html',
'/favicon.ico',
'/manifest.json'
];
// 安装 Service Worker
self.addEventListener('install', (event) => {
console.log('[Service Worker] 安装中...');
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('[Service Worker] 缓存文件');
return cache.addAll(urlsToCache);
})
.then(() => self.skipWaiting())
);
});
// 激活 Service Worker
self.addEventListener('activate', (event) => {
console.log('[Service Worker] 激活中...');
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheName !== CACHE_NAME) {
console.log('[Service Worker] 删除旧缓存:', cacheName);
return caches.delete(cacheName);
}
})
);
}).then(() => self.clients.claim())
);
});
// 拦截请求
self.addEventListener('fetch', (event) => {
const { request } = event;
const url = new URL(request.url);
// 跳过跨域请求
if (url.origin !== location.origin) {
return;
}
// API请求使用网络优先策略
if (url.pathname.startsWith('/api/')) {
event.respondWith(
fetch(request)
.then((response) => {
// 克隆响应以便缓存
const responseClone = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(request, responseClone);
});
return response;
})
.catch(() => {
// 网络失败时尝试从缓存获取
return caches.match(request);
})
);
return;
}
// 静态资源使用缓存优先策略
event.respondWith(
caches.match(request)
.then((response) => {
if (response) {
return response;
}
return fetch(request).then((response) => {
// 检查是否是有效响应
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseClone = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(request, responseClone);
});
return response;
});
})
.catch(() => {
// 返回离线页面或默认内容
if (request.destination === 'document') {
return caches.match('/index.html');
}
})
);
});
// 后台同步
self.addEventListener('sync', (event) => {
console.log('[Service Worker] 后台同步:', event.tag);
if (event.tag === 'sync-data') {
event.waitUntil(syncData());
}
});
// 推送通知
self.addEventListener('push', (event) => {
console.log('[Service Worker] 收到推送消息');
const options = {
body: event.data ? event.data.text() : '您有新的账单消息',
icon: '/icons/icon-192x192.png',
badge: '/icons/icon-72x72.png',
vibrate: [200, 100, 200],
tag: 'emailbill-notification',
requireInteraction: false
};
event.waitUntil(
self.registration.showNotification('账单管理', options)
);
});
// 通知点击
self.addEventListener('notificationclick', (event) => {
console.log('[Service Worker] 通知被点击');
event.notification.close();
event.waitUntil(
clients.openWindow('/')
);
});
// 数据同步函数
async function syncData() {
try {
// 这里添加需要同步的逻辑
console.log('[Service Worker] 执行数据同步');
} catch (error) {
console.error('[Service Worker] 同步失败:', error);
}
}

18
Web/src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<van-config-provider :theme="theme">
<RouterView />
<van-tabbar v-model="active" v-show="showTabbar">
<van-tabbar v-model="active" v-show="showTabbar" safe-area-inset-bottom>
<van-tabbar-item icon="notes-o" to="/calendar">
日历
</van-tabbar-item>
@@ -61,3 +61,19 @@ const handleTabClick = (path) => {
</script>
<style scoped>
/* 为 Tabbar 添加额外的底部安全区域适配 */
:deep(.van-tabbar) {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* 在原有高度基础上增加安全区域 */
height: calc(50px + constant(safe-area-inset-bottom));
height: calc(50px + env(safe-area-inset-bottom));
}
/* 确保内容不被 Tabbar 遮挡 */
:deep(.van-tabbar) + * {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
</style>

26
Web/src/assets/main.css
View File

@@ -1,9 +1,35 @@
@import './base.css';
/* 禁用页面弹性缩放和橡皮筋效果 */
html, body {
overscroll-behavior: none;
overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
#app {
max-width: 1280px;
margin: 0 auto;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
a,

8
Web/src/main.js
View File

@@ -9,6 +9,9 @@ import vant from 'vant'
import { ConfigProvider } from 'vant';
import 'vant/lib/index.css'
// 注册 Service Worker
import { register } from './registerServiceWorker'
const app = createApp(App)
app.use(createPinia())
@@ -17,3 +20,8 @@ app.use(vant)
app.use(ConfigProvider);
app.mount('#app')
// 在生产环境注册 Service Worker
if (import.meta.env.PROD) {
register()
}

92
Web/src/registerServiceWorker.js Normal file
View File

@@ -0,0 +1,92 @@
/* eslint-disable no-console */
export function register() {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
console.log('[SW] Service Worker 注册成功:', registration.scope);
// 检查更新
registration.addEventListener('updatefound', () => {
const newWorker = registration.installing;
console.log('[SW] 发现新版本');
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// 新的 Service Worker 已安装，提示用户刷新
console.log('[SW] 新版本可用，请刷新页面');
showUpdateNotification();
} else {
// 首次安装
console.log('[SW] 内容已缓存，可离线使用');
}
}
});
});
// 定期检查更新
setInterval(() => {
registration.update();
}, 60 * 60 * 1000); // 每小时检查一次
})
.catch((error) => {
console.error('[SW] Service Worker 注册失败:', error);
});
// 监听 Service Worker 控制器变化
navigator.serviceWorker.addEventListener('controllerchange', () => {
console.log('[SW] 控制器已更改，页面将刷新');
window.location.reload();
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister();
})
.catch((error) => {
console.error(error.message);
});
}
}
// 显示更新提示
function showUpdateNotification() {
// 你可以使用 Vant 的 Dialog 或 Notify 组件
if (window.confirm('发现新版本，是否立即更新？')) {
window.location.reload();
}
}
// 请求通知权限
export function requestNotificationPermission() {
if ('Notification' in window && 'serviceWorker' in navigator) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('[SW] 通知权限已授予');
}
});
}
}
// 后台同步
export function registerBackgroundSync(tag = 'sync-data') {
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then((registration) => {
return registration.sync.register(tag);
}).then(() => {
console.log('[SW] 后台同步已注册:', tag);
}).catch((err) => {
console.error('[SW] 后台同步注册失败:', err);
});
}
}

2
Web/src/views/LoginView.vue
View File

@@ -53,7 +53,7 @@ const handleLogin = async () => {
try {
await authStore.login(password.value)
showToast({ type: 'success', message: '登录成功' })
router.push('/')
router.push('/calendar')
} catch (error) {
showToast({ type: 'fail', message: error.message || '登录失败' })
} finally {

14
Web/vite.config.js
View File

@@ -15,4 +15,18 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
build: {
// 确保 Service Worker 和 manifest 被正确复制
rollupOptions: {
input: {
main: fileURLToPath(new URL('./index.html', import.meta.url))
}
}
},
server: {
headers: {
// 允许 Service Worker 在开发环境中工作
'Service-Worker-Allowed': '/'
}
}
})