337 lines
9.2 KiB
Vue
337 lines
9.2 KiB
Vue
<template>
|
||
<div class="page-container-flex">
|
||
<van-nav-bar title="设置" placeholder/>
|
||
<div class="scroll-content">
|
||
<div class="detail-header" style="padding-bottom: 5px;">
|
||
<p>账单</p>
|
||
</div>
|
||
<van-cell-group inset>
|
||
<van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
|
||
<van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
|
||
<van-cell title="周期记录" is-link @click="handlePeriodicRecord" />
|
||
</van-cell-group>
|
||
|
||
<!-- 隐藏的文件选择器 -->
|
||
<input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
|
||
|
||
<div class="detail-header" style="padding-bottom: 5px;">
|
||
<p>分类</p>
|
||
</div>
|
||
<van-cell-group inset>
|
||
<van-cell title="编辑分类" is-link @click="handleEditClassification" />
|
||
<van-cell title="批量分类" is-link @click="handleBatchClassification" />
|
||
<van-cell title="智能分类" is-link @click="handleSmartClassification" />
|
||
<!-- <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" /> -->
|
||
</van-cell-group>
|
||
|
||
<div class="detail-header" style="padding-bottom: 5px;">
|
||
<p>通知</p>
|
||
</div>
|
||
<van-cell-group inset>
|
||
<van-cell title="开启消息通知">
|
||
<template #right-icon>
|
||
<van-switch v-model="notificationEnabled" @change="handleNotificationToggle" size="24" :loading="notificationLoading" />
|
||
</template>
|
||
</van-cell>
|
||
<van-cell title="测试通知" is-link @click="handleTestNotification" v-if="notificationEnabled" />
|
||
</van-cell-group>
|
||
|
||
<div class="detail-header" style="padding-bottom: 5px;">
|
||
<p>开发者</p>
|
||
</div>
|
||
<van-cell-group inset>
|
||
<van-cell title="查看日志" is-link @click="handleLogView" />
|
||
<van-cell title="清除缓存" is-link @click="handleReloadFromNetwork" />
|
||
</van-cell-group>
|
||
|
||
<div class="detail-header" style="padding-bottom: 5px;">
|
||
<p>账户</p>
|
||
</div>
|
||
<van-cell-group inset>
|
||
<van-cell title="退出登录" is-link @click="handleLogout" />
|
||
</van-cell-group>
|
||
<!-- 底部安全距离 -->
|
||
<div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog } from 'vant'
|
||
import { uploadBillFile } from '@/api/billImport'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { getVapidPublicKey, subscribe, testNotification } from '@/api/notification'
|
||
import { updateServiceWorker } from '@/registerServiceWorker'
|
||
|
||
const router = useRouter()
|
||
const authStore = useAuthStore()
|
||
const fileInputRef = ref(null)
|
||
const currentType = ref('')
|
||
const notificationEnabled = ref(false)
|
||
const notificationLoading = ref(false)
|
||
|
||
onMounted(async () => {
|
||
if ('serviceWorker' in navigator) {
|
||
const registration = await navigator.serviceWorker.ready
|
||
const subscription = await registration.pushManager.getSubscription()
|
||
notificationEnabled.value = !!subscription
|
||
}
|
||
})
|
||
|
||
function urlBase64ToUint8Array(base64String) {
|
||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
|
||
const rawData = window.atob(base64);
|
||
const outputArray = new Uint8Array(rawData.length);
|
||
for (let i = 0; i < rawData.length; ++i) {
|
||
outputArray[i] = rawData.charCodeAt(i);
|
||
}
|
||
return outputArray;
|
||
}
|
||
|
||
const handleNotificationToggle = async (checked) => {
|
||
if (!('serviceWorker' in navigator)) {
|
||
showToast('您的浏览器不支持推送通知')
|
||
notificationEnabled.value = false
|
||
return
|
||
}
|
||
|
||
notificationLoading.value = true
|
||
try {
|
||
const registration = await navigator.serviceWorker.ready
|
||
|
||
if (checked) {
|
||
// 开启通知
|
||
const permission = await Notification.requestPermission()
|
||
if (permission !== 'granted') {
|
||
showToast('请允许通知权限')
|
||
notificationEnabled.value = false
|
||
return
|
||
}
|
||
|
||
let { success, data, message } = await getVapidPublicKey()
|
||
|
||
if (!success) {
|
||
throw new Error(message || '获取 VAPID 公钥失败')
|
||
}
|
||
|
||
const convertedVapidKey = urlBase64ToUint8Array(data)
|
||
|
||
const subscription = await registration.pushManager.subscribe({
|
||
userVisibleOnly: true,
|
||
applicationServerKey: convertedVapidKey
|
||
})
|
||
|
||
const subJson = subscription.toJSON()
|
||
await subscribe({
|
||
endpoint: subJson.endpoint,
|
||
p256DH: subJson.keys.p256dh,
|
||
auth: subJson.keys.auth
|
||
})
|
||
|
||
showSuccessToast('开启成功')
|
||
} else {
|
||
// 关闭通知
|
||
const subscription = await registration.pushManager.getSubscription()
|
||
if (subscription) {
|
||
await subscription.unsubscribe()
|
||
}
|
||
showSuccessToast('已关闭')
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
showToast('操作失败: ' + (error.message || '未知错误'))
|
||
notificationEnabled.value = !checked // 回滚状态
|
||
} finally {
|
||
notificationLoading.value = false
|
||
}
|
||
}
|
||
|
||
const handleTestNotification = async () => {
|
||
try {
|
||
await testNotification('这是一条测试消息')
|
||
showSuccessToast('发送成功，请查看通知栏')
|
||
} catch (error) {
|
||
console.error(error)
|
||
showToast('发送失败')
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理导入按钮点击
|
||
*/
|
||
const handleImportClick = (type) => {
|
||
currentType.value = type
|
||
// 触发文件选择
|
||
fileInputRef.value?.click()
|
||
}
|
||
|
||
const handlePeriodicRecord = () => {
|
||
router.push({ name: 'periodic-record' })
|
||
}
|
||
|
||
/**
|
||
* 处理文件选择
|
||
*/
|
||
const handleFileChange = async (event) => {
|
||
const file = event.target.files?.[0]
|
||
if (!file) {
|
||
return
|
||
}
|
||
|
||
// 验证文件类型
|
||
const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
|
||
if (!validTypes.includes(file.type)) {
|
||
showToast('请选择 CSV 或 Excel 文件')
|
||
return
|
||
}
|
||
|
||
// 验证文件大小（限制为 10MB）
|
||
const maxSize = 10 * 1024 * 1024
|
||
if (file.size > maxSize) {
|
||
showToast('文件大小不能超过 10MB')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 显示加载提示
|
||
showLoadingToast({
|
||
message: '上传中...',
|
||
forbidClick: true,
|
||
duration: 0
|
||
})
|
||
|
||
// 上传文件
|
||
const typeName = currentType.value === 'Alipay' ? '支付宝' : '微信'
|
||
const { success, message } = await uploadBillFile(file, currentType.value)
|
||
|
||
if (!success) {
|
||
showToast(message || `${typeName}账单导入失败`)
|
||
return
|
||
}
|
||
|
||
showSuccessToast(message || `${typeName}账单导入成功`)
|
||
} catch (error) {
|
||
console.error('上传失败:', error)
|
||
showToast('上传失败: ' + (error.message || '未知错误'))
|
||
}
|
||
finally {
|
||
closeToast()
|
||
// 清空文件输入，允许重复选择同一文件
|
||
event.target.value = ''
|
||
}
|
||
}
|
||
|
||
const handleEditClassification = () => {
|
||
router.push({ name: 'classification-edit' })
|
||
}
|
||
|
||
const handleBatchClassification = () => {
|
||
router.push({ name: 'classification-batch' })
|
||
}
|
||
|
||
const handleSmartClassification = () => {
|
||
router.push({ name: 'smart-classification' })
|
||
}
|
||
|
||
// const handleNaturalLanguageClassification = () => {
|
||
// router.push({ name: 'classification-nlp' })
|
||
// }
|
||
|
||
/**
|
||
* 处理退出登录
|
||
*/
|
||
const handleLogout = async () => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '提示',
|
||
message: '确定要退出登录吗？',
|
||
})
|
||
|
||
authStore.logout()
|
||
showSuccessToast('已退出登录')
|
||
router.push({ name: 'login' })
|
||
} catch (error) {
|
||
console.error('取消退出登录:', error)
|
||
showToast('已取消退出登录')
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理查看日志
|
||
*/
|
||
const handleLogView = () => {
|
||
router.push({ name: 'log' })
|
||
}
|
||
|
||
const handleReloadFromNetwork = async () => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '提示',
|
||
message: '确定要刷新网络吗？此操作不可撤销。',
|
||
})
|
||
|
||
// PWA程序强制页面更新到最新版本
|
||
if ('serviceWorker' in navigator) {
|
||
await updateServiceWorker()
|
||
showSuccessToast('正在更新，请稍候...')
|
||
// 延迟刷新页面以加载新版本
|
||
setTimeout(() => {
|
||
window.location.reload()
|
||
}, 1500)
|
||
} else {
|
||
showToast('当前环境不支持此操作')
|
||
return
|
||
}
|
||
} catch (error) {
|
||
console.error('取消刷新网络:', error)
|
||
showToast('已取消刷新网络')
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面背景色 */
|
||
:deep(body) {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:deep(body) {
|
||
background-color: #1a1a1a;
|
||
}
|
||
}
|
||
|
||
/* 增加卡片对比度 */
|
||
:deep(.van-cell-group--inset) {
|
||
background-color: #ffffff;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:deep(.van-cell-group--inset) {
|
||
background-color: #2c2c2c;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
|
||
.detail-header {
|
||
padding: 16px 16px 5px 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.detail-header p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: #969799;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 设置页面容器背景色 */
|
||
:deep(.van-nav-bar) {
|
||
background: transparent !important;
|
||
}
|
||
</style> |