Compare commits

..

1 Commits

Author SHA1 Message Date
324a3ec5c9 fix: 键盘收起后添加底部保存按钮
- 记账页面添加底部保存按钮,键盘收起时显示
- 预算页面添加底部保存按钮,键盘收起时显示
- 按钮根据编辑/新增模式显示不同文案
- 正确处理底部安全区适配
2026-06-15 16:45:18 +08:00
49 changed files with 222 additions and 4535 deletions

3
.gitignore vendored
View File

@@ -40,6 +40,3 @@ server/uploads/
# Playwright
.playwright-mcp/
server/backups/
# Workbuddy
.workbuddy/

View File

@@ -54,11 +54,3 @@ export function updateUserRole(id: number, role: 'user' | 'admin') {
export function deleteUser(id: number) {
return request({ url: `/admin/users/${id}`, method: 'DELETE' })
}
// 健康检查类型从 @/api/health 导入
export type { HealthStatus } from '@/api/health'
/** 获取服务健康状态(管理员) */
export function getHealth() {
return request<import('./health').HealthStatus>({ url: '/health' })
}

View File

@@ -1,38 +0,0 @@
import { request } from '@/utils/request'
/** 备份记录 */
export interface Backup {
id: number
name: string
size: number
status: 'pending' | 'completed' | 'failed'
created_at: string
downloadToken?: string
}
/** 备份列表响应 */
export interface BackupList {
list: Backup[]
total: number
}
/** 获取备份列表 */
export function getBackups(params?: { page?: number; pageSize?: number }) {
return request<BackupList>({ url: '/backup', data: params })
}
/** 创建备份 */
export function createBackup() {
return request<{ id: number }>({ url: '/backup', method: 'POST' })
}
/** 删除备份 */
export function deleteBackup(id: number) {
return request({ url: `/backup/${id}`, method: 'DELETE' })
}
/** 获取备份下载地址 */
export function getBackupDownloadUrl(id: number, token: string): string {
const apiBase = typeof window !== 'undefined' ? '/api' : ''
return `${apiBase}/backup/${id}/download?token=${encodeURIComponent(token)}`
}

View File

@@ -1,32 +0,0 @@
import { request } from '@/utils/request'
import { API_BASE } from '@/config'
/** 导出参数 */
export interface ExportParams {
startDate: string
endDate: string
type?: 'expense' | 'income' | 'all'
format?: 'csv' | 'json'
}
/** 请求服务端导出(返回流) */
export function requestExport(params: ExportParams) {
return request<{ downloadUrl: string }>({
url: '/export',
data: { ...params, format: params.format || 'csv' }
})
}
/** 获取服务端导出下载 URL */
export function getExportUrl(params: ExportParams): string {
const query = new URLSearchParams()
query.set('startDate', params.startDate)
query.set('endDate', params.endDate)
if (params.type) query.set('type', params.type)
if (params.format) query.set('format', params.format)
const token = uni.getStorageSync('xc:token')
if (token) query.set('token', token)
return `${API_BASE}/export?${query.toString()}`
}

View File

@@ -29,22 +29,6 @@ export function getFeedbackList(params?: { page?: number; pageSize?: number; sta
return request<{ list: Feedback[]; total: number; page: number; pageSize: number }>({ url: '/feedback', data: params })
}
/** 我的反馈条目(简化版) */
export interface MyFeedback {
id: number
type: string
content: string
contact: string
status: 'pending' | 'processed' | 'ignored'
admin_reply?: string
created_at: string
}
/** 获取我的反馈列表 */
export function getMyFeedbacks(params?: { page?: number; pageSize?: number }) {
return request<{ list: MyFeedback[]; total: number; page: number; pageSize: number }>({ url: '/feedback/mine', data: params })
}
/** 更新反馈状态(管理员) */
export function updateFeedbackStatus(id: number, status: Feedback['status'], admin_reply?: string) {
return request({ url: `/feedback/${id}/status`, method: 'PUT', data: { status, admin_reply } })

View File

@@ -1,15 +0,0 @@
import { request } from '@/utils/request'
/** 健康检查结果 */
export interface HealthStatus {
status: 'ok' | 'degraded' | 'error'
uptime: number
db: 'connected' | 'disconnected'
version: string
timestamp: string
}
/** 获取服务健康状态 */
export function getHealth() {
return request<HealthStatus>({ url: '/health' })
}

View File

@@ -25,7 +25,6 @@ export interface CategoryStat {
export interface TrendPoint {
date: string
amount: number
label?: string
}
/** 获取概览数据 */
@@ -34,13 +33,13 @@ export function getOverview(params?: { month?: string; startDate?: string; endDa
}
/** 获取分类统计 */
export function getCategoryStats(month?: string, type: string = 'expense', group_id?: number | null, period?: 'week' | 'month' | 'year') {
return request<CategoryStat[]>({ url: '/stats/category', data: { month, type, group_id, period } })
export function getCategoryStats(month?: string, type: string = 'expense', group_id?: number | null) {
return request<CategoryStat[]>({ url: '/stats/category', data: { month, type, group_id } })
}
/** 获取趋势数据 */
export function getTrend(month?: string, type: string = 'expense', group_id?: number | null, period?: 'week' | 'month' | 'year') {
return request<TrendPoint[]>({ url: '/stats/trend', data: { month, type, group_id, period } })
export function getTrend(month?: string, type: string = 'expense', group_id?: number | null) {
return request<TrendPoint[]>({ url: '/stats/trend', data: { month, type, group_id } })
}
/** 智能分类建议结果 */

View File

@@ -1,47 +0,0 @@
import { request } from '@/utils/request'
/** 标签 */
export interface Tag {
id: number
name: string
color: string
created_at: string
}
/** 标签统计 */
export interface TagStat {
tag_id: number
tag_name: string
tag_color: string
count: number
total_amount: number
}
/** 获取标签列表 */
export function getTags() {
return request<Tag[]>({ url: '/tags' })
}
/** 创建标签 */
export function createTag(data: { name: string; color: string }) {
return request<{ id: number }>({ url: '/tags', method: 'POST', data })
}
/** 更新标签 */
export function updateTag(id: number, data: { name?: string; color?: string }) {
return request({ url: `/tags/${id}`, method: 'PUT', data })
}
/** 删除标签 */
export function deleteTag(id: number) {
return request({ url: `/tags/${id}`, method: 'DELETE' })
}
/** 按标签统计 */
export function getTagStats(params?: {
month?: string
period?: 'week' | 'month' | 'year'
type?: 'expense' | 'income'
}) {
return request<TagStat[]>({ url: '/tags/stats/by-tag', data: params })
}

View File

@@ -15,14 +15,6 @@ export interface Transaction {
group_id?: number | null
creator_nickname?: string
creator_avatar?: string
tags?: TagItem[]
}
/** 标签简略信息 */
export interface TagItem {
id: number
name: string
color: string
}
/** 交易列表响应 */
@@ -48,7 +40,6 @@ export interface TransactionParams {
minAmount?: number
maxAmount?: number
keyword?: string
tagId?: number
}
/** 获取交易列表 */
@@ -69,7 +60,6 @@ export function createTransaction(data: {
note?: string
date: string
group_id?: number | null
tagIds?: number[]
}) {
return request<{ id: number }>({ url: '/transactions', method: 'POST', data })
}
@@ -81,7 +71,6 @@ export function updateTransaction(id: number, data: {
category_id?: number
note?: string
date: string
tagIds?: number[]
}) {
return request({ url: `/transactions/${id}`, method: 'PUT', data })
}
@@ -90,16 +79,3 @@ export function updateTransaction(id: number, data: {
export function deleteTransaction(id: number) {
return request({ url: `/transactions/${id}`, method: 'DELETE' })
}
/** 导入交易记录 */
export function importTransactions(data: {
transactions: Array<{
date: string
type: 'expense' | 'income'
category_name: string
amount: number
note?: string
}>
}) {
return request<{ imported: number; skipped: number }>({ url: '/transactions/import', method: 'POST', data })
}

View File

@@ -1,7 +1,7 @@
<template>
<view class="budget-bar-wrap">
<view class="bar-track">
<view class="bar-fill" :class="{ over: rawPercentage > 100 }" :style="{ width: percentage + '%' }"></view>
<view class="bar-fill" :style="{ width: percentage + '%', background: fillColor }"></view>
</view>
<view class="bar-info" v-if="showLabel">
<text class="bar-text" v-if="rawPercentage <= 100">预算 {{ formatAmount(total) }} · 剩余 {{ formatAmount(Math.max(0, total - used)) }}</text>
@@ -27,25 +27,25 @@ const rawPercentage = computed(() => {
})
const percentage = computed(() => Math.min(100, rawPercentage.value))
const fillColor = computed(() => {
if (rawPercentage.value > 100) return '#FF6B6B'
return 'linear-gradient(90deg, #FF8C69, #FFB89A)'
})
</script>
<style lang="scss" scoped>
.bar-track {
height: 16rpx;
border-radius: 8rpx;
background: $border;
background: #F0E0D6;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 8rpx;
background: linear-gradient(90deg, $primary, lighten($primary, 15%));
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
&.over {
background: $danger;
}
transition: width 0.6s ease-out;
}
.bar-info {
@@ -56,20 +56,20 @@ const percentage = computed(() => Math.min(100, rawPercentage.value))
.bar-text {
font-size: 24rpx;
color: $text-sec;
color: #8B7E7E;
}
.bar-pct {
font-family: 'Fredoka', sans-serif;
font-size: 28rpx;
font-weight: 500;
color: $primary;
color: #FF8C69;
&.over { color: $danger; }
&.over { color: #FF6B6B; }
}
.bar-text.over {
color: $danger;
color: #FF6B6B;
font-weight: 500;
}
</style>

View File

@@ -22,7 +22,6 @@ const iconStyle = computed(() => ({
background: props.selected ? '#FFE8E0' : (props.bgColor || (props.color + '15')),
width: (sizeMap[props.size || 'md']) + 'rpx',
height: (sizeMap[props.size || 'md']) + 'rpx',
boxShadow: props.selected ? '0 0 0 4rpx rgba(255, 140, 105, 0.15)' : 'none',
}))
const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
@@ -43,7 +42,6 @@ const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
}
.selected {
border-color: $primary;
transform: scale(1.05);
border-color: #FF8C69;
}
</style>

View File

@@ -1,144 +0,0 @@
<template>
<view class="drag-sort-list">
<movable-area class="drag-area">
<movable-view
v-for="(item, index) in list"
:key="itemKey ? item[itemKey] : index"
class="drag-item"
:class="{ dragging: dragIndex === index }"
direction="vertical"
:y="positions[index] || 0"
:damping="40"
:disabled="disabled"
@touchstart="onDragStart(index)"
@change="onChange(index, $event)"
@touchend="onDragEnd(index)"
>
<view class="drag-handle" v-if="!disabled">
<Icon name="dragHandle" :size="28" color="#BFB3B3" />
</view>
<slot name="item" :item="item" :index="index">
<text class="drag-default-text">{{ item[itemKey] || item }}</text>
</slot>
</movable-view>
</movable-area>
</view>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import Icon from '@/components/Icon/Icon.vue'
const props = withDefaults(defineProps<{
list: any[]
itemKey?: string
disabled?: boolean
itemHeight?: number
}>(), {
disabled: false,
itemHeight: 56
})
const emit = defineEmits<{
(e: 'sort', newOrder: any[]): void
}>()
/** 每个 item 的 y 坐标 */
const positions = ref<number[]>([])
/** 当前正在拖拽的 index */
const dragIndex = ref<number | null>(null)
/** 拖拽起始 y */
let startY = 0
/** 当前排序列表 */
const sortedList = ref<any[]>([])
watch(() => props.list, (newList) => {
sortedList.value = [...newList]
recalcPositions()
}, { immediate: true, deep: true })
function recalcPositions() {
const pos: number[] = []
for (let i = 0; i < sortedList.value.length; i++) {
pos.push(i * props.itemHeight)
}
positions.value = pos
}
function onDragStart(index: number) {
dragIndex.value = index
startY = positions.value[index] || 0
}
function onChange(index: number, e: any) {
if (e.detail.source !== 'touch') return
const newY = e.detail.y
const currentPos = index * props.itemHeight
const delta = newY - currentPos
const swapThreshold = props.itemHeight * 0.5
if (Math.abs(delta) > swapThreshold) {
const direction = delta > 0 ? 1 : -1
const swapIndex = index + direction
if (swapIndex < 0 || swapIndex >= sortedList.value.length) return
// 交换元素
const newList = [...sortedList.value]
const temp = newList[index]
newList[index] = newList[swapIndex]
newList[swapIndex] = temp
sortedList.value = newList
recalcPositions()
emit('sort', newList)
}
}
function onDragEnd(index: number) {
dragIndex.value = null
}
</script>
<style lang="scss" scoped>
.drag-sort-list {
width: 100%;
}
.drag-area {
width: 100%;
height: auto;
min-height: 200rpx;
}
.drag-item {
width: 100%;
display: flex;
align-items: center;
background: $surface;
border-radius: $radius-lg;
border: 2rpx solid $border;
margin-bottom: $space-xs;
transition: box-shadow $transition-normal;
&.dragging {
box-shadow: $shadow-lg;
opacity: 0.9;
z-index: 10;
}
}
.drag-handle {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&:active { opacity: 0.6; }
}
.drag-default-text {
font-size: $font-lg;
color: $text;
flex: 1;
}
</style>

View File

@@ -50,7 +50,6 @@ const iconMap: Record<string, Record<string, string>> = {
},
check: {
'#FFFFFF': '/static/icons/check-white.png',
'#FF8C69': '/static/icons/check-orange.png',
},
trash: {
'#FF8C69': '/static/icons/trash-orange.png',
@@ -72,25 +71,6 @@ const iconMap: Record<string, Record<string, string>> = {
'#8B7E7E': '/static/icons/settings-gray.png',
'#FF8C69': '/static/icons/settings-orange.png',
},
tag: {
'#8B7E7E': '/static/icons/tag-gray.png',
'#FF8C69': '/static/icons/tag-orange.png',
'#BFB3B3': '/static/icons/tag-light.png',
},
archive: {
'#7BC67E': '/static/icons/archive-green.png',
'#BFB3B3': '/static/icons/archive-light.png',
},
download: {
'#5B9BD5': '/static/icons/download-blue.png',
},
upload: {
'#FF8C69': '/static/icons/upload-orange.png',
},
dragHandle: {
'#BFB3B3': '/static/icons/drag-handle-light.png',
'#8B7E7E': '/static/icons/drag-handle-gray.png',
},
}
const iconSrc = computed(() => {

View File

@@ -207,10 +207,10 @@ function onConfirm() {
.key.fn {
background: $primary-light;
border-color: darken($primary-light, 8%);
border-color: #FFD0C0;
&:active {
background: darken($primary-light, 8%);
background: #FFD0C0;
box-shadow: $shadow-clay-pressed;
transform: scale(0.96);
}

View File

@@ -1,22 +1,8 @@
<template>
<view class="save-success" v-if="visible">
<!-- 纸屑粒子 -->
<view class="confetti-container" v-if="animating">
<view
v-for="i in 20"
:key="i"
class="confetti"
:class="`confetti-${i}`"
:style="confettiStyle(i)"
></view>
</view>
<view class="success-content" :class="{ show: animating }">
<view class="success-icon-wrap">
<view class="success-ring"></view>
<view class="success-icon">
<Icon name="check" :size="80" color="#FFFFFF" />
</view>
<view class="success-icon">
<Icon name="check" :size="80" color="#FFFFFF" />
</view>
<text class="success-text">{{ text }}</text>
<view class="success-actions" v-if="showContinue">
@@ -45,33 +31,12 @@ const emit = defineEmits(['update:visible', 'continue', 'back'])
const animating = ref(false)
// 纸屑样式:随机位置、颜色、动画延迟
const confettiColors = ['#FF8C69', '#FFD166', '#7BC67E', '#6C9BCF', '#FF69B4', '#FFB89A']
function confettiStyle(i: number) {
const angle = (i / 20) * 360
const distance = 120 + Math.random() * 200
const color = confettiColors[i % confettiColors.length]
const delay = Math.random() * 0.3
const size = 8 + Math.random() * 12
const isRect = i % 3 === 0
return {
'--tx': `${Math.cos(angle * Math.PI / 180) * distance}rpx`,
'--ty': `${Math.sin(angle * Math.PI / 180) * distance - 100}rpx`,
'--rot': `${Math.random() * 720 - 360}deg`,
background: color,
width: isRect ? `${size}rpx` : `${size * 0.6}rpx`,
height: `${size}rpx`,
borderRadius: isRect ? '2rpx' : '50%',
animationDelay: `${delay}s`,
}
}
watch(() => props.visible, (val) => {
if (val) {
setTimeout(() => { animating.value = true }, 50)
// 如果不显示继续按钮,自动关闭
if (!props.showContinue) {
setTimeout(() => { onBack() }, 2200)
setTimeout(() => { onBack() }, 2000)
}
} else {
animating.value = false
@@ -109,44 +74,13 @@ function onBack() {
z-index: 9999;
}
// 纸屑容器
.confetti-container {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
z-index: 1;
}
.confetti {
position: absolute;
opacity: 0;
animation: confetti-burst 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes confetti-burst {
0% {
transform: translate(0, 0) rotate(0deg) scale(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
opacity: 0;
}
}
.success-content {
display: flex;
flex-direction: column;
align-items: center;
transform: scale(0.8);
opacity: 0;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
&.show {
transform: scale(1);
@@ -154,42 +88,12 @@ function onBack() {
}
}
// 图标外环脉冲
.success-icon-wrap {
position: relative;
@include flex-center;
}
.success-ring {
position: absolute;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
border: 4rpx solid rgba(123, 198, 126, 0.3);
animation: ring-pulse 1s ease-out 0.3s both;
}
@keyframes ring-pulse {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.success-icon {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: linear-gradient(135deg, $success, darken($success, 10%));
background: linear-gradient(135deg, $success, #5BA85E);
@include flex-center;
box-shadow: 0 8rpx 32rpx rgba(123, 198, 126, 0.4);
}
.success-text {
@@ -210,16 +114,15 @@ function onBack() {
border-radius: $radius-xl;
min-width: 200rpx;
@include flex-center;
transition: transform $transition-fast, opacity $transition-fast;
&.continue {
background: $primary;
&:active { opacity: 0.8; transform: scale(0.96); }
&:active { opacity: 0.8; }
}
&.back {
background: rgba(255, 255, 255, 0.2);
&:active { background: rgba(255, 255, 255, 0.3); transform: scale(0.96); }
&:active { background: rgba(255, 255, 255, 0.3); }
}
}
@@ -228,10 +131,4 @@ function onBack() {
font-weight: 600;
color: $surface;
}
@media (prefers-reduced-motion: reduce) {
.confetti { animation: none !important; display: none; }
.success-ring { animation: none !important; display: none; }
.success-content { transition: opacity 0.2s ease; }
}
</style>

View File

@@ -19,7 +19,7 @@ const style = computed(() => ({
<style lang="scss" scoped>
.skeleton {
background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8rpx;

View File

@@ -1,5 +1,5 @@
<template>
<view class="tx-item-wrap" :class="{ 'show-hint': swipeHint && !disableSwipe }">
<view class="tx-item-wrap">
<view
class="tx-item"
:style="{ transform: `translateX(${offsetX}rpx)` }"
@@ -61,9 +61,7 @@ const props = withDefaults(defineProps<{
showCreator?: boolean
/** 当前用户 ID用于判断是否为本人记录 */
currentUserId?: number
/** 是否显示左滑提示动画由父组件控制仅首个可删除项传入true */
swipeHint?: boolean
}>(), { hideDate: false, disableSwipe: false, showCreator: false, currentUserId: 0, swipeHint: false })
}>(), { hideDate: false, disableSwipe: false, showCreator: false, currentUserId: 0 })
/** 是否为他人的记录(群组模式下,非本人的才显示创建者信息) */
const isOtherCreator = computed(() => {
@@ -110,8 +108,6 @@ function onTouchEnd() {
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
.tx-item-wrap {
position: relative;
overflow: hidden;
@@ -125,33 +121,22 @@ function onTouchEnd() {
gap: 24rpx;
border-radius: 20rpx;
transition: transform 0.2s ease;
background: $surface;
background: #FFFFFF;
position: relative;
z-index: 1;
&:active {
background: $surface-warm;
background: #FFF0E6;
}
}
// 左滑提示:仅在 swipeHint=true 且 disableSwipe=false 时播放一次
.show-hint .tx-item {
animation: swipe-hint 0.6s ease 1.5s both;
}
@keyframes swipe-hint {
0% { transform: translateX(0); }
40% { transform: translateX(-40rpx); }
100% { transform: translateX(0); }
}
.delete-btn {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 160rpx;
background: $danger;
background: #FF6B6B;
display: flex;
align-items: center;
justify-content: center;
@@ -184,9 +169,9 @@ function onTouchEnd() {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
background: $primary-light;
background: #FFF0E6;
font-size: 16rpx;
color: $primary;
color: #FF8C69;
align-items: center;
justify-content: center;
flex-shrink: 0;
@@ -200,20 +185,22 @@ function onTouchEnd() {
.name {
font-size: 28rpx;
font-weight: 500;
color: $text;
color: #2D1B1B;
display: block;
@include text-ellipsis;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.meta {
font-size: 24rpx;
color: $text-sec;
color: #8B7E7E;
display: block;
margin-top: 4rpx;
}
.creator-name {
color: $primary;
color: #FF8C69;
font-weight: 500;
}
@@ -224,13 +211,7 @@ function onTouchEnd() {
font-variant-numeric: tabular-nums;
white-space: nowrap;
&.expense { color: $text; }
&.income { color: $success; }
}
@media (prefers-reduced-motion: reduce) {
.show-hint .tx-item {
animation: none;
}
&.expense { color: #2D1B1B; }
&.income { color: #7BC67E; }
}
</style>

View File

@@ -154,29 +154,6 @@
"navigationBarTitleText": "埋点统计",
"enablePullDownRefresh": true
}
},
{
"path": "pages/tag-manage/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "标签管理",
"enablePullDownRefresh": true
}
},
{
"path": "pages/backup-manage/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "数据备份",
"enablePullDownRefresh": true
}
},
{
"path": "pages/data-import/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "数据导入"
}
}
],
"globalStyle": {

View File

@@ -25,6 +25,8 @@
:fixed="true"
size="large"
:auto-focus="true"
@focus="keyboardVisible = true"
@blur="keyboardVisible = false"
@confirm="save"
/>
@@ -53,21 +55,14 @@
<Icon name="edit" :size="28" color="#8B7E7E" />
<input class="extra-input" v-model="note" placeholder="添加备注..." placeholder-class="placeholder" maxlength="200" @focus="blurAmountEditor" />
</view>
<view class="extra-row" @tap="openTagPicker">
<Icon name="tag" :size="28" color="#8B7E7E" />
<view class="tag-display">
<text class="extra-text" v-if="selectedTagIds.length === 0">选择标签选填</text>
<view class="tag-chips" v-else>
<view v-for="tId in selectedTagIds" :key="tId" class="tag-chip" :style="{ background: (getTagById(tId)?.color || '#FF8C69') + '20', color: getTagById(tId)?.color || '#FF8C69' }">
<text class="tag-chip-text">{{ getTagById(tId)?.name || '' }}</text>
</view>
</view>
</view>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
</view>
<!-- 底部保存按钮键盘收起时显示 -->
<view class="save-bar" v-if="!showSuccess && !keyboardVisible">
<view class="save-btn" @tap="save">
<text class="save-btn-text">{{ editId ? '保存修改' : '保存' }}</text>
</view>
</view>
<SaveSuccess
v-model:visible="showSuccess"
@@ -76,33 +71,6 @@
@continue="onContinue"
@back="onBack"
/>
<!-- 标签选择弹窗 -->
<view class="modal-mask" v-if="showTagPicker" @tap="showTagPicker = false">
<view class="tag-modal" @tap.stop>
<text class="tag-modal-title">选择标签</text>
<text class="tag-modal-hint">最多选择 5 个标签</text>
<scroll-view class="tag-modal-list" scroll-y>
<view
v-for="tag in tagStore.tags"
:key="tag.id"
class="tag-option"
:class="{ selected: selectedTagIds.includes(tag.id) }"
@tap="toggleTag(tag.id)"
>
<view class="tag-option-dot" :style="{ background: tag.color }"></view>
<text class="tag-option-name">{{ tag.name }}</text>
<Icon v-if="selectedTagIds.includes(tag.id)" name="check" :size="24" color="#FF8C69" />
</view>
<view class="tag-empty" v-if="tagStore.tags.length === 0">
<text class="tag-empty-text">暂无标签可在"我的-标签管理"中添加</text>
</view>
</scroll-view>
<view class="tag-modal-btns">
<view class="tag-modal-btn" @tap="showTagPicker = false">确定</view>
</view>
</view>
</view>
</view>
</template>
@@ -111,7 +79,6 @@ import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useCategoryStore } from '@/stores/category'
import { useTransactionStore } from '@/stores/transaction'
import { useTagStore } from '@/stores/tag'
import { waitForReady } from '@/utils/app-ready'
import { suggestCategory } from '@/api/stats'
import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
@@ -122,14 +89,11 @@ import { statusBarHeight, capsuleRight } from '@/utils/system'
const catStore = useCategoryStore()
const txStore = useTransactionStore()
const tagStore = useTagStore()
const type = ref<'expense' | 'income'>('expense')
const amountStr = ref('0')
const selectedCat = ref<number | null>(null)
const note = ref('')
const selectedTagIds = ref<number[]>([])
const showTagPicker = ref(false)
const suggestedCatId = ref<number | null>(null)
const suggestConfidence = ref(0)
let suggestTimer: ReturnType<typeof setTimeout> | null = null
@@ -142,6 +106,8 @@ const showSuccess = ref(false)
const scrollToCat = ref('')
const todayStr = localToday
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
const keyboardVisible = ref(false)
// Remember last selected category per type
const lastCatByType: Record<string, number | null> = { expense: null, income: null }
@@ -216,13 +182,6 @@ onMounted(async () => {
}
}
// 加载标签列表
try {
await tagStore.fetchTags()
} catch {
// 标签加载失败不影响主流程
}
const pages = getCurrentPages()
const page = pages[pages.length - 1] as { options?: Record<string, string> }
if (page?.options?.type && ['expense', 'income'].includes(page.options.type)) {
@@ -242,7 +201,6 @@ onMounted(async () => {
lastCatByType[existing.type] = existing.category_id
note.value = existing.note || ''
selectedDate.value = existing.date.slice(0, 10)
selectedTagIds.value = existing.tags?.map(t => t.id) || []
// 等待分类列表渲染完成后滚动到选中项
nextTick(() => {
setTimeout(() => { scrollToCat.value = 'cat-' + existing.category_id }, 200)
@@ -262,10 +220,7 @@ onMounted(async () => {
// 返回页面时刷新分类(可能新增了分类)
const initialLoaded = ref(false)
onShow(() => {
if (initialLoaded.value) {
catStore.fetchCategories()
tagStore.fetchTags()
}
if (initialLoaded.value) catStore.fetchCategories()
})
function onDateChange(e: any) {
@@ -295,8 +250,7 @@ async function save() {
type: type.value,
category_id: selectedCat.value,
note: note.value,
date: selectedDate.value,
...(selectedTagIds.value.length > 0 ? { tagIds: selectedTagIds.value } : {})
date: selectedDate.value
}
if (editId.value) {
await txStore.updateTransaction(editId.value, data)
@@ -320,7 +274,6 @@ function onContinue() {
// 重置表单,保留分类和日期
amountStr.value = ''
note.value = ''
selectedTagIds.value = []
showSuccess.value = false
nextTick(() => amountEditorRef.value?.focus())
}
@@ -330,28 +283,6 @@ function onBack() {
uni.navigateBack()
}
function openTagPicker() {
blurAmountEditor()
showTagPicker.value = true
}
function toggleTag(tagId: number) {
const idx = selectedTagIds.value.indexOf(tagId)
if (idx >= 0) {
selectedTagIds.value = selectedTagIds.value.filter(id => id !== tagId)
} else {
if (selectedTagIds.value.length >= 5) {
uni.showToast({ title: '最多选择 5 个标签', icon: 'none' })
return
}
selectedTagIds.value = [...selectedTagIds.value, tagId]
}
}
function getTagById(id: number) {
return tagStore.getById(id)
}
function goBack() {
// 保存成功后直接返回,不弹确认框
if (showSuccess.value) return
@@ -379,9 +310,46 @@ function goBack() {
display: flex;
flex-direction: column;
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
// 同时留出保存按钮的位置,确保内容不被遮挡
$numpad-h: 464rpx;
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
$save-bar-h: 144rpx;
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom));
}
// 底部保存按钮栏
.save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $space-md $space-xl;
padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom));
background: $surface;
border-top: 2rpx solid $border;
z-index: 50;
}
.save-btn {
height: 96rpx;
background: linear-gradient(135deg, $primary, #E67355);
border-radius: $radius-xl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3);
&:active {
opacity: 0.8;
transform: scale(0.98);
}
}
.save-btn-text {
font-size: $font-xl;
font-weight: 600;
color: $surface;
}
.header-fixed {
@@ -406,11 +374,7 @@ function goBack() {
.title { font-size: $font-xl; font-weight: 500; color: $text; }
.type-toggle-wrap {
display: flex; justify-content: center;
margin: $space-sm 0;
@include fade-in-up;
}
.type-toggle-wrap { display: flex; justify-content: center; margin: $space-sm 0; }
.type-toggle {
display: inline-flex;
@@ -445,7 +409,7 @@ function goBack() {
background: $surface;
border-radius: $radius-lg;
box-shadow: $shadow-sm;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform $transition-normal;
}
.income .slider { transform: translateX(160rpx); }
@@ -469,9 +433,8 @@ function goBack() {
gap: 6rpx;
padding: 12rpx 0;
position: relative;
-webkit-tap-highlight-color: transparent;
&:active { transform: scale(0.92); }
&:active { transform: scale(0.95); }
&.suggested {
.cat-icon-wrap {
@@ -479,16 +442,10 @@ function goBack() {
border-radius: $radius-lg;
padding: 6rpx;
margin: -6rpx;
animation: suggest-pulse 2s ease-in-out infinite;
}
}
}
@keyframes suggest-pulse {
0%, 100% { border-color: $primary; }
50% { border-color: lighten($primary, 30%); }
}
.cat-icon-wrap {
position: relative;
transition: all $transition-normal;
@@ -539,99 +496,6 @@ function goBack() {
.placeholder { color: $text-muted; }
.tag-display {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.tag-chips {
display: flex;
flex-wrap: wrap;
gap: 8rpx;
}
.tag-chip {
padding: 4rpx 16rpx;
border-radius: $radius-xs;
}
.tag-chip-text {
font-size: $font-sm;
font-weight: 500;
}
/* 标签选择弹窗 */
.modal-mask {
@include modal-mask;
}
.tag-modal {
@include bottom-modal;
padding-bottom: calc($space-xl + env(safe-area-inset-bottom));
}
.tag-modal-title {
@include modal-title;
text-align: left;
padding: $space-lg $space-xl $space-xs;
}
.tag-modal-hint {
font-size: $font-sm;
color: $text-muted;
padding: 0 $space-xl $space-md;
}
.tag-modal-list {
max-height: 500rpx;
padding: 0 $space-xl;
}
.tag-option {
display: flex;
align-items: center;
gap: $space-sm;
padding: $space-md 0;
border-bottom: 1rpx solid $border;
&:last-child { border-bottom: none; }
&:active { background: $surface-warm; }
}
.tag-option-dot {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
flex-shrink: 0;
}
.tag-option-name {
flex: 1;
font-size: $font-lg;
color: $text;
}
.tag-empty {
padding: $space-2xl 0;
text-align: center;
}
.tag-empty-text {
font-size: $font-md;
color: $text-muted;
}
.tag-modal-btns {
padding: $space-md $space-xl;
border-top: 2rpx solid $border;
}
.tag-modal-btn {
@include btn-primary;
width: 100%;
}
</style>

View File

@@ -59,29 +59,6 @@
</view>
</view>
<!-- 健康状态 -->
<view class="health-card" v-if="health">
<view class="health-header">
<text class="health-title">系统状态</text>
<view class="health-badge" :class="health.status">
<view class="health-dot"></view>
<text class="health-badge-text">{{ health.status === 'ok' ? '正常' : health.status === 'degraded' ? '降级' : '异常' }}</text>
</view>
</view>
<view class="detail-row">
<text class="detail-label">数据库</text>
<text class="detail-value" :class="health.db === 'connected' ? 'income' : 'expense'">{{ health.db === 'connected' ? '已连接' : '断开' }}</text>
</view>
<view class="detail-row">
<text class="detail-label">运行时间</text>
<text class="detail-value">{{ formatUptime(health.uptime) }}</text>
</view>
<view class="detail-row">
<text class="detail-label">版本</text>
<text class="detail-value">{{ health.version }}</text>
</view>
</view>
<!-- 功能入口 -->
<view class="section-title">管理功能</view>
<view class="entry-list">
@@ -126,15 +103,12 @@ import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { waitForReady } from '@/utils/app-ready'
import { statusBarHeight } from '@/utils/system'
import { getDashboard } from '@/api/admin'
import { getHealth } from '@/api/health'
import type { HealthStatus } from '@/api/health'
import { formatAmount } from '@/utils/format'
import Icon from '@/components/Icon/Icon.vue'
import type { Dashboard } from '@/api/admin'
const loading = ref(true)
const dashboard = ref<Dashboard | null>(null)
const health = ref<HealthStatus | null>(null)
onMounted(async () => {
await waitForReady()
@@ -146,20 +120,12 @@ onMounted(async () => {
} finally {
loading.value = false
}
// 加载健康状态(不阻塞页面)
try {
health.value = await getHealth()
} catch {
// 健康检查失败不影响主流程
}
})
// 静默刷新
async function refreshDashboard() {
try {
dashboard.value = await getDashboard()
health.value = await getHealth()
} catch {}
}
@@ -180,16 +146,6 @@ function goFeedbackManage() { uni.navigateTo({ url: '/pages/admin/feedback' }) }
function goConfig() { uni.navigateTo({ url: '/pages/admin/config' }) }
function goLogs() { uni.navigateTo({ url: '/pages/admin/logs' }) }
function goTrack() { uni.navigateTo({ url: '/pages/admin/track' }) }
function formatUptime(seconds: number): string {
if (!seconds) return '-'
const days = Math.floor(seconds / 86400)
const hours = Math.floor((seconds % 86400) / 3600)
const mins = Math.floor((seconds % 3600) / 60)
if (days > 0) return `${days}${hours}小时`
if (hours > 0) return `${hours}小时${mins}`
return `${mins}分钟`
}
</script>
<style lang="scss" scoped>
@@ -343,58 +299,4 @@ function formatUptime(seconds: number): string {
font-weight: 500;
color: $text;
}
/* 健康状态卡片 */
.health-card {
background: $surface;
border-radius: $radius-xl;
padding: $space-lg;
border: 2rpx solid $border;
box-shadow: $shadow-md;
margin-bottom: $space-lg;
}
.health-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $space-md;
}
.health-title {
font-size: $font-lg;
font-weight: 600;
color: $text;
}
.health-badge {
display: flex;
align-items: center;
gap: $space-xs;
padding: 4rpx 16rpx;
border-radius: $radius-lg;
&.ok { background: rgba(123, 198, 126, 0.1); }
&.degraded { background: rgba(255, 215, 0, 0.1); }
&.error { background: rgba(255, 107, 107, 0.1); }
}
.health-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
.ok & { background: $success; }
.degraded & { background: #FFD700; }
.error & { background: $danger; }
}
.health-badge-text {
font-size: $font-sm;
font-weight: 500;
.ok & { color: $success; }
.degraded & { color: #CC9900; }
.error & { color: $danger; }
}
</style>

View File

@@ -1,301 +0,0 @@
<template>
<view class="page">
<view class="header-fixed">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="nav-bar">
<view class="nav-back" @tap="goBack">
<Icon name="arrowLeft" :size="36" color="#2D1B1B" />
</view>
<text class="nav-title">数据备份</text>
<view class="nav-placeholder"></view>
</view>
</view>
<view class="action-bar">
<view class="create-btn" :class="{ disabled: creating }" @tap="onCreate">
<Icon name="plus" :size="28" color="#FFFFFF" />
<text class="create-text">{{ creating ? '创建中...' : '创建备份' }}</text>
</view>
</view>
<view class="backup-list" v-if="backups.length > 0">
<view v-for="item in backups" :key="item.id" class="backup-item">
<view class="bk-info">
<view class="bk-name-row">
<Icon name="archive" :size="28" :color="item.status === 'completed' ? '#7BC67E' : '#BFB3B3'" />
<text class="bk-name">{{ item.name }}</text>
</view>
<text class="bk-meta">{{ formatDate(item.created_at) }} · {{ formatSize(item.size) }}</text>
<text class="bk-status" :class="item.status">
{{ item.status === 'completed' ? '已完成' : item.status === 'pending' ? '处理中' : '失败' }}
</text>
</view>
<view class="bk-actions" v-if="item.status === 'completed'">
<view class="bk-btn download" @tap="onDownload(item)">
<Icon name="download" :size="24" color="#5B9BD5" />
</view>
<view class="bk-btn delete" @tap="onDelete(item)">
<Icon name="trash" :size="24" color="#FF6B6B" />
</view>
</view>
</view>
</view>
<view class="empty" v-else-if="!loading">
<Icon name="archive" :size="48" color="#BFB3B3" />
<text class="empty-text">暂无备份记录</text>
</view>
<view class="loading-box" v-if="loading">
<text class="loading-text">加载中...</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { getBackups, createBackup, deleteBackup } from '@/api/backup'
import type { Backup } from '@/api/backup'
import { waitForReady } from '@/utils/app-ready'
import { statusBarHeight } from '@/utils/system'
import Icon from '@/components/Icon/Icon.vue'
const backups = ref<Backup[]>([])
const loading = ref(true)
const creating = ref(false)
const initialLoaded = ref(false)
onMounted(async () => {
await waitForReady()
await loadBackups()
initialLoaded.value = true
})
onShow(() => {
if (initialLoaded.value) loadBackups(true)
})
onPullDownRefresh(async () => {
await loadBackups(true)
uni.stopPullDownRefresh()
})
async function loadBackups(silent = false) {
if (!silent) loading.value = true
try {
const data = await getBackups({ page: 1, pageSize: 50 })
backups.value = data.list || []
} catch {
backups.value = []
} finally {
loading.value = false
}
}
async function onCreate() {
if (creating.value) return
creating.value = true
try {
await createBackup()
uni.showToast({ title: '备份创建成功', icon: 'success' })
await loadBackups()
} catch {
uni.showToast({ title: '创建失败', icon: 'none' })
} finally {
creating.value = false
}
}
function onDownload(item: Backup) {
if (!item.downloadToken) {
uni.showToast({ title: '下载链接无效', icon: 'none' })
return
}
// 在新窗口打开下载链接H5
// #ifdef H5
const apiBase = '/api'
const url = `${apiBase}/backup/${item.id}/download?token=${encodeURIComponent(item.downloadToken)}`
window.open(url, '_blank')
// #endif
// #ifdef MP-WEIXIN
uni.downloadFile({
url: `https://xiaocai.j35.site/api/backup/${item.id}/download?token=${encodeURIComponent(item.downloadToken)}`,
success: (res) => {
if (res.statusCode === 200) {
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true,
fail: () => uni.showToast({ title: '打开失败', icon: 'none' })
})
}
},
fail: () => uni.showToast({ title: '下载失败', icon: 'none' })
})
// #endif
}
async function onDelete(item: Backup) {
uni.showModal({
title: '删除备份',
content: `确定删除备份「${item.name}」?`,
success: async (res) => {
if (res.confirm) {
try {
await deleteBackup(item.id)
backups.value = backups.value.filter(b => b.id !== item.id)
uni.showToast({ title: '已删除', icon: 'success' })
} catch {
uni.showToast({ title: '删除失败', icon: 'none' })
}
}
}
})
}
function goBack() {
uni.navigateBack()
}
function formatDate(dateStr: string): string {
if (!dateStr) return ''
const d = new Date(dateStr)
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
}
function formatSize(bytes: number): string {
if (!bytes || bytes === 0) return '0 B'
const units = ['B', 'KB', 'MB', 'GB']
let i = 0
let size = bytes
while (size >= 1024 && i < units.length - 1) {
size /= 1024
i++
}
return `${size.toFixed(1)} ${units[i]}`
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
.page {
@include page-base;
}
.header-fixed { @include sticky-header; }
.status-bar { @include status-bar; }
.nav-bar {
display: flex;
align-items: center;
padding: $space-sm $space-lg;
}
.nav-back {
@include nav-back;
border-radius: 50%;
&:active { background: $border; }
}
.nav-title {
flex: 1;
text-align: center;
font-size: $font-2xl;
font-weight: 600;
color: $text;
}
.nav-placeholder { width: 72rpx; }
.action-bar {
padding: $space-lg $space-xl;
}
.create-btn {
@include btn-primary;
gap: $space-sm;
width: 100%;
&.disabled { opacity: 0.5; pointer-events: none; }
}
.create-text { @include btn-primary-text; }
.backup-list { padding: 0 $space-xl; }
.backup-item {
@include card($radius-xl);
padding: $space-lg;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $space-sm;
}
.bk-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.bk-name-row {
display: flex;
align-items: center;
gap: $space-xs;
}
.bk-name {
font-size: $font-lg;
font-weight: 500;
color: $text;
}
.bk-meta {
font-size: $font-sm;
color: $text-muted;
}
.bk-status {
font-size: $font-xs;
padding: 2rpx 12rpx;
border-radius: $radius-xs;
width: fit-content;
&.completed { color: $success; background: rgba(123, 198, 126, 0.1); }
&.pending { color: $primary; background: $primary-light; }
&.failed { color: $danger; background: rgba(255, 107, 107, 0.1); }
}
.bk-actions {
display: flex;
gap: $space-xs;
}
.bk-btn {
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: $bg;
&:active { background: $border; }
}
.empty {
@include state-box;
padding: 120rpx 0;
}
.empty-text { @include state-text; }
.loading-box {
@include flex-center;
padding: 120rpx 0;
}
.loading-text { font-size: $font-lg; color: $text-muted; }
</style>

View File

@@ -17,25 +17,6 @@
</view>
</view>
<!-- 标签筛选条 -->
<scroll-view class="tag-filter-scroll" scroll-x v-if="tagStore.tags.length > 0">
<view class="tag-filter-row">
<view class="tag-filter-chip" :class="{ active: filterTagId === null }" @tap="filterTagId = null; loadTx(true)">
<text class="tag-filter-text">全部标签</text>
</view>
<view
v-for="tag in tagStore.tags"
:key="tag.id"
class="tag-filter-chip"
:class="{ active: filterTagId === tag.id }"
@tap="filterTagId = tag.id; loadTx(true)"
>
<view class="tag-filter-dot" :style="{ background: tag.color }"></view>
<text class="tag-filter-text">{{ tag.name }}</text>
</view>
</view>
</scroll-view>
<!-- 筛选结果统计 -->
<view class="filter-stats" v-if="hasAdvancedFilter && !loading">
<text class="filter-stats-text"> {{ total }} </text>
@@ -62,8 +43,6 @@
:hideDate="true"
:showCreator="groupStore.isGroupMode"
:currentUserId="userStore.userInfo?.id"
:disableSwipe="groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id"
:swipeHint="!swipeHintDismissed && isFirstDeletable(item)"
@item-tap="onEdit(item)"
@delete="onDelete(item)"
/>
@@ -112,7 +91,6 @@ import { ref, computed, onMounted } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { useGroupStore } from '@/stores/group'
import { useTagStore } from '@/stores/tag'
import { waitForReady } from '@/utils/app-ready'
import { getTransactions, deleteTransaction } from '@/api/transaction'
import TransactionItem from '@/components/TransactionItem/TransactionItem.vue'
@@ -126,10 +104,8 @@ import type { FilterParams } from '@/api/filter'
const userStore = useUserStore()
const groupStore = useGroupStore()
const tagStore = useTagStore()
const loading = ref(false)
const filterType = ref('all')
const filterTagId = ref<number | null>(null)
const page = ref(1)
const pageSize = 20
const txList = ref<Transaction[]>([])
@@ -137,35 +113,6 @@ const total = ref(0)
const loadError = ref(false)
let loadSeq = 0 // 请求序号,防止并发覆盖
// 左滑提示:只对首个可删除项显示一次,用户看过后不再重复
const swipeHintDismissed = ref(false)
const HINT_KEY = 'xiaocai_swipe_hint_shown'
function isFirstDeletable(item: Transaction): boolean {
if (swipeHintDismissed.value) return false
// 群组模式下只有自己的记录可删除
if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) return false
// 找到第一个可删除的项
for (const group of groupedTx.value) {
for (const tx of group.items) {
if (groupStore.isGroupMode && tx.user_id !== userStore.userInfo?.id) continue
return tx.id === item.id
}
}
return false
}
// 动画播完后标记已显示
try {
if (uni.getStorageSync(HINT_KEY)) {
swipeHintDismissed.value = true
}
} catch {}
setTimeout(() => {
swipeHintDismissed.value = true
try { uni.setStorageSync(HINT_KEY, '1') } catch {}
}, 3000)
// 高级筛选
const showFilter = ref(false)
const advancedFilters = ref<FilterParams>({})
@@ -198,7 +145,6 @@ const initialLoaded = ref(false)
onMounted(async () => {
await waitForReady()
tagStore.fetchTags().catch(() => {})
loadTx(true).finally(() => { initialLoaded.value = true })
})
@@ -228,7 +174,6 @@ async function loadTx(reset = false, silent = false) {
if (af.minAmount) params.minAmount = af.minAmount
if (af.maxAmount) params.maxAmount = af.maxAmount
if (af.keyword) params.keyword = af.keyword
if (filterTagId.value) params.tagId = filterTagId.value
try {
loading.value = true
loadError.value = false
@@ -434,51 +379,4 @@ onPullDownRefresh(() => {
.state-text {
@include state-text;
}
/* 标签筛选条 */
.tag-filter-scroll {
white-space: nowrap;
padding: 0 $space-xl $space-sm;
}
.tag-filter-row {
display: inline-flex;
gap: $space-xs;
}
.tag-filter-chip {
display: inline-flex;
align-items: center;
gap: 8rpx;
padding: $space-xs $space-md;
background: $surface;
border-radius: $radius-lg;
border: 2rpx solid $border;
flex-shrink: 0;
transition: all $transition-normal;
&.active {
background: $primary-light;
border-color: $primary;
}
&:active { opacity: 0.7; }
}
.tag-filter-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
flex-shrink: 0;
}
.tag-filter-text {
font-size: $font-sm;
color: $text-sec;
.active & {
color: $primary;
font-weight: 500;
}
}
</style>

View File

@@ -67,9 +67,18 @@
size="large"
unit="元"
:auto-focus="false"
@focus="keyboardVisible = true"
@blur="keyboardVisible = false"
@confirm="onConfirm"
/>
</view>
<!-- 底部保存按钮键盘收起时显示 -->
<view class="save-bar" v-if="!keyboardVisible">
<view class="save-btn" @tap="onConfirm">
<text class="save-btn-text">保存预算</text>
</view>
</view>
</view>
</template>
@@ -98,6 +107,7 @@ const loading = ref(true)
const initialLoaded = ref(false)
const amountStr = ref('')
const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
const keyboardVisible = ref(false)
const presets = [1000, 2000, 3000, 5000, 10000]
@@ -197,10 +207,11 @@ function goBack() {
.page {
min-height: 100vh;
background: $bg;
// AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx
// AmountEditor fixed Numpad 占位 + 保存按钮占位
$numpad-h: 464rpx;
padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom));
$save-bar-h: 144rpx;
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom));
}
.header-fixed {
@@ -372,6 +383,40 @@ function goBack() {
color: $text;
}
// 底部保存按钮栏
.save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $space-md $space-xl;
padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom));
background: $surface;
border-top: 2rpx solid $border;
z-index: 50;
}
.save-btn {
height: 96rpx;
background: linear-gradient(135deg, $primary, #E67355);
border-radius: $radius-xl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3);
&:active {
opacity: 0.8;
transform: scale(0.98);
}
}
.save-btn-text {
font-size: $font-xl;
font-weight: 600;
color: $surface;
}
@media (prefers-reduced-motion: reduce) {

View File

@@ -19,10 +19,7 @@
</view>
<view class="cat-list">
<view v-for="cat in currentCategories" :key="cat.id" class="cat-row" :data-id="cat.id">
<view class="cat-drag-handle" @touchstart="onDragStart" @touchmove="onDragMove" @touchend="onDragEnd" v-if="tabType === 'expense' || tabType === 'income'">
<Icon name="dragHandle" :size="24" color="#BFB3B3" />
</view>
<view v-for="cat in currentCategories" :key="cat.id" class="cat-row">
<view class="cat-info" @tap="cat.is_custom && onEdit(cat)">
<CategoryIcon :label="cat.name[0]" :color="cat.color" :bg-color="cat.color + '15'" size="sm" />
<text class="cat-name">{{ cat.name }}</text>
@@ -129,11 +126,6 @@ const newName = ref('')
const colorOptions = ['#FF8C69', '#7BC67E', '#5B9BD5', '#FFD700', '#FF69B4', '#8B5CF6', '#F97316', '#06B6D4']
const selectedColor = ref(colorOptions[0])
// 拖拽排序相关
let dragStartY = 0
let dragCurrentIndex = -1
let dragItemEl: any = null
// 编辑相关
const showEditModal = ref(false)
const editingCat = ref<Category | null>(null)
@@ -278,52 +270,6 @@ async function onMigrateConfirm() {
uni.showToast({ title: '操作失败', icon: 'none' })
}
}
/** 拖拽排序:开始 */
function onDragStart(e: any) {
dragStartY = e.touches[0].clientY
dragItemEl = e.currentTarget?.parentElement
if (dragItemEl) {
const id = Number(dragItemEl.dataset?.id)
const idx = currentCategories.value.findIndex(c => c.id === id)
dragCurrentIndex = idx
dragItemEl.style?.opacity && (dragItemEl.style.opacity = '0.6')
}
}
/** 拖拽排序:移动 */
function onDragMove(e: any) {
// 视觉反馈由 CSS transition 处理,这里仅用于阻止页面滚动
}
/** 拖拽排序:结束 */
function onDragEnd(e: any) {
if (dragItemEl) {
dragItemEl.style?.opacity && (dragItemEl.style.opacity = '1')
}
const endY = e.changedTouches[0].clientY
const delta = endY - dragStartY
const threshold = 50
if (Math.abs(delta) > threshold && dragCurrentIndex >= 0) {
const direction = delta > 0 ? 1 : -1
const newIndex = dragCurrentIndex + direction
const cats = [...currentCategories.value]
if (newIndex >= 0 && newIndex < cats.length) {
// 交换位置
const temp = cats[dragCurrentIndex]
cats[dragCurrentIndex] = cats[newIndex]
cats[newIndex] = temp
// 保存排序
const sortedIds = cats.map(c => c.id)
catStore.sortCategories(sortedIds).catch(() => {})
}
}
dragCurrentIndex = -1
dragItemEl = null
}
</script>
<style lang="scss" scoped>
@@ -391,16 +337,6 @@ function onDragEnd(e: any) {
&:last-child { border-bottom: none; }
}
.cat-drag-handle {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&:active { opacity: 0.6; }
}
.cat-info {
display: flex;
align-items: center;

View File

@@ -1,343 +0,0 @@
<template>
<view class="page">
<view class="header-fixed">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="nav-bar">
<view class="nav-back" @tap="goBack">
<Icon name="arrowLeft" :size="36" color="#2D1B1B" />
</view>
<text class="nav-title">数据导入</text>
<view class="nav-placeholder"></view>
</view>
</view>
<view class="content">
<view class="section">
<text class="section-title">选择文件</text>
<text class="section-desc">支持 CSVJSON 格式文件需小于 5MB</text>
<view class="file-picker" @tap="onPickFile">
<Icon name="upload" :size="48" color="#FF8C69" />
<text class="file-picker-text">{{ fileName || '点击选择文件' }}</text>
</view>
</view>
<view class="section" v-if="fileName">
<text class="section-title">文件预览</text>
<text class="preview-info">格式{{ fileFormat?.toUpperCase() }} · 大小{{ fileSize }}</text>
<text class="preview-info">识别到 {{ parsedCount }} 条记录</text>
</view>
<view class="section" v-if="importResult">
<text class="section-title">导入结果</text>
<view class="result-card">
<view class="result-row">
<text class="result-label">成功导入</text>
<text class="result-value success">{{ importResult.imported }} </text>
</view>
<view class="result-row">
<text class="result-label">跳过</text>
<text class="result-value warn">{{ importResult.skipped }} </text>
</view>
</view>
</view>
<view class="action-area" v-if="fileName && !importResult">
<view class="import-btn" :class="{ disabled: importing || parsedCount === 0 }" @tap="onImport">
<text class="import-text">{{ importing ? '导入中...' : '开始导入' }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { statusBarHeight } from '@/utils/system'
import { importTransactions } from '@/api/transaction'
import Icon from '@/components/Icon/Icon.vue'
const fileName = ref('')
const fileSize = ref('')
const fileFormat = ref<'csv' | 'json' | null>(null)
const parsedCount = ref(0)
const parsedData = ref<Array<{
date: string
type: 'expense' | 'income'
category_name: string
amount: number
note?: string
}>>([])
const importing = ref(false)
const importResult = ref<{ imported: number; skipped: number } | null>(null)
function goBack() {
uni.navigateBack()
}
function onPickFile() {
// #ifdef H5
const input = document.createElement('input')
input.type = 'file'
input.accept = '.csv,.json'
input.onchange = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file) return
handleFile(file)
}
input.click()
// #endif
// #ifdef MP-WEIXIN
uni.chooseMessageFile({
count: 1,
type: 'file',
extension: ['.csv', '.json'],
success: (res) => {
const file = res.tempFiles[0]
fileName.value = file.name
fileSize.value = formatFileSize(file.size)
fileFormat.value = file.name.endsWith('.json') ? 'json' : 'csv'
// 读取文件内容
const fs = uni.getFileSystemManager()
try {
const content = fs.readFileSync(file.path, 'utf-8') as string
parseContent(content, fileFormat.value!)
} catch {
uni.showToast({ title: '文件读取失败', icon: 'none' })
}
}
})
// #endif
}
function handleFile(file: File) {
fileName.value = file.name
fileSize.value = formatFileSize(file.size)
fileFormat.value = file.name.endsWith('.json') ? 'json' : 'csv'
// 检查大小
if (file.size > 5 * 1024 * 1024) {
uni.showToast({ title: '文件不能超过 5MB', icon: 'none' })
return
}
const reader = new FileReader()
reader.onload = (e) => {
const content = e.target?.result as string
parseContent(content, fileFormat.value!)
}
reader.readAsText(file, 'utf-8')
}
function parseContent(content: string, format: 'csv' | 'json') {
try {
importResult.value = null
if (format === 'json') {
const items = JSON.parse(content)
if (!Array.isArray(items)) {
uni.showToast({ title: 'JSON 需为数组格式', icon: 'none' })
return
}
parsedData.value = items.map((item: any) => ({
date: item.date || item.日期 || '',
type: (item.type === '收入' || item.type === 'income') ? 'income' as const : 'expense' as const,
category_name: item.category || item.category_name || item.分类 || '未分类',
amount: Math.round((Number(item.amount || item.金额 || 0)) * 100),
note: item.note || item.备注 || ''
})).filter((item: any) => item.date && item.amount > 0)
} else {
// CSV 解析
const lines = content.replace(/^\uFEFF/, '').split('\n').filter(line => line.trim())
if (lines.length < 2) {
uni.showToast({ title: 'CSV 文件为空', icon: 'none' })
return
}
// 跳过表头
parsedData.value = lines.slice(1).map(line => {
const parts = parseCsvLine(line)
return {
date: (parts[0] || '').trim(),
type: (parts[1] || '').includes('收入') ? 'income' as const : 'expense' as const,
category_name: (parts[2] || '未分类').trim(),
amount: Math.round(parseFloat((parts[3] || '0').replace(/,/g, '')) * 100),
note: (parts[4] || '').trim()
}
}).filter(item => item.date && item.amount > 0)
}
parsedCount.value = parsedData.value.length
} catch {
uni.showToast({ title: '文件解析失败', icon: 'none' })
parsedData.value = []
parsedCount.value = 0
}
}
function parseCsvLine(line: string): string[] {
const result: string[] = []
let current = ''
let inQuotes = false
for (let i = 0; i < line.length; i++) {
const char = line[i]
if (char === '"') {
if (inQuotes && line[i + 1] === '"') {
current += '"'
i++
} else {
inQuotes = !inQuotes
}
} else if (char === ',' && !inQuotes) {
result.push(current)
current = ''
} else {
current += char
}
}
result.push(current)
return result
}
async function onImport() {
if (importing.value || parsedCount.value === 0) return
importing.value = true
try {
const result = await importTransactions({ transactions: parsedData.value })
importResult.value = result
uni.showToast({ title: '导入完成', icon: 'success' })
} catch (e: any) {
uni.showToast({ title: e.message || '导入失败', icon: 'none' })
} finally {
importing.value = false
}
}
function formatFileSize(bytes: number): string {
if (bytes === 0) return '0 B'
const units = ['B', 'KB', 'MB', 'GB']
let i = 0
let size = bytes
while (size >= 1024 && i < units.length - 1) {
size /= 1024
i++
}
return `${size.toFixed(1)} ${units[i]}`
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
.page {
@include page-base;
}
.header-fixed { @include sticky-header; }
.status-bar { @include status-bar; }
.nav-bar {
display: flex;
align-items: center;
padding: $space-sm $space-lg;
}
.nav-back {
@include nav-back;
border-radius: 50%;
&:active { background: $border; }
}
.nav-title {
flex: 1;
text-align: center;
font-size: $font-2xl;
font-weight: 600;
color: $text;
}
.nav-placeholder { width: 72rpx; }
.content {
padding: $space-xl;
}
.section {
margin-bottom: $space-2xl;
}
.section-title {
font-size: $font-lg;
font-weight: 600;
color: $text;
display: block;
margin-bottom: $space-xs;
}
.section-desc {
font-size: $font-md;
color: $text-muted;
display: block;
margin-bottom: $space-md;
}
.file-picker {
@include card($radius-2xl);
padding: $space-2xl;
display: flex;
flex-direction: column;
align-items: center;
gap: $space-md;
&:active { background: $surface-warm; }
}
.file-picker-text {
font-size: $font-lg;
color: $text-sec;
}
.preview-info {
font-size: $font-md;
color: $text-sec;
display: block;
margin-bottom: $space-xs;
}
.result-card {
@include card($radius-xl);
padding: $space-lg;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: $space-sm 0;
border-bottom: 2rpx solid $border;
&:last-child { border-bottom: none; }
}
.result-label { font-size: $font-lg; color: $text-sec; }
.result-value {
font-size: $font-lg;
font-weight: 600;
&.success { color: $success; }
&.warn { color: $primary; }
}
.action-area {
padding-top: $space-md;
}
.import-btn {
@include btn-primary;
width: 100%;
&.disabled { opacity: 0.5; pointer-events: none; }
}
.import-text { @include btn-primary-text; }
</style>

View File

@@ -11,15 +11,7 @@
</view>
</view>
<view class="tabs-wrap">
<view class="tabs">
<view class="tab" :class="{ active: currentTab === 'submit' }" @tap="currentTab = 'submit'">提交反馈</view>
<view class="tab" :class="{ active: currentTab === 'mine' }" @tap="currentTab = 'mine'">我的反馈</view>
</view>
</view>
<!-- 提交反馈 Tab -->
<view class="content" v-if="currentTab === 'submit'">
<view class="content">
<!-- 反馈类型 -->
<view class="section">
<text class="label">反馈类型</text>
@@ -67,45 +59,13 @@
<text class="tip">感谢您的反馈我们会认真处理每一条意见</text>
</view>
<!-- 我的反馈 Tab -->
<view class="mine-content" v-if="currentTab === 'mine'">
<view class="feedback-list" v-if="myFeedbacks.length > 0">
<view v-for="item in myFeedbacks" :key="item.id" class="fb-item">
<view class="fb-header">
<text class="fb-type">{{ getTypeLabel(item.type) }}</text>
<text class="fb-status" :class="item.status">{{ getStatusText(item.status) }}</text>
</view>
<text class="fb-content">{{ item.content }}</text>
<text class="fb-date">{{ formatDateStr(item.created_at) }}</text>
<view class="fb-reply" v-if="item.admin_reply">
<text class="fb-reply-label">管理员回复</text>
<text class="fb-reply-text">{{ item.admin_reply }}</text>
</view>
</view>
</view>
<view class="empty" v-else-if="!mineLoading">
<Icon name="edit" :size="48" color="#BFB3B3" />
<text class="empty-text">暂无反馈记录</text>
</view>
<view class="loading-box" v-if="mineLoading">
<text class="loading-text">加载中...</text>
</view>
<view class="load-more" v-if="!mineLoading && myFeedbacks.length > 0 && !mineNoMore" @tap="loadMoreFeedbacks">
<text class="load-more-text">加载更多</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ref, reactive } from 'vue'
import { statusBarHeight } from '@/utils/system'
import { submitFeedback, getMyFeedbacks } from '@/api/feedback'
import type { MyFeedback } from '@/api/feedback'
import { submitFeedback } from '@/api/feedback'
import Icon from '@/components/Icon/Icon.vue'
const types = [
@@ -115,7 +75,6 @@ const types = [
{ label: '其他', value: 'other' }
]
const currentTab = ref<'submit' | 'mine'>('submit')
const form = reactive({
type: 'bug',
content: '',
@@ -124,50 +83,6 @@ const form = reactive({
const submitting = ref(false)
// 我的反馈列表
const myFeedbacks = ref<MyFeedback[]>([])
const mineLoading = ref(false)
const minePage = ref(1)
const mineTotal = ref(0)
const mineNoMore = ref(false)
// 切换到我的反馈 tab 时加载数据
watch(currentTab, (tab) => {
if (tab === 'mine' && myFeedbacks.value.length === 0) {
loadMyFeedbacks(true)
}
})
async function loadMyFeedbacks(reset = false) {
if (mineLoading.value) return
if (reset) {
minePage.value = 1
myFeedbacks.value = []
mineNoMore.value = false
}
mineLoading.value = true
try {
const data = await getMyFeedbacks({ page: minePage.value, pageSize: 20 })
const list = data.list || []
if (reset) {
myFeedbacks.value = list
} else {
myFeedbacks.value = [...myFeedbacks.value, ...list]
}
mineTotal.value = data.total
mineNoMore.value = myFeedbacks.value.length >= data.total
} catch {
// 静默处理
} finally {
mineLoading.value = false
}
}
function loadMoreFeedbacks() {
minePage.value++
loadMyFeedbacks()
}
async function onSubmit() {
if (submitting.value || !form.content.trim()) return
@@ -179,12 +94,7 @@ async function onSubmit() {
contact: form.contact.trim() || undefined
})
uni.showToast({ title: '提交成功', icon: 'success' })
form.content = ''
form.contact = ''
// 刷新我的反馈列表
if (currentTab.value === 'mine') {
loadMyFeedbacks(true)
}
setTimeout(() => uni.navigateBack(), 1500)
} catch (e: any) {
uni.showToast({ title: e.message || '提交失败', icon: 'none' })
} finally {
@@ -195,22 +105,6 @@ async function onSubmit() {
function goBack() {
uni.navigateBack()
}
function getTypeLabel(type: string): string {
const map: Record<string, string> = { bug: '功能异常', feature: '功能建议', ux: '体验问题', other: '其他' }
return map[type] || type
}
function getStatusText(status: string): string {
const map: Record<string, string> = { pending: '待处理', processed: '已处理', ignored: '已忽略' }
return map[status] || status
}
function formatDateStr(dateStr: string): string {
if (!dateStr) return ''
const d = new Date(dateStr)
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
</script>
<style lang="scss" scoped>
@@ -365,121 +259,4 @@ function formatDateStr(dateStr: string): string {
color: $text-muted;
margin-top: $space-lg;
}
/* Tabs */
.tabs-wrap {
@include tabs-wrap;
margin: $space-sm 0 $space-lg;
}
.tabs {
@include tabs;
border-radius: $radius-xl;
}
.tab {
@include tab;
border-radius: $radius-xl;
&.active {
border-radius: $radius-lg;
box-shadow: $shadow-md;
}
}
/* 我的反馈 */
.mine-content {
padding: 0 $space-xl;
}
.feedback-list {
display: flex;
flex-direction: column;
gap: $space-sm;
}
.fb-item {
@include card($radius-xl);
padding: $space-lg;
}
.fb-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $space-sm;
}
.fb-type {
font-size: $font-md;
color: $text-sec;
}
.fb-status {
font-size: $font-sm;
padding: 4rpx 16rpx;
border-radius: $radius-xs;
&.pending { color: $primary; background: $primary-light; }
&.processed { color: $success; background: rgba(123, 198, 126, 0.1); }
&.ignored { color: $text-muted; background: $bg; }
}
.fb-content {
font-size: $font-lg;
color: $text;
display: block;
margin-bottom: $space-sm;
line-height: 1.5;
}
.fb-date {
font-size: $font-sm;
color: $text-muted;
display: block;
}
.fb-reply {
margin-top: $space-sm;
padding: $space-md;
background: $bg;
border-radius: $radius-lg;
border-left: 6rpx solid $success;
}
.fb-reply-label {
font-size: $font-sm;
color: $success;
font-weight: 500;
display: block;
margin-bottom: 4rpx;
}
.fb-reply-text {
font-size: $font-md;
color: $text;
display: block;
line-height: 1.5;
}
.empty {
@include state-box;
padding: 120rpx 0;
}
.empty-text { @include state-text; }
.loading-box {
@include flex-center;
padding: 80rpx 0;
}
.loading-text { font-size: $font-lg; color: $text-muted; }
.load-more {
text-align: center;
padding: $space-lg 0;
}
.load-more-text { font-size: $font-md; color: $primary; }
</style>

View File

@@ -45,22 +45,13 @@
<text class="section-title">我的群组</text>
</view>
<view v-if="groupStore.loading" class="skeleton-list">
<view v-for="i in 2" :key="i" class="skeleton-card">
<Skeleton width="80rpx" height="80rpx" variant="circle" />
<view class="skeleton-info">
<Skeleton width="200rpx" height="28rpx" variant="text" />
<Skeleton width="280rpx" height="24rpx" variant="text" />
</view>
</view>
<view v-if="groupStore.loading" class="loading-box">
<text class="loading-text">加载中...</text>
</view>
<view v-else-if="groupStore.groups.length === 0" class="empty-box">
<view class="empty-icon-wrap">
<Icon name="user" :size="48" color="#BFB3B3" />
</view>
<Icon name="user" :size="48" color="#BFB3B3" />
<text class="empty-text">还没有加入任何群组</text>
<text class="empty-hint">创建或加入一个群组和家人朋友一起记账</text>
</view>
<view v-else class="group-list">
@@ -156,7 +147,6 @@ import { waitForReady } from '@/utils/app-ready'
import { statusBarHeight, capsuleRight } from '@/utils/system'
import { API_BASE } from '@/config'
import Icon from '@/components/Icon/Icon.vue'
import Skeleton from '@/components/Skeleton/Skeleton.vue'
import type { GroupMember, Group } from '@/api/group'
const groupStore = useGroupStore()
@@ -483,20 +473,7 @@ function handleDissolve(group: Group) {
color: $text-sec;
}
// 骨架屏
.skeleton-list { padding: 0 $space-xl; }
.skeleton-card {
display: flex; align-items: center; gap: $space-md;
padding: $space-lg; margin-bottom: $space-sm;
background: $surface; border-radius: $radius-xl;
border: 2rpx solid $border;
}
.skeleton-info {
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
}
// 空状态
.empty-box {
.loading-box, .empty-box {
display: flex;
flex-direction: column;
align-items: center;
@@ -505,20 +482,8 @@ function handleDissolve(group: Group) {
padding: 80rpx 0;
}
.empty-icon-wrap {
width: 120rpx; height: 120rpx; border-radius: 50%;
background: $surface-warm; @include flex-center;
margin-bottom: $space-sm;
}
.empty-text {
font-size: $font-xl;
font-weight: 600;
color: $text;
}
.empty-hint {
font-size: $font-md;
.loading-text, .empty-text {
font-size: $font-lg;
color: $text-muted;
}

View File

@@ -364,7 +364,6 @@ function goBills() {
padding: $space-2xl;
@include card($radius-2xl);
box-shadow: $shadow-clay;
@include fade-in-up;
}
.card-label {
@@ -394,7 +393,6 @@ function goBills() {
font-weight: 600;
color: $text;
font-variant-numeric: tabular-nums;
@include count-up;
}
.mini-stats {
@@ -436,7 +434,6 @@ function goBills() {
display: flex;
align-items: center;
gap: $space-md;
@include fade-in-up(0.1s);
}
.today-item {
@@ -478,7 +475,6 @@ function goBills() {
gap: $space-md;
padding: 0 $space-xl;
margin-top: $space-xl;
@include fade-in-up(0.15s);
}
.quick-btn {
@@ -489,10 +485,9 @@ function goBills() {
flex-direction: column;
@include flex-center;
gap: $space-xs;
transition: transform $transition-fast, box-shadow $transition-fast;
&:active {
transform: scale(0.94);
transform: scale(0.97);
box-shadow: $shadow-clay-pressed;
}
}

View File

@@ -23,23 +23,13 @@
</view>
<!-- 通知列表 -->
<view v-if="loading && list.length === 0" class="skeleton-list">
<view v-for="i in 4" :key="i" class="skeleton-notif">
<Skeleton width="64rpx" height="64rpx" variant="circle" />
<view class="skeleton-info">
<Skeleton width="240rpx" height="28rpx" variant="text" />
<Skeleton width="400rpx" height="24rpx" variant="text" />
<Skeleton width="120rpx" height="20rpx" variant="text" />
</view>
</view>
<view v-if="loading && list.length === 0" class="loading-box">
<text class="loading-text">加载中...</text>
</view>
<view v-else-if="list.length === 0" class="empty-box">
<view class="empty-icon-wrap">
<Icon name="bell" :size="48" color="#BFB3B3" />
</view>
<Icon name="bell" :size="48" color="#BFB3B3" />
<text class="empty-text">暂无通知</text>
<text class="empty-hint">新的通知会在这里显示</text>
</view>
<view v-else class="notification-list">
@@ -97,7 +87,6 @@ import { getNotifications, markRead, markAllRead, getNotificationImageUrl } from
import { waitForReady } from '@/utils/app-ready'
import { statusBarHeight, capsuleRight } from '@/utils/system'
import Icon from '@/components/Icon/Icon.vue'
import Skeleton from '@/components/Skeleton/Skeleton.vue'
import type { Notification } from '@/api/notification'
const notifStore = useNotificationStore()
@@ -316,20 +305,7 @@ onReachBottom(() => {
}
}
// 骨架屏
.skeleton-list { padding: 0 $space-xl; }
.skeleton-notif {
display: flex; align-items: flex-start; gap: $space-lg;
padding: $space-lg; margin-bottom: $space-sm;
background: $surface; border-radius: $radius-xl;
border: 2rpx solid $border;
}
.skeleton-info {
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
}
// 空状态
.empty-box {
.loading-box, .empty-box {
display: flex;
flex-direction: column;
align-items: center;
@@ -337,20 +313,8 @@ onReachBottom(() => {
padding: 120rpx 0;
}
.empty-icon-wrap {
width: 120rpx; height: 120rpx; border-radius: 50%;
background: $surface-warm; @include flex-center;
margin-bottom: $space-sm;
}
.empty-text {
font-size: $font-xl;
font-weight: 600;
color: $text;
}
.empty-hint {
font-size: $font-md;
.loading-text, .empty-text {
font-size: $font-lg;
color: $text-muted;
}

View File

@@ -51,10 +51,6 @@
<text class="mi-label">分类管理</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
<view class="menu-item" @tap="goTagManage">
<text class="mi-label">标签管理</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
<view class="menu-item" @tap="goRecurring">
<text class="mi-label">周期账单</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
@@ -63,10 +59,6 @@
<text class="mi-label">数据导出</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
<view class="menu-item" @tap="goDataImport">
<text class="mi-label">数据导入</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
</view>
<view class="menu-card mt">
@@ -91,10 +83,6 @@
<text class="mi-label">管理后台</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
<view class="menu-item" @tap="goBackupManage">
<text class="mi-label">数据备份</text>
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
</view>
</view>
<!-- 关于弹窗 -->
@@ -154,16 +142,6 @@
</view>
</view>
<!-- 导出方式 -->
<view class="export-section">
<text class="export-label">导出方式</text>
<view class="export-tabs">
<view class="export-tab" :class="{ active: exportMode === 'local' }" @tap="exportMode = 'local'">本地导出</view>
<view class="export-tab" :class="{ active: exportMode === 'server' }" @tap="exportMode = 'server'">服务端导出</view>
</view>
<text class="export-hint" v-if="exportMode === 'server'">服务端导出支持大数据量直接从服务器下载文件</text>
</view>
<!-- 预览 & 导出 -->
<view class="export-footer">
<text class="export-preview"> <text class="export-count">{{ exportCount }}</text> 条记录</text>
@@ -249,7 +227,6 @@ const exportStartDate = ref(getLocalDateStr().replace(/-/g, '-').replace(/(\d+)$
const exportEndDate = ref(getLocalDateStr())
const exportType = ref<'all' | 'expense' | 'income'>('all')
const exportFormat = ref<'csv' | 'json'>('csv')
const exportMode = ref<'local' | 'server'>('local')
const exportCount = ref(0)
const exportLoading = ref(false)
@@ -328,10 +305,6 @@ function goCategoryManage() {
uni.navigateTo({ url: '/pages/category-manage/index' })
}
function goTagManage() {
uni.navigateTo({ url: '/pages/tag-manage/index' })
}
function goRecurring() {
uni.navigateTo({ url: '/pages/recurring/index' })
}
@@ -344,14 +317,6 @@ function goFeedback() {
uni.navigateTo({ url: '/pages/feedback/index' })
}
function goDataImport() {
uni.navigateTo({ url: '/pages/data-import/index' })
}
function goBackupManage() {
uni.navigateTo({ url: '/pages/backup-manage/index' })
}
function goProfileEdit() {
uni.navigateTo({ url: '/pages/profile-edit/index' })
}
@@ -451,49 +416,6 @@ function getLocalDateStr(): string {
async function doExport() {
if (exportCount.value === 0 || exportLoading.value) return
// 服务端导出
if (exportMode.value === 'server') {
exportLoading.value = true
try {
const { getExportUrl } = await import('@/api/export')
const url = getExportUrl({
startDate: exportStartDate.value,
endDate: exportEndDate.value,
type: exportType.value,
format: exportFormat.value
})
// #ifdef H5
window.open(url, '_blank')
// #endif
// #ifdef MP-WEIXIN
uni.downloadFile({
url,
success: (res) => {
if (res.statusCode === 200) {
const ext = exportFormat.value === 'json' ? 'json' : 'csv'
uni.openDocument({
filePath: res.tempFilePath,
fileType: ext,
showMenu: true,
fail: () => uni.showToast({ title: '打开失败', icon: 'none' })
})
}
},
fail: () => uni.showToast({ title: '下载失败', icon: 'none' })
})
// #endif
uni.showToast({ title: '导出成功', icon: 'success' })
} catch {
uni.showToast({ title: '导出失败', icon: 'none' })
} finally {
exportLoading.value = false
showExportPanel.value = false
}
return
}
// 本地导出
exportLoading.value = true
uni.showLoading({ title: '导出中 0%' })
try {
@@ -1043,11 +965,4 @@ function saveFile(content: string, fileName: string, mimeType: string) {
font-weight: 600;
color: $surface;
}
.export-hint {
font-size: $font-sm;
color: $text-muted;
display: block;
margin-top: $space-sm;
}
</style>

View File

@@ -20,25 +20,15 @@
</view>
<!-- 加载//列表 -->
<view v-if="loading" class="skeleton-list">
<view v-for="i in 3" :key="i" class="skeleton-card">
<Skeleton width="88rpx" height="88rpx" variant="circle" />
<view class="skeleton-info">
<Skeleton width="200rpx" height="28rpx" variant="text" />
<Skeleton width="300rpx" height="24rpx" variant="text" />
</view>
<Skeleton width="120rpx" height="32rpx" variant="rect" />
</view>
<view v-if="loading" class="loading-box">
<text class="loading-text">加载中...</text>
</view>
<view v-else-if="list.length === 0" class="empty-box">
<view class="empty-icon-wrap">
<Icon name="edit" :size="48" color="#BFB3B3" />
</view>
<Icon name="edit" :size="48" color="#BFB3B3" />
<text class="empty-text">暂无周期账单</text>
<text class="empty-hint">设置房租订阅工资等定期收支</text>
<view class="empty-btn" @tap="openAddModal">
<Icon name="plus" :size="24" color="#FFFFFF" />
<text class="empty-btn-text">添加周期账单</text>
</view>
</view>
@@ -172,7 +162,6 @@ import { getRecurringTemplates, createRecurringTemplate, updateRecurringTemplate
import Icon from '@/components/Icon/Icon.vue'
import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
import Skeleton from '@/components/Skeleton/Skeleton.vue'
import type { RecurringTemplate } from '@/api/recurring'
const catStore = useCategoryStore()
@@ -372,35 +361,16 @@ function goBack() { uni.navigateBack() }
}
.sync-text { font-size: $font-md; color: #43A047; font-weight: 500; }
// 骨架屏
.skeleton-list { padding: 0 $space-xl; }
.skeleton-card {
display: flex; align-items: center; gap: $space-md;
padding: $space-lg; margin-bottom: $space-sm;
background: $surface; border-radius: $radius-xl;
border: 2rpx solid $border;
}
.skeleton-info {
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
}
// 空状态
.empty-box {
.loading-box, .empty-box {
display: flex; flex-direction: column; align-items: center;
padding: 120rpx 0; gap: $space-sm;
}
.empty-icon-wrap {
width: 120rpx; height: 120rpx; border-radius: 50%;
background: $surface-warm; @include flex-center;
margin-bottom: $space-sm;
}
.empty-text { font-size: $font-xl; font-weight: 600; color: $text; }
.loading-text, .empty-text { font-size: $font-lg; color: $text-muted; }
.empty-hint { font-size: $font-md; color: $text-muted; margin-top: -$space-xs; }
.empty-btn {
margin-top: $space-lg; padding: $space-sm $space-xl;
background: linear-gradient(135deg, $primary, $primary-dark);
border-radius: $radius-lg; display: flex; align-items: center; gap: $space-xs;
&:active { opacity: 0.8; transform: scale(0.96); }
background: $primary; border-radius: $radius-lg;
&:active { opacity: 0.8; }
}
.empty-btn-text { font-size: $font-base; color: $surface; font-weight: 600; }

View File

@@ -22,14 +22,6 @@
</view>
</view>
<view class="period-wrap">
<view class="period-tabs">
<view class="period-tab" :class="{ active: period === 'week' }" @tap="switchPeriod('week')"></view>
<view class="period-tab" :class="{ active: period === 'month' }" @tap="switchPeriod('month')"></view>
<view class="period-tab" :class="{ active: period === 'year' }" @tap="switchPeriod('year')"></view>
</view>
</view>
<view class="overview-card">
<view class="ov-item">
<text class="ov-label">{{ tabType === 'expense' ? '总支出' : '总收入' }}</text>
@@ -103,7 +95,7 @@
/>
<view class="trend-list">
<view v-for="point in trendData" :key="point.date" class="trend-item">
<text class="trend-date">{{ point.label || (point.date.slice(8) + '日') }}</text>
<text class="trend-date">{{ point.date.slice(8) }}</text>
<view class="trend-bar-bg">
<view class="trend-bar" :style="{ width: getBarWidth(point.amount) + '%' }"></view>
</view>
@@ -147,7 +139,6 @@ const configStore = useConfigStore()
const currentMonth = ref(getCurrentMonth())
const tabType = ref<'expense' | 'income'>('expense')
const period = ref<'week' | 'month' | 'year'>('month')
const { overview, categoryStats, trendData } = storeToRefs(statsStore)
const loading = ref(true)
const loadError = ref(false)
@@ -185,7 +176,7 @@ const categoryChartData = computed(() => {
const trendChartData = computed(() => {
if (trendData.value.length === 0) return null
return {
categories: trendData.value.map(p => p.label || (p.date.slice(8) + '日')),
categories: trendData.value.map(p => p.date.slice(8) + '日'),
series: [{
name: tabType.value === 'expense' ? '支出' : '收入',
data: trendData.value.map(p => p.amount / 100)
@@ -250,8 +241,6 @@ onShow(() => {
watch(currentMonth, () => loadData())
// tab 切换时只请求分类和趋势数据
watch(tabType, () => loadTabData())
// 周期切换时重新加载数据
watch(period, () => loadData())
async function loadData(silent = false) {
const seq = ++loadSeq
@@ -260,8 +249,8 @@ async function loadData(silent = false) {
loadError.value = false
await Promise.all([
statsStore.fetchOverview(currentMonth.value),
statsStore.fetchCategoryStats(currentMonth.value, tabType.value, period.value),
statsStore.fetchTrend(currentMonth.value, tabType.value, period.value),
statsStore.fetchCategoryStats(currentMonth.value, tabType.value),
statsStore.fetchTrend(currentMonth.value, tabType.value),
fetchMaxSingle(),
fetchPrevMonthData()
])
@@ -280,8 +269,8 @@ async function loadTabData() {
const seq = ++loadSeq
try {
await Promise.all([
statsStore.fetchCategoryStats(currentMonth.value, tabType.value, period.value),
statsStore.fetchTrend(currentMonth.value, tabType.value, period.value),
statsStore.fetchCategoryStats(currentMonth.value, tabType.value),
statsStore.fetchTrend(currentMonth.value, tabType.value),
fetchMaxSingle()
])
if (seq !== loadSeq) return
@@ -350,10 +339,6 @@ function nextMonth() {
currentMonth.value = m === 12 ? `${y + 1}-01` : `${y}-${String(m + 1).padStart(2, '0')}`
}
function switchPeriod(p: 'week' | 'month' | 'year') {
period.value = p
}
function getBarWidth(amount: number) {
const max = Math.max(...trendData.value.map(t => t.amount), 1)
return (amount / max) * 100
@@ -424,35 +409,6 @@ function getBarWidth(amount: number) {
}
}
.period-wrap {
display: flex;
justify-content: center;
margin-bottom: $space-lg;
}
.period-tabs {
display: inline-flex;
background: $surface-warm;
border-radius: $radius-lg;
padding: $space-xs;
gap: $space-xs;
}
.period-tab {
padding: $space-xs $space-lg;
border-radius: $radius-lg;
font-size: $font-md;
color: $text-sec;
transition: all $transition-normal;
&.active {
background: $surface;
color: $primary;
font-weight: 600;
box-shadow: $shadow-sm;
}
}
.overview-card, .chart-card {
@include card($radius-2xl);
margin: 0 $space-xl $space-lg;

View File

@@ -1,371 +0,0 @@
<template>
<view class="page">
<view class="header-fixed">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="nav-bar">
<view class="nav-back" @tap="goBack">
<Icon name="arrowLeft" :size="36" color="#2D1B1B" />
</view>
<text class="nav-title">标签管理</text>
<view class="nav-placeholder"></view>
</view>
</view>
<view class="tag-list" v-if="tagStore.tags.length > 0">
<view v-for="tag in tagStore.tags" :key="tag.id" class="tag-row">
<view class="tag-info" @tap="onEdit(tag)">
<view class="tag-dot" :style="{ background: tag.color }"></view>
<text class="tag-name">{{ tag.name }}</text>
</view>
<view class="tag-actions">
<view class="action-btn" @tap="onEdit(tag)">
<Icon name="edit" :size="24" color="#8B7E7E" />
</view>
<view class="action-btn" @tap="onDelete(tag)">
<Icon name="trash" :size="24" color="#FF6B6B" />
</view>
</view>
</view>
</view>
<view class="empty" v-else-if="!tagStore.loading">
<Icon name="tag" :size="48" color="#BFB3B3" />
<text class="empty-text">暂无标签点击下方按钮添加</text>
</view>
<!-- 浮动添加按钮 -->
<view class="fab" @tap="showAddModal = true">
<Icon name="plus" :size="48" color="#FFFFFF" />
</view>
<!-- 添加弹窗 -->
<view class="modal-mask" v-if="showAddModal" @tap="showAddModal = false">
<view class="modal" @tap.stop>
<text class="modal-title">添加标签</text>
<input class="modal-input" v-model="newName" placeholder="标签名称" maxlength="20" />
<view class="color-picker">
<view
v-for="c in colorOptions" :key="c"
class="color-dot"
:class="{ selected: selectedColor === c }"
:style="{ background: c }"
@tap="selectedColor = c"
/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" @tap="showAddModal = false">取消</view>
<view class="modal-btn confirm" :class="{ disabled: !newName.trim() }" @tap="onAdd">添加</view>
</view>
</view>
</view>
<!-- 编辑弹窗 -->
<view class="modal-mask" v-if="showEditModal" @tap="showEditModal = false">
<view class="modal" @tap.stop>
<text class="modal-title">编辑标签</text>
<input class="modal-input" v-model="editName" placeholder="标签名称" maxlength="20" />
<view class="color-picker">
<view
v-for="c in colorOptions" :key="c"
class="color-dot"
:class="{ selected: editColor === c }"
:style="{ background: c }"
@tap="editColor = c"
/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" @tap="showEditModal = false">取消</view>
<view class="modal-btn confirm" @tap="onEditConfirm">确定</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { useTagStore } from '@/stores/tag'
import type { Tag } from '@/api/tag'
import { waitForReady } from '@/utils/app-ready'
import { statusBarHeight } from '@/utils/system'
import Icon from '@/components/Icon/Icon.vue'
const tagStore = useTagStore()
const showAddModal = ref(false)
const newName = ref('')
const colorOptions = ['#FF8C69', '#7BC67E', '#5B9BD5', '#FFD700', '#FF69B4', '#8B5CF6', '#F97316', '#06B6D4']
const selectedColor = ref(colorOptions[0])
const showEditModal = ref(false)
const editingTag = ref<Tag | null>(null)
const editName = ref('')
const editColor = ref('')
const initialLoaded = ref(false)
onMounted(async () => {
await waitForReady()
await tagStore.fetchTags()
initialLoaded.value = true
})
onShow(() => {
if (initialLoaded.value) tagStore.fetchTags()
})
onPullDownRefresh(async () => {
await tagStore.fetchTags()
uni.stopPullDownRefresh()
})
function goBack() {
uni.navigateBack()
}
async function onAdd() {
const name = newName.value.trim()
if (!name) return
try {
await tagStore.addTag({ name, color: selectedColor.value })
newName.value = ''
showAddModal.value = false
uni.showToast({ title: '添加成功', icon: 'success' })
} catch {
uni.showToast({ title: '添加失败', icon: 'none' })
}
}
function onEdit(tag: Tag) {
editingTag.value = tag
editName.value = tag.name
editColor.value = tag.color
showEditModal.value = true
}
async function onEditConfirm() {
if (!editingTag.value) return
const name = editName.value.trim()
if (!name) {
uni.showToast({ title: '请输入名称', icon: 'none' })
return
}
try {
await tagStore.updateTag(editingTag.value.id, { name, color: editColor.value })
showEditModal.value = false
uni.showToast({ title: '修改成功', icon: 'success' })
} catch {
uni.showToast({ title: '修改失败', icon: 'none' })
}
}
async function onDelete(tag: Tag) {
uni.showModal({
title: '删除标签',
content: `确定删除「${tag.name}」?关联的交易记录不会被删除。`,
success: async (res) => {
if (res.confirm) {
try {
await tagStore.deleteTag(tag.id)
uni.showToast({ title: '已删除', icon: 'success' })
} catch {
uni.showToast({ title: '删除失败', icon: 'none' })
}
}
}
})
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
.page {
@include page-base;
}
.header-fixed {
@include sticky-header;
}
.status-bar { @include status-bar; }
.nav-bar {
display: flex;
align-items: center;
padding: $space-sm $space-lg;
}
.nav-back {
@include nav-back;
border-radius: 50%;
&:active { background: $border; }
}
.nav-title {
flex: 1;
text-align: center;
font-size: $font-2xl;
font-weight: 600;
color: $text;
}
.nav-placeholder { width: 72rpx; }
.tag-list { padding: 0 $space-xl; }
.tag-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: $space-md 0;
border-bottom: 1rpx solid $border;
&:last-child { border-bottom: none; }
}
.tag-info {
display: flex;
align-items: center;
gap: $space-sm;
flex: 1;
padding: $space-xs 0;
&:active { opacity: 0.6; }
}
.tag-dot {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
flex-shrink: 0;
}
.tag-name { font-size: $font-lg; color: $text; font-weight: 500; }
.tag-actions {
display: flex;
gap: $space-xs;
}
.action-btn {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
&:active { background: $border; }
}
.empty {
@include state-box;
padding: 120rpx 0;
}
.empty-text { @include state-text; }
.fab {
position: fixed;
right: $space-xl;
bottom: calc(120rpx + env(safe-area-inset-bottom));
width: 112rpx;
height: 112rpx;
background: linear-gradient(135deg, $primary, #E67355);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 8rpx 8rpx 24rpx rgba(255, 140, 105, 0.4);
z-index: 50;
&:active { transform: scale(0.95); }
}
.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: 200;
}
.modal {
width: 600rpx;
background: $surface;
border-radius: $space-lg;
padding: $space-2xl;
}
.modal-title {
font-size: $font-xl;
font-weight: 600;
color: $text;
display: block;
text-align: center;
margin-bottom: $space-lg;
}
.modal-input {
height: 96rpx;
background: $bg;
border-radius: $space-md;
padding: 0 $space-lg;
font-size: $font-lg;
margin-bottom: $space-md;
}
.color-picker {
display: flex;
gap: $space-lg;
margin-bottom: $space-md;
flex-wrap: wrap;
}
.color-dot {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
border: 4rpx solid transparent;
transition: all $transition-normal;
&.selected {
border-color: $text;
transform: scale(1.15);
}
&:active { opacity: 0.7; }
}
.modal-btns {
display: flex;
gap: $space-md;
}
.modal-btn {
flex: 1;
height: 88rpx;
border-radius: $space-md;
display: flex;
align-items: center;
justify-content: center;
font-size: $font-lg;
font-weight: 600;
&.cancel {
background: $bg;
color: $text-sec;
}
&.confirm {
background: linear-gradient(135deg, $primary, #E67355);
color: $surface;
}
&.disabled { opacity: 0.5; }
&:active { opacity: 0.8; }
}
</style>

View File

@@ -36,8 +36,8 @@ export const useStatsStore = defineStore('stats', () => {
}
}
async function fetchCategoryStats(month?: string, type: string = 'expense', period?: 'week' | 'month' | 'year') {
const data = await api.getCategoryStats(month || getCurrentMonth(), type, getGroupId(), period)
async function fetchCategoryStats(month?: string, type: string = 'expense') {
const data = await api.getCategoryStats(month || getCurrentMonth(), type, getGroupId())
categoryStats.value = Array.isArray(data) ? data.map(item => ({
...item,
amount: Number(item.amount) || 0,
@@ -45,8 +45,8 @@ export const useStatsStore = defineStore('stats', () => {
})) : []
}
async function fetchTrend(month?: string, type: string = 'expense', period?: 'week' | 'month' | 'year') {
const data = await api.getTrend(month || getCurrentMonth(), type, getGroupId(), period)
async function fetchTrend(month?: string, type: string = 'expense') {
const data = await api.getTrend(month || getCurrentMonth(), type, getGroupId())
trendData.value = Array.isArray(data) ? data.map(item => ({
...item,
amount: Number(item.amount) || 0

View File

@@ -1,52 +0,0 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import * as api from '@/api/tag'
export const useTagStore = defineStore('tag', () => {
const tags = ref<api.Tag[]>([])
const loading = ref(false)
/** 获取标签列表 */
async function fetchTags() {
loading.value = true
try {
const data = await api.getTags()
tags.value = Array.isArray(data) ? data : []
} catch {
tags.value = []
} finally {
loading.value = false
}
}
/** 创建标签 */
async function addTag(data: { name: string; color: string }) {
const result = await api.createTag(data)
await fetchTags()
return result.id
}
/** 更新标签 */
async function updateTag(id: number, data: { name?: string; color?: string }) {
await api.updateTag(id, data)
await fetchTags()
}
/** 删除标签 */
async function deleteTag(id: number) {
await api.deleteTag(id)
await fetchTags()
}
/** 根据 ID 获取标签 */
function getById(id: number) {
return tags.value.find(t => t.id === id)
}
/** 获取选中的标签 ID 对应的标签列表 */
function getByIds(ids: number[]) {
return tags.value.filter(t => ids.includes(t.id))
}
return { tags, loading, fetchTags, addTag, updateTag, deleteTag, getById, getByIds }
})

View File

@@ -247,65 +247,3 @@
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
// ===== 入场动画 =====
// 卡片淡入上浮
@mixin fade-in-up($delay: 0s) {
animation: fadeInUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) $delay both;
}
// 列表项交错淡入
@mixin stagger-item($index: 0, $base-delay: 0.05s) {
opacity: 0;
animation: fadeInUp 0.35s cubic-bezier(0.23, 1, 0.32, 1) ($index * $base-delay) both;
}
// 数字跳动
@mixin count-up {
animation: countPulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
// 弹性缩放
@mixin bounce-in($delay: 0s) {
animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) $delay both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes countPulse {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
// 尊重减弱动画偏好
@media (prefers-reduced-motion: reduce) {
.fade-in-up,
.stagger-item,
.bounce-in {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}

View File

@@ -1,577 +0,0 @@
# 小菜记账 增量架构设计文档
> 版本v1.0 | 架构师高见远Gao | 日期2025-07
---
## Part A: 系统设计
### 1. 实现方案 + 框架选型
#### 1.1 分类拖拽排序P0-1
**技术挑战**:微信小程序不支持 HTML5 Drag and Drop APIUni-app 的 `movable-area`/`movable-view` 适合单元素拖拽而非列表重排。
**方案**:基于 Touch 事件的自定义拖拽排序组件 `DragSortList`
- 监听 `@touchstart` / `@touchmove` / `@touchend` 三组事件
- 拖拽时通过 `transform: translateY()` 实现元素位移动画
- 拖拽过程中实时计算目标索引,交换数组元素位置
- 松手后调用已就绪的 `sortCategories(ids)` API 批量更新排序
- 支出/收入各自独立排序(复用现有 `tabType` 切换 + `currentCategories` computed
- **不引入第三方拖拽库**——Uni-app 小程序环境下无成熟可用方案,自研可控性更高
#### 1.2 服务端导出流式响应P2-3
**方案**Node.js 原生 Stream + `pipeline()` 管道。
- **< 1 万条**:使用 `Readable.from()` 创建内存流,逐行 push 数据,通过 `pipeline()` 管道传输到 Response
- **≥ 1 万条**:先写入临时文件(`os.tmpdir()`),再 `fs.createReadStream()` 流式返回,完成后删除临时文件
- CSV 格式:手动拼装(无需额外依赖),添加 BOM 头确保中文兼容
- JSON 格式:流式写入 `[` + 逐条 `,` 分隔 + `]`,避免全量 JSON.stringify
- Response Headers`Content-Type: text/csv; charset=utf-8` / `application/json; charset=utf-8``Content-Disposition: attachment; filename=...`
- 超时保护:流式响应不设 `express.json()` body 限制,但设 60s 超时
#### 1.3 标签系统数据库设计P3-2~4
**设计原则**:标签不区分收支类型,跨分类使用,轻量关联表。
- `tags` 表:用户维度,每用户最多 20 个标签8 色预设
- `transaction_tags` 表:多对多关联,每笔交易最多 5 个标签
- 标签与交易在同一事务中写入(`POST/PUT /transactions` 扩展 `tagIds` 字段)
- 查询交易列表时 LEFT JOIN 聚合标签信息(避免 N+1 查询)
- 统计按标签聚合使用 `GROUP BY tag_id`
#### 1.4 数据导入P2-2
**方案**JSON 格式导入,服务端校验 + 批量写入 + 去重。
- 接收 JSON 数组校验字段格式必填date, type, amount, category_name
-`date + type + amount + note` 组合去重(查现有记录比对)
- 使用 `INSERT ... VALUES (...), (...), ...` 批量写入(每批 100 条)
- 返回结果:`{ total, imported, skipped, errors[] }`
#### 1.5 统计年度/周视图P2-1
**方案**:后端 `period` 参数扩展 + 前端维度切换器。
- 后端:`GET /stats/category``GET /stats/trend` 新增 `period=week|month|year` 参数
- `week`:基于当前日期计算本周一至本周日,趋势 X 轴为周一~周日
- `month`:保持现有行为(默认)
- `year`:基于当前年份 1-12 月,趋势 X 轴为 1月~12月
- 年视图日期范围计算:`startDate = ${year}-01-01`, `endDate = ${year}-12-31`
- 周视图日期范围计算:获取本周一和本周日
- 趋势数据 GROUP BY 逻辑:年视图按月 GROUP周视图按日 GROUP
---
### 2. 文件列表及相对路径
#### 2.1 新建文件
| 文件路径 | 说明 |
|---------|------|
| `client/src/api/backup.ts` | 备份管理 API下载备份 |
| `client/src/api/tag.ts` | 标签 CRUD + 统计 API |
| `client/src/api/export.ts` | 服务端导出 API |
| `client/src/api/health.ts` | 健康检查 API |
| `client/src/stores/tag.ts` | 标签 Pinia Store |
| `client/src/components/DragSortList/DragSortList.vue` | 拖拽排序列表组件 |
| `client/src/pages/backup-manage/index.vue` | 备份管理页面(仅管理员) |
| `client/src/pages/data-import/index.vue` | 数据导入页面 |
| `client/src/pages/tag-manage/index.vue` | 标签管理页面 |
| `server/src/routes/tag.ts` | 标签 CRUD + 按标签统计路由 |
| `server/src/routes/export.ts` | 服务端导出路由 |
#### 2.2 修改文件
| 文件路径 | 主要变更 |
|---------|---------|
| `server/src/db/schema.sql` | 新增 tags、transaction_tags 表定义 |
| `server/src/db/init.ts` | 新增 tags、transaction_tags 表迁移 |
| `server/src/routes/feedback.ts` | 新增 `GET /mine` 端点(用户查看自己的反馈) |
| `server/src/routes/backup.ts` | 新增 `GET /:id/download` 端点(临时签名 URL |
| `server/src/routes/stats.ts` | category/trend 端点增加 `period` 参数支持 |
| `server/src/routes/transaction.ts` | POST/PUT 支持 `tagIds`GET 支持 `tagId` 筛选GET/:id 返回 tags |
| `server/src/index.ts` | health 端点移到 authMiddleware 之前;注册 tag、export 路由 |
| `client/src/api/feedback.ts` | 新增 `getMyFeedbacks()` API 函数 |
| `client/src/api/stats.ts` | 修改 `getCategoryStats``getTrend` 支持 `period` 参数 |
| `client/src/api/transaction.ts` | 新增 `importTransactions()`;类型扩展 `tagIds``tagId` |
| `client/src/api/admin.ts` | 新增 `getHealth()` API 函数 |
| `client/src/stores/category.ts` | 无需修改sortCategories 已就绪) |
| `client/src/stores/stats.ts` | fetchCategoryStats/fetchTrend 支持 period 参数 |
| `client/src/pages/category-manage/index.vue` | 集成 DragSortList 拖拽排序 |
| `client/src/pages/feedback/index.vue` | 新增"我的反馈"Tab |
| `client/src/pages/stats/index.vue` | 添加维度切换器(周/月/年) |
| `client/src/pages/profile/index.vue` | 导出面板增加"服务端导出"选项 |
| `client/src/pages/add/index.vue` | 添加标签选择入口 |
| `client/src/pages/bills/index.vue` | 添加标签筛选功能 |
| `client/src/pages/admin/index.vue` | 添加服务状态卡片 |
| `client/src/pages.json` | 注册新页面路由 |
---
### 3. 数据结构和接口(类图)
```mermaid
classDiagram
class Tag {
+int id
+int user_id
+string name
+string color
+string created_at
}
class TransactionTag {
+int transaction_id
+int tag_id
}
class Transaction {
+int id
+int user_id
+int amount
+string type
+int category_id
+string note
+string date
+int group_id
+int recurring_id
+Tag[] tags
}
class Feedback {
+int id
+int user_id
+string type
+string content
+string contact
+string status
+string admin_reply
+string created_at
}
class Category {
+int id
+int user_id
+string name
+string icon
+string color
+string type
+int sort_order
+int is_custom
}
Transaction "1" --o "*" TransactionTag : has
Tag "1" --o "*" TransactionTag : referenced_by
Transaction ..> Category : belongs_to
note for Tag "每用户最多 20 个标签\n8 色预设颜色选择器\n标签不区分收支类型"
note for TransactionTag "复合主键 (transaction_id, tag_id)\n每笔交易最多 5 个标签"
```
#### 3.1 新增数据库表
**tags 表**
```sql
CREATE TABLE IF NOT EXISTS tags (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
name VARCHAR(20) NOT NULL COMMENT '标签名称',
color VARCHAR(20) NOT NULL DEFAULT '#FF8C69' COMMENT '标签颜色',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uk_user_name (user_id, name),
INDEX idx_user (user_id),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
**transaction_tags 表**
```sql
CREATE TABLE IF NOT EXISTS transaction_tags (
transaction_id INT NOT NULL,
tag_id INT NOT NULL,
PRIMARY KEY (transaction_id, tag_id),
INDEX idx_tag (tag_id),
FOREIGN KEY (transaction_id) REFERENCES transactions(id) ON DELETE CASCADE,
FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
#### 3.2 新增/修改 API 端点
##### 标签 CRUD
| 方法 | 路径 | 请求 | 响应 | 说明 |
|------|------|------|------|------|
| GET | `/api/tags` | — | `{ list: Tag[] }` | 获取当前用户所有标签 |
| POST | `/api/tags` | `{ name, color }` | `{ id }` | 创建标签(限 20 个/用户) |
| PUT | `/api/tags/:id` | `{ name?, color? }` | — | 更新标签 |
| DELETE | `/api/tags/:id` | — | — | 删除标签(级联删除关联) |
| GET | `/api/stats/by-tag` | `?month&period&type` | `TagStat[]` | 按标签统计 |
**TagStat 类型**
```ts
{ id: number; name: string; color: string; amount: number; count: number }
```
##### 用户反馈列表
| 方法 | 路径 | 请求 | 响应 | 说明 |
|------|------|------|------|------|
| GET | `/api/feedback/mine` | `?page&pageSize` | `{ list, total, page, pageSize }` | 当前用户的反馈列表 |
##### 备份下载
| 方法 | 路径 | 请求 | 响应 | 说明 |
|------|------|------|------|------|
| GET | `/api/backup/:id/download` | — | 文件流 | 下载备份文件(临时签名 URL1h 有效) |
**实现方式**:在 `backup` 表中无需存储,使用 HMAC-SHA256 生成带过期时间的签名 token下载时校验签名。签名格式`backupId:timestamp:hmac-sha256(backupId:timestamp)`。将签名作为 `?token=xxx` 传给前端,下载端点校验 token 有效性(无需认证中间件)。
##### 统计年度/周视图
| 方法 | 路径 | 请求参数 | 说明 |
|------|------|---------|------|
| GET | `/api/stats/category` | 新增 `period=week\|month\|year` | 周/月/年分类统计 |
| GET | `/api/stats/trend` | 新增 `period=week\|month\|year` | 周/月/年趋势数据 |
**period 参数逻辑**
- `week`(新增):`startDate` = 本周一,`endDate` = 本周日,趋势按日 GROUP
- `month`(默认):保持现有行为,趋势按日 GROUP
- `year`(新增):`startDate` = 当年1月1日`endDate` = 当年12月31日趋势按月 GROUP`DATE_FORMAT(date, '%Y-%m')`
**年视图趋势响应**(新增 `label` 字段):
```ts
{ label: string; date: string; amount: number }[]
// 年视图 label = "1月"~"12月"
// 周视图 label = "周一"~"周日"
// 月视图 label = "1日"~"31日"(保持兼容)
```
##### 数据导入
| 方法 | 路径 | 请求 | 响应 | 说明 |
|------|------|------|------|------|
| POST | `/api/transactions/import` | `{ items: ImportItem[] }` | `{ total, imported, skipped, errors[] }` | 批量导入 |
**ImportItem 类型**
```ts
{
date: string // 必填YYYY-MM-DD
type: string // 必填expense | income
amount: number // 必填,单位:分
category_name: string // 可选,匹配不到则归入"未分类"
note?: string
tag_names?: string[] // 可选,按名称匹配标签
}
```
##### 服务端导出
| 方法 | 路径 | 请求参数 | 响应 | 说明 |
|------|------|---------|------|------|
| GET | `/api/export` | `startDate, endDate, type, format=csv\|json` | 文件流 | 流式导出 |
##### 健康检查(改造)
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/health` | 移到 `authMiddleware` 之前,无需认证 |
##### 交易记录(改造)
| 方法 | 路径 | 变更 |
|------|------|------|
| POST | `/api/transactions` | 请求新增 `tagIds: number[]`(可选,最多 5 个) |
| PUT | `/api/transactions/:id` | 请求新增 `tagIds: number[]`(可选,最多 5 个,全量替换) |
| GET | `/api/transactions` | 新增 `tagId` 查询参数筛选 |
| GET | `/api/transactions/:id` | 响应新增 `tags: { id, name, color }[]` |
---
### 4. 程序调用流程(时序图)
#### 4.1 分类拖拽排序
```mermaid
sequenceDiagram
participant U as 用户
participant P as category-manage
participant D as DragSortList
participant S as categoryStore
participant A as sortCategories API
participant B as PUT /categories/sort
U->>P: 长按分类项进入排序模式
P->>P: showSortMode = true
P->>D: 渲染 DragSortList (items=currentCategories)
U->>D: touchstart (记录起始位置)
U->>D: touchmove (计算偏移, 交换元素位置)
D->>D: 实时更新 items 数组顺序
U->>D: touchend (拖拽结束)
D->>P: @change事件 (新顺序ids)
P->>S: sortCategories(newIds)
S->>A: sortCategories(ids)
A->>B: PUT /categories/sort { ids }
B-->>A: { code: 0 }
A-->>S: 成功
S->>S: fetchCategories() 刷新
```
#### 4.2 数据导入
```mermaid
sequenceDiagram
participant U as 用户
participant P as data-import
participant A as transaction API
participant S as POST /transactions/import
participant DB as MySQL
U->>P: 选择 JSON 文件
P->>P: uni.chooseFile / 读取文件内容
P->>P: 解析 JSON显示预览(条数、日期范围)
U->>P: 确认导入
P->>A: importTransactions(items)
A->>S: POST /transactions/import { items }
S->>S: 校验每条记录格式
S->>DB: 查询已有记录 (去重比对)
S->>DB: 批量 INSERT (每批100条)
S->>DB: 写入 transaction_tags (如有 tag_names)
S-->>A: { total, imported, skipped, errors }
A-->>P: 导入结果
P->>U: 显示导入结果(成功X条, 跳过Y条)
```
#### 4.3 标签关联交易
```mermaid
sequenceDiagram
participant U as 用户
participant P as add/index
participant TS as tagStore
participant TA as transaction API
participant S as POST /transactions
participant DB as MySQL
U->>P: 点击"添加标签"
P->>P: 显示标签选择面板(已有标签 + 新建入口)
U->>P: 选择标签(最多5个)
P->>P: selectedTagIds 更新
U->>P: 保存交易
P->>TA: createTransaction({...data, tagIds})
TA->>S: POST /transactions { amount, type, ..., tagIds }
S->>S: 校验 tagIds (≤5, 属于当前用户)
S->>DB: INSERT INTO transactions
S->>DB: INSERT INTO transaction_tags (批量)
S-->>TA: { id }
TA-->>P: 成功
Note over P,U: 编辑交易时同理PUT 全量替换 tagIds
```
#### 4.4 服务端导出
```mermaid
sequenceDiagram
participant U as 用户
participant P as profile/index
participant A as export API
participant S as GET /api/export
participant DB as MySQL
U->>P: 点击"服务端导出"
P->>A: serverExport(params)
A->>S: GET /api/export?startDate=&endDate=&type=&format=
S->>DB: SELECT COUNT(*) (判断数量)
alt 记录 < 10000
S->>DB: 流式查询 (cursor)
S->>S: Readable.from() 逐行生成 CSV/JSON
S-->>P: 流式响应 (Transfer-Encoding: chunked)
else 记录 ≥ 10000
S->>DB: 流式查询写入临时文件
S->>S: fs.createReadStream()
S-->>P: 流式响应
S->>S: 删除临时文件
end
P->>U: 保存文件到本地
```
---
### 5. 待明确事项
| # | 事项 | 当前假设 |
|---|------|---------|
| 1 | 备份下载的签名 URL 是通过新端点直接下载,还是返回签名 URL 让前端跳转? | 采用直接下载方式:`GET /api/backup/:id/download?token=xxx`,后端校验 token 后流式返回文件 |
| 2 | 年视图/周视图的 `month` 参数如何处理? | 新增 `period` 参数,当 `period=year``month` 参数被忽略,使用当前年份;当 `period=week` 时使用当前周 |
| 3 | 导入 JSON 的 `category_name` 匹配不到时如何处理? | 归入"未分类"category_id = NULL不自动创建分类 |
| 4 | 标签预设 8 色具体色值? | 复用现有 `colorOptions``#FF8C69, #7BC67E, #5B9BD5, #FFD700, #FF69B4, #8B5CF6, #F97316, #06B6D4` |
| 5 | 健康检查移到 authMiddleware 前是否影响安全? | `/api/health` 仅返回 DB 连接状态和服务器时间,不泄露敏感信息,安全无影响 |
| 6 | 数据导入文件大小限制? | 前端限制 5MB后端 `express.json({ limit: '5mb' })` 仅对导入端点放宽(当前全局 10kb |
---
## Part B: 任务分解
### 6. 需要新增的依赖包
#### 后端 (server)
```
无新增依赖
```
> 流式导出使用 Node.js 内置 `stream`、`fs`、`os` 模块CSV 拼装手写无需 `json2csv`,签名 URL 使用已有 `crypto` 模块。
#### 前端 (client)
```
无新增依赖
```
> 拖拽排序使用 Touch 事件自研实现,不引入第三方拖拽库。
---
### 7. 任务列表(按依赖顺序)
#### T01: 后端基础设施 + 数据库迁移
**描述**:新增 tags/transaction_tags 表、修改 health 端点位置、注册新路由模块、调整 express.json 限制。
**涉及文件**
- `server/src/db/schema.sql` — 新增 tags、transaction_tags 表定义
- `server/src/db/init.ts` — 新增迁移逻辑(创建 tags、transaction_tags 表)
- `server/src/index.ts` — health 移到 authMiddleware 前;注册 tag、export 路由;导入端点 body 限制调整
- `server/src/routes/tag.ts` — 新建:标签 CRUD 端点 + 按标签统计端点
- `server/src/routes/export.ts` — 新建:服务端流式导出端点
**依赖任务**:无
**优先级**P0
---
#### T02: 后端 API 改造(现有路由扩展)
**描述**:扩展现有路由以支持新功能——反馈 mine 端点、备份下载、交易 tagIds 支持、统计 period 参数。
**涉及文件**
- `server/src/routes/feedback.ts` — 新增 `GET /mine` 端点
- `server/src/routes/backup.ts` — 新增 `GET /:id/download` 端点(签名 URL 校验)
- `server/src/routes/transaction.ts` — POST/PUT 支持 tagIdsGET 支持 tagId 筛选GET/:id 返回 tags
- `server/src/routes/stats.ts` — category/trend 增加 period 参数week/year 视图)
**依赖任务**T01tags 表需先存在)
**优先级**P0
---
#### T03: 前端 API 层 + Store 层 + 新页面
**描述**:新增所有前端 API 函数和 Store创建新页面标签管理、备份管理、数据导入创建拖拽组件。
**涉及文件**
- `client/src/api/feedback.ts` — 新增 `getMyFeedbacks()`
- `client/src/api/backup.ts` — 新建:备份列表 + 下载 API
- `client/src/api/tag.ts` — 新建:标签 CRUD + 统计 API
- `client/src/api/export.ts` — 新建:服务端导出 API
- `client/src/api/health.ts` — 新建:健康检查 API
- `client/src/api/stats.ts` — 修改getCategoryStats/getTrend 支持 period
- `client/src/api/transaction.ts` — 新增 `importTransactions()`;类型扩展 tagIds/tagId
- `client/src/api/admin.ts` — 新增 `getHealth()`
- `client/src/stores/tag.ts` — 新建:标签 Pinia Store
- `client/src/stores/stats.ts` — 修改fetchCategoryStats/fetchTrend 支持 period
- `client/src/components/DragSortList/DragSortList.vue` — 新建:拖拽排序组件
- `client/src/pages/tag-manage/index.vue` — 新建:标签管理页面
- `client/src/pages/backup-manage/index.vue` — 新建:备份管理页面
- `client/src/pages/data-import/index.vue` — 新建:数据导入页面
- `client/src/pages.json` — 注册新页面路由
**依赖任务**T01需知 API 端点格式)
**优先级**P1
---
#### T04: 前端现有页面改造
**描述**:改造现有页面以集成新功能——分类拖拽、反馈列表、统计维度切换、标签入口、服务端导出、健康检查卡片。
**涉及文件**
- `client/src/pages/category-manage/index.vue` — 集成 DragSortList 拖拽排序
- `client/src/pages/feedback/index.vue` — 新增"我的反馈"Tab
- `client/src/pages/stats/index.vue` — 添加维度切换器(周/月/年)+ 标签统计入口
- `client/src/pages/profile/index.vue` — 导出面板增加"服务端导出"选项
- `client/src/pages/add/index.vue` — 添加标签选择入口
- `client/src/pages/bills/index.vue` — 添加标签筛选功能
- `client/src/pages/admin/index.vue` — 添加服务状态卡片30s 自动刷新)
**依赖任务**T03依赖 API 层和组件)
**优先级**P1
---
#### T05: 集成联调 + 边界处理
**描述**:前后端联调、边界场景处理(导入去重、大量数据导出、拖拽边界)、最终测试修复。
**涉及文件**
- 可能涉及 T01~T04 中所有文件的微调
- 重点:`server/src/routes/export.ts`(大量数据流式导出稳定性)
- 重点:`server/src/routes/transaction.ts`(导入去重逻辑)
- 重点:`client/src/components/DragSortList/DragSortList.vue`(拖拽边界场景)
**依赖任务**T04
**优先级**P2
---
### 8. 共享知识(跨文件约定)
```
- API 响应格式统一:{ code: 0, data: T } 成功;{ code: 5位数字, message: string } 失败
- 错误码约定:
- 40001: 参数无效
- 40002: 类型无效
- 40100: 未登录
- 40101: token过期
- 40300: 无权限
- 40400: 资源不存在
- 42900: 请求频繁
- 50000: 服务器内部错误
- 金额单位统一为"分"INT前端展示时 / 100
- 日期格式统一为 YYYY-MM-DD月份为 YYYY-MM
- 认证使用 HMAC-SHA256 TokenBearer 格式30天有效期
- 公开路径(无需认证):/api/auth/login, /api/auth/demo-login, /api/health, /api/backup/:id/downloadtoken 校验)
- 前端 request() 函数自动处理 401 重登录、错误 toast
- Pinia Store 方法命名fetch* (获取数据)、add/create (新增)、update (更新)、delete (删除)
- 前端 API 函数命名get* (GET), create*/submit* (POST), update*/sort* (PUT), delete* (DELETE)
- SCSS 变量:$primary=#FF8C69, $success=#7BC67E, $danger=#FF6B6B, $text=#2D1B1B, $surface=#FFFFFF, $bg=#FFF8F0
- 组件样式使用 scoped + @import '@/styles/mixins.scss'
- 标签预设 8 色:#FF8C69, #7BC67E, #5B9BD5, #FFD700, #FF69B4, #8B5CF6, #F97316, #06B6D4
- 每笔交易最多 5 个标签,每用户最多 20 个标签
- 导入文件限制 5MB导出流式响应超时 60s
- 分页参数page (从1开始), pageSize (默认20, 最大100)
```
---
### 9. 任务依赖图
```mermaid
graph LR
T01[T01: 后端基础设施+DB迁移] --> T02[T02: 后端API改造]
T01 --> T03[T03: 前端API+Store+新页面]
T02 --> T04[T04: 前端现有页面改造]
T03 --> T04
T04 --> T05[T05: 集成联调+边界处理]
```

View File

@@ -1,55 +0,0 @@
classDiagram
class Tag {
+int id
+int user_id
+string name
+string color
+string created_at
}
class TransactionTag {
+int transaction_id
+int tag_id
}
class Transaction {
+int id
+int user_id
+int amount
+string type
+int category_id
+string note
+string date
+int group_id
+int recurring_id
+Tag[] tags
}
class Feedback {
+int id
+int user_id
+string type
+string content
+string contact
+string status
+string admin_reply
+string created_at
}
class Category {
+int id
+int user_id
+string name
+string icon
+string color
+string type
+int sort_order
+int is_custom
}
Transaction "1" --o "*" TransactionTag : has
Tag "1" --o "*" TransactionTag : referenced_by
Transaction ..> Category : belongs_to
note for Tag "每用户最多 20 个标签\n8 色预设颜色选择器\n标签不区分收支类型"
note for TransactionTag "复合主键 (transaction_id, tag_id)\n每笔交易最多 5 个标签"

View File

@@ -1,254 +0,0 @@
# 小菜记账 — 前后端对齐增量 PRD
> 版本: v1.0 | 日期: 2026-07-11
> 类型: 增量 PRD仅包含变更部分
> 基线: 前后端对齐分析发现的 8 项差距
---
## 一、产品目标
| # | 目标 | 说明 |
|---|------|------|
| G1 | 消灭前后端差距,实现已开发后端能力的前端落地 | 后端已有排序、备份、健康检查等端点,但前端缺失对应 UI |
| G2 | 补齐用户反馈闭环,提升产品可信度 | 用户提交反馈后无法查看回复,体验断裂 |
| G3 | 扩展数据维度与吞吐能力 | 支持年度/周度统计、服务端导出、数据导入,为数据量增长做准备 |
---
## 二、用户故事
### P0 — 分类拖拽排序
> As a 用户, I want 在分类管理页面拖拽调整分类顺序, so that 常用分类排在前面,记账时选得更快。
### P1 — 反馈回复展示
> As a 用户, I want 查看自己提交的反馈列表及管理员回复, so that 我知道反馈是否被处理以及处理结果。
### P1 — 备份管理页面
> As a 管理员, I want 在前端触发备份、查看备份列表并下载备份文件, so that 我可以在出现问题时快速恢复数据。
### P2 — 统计年度/周视图
> As a 用户, I want 在统计页面切换年/周/月维度, so that 我可以从不同时间粒度分析收支趋势。
### P2 — 数据导入与服务端导出
> As a 用户, I want 导入 JSON 格式的交易数据, so that 我可以从其他记账工具迁移历史数据。
>
> As a 用户, I want 大数据量导出走服务端生成, so that 导出速度快、不卡顿。
### P3 — 健康检查
> As a 管理员, I want 在管理页面看到后端服务运行状态, so that 我能第一时间发现服务异常。
### P3 — 交易标签系统
> As a 用户, I want 给交易添加标签(如"出差""聚餐", so that 我可以按标签筛选和统计关联交易。
>
> As a 用户, I want 按标签筛选交易列表和查看标签维度的统计, so that 我可以追踪特定场景的收支。
---
## 三、需求池
### P0 — Must Have
| ID | 需求 | 前端 | 后端 | 验收标准 |
|----|------|------|------|----------|
| P0-1 | 分类拖拽排序 | 分类管理页面添加拖拽排序 UI拖拽结束后调用 `sortCategories(ids)` | 无新增(`PUT /categories/sort` 已实现) | 拖拽后顺序持久化;刷新页面顺序保持;支出/收入分类各自排序 |
### P1 — Should Have
| ID | 需求 | 前端 | 后端 | 验收标准 |
|----|------|------|------|----------|
| P1-1 | 用户反馈列表 | 反馈页面新增"我的反馈"Tab展示反馈列表及管理员回复 | 新增 `GET /feedback/mine` 端点(用户维度,返回当前用户的反馈+`admin_reply` | 用户只能看自己的反馈;未回复显示"待处理"状态;已回复显示回复内容和时间 |
| P1-2 | 备份管理页面 | 新增备份管理页面:触发备份按钮、备份列表、下载按钮 | 新增 `GET /backup/:id/download` 端点 | 管理员可触发备份并看到进度;列表显示备份时间和大小;点击下载获取备份文件 |
### P2 — Nice to Have
| ID | 需求 | 前端 | 后端 | 验收标准 |
|----|------|------|------|----------|
| P2-1 | 统计年度/周视图 | 统计页面添加维度切换器(周/月/年),切换后图表和排行联动更新 | `GET /stats/category``GET /stats/trend` 支持 `period=week|month|year` 参数,按对应维度聚合数据 | 周视图显示本周每日数据;年视图显示每月汇总;切换时图表平滑过渡 |
| P2-2 | 数据导入 | 我的页面新增"数据导入"入口;支持 JSON 文件上传;导入前预览数据条数,确认后提交 | 新增 `POST /api/transactions/import` 端点,接收 JSON 文件,校验格式,批量写入 | 支持 JSON 格式;导入前展示条数预览;重复数据(同日期/金额/分类)跳过并提示;导入完成显示成功/跳过计数 |
| P2-3 | 数据导出服务端化 | 数据导出页面新增"服务端导出"选项;大数据量(>1000条自动走服务端 | 新增 `GET /api/export` 端点,支持 CSV/JSON 格式,流式响应 | 客户端导出保留作为轻量选项;服务端导出无条数限制;下载进度可感知 |
### P3 — Nice to Have远期
| ID | 需求 | 前端 | 后端 | 验收标准 |
|----|------|------|------|----------|
| P3-1 | 健康检查展示 | 管理页面新增服务状态卡片,显示后端健康信息 | 将 `/api/health` 端点移到 authMiddleware 之前 | 管理页面实时显示服务状态(正常/异常);无需登录即可调用健康检查 |
| P3-2 | 交易标签 — 标签管理 | 新增标签管理页面:创建/编辑/删除标签(名称+颜色) | 新增 `tags` 表及 CRUD 端点(`GET/POST/PUT/DELETE /api/tags` | 每个用户独立标签;标签不可重名;删除标签时解绑关联交易 |
| P3-3 | 交易标签 — 交易关联 | 记账页面新增"添加标签"入口;交易详情/编辑页可修改标签 | `transactions` 表新增关联;`POST/PUT /transactions` 支持 `tagIds` 字段 | 一笔交易可关联多个标签;标签选择器展示用户已有标签 |
| P3-4 | 交易标签 — 标签筛选统计 | 账单页支持按标签筛选;统计页新增标签维度视图 | `GET /transactions` 支持 `tagId` 筛选参数;`GET /stats/by-tag` 新端点 | 筛选结果仅显示含指定标签的交易;标签统计展示各标签下收支总额 |
---
## 四、UI 交互说明
### P0-1 分类拖拽排序
```
分类管理页面category-manage/index.vue变更
1. 页面顶部新增提示栏:"长按拖拽可调整分类顺序"
2. 每个分类项左侧显示拖拽手柄图标Lucide GripVertical, #BFB3B3
3. 长按分类项300ms进入拖拽模式
- 被拖拽项 elevation 提升shadow-clay-float
- 背景色变为 #FFF0E6
- 其余项轻微缩进让出空间
4. 拖拽过程中实时交换位置(带 150ms 过渡动画)
5. 松手后:
- 调用 sortCategories(ids) 提交新顺序
- 成功:轻量 toast "排序已保存"
- 失败:回滚到原位置 + 错误提示
6. 支出/收入 Tab 各自独立排序,互不影响
```
### P1-1 用户反馈列表
```
反馈页面feedback/index.vue变更
1. 页面顶部新增 Tab 切换:"提交反馈" | "我的反馈"
2. "我的反馈" Tab 内容:
├── 列表按提交时间倒序排列
├── 每项显示:
│ ├── 反馈内容截断2行点击展开
│ ├── 提交时间(相对时间:"3天前"
│ ├── 状态标签:
│ │ ├── 待处理 → 灰色 #BFB3B3
│ │ ├── 已回复 → 绿色 #7BC67E
│ │ └── 已关闭 → 橙色 #FF8C69
│ └── 管理员回复区域(仅已回复时显示):
│ ├── 分割线 + "管理员回复" 标签
│ ├── 回复内容
│ └── 回复时间
└── 空状态:插画 + "还没有提交过反馈"
3. 下拉刷新更新列表
4. 上拉加载更多(分页)
```
### P1-2 备份管理页面
```
新增页面backup-manage/index.vue
1. 顶部操作区:
├── [立即备份] 主按钮Clay 风格)
├── 点击后按钮变为 loading 态
└── 成功后列表顶部新增一条记录 + toast "备份成功"
2. 备份列表:
├── 按时间倒序
├── 每项显示:
│ ├── 备份时间2026-07-11 14:30
│ ├── 文件大小12.3 MB
│ └── [下载] 按钮Lucide Download 图标)
├── 点击下载:
│ ├── 按钮变为进度条
│ └── 完成后 toast "下载完成"
└── 空状态:"暂无备份记录"
3. 仅管理员角色可见此页面入口
```
### P2-1 统计年度/周视图
```
统计页面stats/index.vue变更
1. 月份选择器升级为维度切换器:
├── 新增三个 Tab周 | 月 | 年
├── 样式同现有支出/收入切换器
└── 切换后日期选择器联动:
├── 周:显示 "2026年7月 第2周",左右切换周
├── 月:保持现有行为
└── 年:显示 "2026年",左右切换年
2. 图表联动更新:
├── 周维度:趋势图 X 轴为周一~周日
├── 年维度:趋势图 X 轴为1月~12月
└── 环形图和排行同步更新为对应维度数据
3. 概览卡片数值联动
```
### P2-2 & P2-3 数据导入与导出
```
我的页面变更 + 新增页面:
1. "数据导出"入口变更:
├── 点击后进入导出页面
├── 导出方式选择:
│ ├── 客户端导出(< 1000 条推荐)— 现有逻辑
│ └── 服务端导出(≥ 1000 条推荐)— 新增
├── 格式选择CSV | JSON
├── 日期范围选择器
└── [开始导出] 按钮
2. 新增"数据导入"入口(我的页面功能列表):
├── 点击后进入导入页面
├── 步骤流程:
│ ├── Step 1选择文件仅 .json
│ ├── Step 2预览 — 显示识别条数、日期范围、分类映射
│ ├── Step 3确认导入
│ └── 结果:成功 N 条 / 跳过 M 条
└── 导入模板下载链接
```
### P3-1 健康检查展示
```
管理页面变更:
1. 页面顶部新增服务状态卡片:
├── 正常:绿色圆点 + "服务运行正常" + 响应时间 "23ms"
├── 异常:红色圆点 + "服务异常" + 错误信息
└── 检测中:灰色圆点 + 旋转图标
2. 每 30 秒自动刷新一次
3. 点击卡片可手动刷新
```
### P3-2~4 交易标签系统
```
全局变更:
1. 记账页面add/index.vue
├── 附加信息区新增"添加标签"行
├── 点击弹出标签选择器(底部弹窗):
│ ├── 已有标签列表(可多选)
│ ├── 搜索框
│ └── [新建标签] 快捷入口
└── 已选标签以药丸标签形式展示在输入区
2. 账单页面bills/index.vue
├── 筛选栏新增标签筛选
└── 筛选弹窗中增加标签选择
3. 统计页面stats/index.vue
└── 新增"标签统计"卡片(环形图 + 排行)
4. 我的页面:
└── 功能列表新增"标签管理"入口
5. 标签管理页面tag-manage/index.vue— 新增:
├── 标签列表(名称 + 颜色色块 + 关联交易数)
├── [新建标签] 按钮
├── 编辑弹窗:名称输入 + 颜色选择器8色预设
└── 删除确认:关联 N 笔交易时提示"将解除关联"
```
---
## 五、待确认问题
| # | 问题 | 影响范围 | 建议 |
|---|------|----------|------|
| Q1 | 分类拖拽排序是否需要动画反馈?拖拽手柄位置(左侧还是右侧)? | P0-1 | 建议左侧手柄 + 长按触发,符合主流交互习惯 |
| Q2 | 用户反馈列表是否需要通知推送?当管理员回复后用户是否收到微信服务通知? | P1-1 | 后端已有通知逻辑,但微信订阅消息需用户主动订阅,建议先做页面内展示,通知作为后续增强 |
| Q3 | 备份文件的下载鉴权方式URL 是否需要时效性签名? | P1-2 | 建议使用临时签名 URL有效期 1 小时),避免备份文件被猜测 URL 直接访问 |
| Q4 | 统计年度视图的趋势图粒度:按月汇总还是按季汇总? | P2-1 | 建议按月汇总12 个点),季度可通过后续分组实现 |
| Q5 | 数据导入的 JSON 格式规范?是否需要支持其他记账 App 的导出格式? | P2-2 | 建议先定义小菜记账自有 JSON 格式,提供模板下载;其他 App 格式兼容作为远期需求 |
| Q6 | 服务端导出的文件存储方式:内存生成直接流式返回 vs 先写文件再下载? | P2-3 | 建议 < 1 万条内存流式返回,≥ 1 万条先写临时文件再下载,避免内存溢出 |
| Q7 | 交易标签上限:每笔交易最多关联几个标签?每个用户最多创建多少个标签? | P3-2~4 | 建议每笔交易最多 5 个标签,每用户最多 20 个标签,后续可调整 |
| Q8 | 标签与分类的关系:标签是否可以跨分类?同一标签能否同时用于支出和收入? | P3-2~4 | 建议标签不区分收支类型,跨分类使用,这是标签区别于分类的核心价值 |
---
*文档版本: v1.0 | 最后更新: 2026-07-11*

View File

@@ -1,53 +0,0 @@
sequenceDiagram
participant U as 用户
participant P as category-manage
participant D as DragSortList
participant S as categoryStore
participant A as sortCategories API
participant B as PUT /categories/sort
U->>P: 长按分类项进入排序模式
P->>P: showSortMode = true
P->>D: 渲染 DragSortList (items=currentCategories)
U->>D: touchstart (记录起始位置)
U->>D: touchmove (计算偏移, 交换元素位置)
D->>D: 实时更新 items 数组顺序
U->>D: touchend (拖拽结束)
D->>P: @change事件 (新顺序ids)
P->>S: sortCategories(newIds)
S->>A: sortCategories(ids)
A->>B: PUT /categories/sort { ids }
B-->>A: { code: 0 }
A-->>S: 成功
S->>S: fetchCategories() 刷新
%% 数据导入流程
U->>P2 as data-import: 选择 JSON 文件
P2->>P2: uni.chooseFile / 读取文件内容
P2->>P2: 解析 JSON显示预览(条数、日期范围)
U->>P2: 确认导入
P2->>A2 as transaction API: importTransactions(items)
A2->>S2 as POST /transactions/import: POST { items }
S2->>S2: 校验每条记录格式
S2->>DB as MySQL: 查询已有记录 (去重比对)
S2->>DB: 批量 INSERT (每批100条)
S2->>DB: 写入 transaction_tags (如有 tag_names)
S2-->>A2: { total, imported, skipped, errors }
A2-->>P2: 导入结果
P2->>U: 显示导入结果(成功X条, 跳过Y条)
%% 标签关联交易流程
U->>P3 as add/index: 点击"添加标签"
P3->>P3: 显示标签选择面板(已有标签 + 新建入口)
U->>P3: 选择标签(最多5个)
P3->>P3: selectedTagIds 更新
U->>P3: 保存交易
P3->>A3 as transaction API: createTransaction({...data, tagIds})
A3->>S3 as POST /transactions: POST { amount, type, ..., tagIds }
S3->>S3: 校验 tagIds (≤5, 属于当前用户)
S3->>DB: INSERT INTO transactions
S3->>DB: INSERT INTO transaction_tags (批量)
S3-->>A3: { id }
A3-->>P3: 成功

View File

@@ -277,40 +277,6 @@ async function runMigrations(conn: mysql.Connection) {
console.log('[DB] Migrating: adding recurring_id to transactions')
await conn.query("ALTER TABLE transactions ADD COLUMN recurring_id INT DEFAULT NULL COMMENT '关联的周期模板ID' AFTER group_id")
}
// 标签表
const hasTags = await tableExists(conn, 'tags')
if (!hasTags) {
console.log('[DB] Migrating: creating tags table')
await conn.query(`
CREATE TABLE IF NOT EXISTS tags (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
name VARCHAR(20) NOT NULL COMMENT '标签名称',
color VARCHAR(20) NOT NULL DEFAULT '#FF8C69' COMMENT '标签颜色',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uk_user_name (user_id, name),
INDEX idx_user (user_id),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
`)
}
// 交易-标签关联表
const hasTransactionTags = await tableExists(conn, 'transaction_tags')
if (!hasTransactionTags) {
console.log('[DB] Migrating: creating transaction_tags table')
await conn.query(`
CREATE TABLE IF NOT EXISTS transaction_tags (
transaction_id INT NOT NULL,
tag_id INT NOT NULL,
PRIMARY KEY (transaction_id, tag_id),
INDEX idx_tag (tag_id),
FOREIGN KEY (transaction_id) REFERENCES transactions(id) ON DELETE CASCADE,
FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
`)
}
}
export async function initDatabase() {

View File

@@ -170,23 +170,3 @@ CREATE TABLE IF NOT EXISTS recurring_templates (
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (category_id) REFERENCES categories(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE IF NOT EXISTS tags (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
name VARCHAR(20) NOT NULL COMMENT '标签名称',
color VARCHAR(20) NOT NULL DEFAULT '#FF8C69' COMMENT '标签颜色',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uk_user_name (user_id, name),
INDEX idx_user (user_id),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE IF NOT EXISTS transaction_tags (
transaction_id INT NOT NULL,
tag_id INT NOT NULL,
PRIMARY KEY (transaction_id, tag_id),
INDEX idx_tag (tag_id),
FOREIGN KEY (transaction_id) REFERENCES transactions(id) ON DELETE CASCADE,
FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

View File

@@ -24,8 +24,6 @@ import configRoutes from './routes/config'
import trackRoutes from './routes/track'
import logsRoutes from './routes/logs'
import recurringRoutes from './routes/recurring'
import tagRoutes from './routes/tag'
import exportRoutes from './routes/export'
import { backupDatabase } from './utils/backup'
// Warn if token secret is using default fallback
@@ -52,7 +50,7 @@ app.use(cors({
},
credentials: true,
}))
app.use(express.json({ limit: '5mb' }))
app.use(express.json({ limit: '10kb' }))
// 请求日志
app.use(requestLogger)
@@ -147,28 +145,6 @@ app.get('/api/notifications/image/:filename', async (req, res) => {
}
})
// 健康检查端点(公开,不经过 auth 中间件)
app.get('/api/health', async (_req, res) => {
try {
await pool.query('SELECT 1')
res.json({
status: 'ok',
db: 'connected',
uptime: Math.floor(process.uptime()),
version: process.env.npm_package_version || '1.0.0',
timestamp: new Date().toISOString()
})
} catch {
res.status(503).json({
status: 'error',
db: 'disconnected',
uptime: Math.floor(process.uptime()),
version: process.env.npm_package_version || '1.0.0',
timestamp: new Date().toISOString()
})
}
})
app.use(authMiddleware)
app.use('/api/auth', authLimiter, authRoutes)
@@ -187,8 +163,15 @@ app.use('/api/config', apiLimiter, configRoutes)
app.use('/api/track', apiLimiter, trackRoutes)
app.use('/api/logs', apiLimiter, logsRoutes)
app.use('/api/recurring', apiLimiter, recurringRoutes)
app.use('/api/tags', apiLimiter, tagRoutes)
app.use('/api/export', apiLimiter, exportRoutes)
app.get('/api/health', async (_req, res) => {
try {
await pool.query('SELECT 1')
res.json({ status: 'ok', db: 'connected', time: new Date().toISOString() })
} catch {
res.status(503).json({ status: 'error', db: 'disconnected', time: new Date().toISOString() })
}
})
// 全局错误处理中间件(兜底未捕获的异常)
app.use((err: any, _req: express.Request, res: express.Response, _next: express.NextFunction) => {

View File

@@ -2,74 +2,11 @@ import { Router, Response } from 'express'
import { AuthRequest } from '../middleware/auth'
import { backupDatabase, getBackupList } from '../utils/backup'
import { requireAdmin } from '../middleware/requireAdmin'
import { createHmac } from 'crypto'
import fs from 'fs'
import path from 'path'
const router = Router()
const BACKUP_DIR = process.env.BACKUP_DIR || '/var/backups/xiaocai'
const JWT_SECRET = process.env.JWT_SECRET || 'xiaocai-secret'
// 所有路由都需要管理员权限(除了 :id/download 使用签名校验)
router.use((req, res, next) => {
// /:id/download 不走 requireAdmin自行校验签名
if (req.path.match(/^\/\d+\/download$/)) {
return next()
}
requireAdmin(req, res, next)
})
// 下载备份文件(签名 token 校验,不走 authMiddleware
router.get('/:id/download', async (req: AuthRequest, res: Response) => {
try {
const token = req.query.token as string
if (!token) {
return res.status(400).json({ code: 40001, message: '缺少下载令牌' })
}
// 解析 tokenbackupId:timestamp:hmac
const parts = token.split(':')
if (parts.length !== 3) {
return res.status(400).json({ code: 40001, message: '令牌格式无效' })
}
const [backupId, timestamp, hmac] = parts
// 校验 timestamp 未过期1小时内
const ts = parseInt(timestamp)
if (isNaN(ts) || Date.now() - ts > 3600000) {
return res.status(400).json({ code: 40001, message: '令牌已过期' })
}
// 校验 HMAC
const expectedHmac = createHmac('sha256', JWT_SECRET)
.update(`${backupId}:${timestamp}`)
.digest('hex')
if (hmac !== expectedHmac) {
return res.status(403).json({ code: 40300, message: '令牌签名无效' })
}
// 校验 backupId 存在于备份列表中
const list = getBackupList()
const backup = list.find(b => b.name === backupId)
if (!backup) {
return res.status(404).json({ code: 40400, message: '备份不存在' })
}
// 流式返回备份文件
const filepath = path.join(BACKUP_DIR, backup.name)
if (!fs.existsSync(filepath)) {
return res.status(404).json({ code: 40400, message: '备份文件不存在' })
}
res.setHeader('Content-Type', 'application/gzip')
res.setHeader('Content-Disposition', `attachment; filename=${backup.name}`)
fs.createReadStream(filepath).pipe(res)
} catch (err) {
console.error('[Backup] download error:', err)
res.status(500).json({ code: 50000, message: '下载失败' })
}
})
// 所有路由都需要管理员权限
router.use((req, res, next) => requireAdmin(req, res, next))
// 手动触发备份
router.post('/', async (req: AuthRequest, res: Response) => {
@@ -86,45 +23,11 @@ router.post('/', async (req: AuthRequest, res: Response) => {
router.get('/', async (req: AuthRequest, res: Response) => {
try {
const list = getBackupList()
// 为每条记录生成下载令牌
const listWithToken = list.map(item => {
const timestamp = Date.now()
const hmac = createHmac('sha256', JWT_SECRET)
.update(`${item.name}:${timestamp}`)
.digest('hex')
return {
...item,
downloadToken: `${item.name}:${timestamp}:${hmac}`
}
})
res.json({ code: 0, data: listWithToken })
res.json({ code: 0, data: list })
} catch (err) {
console.error('[Backup] 获取列表失败:', err)
res.status(500).json({ code: 50000, message: '获取备份列表失败' })
}
})
// 删除备份
router.delete('/:id', async (req: AuthRequest, res: Response) => {
try {
const backupName = req.params.id
const list = getBackupList()
const backup = list.find(b => b.name === backupName)
if (!backup) {
return res.status(404).json({ code: 40400, message: '备份不存在' })
}
// 删除备份文件
const filepath = path.join(BACKUP_DIR, backup.name)
if (fs.existsSync(filepath)) {
fs.unlinkSync(filepath)
}
res.json({ code: 0 })
} catch (err) {
console.error('[Backup] 删除备份失败:', err)
res.status(500).json({ code: 50000, message: '删除备份失败' })
}
})
export default router

View File

@@ -1,231 +0,0 @@
import { Router, Response } from 'express'
import pool from '../db/connection'
import { AuthRequest } from '../middleware/auth'
import { Readable } from 'stream'
import { pipeline } from 'stream/promises'
import fs from 'fs'
import os from 'os'
import path from 'path'
const router = Router()
const VALID_TYPES = ['expense', 'income', 'all']
const VALID_FORMATS = ['csv', 'json']
const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/
const LARGE_DATA_THRESHOLD = 10000
const EXPORT_TIMEOUT = 60000
/** 流式导出交易数据 */
router.get('/', async (req: AuthRequest, res: Response) => {
try {
// 支持 query token 认证:如果没有 Authorization header从 query.token 读取
if (!req.headers.authorization && req.query.token) {
req.headers.authorization = `Bearer ${req.query.token}`
}
const { startDate, endDate, type = 'all', format = 'csv' } = req.query
// 参数校验
if (!startDate || !endDate || !DATE_REGEX.test(startDate as string) || !DATE_REGEX.test(endDate as string)) {
return res.status(400).json({ code: 40001, message: '日期参数无效' })
}
if (!VALID_TYPES.includes(type as string)) {
return res.status(400).json({ code: 40001, message: '类型参数无效' })
}
if (!VALID_FORMATS.includes(format as string)) {
return res.status(400).json({ code: 40001, message: '格式参数无效' })
}
const isCsv = format === 'csv'
const today = new Date().toISOString().slice(0, 10).replace(/-/g, '')
const filename = isCsv ? `export_${today}.csv` : `export_${today}.json`
// 构建查询条件
let where = 'WHERE t.user_id = ? AND t.date >= ? AND t.date <= ?'
const params: any[] = [req.userId, startDate, endDate]
if (type !== 'all') {
where += ' AND t.type = ?'
params.push(type)
}
// 先统计数量
const [countResult] = await pool.query(
`SELECT COUNT(*) as total FROM transactions t ${where}`,
params
)
const total = (countResult as any[])[0].total
if (total === 0) {
// 空数据直接返回
if (isCsv) {
res.setHeader('Content-Type', 'text/csv; charset=utf-8')
res.setHeader('Content-Disposition', `attachment; filename=${filename}`)
res.send('\uFEFF日期,类型,分类,金额,备注\n')
} else {
res.setHeader('Content-Type', 'application/json; charset=utf-8')
res.setHeader('Content-Disposition', `attachment; filename=${filename}`)
res.send('[]')
}
return
}
// 设置响应头
if (isCsv) {
res.setHeader('Content-Type', 'text/csv; charset=utf-8')
} else {
res.setHeader('Content-Type', 'application/json; charset=utf-8')
}
res.setHeader('Content-Disposition', `attachment; filename=${filename}`)
// 超时保护
const timeout = setTimeout(() => {
if (!res.writableEnded) {
res.end()
}
}, EXPORT_TIMEOUT)
if (total < LARGE_DATA_THRESHOLD) {
// 小数据量:内存流
const [rows] = await pool.query(
`SELECT DATE_FORMAT(t.date, '%Y-%m-%d') as date, t.type,
COALESCE(c.name, '未分类') as category_name,
t.amount, COALESCE(t.note, '') as note
FROM transactions t
LEFT JOIN categories c ON t.category_id = c.id
${where}
ORDER BY t.date ASC, t.created_at ASC`,
params
)
const data = rows as any[]
const readable = new Readable({
read() {}
})
if (isCsv) {
readable.push('\uFEFF日期,类型,分类,金额,备注\n')
for (const row of data) {
const note = String(row.note).replace(/"/g, '""')
const typeLabel = row.type === 'expense' ? '支出' : '收入'
readable.push(`${row.date},${typeLabel},${row.category_name},${row.amount},"${note}"\n`)
}
} else {
readable.push('[')
for (let i = 0; i < data.length; i++) {
const row = data[i]
const entry = JSON.stringify({
date: row.date,
type: row.type,
category: row.category_name,
amount: row.amount,
note: row.note
})
readable.push(i === 0 ? entry : ',' + entry)
}
readable.push(']')
}
readable.push(null)
readable.on('end', () => {
clearTimeout(timeout)
})
readable.on('error', () => {
clearTimeout(timeout)
})
readable.on('close', () => {
clearTimeout(timeout)
})
readable.pipe(res)
} else {
// 大数据量:临时文件流
const tmpDir = os.tmpdir()
const tmpFile = path.join(tmpDir, `export_${Date.now()}_${req.userId}.${format}`)
// 分批查询并写入临时文件
const BATCH_SIZE = 5000
let offset = 0
const writeStream = fs.createWriteStream(tmpFile, { encoding: 'utf-8' })
if (isCsv) {
writeStream.write('\uFEFF日期,类型,分类,金额,备注\n')
} else {
writeStream.write('[')
}
let isFirst = true
while (offset < total) {
const [rows] = await pool.query(
`SELECT DATE_FORMAT(t.date, '%Y-%m-%d') as date, t.type,
COALESCE(c.name, '未分类') as category_name,
t.amount, COALESCE(t.note, '') as note
FROM transactions t
LEFT JOIN categories c ON t.category_id = c.id
${where}
ORDER BY t.date ASC, t.created_at ASC
LIMIT ? OFFSET ?`,
[...params, BATCH_SIZE, offset]
)
const data = rows as any[]
for (const row of data) {
if (isCsv) {
const note = String(row.note).replace(/"/g, '""')
const typeLabel = row.type === 'expense' ? '支出' : '收入'
writeStream.write(`${row.date},${typeLabel},${row.category_name},${row.amount},"${note}"\n`)
} else {
const entry = JSON.stringify({
date: row.date,
type: row.type,
category: row.category_name,
amount: row.amount,
note: row.note
})
writeStream.write(isFirst ? entry : ',' + entry)
isFirst = false
}
}
offset += BATCH_SIZE
}
if (!isCsv) {
writeStream.write(']')
}
writeStream.end()
// 等待写入完成
await new Promise<void>((resolve, reject) => {
writeStream.on('finish', resolve)
writeStream.on('error', reject)
})
// 流式返回临时文件
const readStream = fs.createReadStream(tmpFile, { encoding: 'utf-8' })
const cleanup = () => {
clearTimeout(timeout)
// 删除临时文件
fs.unlink(tmpFile, (err) => {
if (err) console.error('[Export] 删除临时文件失败:', err)
})
}
readStream.on('end', cleanup)
readStream.on('error', cleanup)
readStream.on('close', cleanup)
await pipeline(readStream, res)
}
} catch (err) {
console.error('[Export] GET error:', err)
if (!res.headersSent) {
res.status(500).json({ code: 50000, message: '服务器错误' })
} else {
res.end()
}
}
})
export default router

View File

@@ -5,36 +5,6 @@ import { requireAdmin } from '../middleware/requireAdmin'
const router = Router()
/** 当前用户的反馈列表 */
router.get('/mine', authMiddleware, async (req, res) => {
try {
const userId = (req as any).userId
const page = Math.max(1, parseInt(req.query.page as string) || 1)
const pageSize = Math.min(100, Math.max(1, parseInt(req.query.pageSize as string) || 20))
const offset = (page - 1) * pageSize
const [countResult] = await pool.execute(
'SELECT COUNT(*) as total FROM feedbacks WHERE user_id = ?',
[userId]
)
const total = (countResult as any[])[0].total
const [rows] = await pool.execute(
`SELECT id, type, content, contact, status, admin_reply, created_at
FROM feedbacks
WHERE user_id = ?
ORDER BY created_at DESC
LIMIT ? OFFSET ?`,
[userId, pageSize, offset]
)
res.json({ code: 0, data: { list: rows, total, page, pageSize } })
} catch (error) {
console.error('Get my feedback error:', error)
res.status(500).json({ code: 50000, message: '获取失败' })
}
})
/** 用户提交反馈 */
router.post('/', authMiddleware, async (req, res) => {
try {
@@ -82,15 +52,15 @@ router.get('/', requireAdmin, async (req, res) => {
)
const total = (countResult as any[])[0].total
// LIMIT/OFFSET 使用参数化查询
// LIMIT/OFFSET 直接嵌入 SQLexecute 对参数类型要求严格)
const [rows] = await pool.execute(
`SELECT f.*, u.nickname, u.avatar_url
FROM feedbacks f
LEFT JOIN users u ON f.user_id = u.id
WHERE ${where}
ORDER BY f.created_at DESC
LIMIT ? OFFSET ?`,
[...params, pageSize, offset]
LIMIT ${pageSize} OFFSET ${offset}`,
params
)
res.json({ code: 0, data: { list: rows, total, page, pageSize } })

View File

@@ -5,7 +5,6 @@ import { getCurrentMonth, getMonthRange } from '../utils/date'
const router = Router()
const VALID_TYPES = ['expense', 'income']
const VALID_PERIODS = ['week', 'month', 'year']
/** 根据 group_id 参数构建 WHERE 条件(含成员验证) */
async function buildWhereClause(
@@ -104,40 +103,14 @@ router.get('/overview', async (req: AuthRequest, res: Response) => {
router.get('/category', async (req: AuthRequest, res: Response) => {
try {
const { month, type = 'expense', group_id, period = 'month' } = req.query
const { month, type = 'expense', group_id } = req.query
if (!VALID_TYPES.includes(type as string)) {
return res.status(400).json({ code: 40002, message: '类型无效' })
}
if (!VALID_PERIODS.includes(period as string)) {
return res.status(400).json({ code: 40001, message: 'period参数无效仅支持week/month/year' })
}
let startDate: string
let endDate: string
const now = new Date()
const m = (month as string) || getCurrentMonth()
if (period === 'week') {
// 本周一到本周日
const dayOfWeek = now.getDay() || 7
const monday = new Date(now)
monday.setDate(now.getDate() - dayOfWeek + 1)
const sunday = new Date(monday)
sunday.setDate(monday.getDate() + 6)
startDate = monday.toISOString().slice(0, 10)
endDate = sunday.toISOString().slice(0, 10)
} else if (period === 'year') {
const year = m.split('-')[0] || String(now.getFullYear())
startDate = `${year}-01-01`
endDate = `${year}-12-31`
} else {
// month默认
const range = getMonthRange(m)
if (!range) return res.status(400).json({ code: 40001, message: '月份格式无效' })
startDate = range.startDate
endDate = range.endDate
}
const range = getMonthRange(m)
if (!range) return res.status(400).json({ code: 40001, message: '月份格式无效' })
const { startDate, endDate } = range
const result = await buildWhereClause(
req.userId,
@@ -165,57 +138,14 @@ router.get('/category', async (req: AuthRequest, res: Response) => {
router.get('/trend', async (req: AuthRequest, res: Response) => {
try {
const { month, type = 'expense', group_id, period = 'month' } = req.query
const { month, type = 'expense', group_id } = req.query
if (!VALID_TYPES.includes(type as string)) {
return res.status(400).json({ code: 40002, message: '类型无效' })
}
if (!VALID_PERIODS.includes(period as string)) {
return res.status(400).json({ code: 40001, message: 'period参数无效仅支持week/month/year' })
}
let startDate: string
let endDate: string
let groupBy: string
let labelExpr: string
const now = new Date()
const m = (month as string) || getCurrentMonth()
if (period === 'week') {
// 本周一到本周日
const dayOfWeek = now.getDay() || 7
const monday = new Date(now)
monday.setDate(now.getDate() - dayOfWeek + 1)
const sunday = new Date(monday)
sunday.setDate(monday.getDate() + 6)
startDate = monday.toISOString().slice(0, 10)
endDate = sunday.toISOString().slice(0, 10)
groupBy = 't.date'
labelExpr = `CASE DAYOFWEEK(t.date)
WHEN 1 THEN '周日'
WHEN 2 THEN '周一'
WHEN 3 THEN '周二'
WHEN 4 THEN '周三'
WHEN 5 THEN '周四'
WHEN 6 THEN '周五'
WHEN 7 THEN '周六'
END`
} else if (period === 'year') {
// 当年1月1日到12月31日
const year = m.split('-')[0] || String(now.getFullYear())
startDate = `${year}-01-01`
endDate = `${year}-12-31`
groupBy = "DATE_FORMAT(t.date, '%Y-%m')"
labelExpr = `CONCAT(MONTH(t.date), '月')`
} else {
// month默认
const range = getMonthRange(m)
if (!range) return res.status(400).json({ code: 40001, message: '月份格式无效' })
startDate = range.startDate
endDate = range.endDate
groupBy = 't.date'
labelExpr = `CONCAT(DAY(t.date), '日')`
}
const range = getMonthRange(m)
if (!range) return res.status(400).json({ code: 40001, message: '月份格式无效' })
const { startDate, endDate } = range
const result = await buildWhereClause(
req.userId,
@@ -225,10 +155,10 @@ router.get('/trend', async (req: AuthRequest, res: Response) => {
if (!result) return res.status(403).json({ code: 40300, message: '无权访问此群组' })
const [rows] = await pool.query(
`SELECT DATE_FORMAT(t.date, '%Y-%m-%d') as date, ${labelExpr} as label, SUM(t.amount) as amount
`SELECT DATE_FORMAT(t.date, '%Y-%m-%d') as date, SUM(t.amount) as amount
FROM transactions t
${result.where}
GROUP BY ${groupBy}
GROUP BY t.date
ORDER BY t.date`,
[...result.params, type, startDate, endDate]
)

View File

@@ -1,216 +0,0 @@
import { Router, Response } from 'express'
import pool from '../db/connection'
import { AuthRequest } from '../middleware/auth'
import { getCurrentMonth, getMonthRange } from '../utils/date'
const router = Router()
const VALID_COLORS = ['#FF8C69', '#7BC67E', '#5B9BD5', '#FFD700', '#FF69B4', '#8B5CF6', '#F97316', '#06B6D4']
const MAX_TAGS_PER_USER = 20
const MAX_TAG_NAME_LENGTH = 20
/** 获取当前用户所有标签 */
router.get('/', async (req: AuthRequest, res: Response) => {
try {
const [rows] = await pool.query(
'SELECT id, user_id, name, color, created_at FROM tags WHERE user_id = ? ORDER BY created_at ASC',
[req.userId]
)
res.json({ code: 0, data: { list: rows } })
} catch (err) {
console.error('[Tag] GET error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
/** 创建标签 */
router.post('/', async (req: AuthRequest, res: Response) => {
try {
const { name, color } = req.body
if (!name || typeof name !== 'string' || !name.trim()) {
return res.status(400).json({ code: 40001, message: '标签名称不能为空' })
}
const trimmedName = name.trim()
if (trimmedName.length > MAX_TAG_NAME_LENGTH) {
return res.status(400).json({ code: 40001, message: '标签名称不能超过20个字符' })
}
if (!color || typeof color !== 'string' || !VALID_COLORS.includes(color)) {
return res.status(400).json({ code: 40001, message: '标签颜色无效' })
}
// 检查用户标签数量限制
const [countResult] = await pool.query(
'SELECT COUNT(*) as cnt FROM tags WHERE user_id = ?',
[req.userId]
)
if ((countResult as any[])[0].cnt >= MAX_TAGS_PER_USER) {
return res.status(400).json({ code: 40001, message: '标签数量已达上限20个' })
}
// 检查同名标签
const [existResult] = await pool.query(
'SELECT id FROM tags WHERE user_id = ? AND name = ?',
[req.userId, trimmedName]
)
if ((existResult as any[]).length > 0) {
return res.status(400).json({ code: 40001, message: '标签名称已存在' })
}
const [result] = await pool.query(
'INSERT INTO tags (user_id, name, color) VALUES (?, ?, ?)',
[req.userId, trimmedName, color]
)
res.json({ code: 0, data: { id: (result as any).insertId } })
} catch (err) {
console.error('[Tag] POST error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
/** 更新标签 */
router.put('/:id', async (req: AuthRequest, res: Response) => {
try {
const { id } = req.params
const { name, color } = req.body
// 校验标签属于当前用户
const [existRows] = await pool.query(
'SELECT id FROM tags WHERE id = ? AND user_id = ?',
[id, req.userId]
)
if ((existRows as any[]).length === 0) {
return res.status(404).json({ code: 40400, message: '标签不存在' })
}
const updates: string[] = []
const params: any[] = []
if (name !== undefined) {
if (typeof name !== 'string' || !name.trim()) {
return res.status(400).json({ code: 40001, message: '标签名称不能为空' })
}
const trimmedName = name.trim()
if (trimmedName.length > MAX_TAG_NAME_LENGTH) {
return res.status(400).json({ code: 40001, message: '标签名称不能超过20个字符' })
}
// 检查同名标签(排除自身)
const [dupRows] = await pool.query(
'SELECT id FROM tags WHERE user_id = ? AND name = ? AND id != ?',
[req.userId, trimmedName, id]
)
if ((dupRows as any[]).length > 0) {
return res.status(400).json({ code: 40001, message: '标签名称已存在' })
}
updates.push('name = ?')
params.push(trimmedName)
}
if (color !== undefined) {
if (!VALID_COLORS.includes(color)) {
return res.status(400).json({ code: 40001, message: '标签颜色无效' })
}
updates.push('color = ?')
params.push(color)
}
if (updates.length === 0) {
return res.status(400).json({ code: 40001, message: '缺少更新内容' })
}
params.push(id)
await pool.query(
`UPDATE tags SET ${updates.join(', ')} WHERE id = ?`,
params
)
res.json({ code: 0 })
} catch (err) {
console.error('[Tag] PUT error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
/** 删除标签 */
router.delete('/:id', async (req: AuthRequest, res: Response) => {
try {
const { id } = req.params
// 校验标签属于当前用户(级联删除 transaction_tags 由外键处理)
const [result] = await pool.query(
'DELETE FROM tags WHERE id = ? AND user_id = ?',
[id, req.userId]
)
if ((result as any).affectedRows === 0) {
return res.status(404).json({ code: 40400, message: '标签不存在' })
}
res.json({ code: 0 })
} catch (err) {
console.error('[Tag] DELETE error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
/** 按标签统计 */
router.get('/stats/by-tag', async (req: AuthRequest, res: Response) => {
try {
const { month, period = 'month', type = 'expense' } = req.query
if (!['expense', 'income'].includes(type as string)) {
return res.status(400).json({ code: 40001, message: '类型无效' })
}
let startDate: string
let endDate: string
const now = new Date()
const m = (month as string) || getCurrentMonth()
if (period === 'week') {
// 本周一到本周日
const dayOfWeek = now.getDay() || 7 // 周日=7
const monday = new Date(now)
monday.setDate(now.getDate() - dayOfWeek + 1)
const sunday = new Date(monday)
sunday.setDate(monday.getDate() + 6)
startDate = monday.toISOString().slice(0, 10)
endDate = sunday.toISOString().slice(0, 10)
} else if (period === 'year') {
// 当年1月1日到12月31日
const year = now.getFullYear()
startDate = `${year}-01-01`
endDate = `${year}-12-31`
} else {
// month默认
const range = getMonthRange(m)
if (!range) return res.status(400).json({ code: 40001, message: '月份格式无效' })
startDate = range.startDate
endDate = range.endDate
}
const [rows] = await pool.query(
`SELECT tg.id, tg.name, tg.color,
COALESCE(SUM(t.amount), 0) as amount,
COUNT(DISTINCT t.id) as count
FROM tags tg
LEFT JOIN transaction_tags tt ON tg.id = tt.tag_id
LEFT JOIN transactions t ON tt.transaction_id = t.id AND t.type = ? AND t.date >= ? AND t.date <= ?
WHERE tg.user_id = ?
GROUP BY tg.id, tg.name, tg.color
HAVING count > 0
ORDER BY amount DESC`,
[type, startDate, endDate, req.userId]
)
res.json({ code: 0, data: { list: rows } })
} catch (err) {
console.error('[Tag] stats/by-tag error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
export default router

View File

@@ -33,17 +33,6 @@ router.get('/:id', async (req: AuthRequest, res: Response) => {
if (!tx) {
return res.status(404).json({ code: 40400, message: '记录不存在' })
}
// 查询关联的标签
const [tagRows] = await pool.query(
`SELECT tg.id, tg.name, tg.color
FROM transaction_tags tt
INNER JOIN tags tg ON tt.tag_id = tg.id
WHERE tt.transaction_id = ?`,
[req.params.id]
)
tx.tags = tagRows
res.json({ code: 0, data: tx })
} catch (err) {
console.error('[Transaction] GET by ID error:', err)
@@ -53,7 +42,7 @@ router.get('/:id', async (req: AuthRequest, res: Response) => {
router.get('/', async (req: AuthRequest, res: Response) => {
try {
const { page, pageSize, type, startDate, endDate, sortBy, group_id, category_id, category_ids, minAmount, maxAmount, keyword, tagId } = req.query
const { page, pageSize, type, startDate, endDate, sortBy, group_id, category_id, category_ids, minAmount, maxAmount, keyword } = req.query
const pSize = safeInt(pageSize, 20, 1, 100)
const pNum = safeInt(page, 1, 1, 99999)
const offset = (pNum - 1) * pSize
@@ -116,17 +105,6 @@ router.get('/', async (req: AuthRequest, res: Response) => {
where += ' AND t.note LIKE ?'; params.push(`%${escapedKeyword}%`)
}
// 标签筛选
let tagJoin = ''
if (tagId) {
const tid = parseInt(tagId as string)
if (!isNaN(tid)) {
tagJoin = ' INNER JOIN transaction_tags tt_filter ON t.id = tt_filter.transaction_id'
where += ' AND tt_filter.tag_id = ?'
params.push(tid)
}
}
const orderBy = sortBy === 'amount' ? 't.amount DESC' : 't.date DESC, t.created_at DESC'
const [rows] = await pool.query(
@@ -136,7 +114,6 @@ router.get('/', async (req: AuthRequest, res: Response) => {
FROM transactions t
LEFT JOIN categories c ON t.category_id = c.id
LEFT JOIN users u ON t.user_id = u.id
${tagJoin}
${where}
ORDER BY ${orderBy}
LIMIT ? OFFSET ?`,
@@ -144,7 +121,7 @@ router.get('/', async (req: AuthRequest, res: Response) => {
)
const [countResult] = await pool.query(
`SELECT COUNT(*) as total FROM transactions t ${tagJoin} ${where}`,
`SELECT COUNT(*) as total FROM transactions t ${where}`,
params
)
@@ -153,7 +130,7 @@ router.get('/', async (req: AuthRequest, res: Response) => {
`SELECT
COALESCE(SUM(CASE WHEN t.type = 'expense' THEN t.amount ELSE 0 END), 0) as totalExpense,
COALESCE(SUM(CASE WHEN t.type = 'income' THEN t.amount ELSE 0 END), 0) as totalIncome
FROM transactions t ${tagJoin} ${where}`,
FROM transactions t ${where}`,
params
)
@@ -176,7 +153,7 @@ router.get('/', async (req: AuthRequest, res: Response) => {
router.post('/', async (req: AuthRequest, res: Response) => {
try {
const { amount, type, category_id, note, date, group_id, tagIds } = req.body
const { amount, type, category_id, note, date, group_id } = req.body
if (amount === undefined || amount === null || typeof amount !== 'number' || !Number.isInteger(amount) || amount <= 0 || amount > 999999999) {
return res.status(400).json({ code: 40001, message: '金额必须为1-999999999之间的正整数单位' })
}
@@ -205,170 +182,21 @@ router.post('/', async (req: AuthRequest, res: Response) => {
}
}
// 校验 tagIds
let validTagIds: number[] = []
if (tagIds && Array.isArray(tagIds)) {
if (tagIds.length > 5) {
return res.status(400).json({ code: 40001, message: '标签数量不能超过5个' })
}
const numTagIds = tagIds.map((id: any) => Number(id)).filter((id: number) => Number.isInteger(id) && id > 0)
if (numTagIds.length > 0) {
// 校验标签属于当前用户
const [tagRows] = await pool.query(
`SELECT id FROM tags WHERE id IN (${numTagIds.map(() => '?').join(',')}) AND user_id = ?`,
[...numTagIds, req.userId]
)
validTagIds = (tagRows as any[]).map(r => r.id)
}
}
const [result] = await pool.query(
'INSERT INTO transactions (user_id, amount, type, category_id, note, date, group_id) VALUES (?, ?, ?, ?, ?, ?, ?)',
[req.userId, amount, type, category_id || null, note || null, date, validGroupId]
)
const conn = await pool.getConnection()
try {
await conn.beginTransaction()
const [result] = await conn.query(
'INSERT INTO transactions (user_id, amount, type, category_id, note, date, group_id) VALUES (?, ?, ?, ?, ?, ?, ?)',
[req.userId, amount, type, category_id || null, note || null, date, validGroupId]
)
const insertId = (result as any).insertId
// 批量插入 transaction_tags
if (validTagIds.length > 0) {
const values = validTagIds.map(tagId => [insertId, tagId])
await conn.query(
`INSERT INTO transaction_tags (transaction_id, tag_id) VALUES ${values.map(() => '(?, ?)').join(', ')}`,
values.flat()
)
}
await conn.commit()
res.json({ code: 0, data: { id: insertId } })
} catch (err) {
await conn.rollback()
throw err
} finally {
conn.release()
}
res.json({ code: 0, data: { id: (result as any).insertId } })
} catch (err) {
console.error('[Transaction] POST error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
// POST /import 必须在 /:id 之前注册,避免 Express 将 "import" 误当作 :id 参数
router.post('/import', async (req: AuthRequest, res: Response) => {
try {
const { transactions } = req.body
if (!Array.isArray(transactions) || transactions.length === 0) {
return res.status(400).json({ code: 40001, message: '缺少交易数据' })
}
if (transactions.length > 1000) {
return res.status(400).json({ code: 40001, message: '单次导入不能超过1000条' })
}
// 逐条校验 & 去重
const validItems: Array<{ date: string; type: string; category_name: string; amount: number; note: string }> = []
const seen = new Set<string>()
let skipped = 0
for (const item of transactions) {
// 校验必填字段
if (!item.date || !item.type || item.amount === undefined || item.amount === null) {
skipped++
continue
}
// 校验日期格式
if (!DATE_REGEX.test(String(item.date))) {
skipped++
continue
}
// 校验类型
if (!VALID_TYPES.includes(item.type)) {
skipped++
continue
}
// 校验金额
const amt = Number(item.amount)
if (isNaN(amt) || !Number.isInteger(amt) || amt <= 0 || amt > 999999999) {
skipped++
continue
}
// 去重:按 date+type+amount+note 组合判重
const noteVal = item.note ? String(item.note).slice(0, 200) : ''
const dedupeKey = `${item.date}:${item.type}:${amt}:${noteVal}`
if (seen.has(dedupeKey)) {
skipped++
continue
}
seen.add(dedupeKey)
validItems.push({
date: String(item.date),
type: item.type,
category_name: item.category_name ? String(item.category_name) : '',
amount: amt,
note: noteVal
})
}
if (validItems.length === 0) {
return res.json({ code: 0, data: { imported: 0, skipped } })
}
// 预加载用户的分类映射category_name → category_id
const [catRows] = await pool.query(
'SELECT id, name FROM categories WHERE user_id = ?',
[req.userId]
)
const catMap = new Map<string, number>()
for (const row of catRows as any[]) {
catMap.set(row.name, row.id)
}
const conn = await pool.getConnection()
try {
await conn.beginTransaction()
let imported = 0
const BATCH_SIZE = 100
for (let i = 0; i < validItems.length; i += BATCH_SIZE) {
const batch = validItems.slice(i, i + BATCH_SIZE)
const values: any[] = []
const placeholders: string[] = []
for (const item of batch) {
const categoryId = catMap.get(item.category_name) || null
placeholders.push('(?, ?, ?, ?, ?, ?, ?)')
values.push(req.userId, item.amount, item.type, categoryId, item.note || null, item.date, null)
}
await conn.query(
`INSERT INTO transactions (user_id, amount, type, category_id, note, date, group_id) VALUES ${placeholders.join(', ')}`,
values
)
imported += batch.length
}
await conn.commit()
res.json({ code: 0, data: { imported, skipped } })
} catch (err) {
await conn.rollback()
throw err
} finally {
conn.release()
}
} catch (err) {
console.error('[Transaction] POST /import error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })
}
})
router.put('/:id', async (req: AuthRequest, res: Response) => {
try {
const { amount, type, category_id, note, date, tagIds } = req.body
const { amount, type, category_id, note, date } = req.body
if (amount === undefined || amount === null || typeof amount !== 'number' || !Number.isInteger(amount) || amount <= 0 || amount > 999999999) {
return res.status(400).json({ code: 40001, message: '金额必须为1-999999999之间的正整数单位' })
}
@@ -384,64 +212,14 @@ router.put('/:id', async (req: AuthRequest, res: Response) => {
if (note && note.length > 200) {
return res.status(400).json({ code: 40004, message: '备注不能超过200字' })
}
// 校验 tagIds
let validTagIds: number[] | null = null
if (tagIds !== undefined) {
if (!Array.isArray(tagIds)) {
return res.status(400).json({ code: 40001, message: 'tagIds格式无效' })
}
if (tagIds.length > 5) {
return res.status(400).json({ code: 40001, message: '标签数量不能超过5个' })
}
const numTagIds = tagIds.map((id: any) => Number(id)).filter((id: number) => Number.isInteger(id) && id > 0)
if (numTagIds.length > 0) {
const [tagRows] = await pool.query(
`SELECT id FROM tags WHERE id IN (${numTagIds.map(() => '?').join(',')}) AND user_id = ?`,
[...numTagIds, req.userId]
)
validTagIds = (tagRows as any[]).map(r => r.id)
} else {
validTagIds = []
}
}
const conn = await pool.getConnection()
try {
await conn.beginTransaction()
const [result] = await conn.query(
'UPDATE transactions SET amount = ?, type = ?, category_id = ?, note = ?, date = ? WHERE id = ? AND user_id = ?',
[amount, type, category_id || null, note || null, date, req.params.id, req.userId]
)
if ((result as any).affectedRows === 0) {
await conn.rollback()
return res.status(404).json({ code: 40400, message: '记录不存在' })
}
// 全量替换 tagIds
if (validTagIds !== null) {
await conn.query(
'DELETE FROM transaction_tags WHERE transaction_id = ?',
[req.params.id]
)
if (validTagIds.length > 0) {
const values = validTagIds.map(tagId => [req.params.id, tagId])
await conn.query(
`INSERT INTO transaction_tags (transaction_id, tag_id) VALUES ${values.map(() => '(?, ?)').join(', ')}`,
values.flat()
)
}
}
await conn.commit()
res.json({ code: 0 })
} catch (err) {
await conn.rollback()
throw err
} finally {
conn.release()
const [result] = await pool.query(
'UPDATE transactions SET amount = ?, type = ?, category_id = ?, note = ?, date = ? WHERE id = ? AND user_id = ?',
[amount, type, category_id || null, note || null, date, req.params.id, req.userId]
)
if ((result as any).affectedRows === 0) {
return res.status(404).json({ code: 40400, message: '记录不存在' })
}
res.json({ code: 0 })
} catch (err) {
console.error('[Transaction] PUT error:', err)
res.status(500).json({ code: 50000, message: '服务器错误' })