wangxiaogang
c7f29aa7a7
核心功能： - 记账CRUD（支出/收入/分类/备注/日期） - 统计分析（概览/分类占比/每日趋势） - 预算管理（按月设置/进度条/超支提醒） - 数据导出CSV 安全与认证： - HMAC-SHA256签名token认证 - 用户数据隔离 - 输入验证与错误处理 - CORS配置 前端优化： - 骨架屏加载 - 账单按日期分组 - 预算页面重构（快捷预设+Numpad） - SvgIcon组件（H5+微信双端适配） - 下拉刷新 后端优化： - 共享日期工具函数 - 数据库连接池优化 - 健康检查端点 - 优雅关闭处理 技术栈： - 前端：Uni-app (Vue 3 + Pinia) - 后端：Node.js + Express + MySQL
388 lines
9.3 KiB
Vue
388 lines
9.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<text class="page-title">我的</text>
|
||
|
||
<view class="profile-card">
|
||
<view class="p-avatar">
|
||
<SvgIcon name="user" :size="64" color="#FFFFFF" />
|
||
</view>
|
||
<view class="p-info">
|
||
<text class="p-name">小菜</text>
|
||
<text class="p-tagline">记账小能手</text>
|
||
<text class="p-streak">累计 {{ txStore.total }} 笔记录</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="quick-stats">
|
||
<view class="qs-card">
|
||
<text class="qs-label">本月支出</text>
|
||
<text class="qs-value" v-if="!loading">{{ formatAmount(overview.expense) }}</text>
|
||
<view class="qs-skeleton" v-else></view>
|
||
</view>
|
||
<view class="qs-card">
|
||
<text class="qs-label">本月收入</text>
|
||
<text class="qs-value income" v-if="!loading">{{ formatAmount(overview.income) }}</text>
|
||
<view class="qs-skeleton" v-else></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-card">
|
||
<view class="menu-item" @tap="goBudget">
|
||
<text class="mi-label">预算设置</text>
|
||
<text class="mi-extra" v-if="budget">{{ formatAmount(budget.amount) }}</text>
|
||
<SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
|
||
</view>
|
||
<view class="menu-item" @tap="goCategoryManage">
|
||
<text class="mi-label">分类管理</text>
|
||
<SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
|
||
</view>
|
||
<view class="menu-item" @tap="exportData">
|
||
<text class="mi-label">数据导出</text>
|
||
<SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-card mt">
|
||
<view class="menu-item" @tap="showAbout = true">
|
||
<text class="mi-label">关于小菜</text>
|
||
<SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关于弹窗 -->
|
||
<view class="modal-mask" v-if="showAbout" @tap="showAbout = false">
|
||
<view class="modal" @tap.stop>
|
||
<text class="about-title">小菜记账</text>
|
||
<text class="about-version">v1.0.0</text>
|
||
<text class="about-desc">可爱 x 高级的个人记账小程序</text>
|
||
<text class="about-desc">让记账从负担变成享受</text>
|
||
<view class="modal-btns" style="margin-top: 40rpx;">
|
||
<view class="modal-btn confirm" @tap="showAbout = false">知道了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { useTransactionStore } from '@/stores/transaction'
|
||
import { useStatsStore } from '@/stores/stats'
|
||
import { useBudgetStore } from '@/stores/budget'
|
||
import { formatAmount } from '@/utils/format'
|
||
import { statusBarHeight } from '@/utils/system'
|
||
import { request } from '@/utils/request'
|
||
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
|
||
|
||
const txStore = useTransactionStore()
|
||
const statsStore = useStatsStore()
|
||
const budgetStore = useBudgetStore()
|
||
|
||
const overview = ref({ expense: 0, income: 0, count: 0, daily: 0 })
|
||
const budget = ref<any>(null)
|
||
const loading = ref(true)
|
||
const showAbout = ref(false)
|
||
|
||
onMounted(async () => {
|
||
loading.value = true
|
||
try {
|
||
await Promise.all([
|
||
statsStore.fetchOverview(),
|
||
budgetStore.fetchBudget(),
|
||
txStore.fetchTransactions({ page: 1, pageSize: 1 })
|
||
])
|
||
overview.value = statsStore.overview
|
||
budget.value = budgetStore.budget
|
||
} catch (e) {
|
||
console.error('Profile load error:', e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
|
||
function goBudget() {
|
||
uni.navigateTo({ url: '/pages/budget/index' })
|
||
}
|
||
|
||
function goCategoryManage() {
|
||
uni.navigateTo({ url: '/pages/category-manage/index' })
|
||
}
|
||
|
||
async function exportData() {
|
||
try {
|
||
const data = await request<any>({ url: '/transactions', data: { page: 1, pageSize: 9999 } })
|
||
const list = data.list
|
||
if (!list || list.length === 0) {
|
||
uni.showToast({ title: '暂无数据', icon: 'none' })
|
||
return
|
||
}
|
||
if (data.total > list.length) {
|
||
uni.showToast({ title: `共${data.total}条，仅导出前${list.length}条`, icon: 'none' })
|
||
}
|
||
|
||
function csvEscape(val: string): string {
|
||
if (val.includes(',') || val.includes('"') || val.includes('\n')) {
|
||
return '"' + val.replace(/"/g, '""') + '"'
|
||
}
|
||
return val
|
||
}
|
||
const header = '日期,类型,分类,金额(元),备注\n'
|
||
const rows = list.map(t => {
|
||
const amount = (t.amount / 100).toFixed(2)
|
||
const type = t.type === 'expense' ? '支出' : '收入'
|
||
return [t.date, type, t.category_name || '未分类', amount, t.note || ''].map(csvEscape).join(',')
|
||
}).join('\n')
|
||
|
||
const csv = '' + header + rows
|
||
|
||
// #ifdef H5
|
||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = `小菜记账_${new Date().toISOString().slice(0, 10)}.csv`
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
uni.showToast({ title: '导出成功', icon: 'success' })
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
const fs = uni.getFileSystemManager()
|
||
const filePath = `${wx.env.USER_DATA_PATH}/小菜记账_${new Date().toISOString().slice(0, 10)}.csv`
|
||
fs.writeFileSync(filePath, csv, 'utf-8')
|
||
uni.openDocument({
|
||
filePath,
|
||
fileType: 'csv',
|
||
success: () => {},
|
||
fail: () => uni.showToast({ title: '导出失败', icon: 'none' })
|
||
})
|
||
// #endif
|
||
} catch {
|
||
uni.showToast({ title: '导出失败', icon: 'none' })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #FFF8F0;
|
||
padding: 0 0 180rpx;
|
||
}
|
||
|
||
.status-bar {
|
||
background: #FFF8F0;
|
||
}
|
||
|
||
.page-title {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2D1B1B;
|
||
padding: 16rpx 0 24rpx;
|
||
}
|
||
|
||
.profile-card {
|
||
margin: 0 40rpx;
|
||
padding: 48rpx;
|
||
background: linear-gradient(135deg, #FF8C69, #FFB89A);
|
||
border-radius: 40rpx;
|
||
box-shadow: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.p-avatar {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
border-radius: 50%;
|
||
border: 6rpx solid rgba(255, 255, 255, 0.5);
|
||
background: rgba(255, 255, 255, 0.25);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.p-name {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
display: block;
|
||
}
|
||
|
||
.p-tagline {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.p-streak {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.65);
|
||
display: block;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.quick-stats {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
padding: 0 40rpx;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.qs-card {
|
||
flex: 1;
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
border: 2rpx solid #F0E0D6;
|
||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||
text-align: center;
|
||
}
|
||
|
||
.qs-label {
|
||
font-size: 24rpx;
|
||
color: #8B7E7E;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.qs-value {
|
||
font-family: 'Fredoka', sans-serif;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #2D1B1B;
|
||
|
||
&.income { color: #7BC67E; }
|
||
}
|
||
|
||
.qs-skeleton {
|
||
width: 160rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
|
||
background-size: 200% 100%;
|
||
border-radius: 8rpx;
|
||
margin: 0 auto;
|
||
animation: shimmer 1.5s infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: 200% 0; }
|
||
100% { background-position: -200% 0; }
|
||
}
|
||
|
||
.menu-card {
|
||
margin: 40rpx 40rpx 0;
|
||
background: #FFFFFF;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #F0E0D6;
|
||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||
overflow: hidden;
|
||
|
||
&.mt { margin-top: 32rpx; }
|
||
}
|
||
|
||
.menu-item {
|
||
height: 112rpx;
|
||
padding: 0 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #F0E0D6;
|
||
|
||
&:last-child { border-bottom: none; }
|
||
&:active { background: #FFF8F0; }
|
||
}
|
||
|
||
.mi-label { flex: 1; font-size: 28rpx; font-weight: 500; color: #2D1B1B; }
|
||
.mi-extra { font-size: 28rpx; color: #FF8C69; font-weight: 600; margin-right: 16rpx; }
|
||
|
||
.about-title {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #FF8C69;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
|
||
.about-version {
|
||
font-size: 24rpx;
|
||
color: #BFB3B3;
|
||
display: block;
|
||
text-align: center;
|
||
margin: 8rpx 0 24rpx;
|
||
}
|
||
|
||
.about-desc {
|
||
font-size: 28rpx;
|
||
color: #8B7E7E;
|
||
display: block;
|
||
text-align: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.modal-mask {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal {
|
||
width: 600rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
padding: 48rpx;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #2D1B1B;
|
||
display: block;
|
||
text-align: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.modal-input {
|
||
height: 96rpx;
|
||
background: #FFF8F0;
|
||
border-radius: 24rpx;
|
||
padding: 0 32rpx;
|
||
font-size: 28rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.modal-btns {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.modal-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
|
||
&.cancel {
|
||
background: #FFF8F0;
|
||
color: #8B7E7E;
|
||
}
|
||
|
||
&.confirm {
|
||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style>
|