496 lines
12 KiB
Vue
496 lines
12 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="handleUnconfirmedClassification"
|
||
/>
|
||
<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"
|
||
size="24"
|
||
:loading="notificationLoading"
|
||
@change="handleNotificationToggle"
|
||
/>
|
||
</template>
|
||
</van-cell>
|
||
<van-cell
|
||
v-if="notificationEnabled"
|
||
title="测试通知"
|
||
is-link
|
||
@click="handleTestNotification"
|
||
/>
|
||
</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
|
||
title="定时任务"
|
||
is-link
|
||
@click="handleScheduledTasks"
|
||
/>
|
||
<van-cell
|
||
title="切换版本"
|
||
is-link
|
||
:value="versionStore.currentVersion.toUpperCase()"
|
||
@click="handleVersionSwitch"
|
||
/>
|
||
</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>
|
||
|
||
<!-- 液态玻璃底部导航栏 -->
|
||
<GlassBottomNav
|
||
v-model="activeTab"
|
||
@tab-click="handleTabClick"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog, showDialog } from 'vant'
|
||
import { uploadBillFile } from '@/api/billImport'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { useVersionStore } from '@/stores/version'
|
||
import { getVapidPublicKey, subscribe, testNotification } from '@/api/notification'
|
||
import { updateServiceWorker } from '@/registerServiceWorker'
|
||
import GlassBottomNav from '@/components/GlassBottomNav.vue'
|
||
|
||
const router = useRouter()
|
||
const authStore = useAuthStore()
|
||
const versionStore = useVersionStore()
|
||
|
||
// 底部导航栏
|
||
const activeTab = ref('setting')
|
||
const handleTabClick = (item, index) => {
|
||
console.log('Tab clicked:', item.name, index)
|
||
// 导航逻辑已在组件内部处理
|
||
}
|
||
|
||
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
|
||
}
|
||
|
||
const { 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 handleUnconfirmedClassification = () => {
|
||
router.push({ name: 'unconfirmed-classification' })
|
||
}
|
||
|
||
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('已取消刷新网络')
|
||
}
|
||
}
|
||
|
||
const handleScheduledTasks = () => {
|
||
router.push({ name: 'scheduled-tasks' })
|
||
}
|
||
|
||
/**
|
||
* 处理版本切换
|
||
*/
|
||
const handleVersionSwitch = async () => {
|
||
try {
|
||
await showDialog({
|
||
title: '选择版本',
|
||
message: '请选择要使用的版本',
|
||
showCancelButton: true,
|
||
confirmButtonText: 'V2',
|
||
cancelButtonText: 'V1'
|
||
}).then(() => {
|
||
// 选择 V2
|
||
versionStore.setVersion('v2')
|
||
showSuccessToast('已切换到 V2')
|
||
// 尝试跳转到当前路由的 V2 版本
|
||
redirectToVersionRoute()
|
||
}).catch(() => {
|
||
// 选择 V1
|
||
versionStore.setVersion('v1')
|
||
showSuccessToast('已切换到 V1')
|
||
// 尝试跳转到当前路由的 V1 版本
|
||
redirectToVersionRoute()
|
||
})
|
||
} catch (error) {
|
||
console.error('版本切换失败:', error)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 根据当前版本重定向路由
|
||
*/
|
||
const redirectToVersionRoute = () => {
|
||
const currentRoute = router.currentRoute.value
|
||
const currentRouteName = currentRoute.name
|
||
|
||
if (versionStore.isV2()) {
|
||
// 尝试跳转到 V2 路由
|
||
const v2RouteName = `${currentRouteName}-v2`
|
||
const v2Route = router.getRoutes().find(route => route.name === v2RouteName)
|
||
|
||
if (v2Route) {
|
||
router.push({ name: v2RouteName })
|
||
}
|
||
// 如果没有 V2 路由，保持当前路由
|
||
} else {
|
||
// V1 版本：如果当前在 V2 路由，跳转到 V1
|
||
if (currentRouteName && currentRouteName.toString().endsWith('-v2')) {
|
||
const v1RouteName = currentRouteName.toString().replace(/-v2$/, '')
|
||
const v1Route = router.getRoutes().find(route => route.name === v1RouteName)
|
||
|
||
if (v1Route) {
|
||
router.push({ name: v1RouteName })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面背景色 */
|
||
:deep(body) {
|
||
background-color: var(--van-background);
|
||
}
|
||
|
||
/* 增加卡片对比度 */
|
||
:deep(.van-cell-group--inset) {
|
||
background-color: var(--van-background-2);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.detail-header {
|
||
padding: 16px 16px 5px 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.detail-header p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: var(--van-text-color-2);
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 设置页面容器背景色 */
|
||
:deep(.van-nav-bar) {
|
||
background: transparent !important;
|
||
}
|
||
</style>
|