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

feat: remove V1 calendar/budget/stats modules

Browse Source 
- 删除 V1 前端页面 (CalendarView, BudgetView, statisticsV1)
- 移除 V1 路由配置 (/calendar, /budget, /)
- 清理路由守卫中的 V1 版本切换逻辑
- 移除设置页面中的版本切换功能
- 更新底部导航和登录重定向到 V2 路由
- 移除 App.vue 中 V1 页面的缓存配置
- 删除后端 TransactionRecordController.GetDailyStatisticsAsync (Obsolete)
- 删除 TransactionStatisticsController.GetBalanceStatisticsAsync
- 保留 V2 仍在使用的共享 API (GetUncoveredCategories, GetArchiveSummary, GetDailyStatistics)
- 保留 V2 使用的全局事件监听机制
- 所有测试通过 (210/210)

Breaking Change: V1 API 端点和路由将不可用
This commit is contained in:
SunCheng
2026-02-14 00:01:44 +08:00
parent 162b6d02dd
commit a7954f55ad
23 changed files with 1028 additions and 3946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Web/src/App.vue
View File

@@ -54,11 +54,9 @@ const messageStore = useMessageStore()
// 定义需要缓存的页面组件名称
const cachedViews = ref([
'CalendarV2', // 日历V2页面
'CalendarView', // 日历V1页面
'StatisticsView', // 统计页面
'StatisticsV2View', // 统计V2页面
'BalanceView', // 账单页面
'BudgetView', // 预算页面
'BudgetV2View' // 预算V2页面
])
@@ -148,16 +146,16 @@ watch(
)
const isShowAddBill = computed(() => {
return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar' || route.path === '/calendar-v2'
return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar-v2'
})
// 需要显示底部导航栏的路由
const showNav = computed(() => {
return [
'/', '/statistics-v2',
'/calendar', '/calendar-v2',
'/calendar-v2',
'/balance', '/message',
'/budget', '/budget-v2', '/setting'
'/budget-v2', '/setting'
].includes(route.path)
})

16
Web/src/api/statistics.js
View File

@@ -160,22 +160,6 @@ export const getDailyStatistics = (params) => {
})
}
/**
* 获取累积余额统计数据（用于余额卡片）
* @deprecated 请使用 getDailyStatisticsByRange 并在前端计算累积余额
* @param {Object} params - 查询参数
* @param {number} params.year - 年份
* @param {number} params.month - 月份
* @returns {Promise<{success: boolean, data: Array}>}
*/
export const getBalanceStatistics = (params) => {
return request({
url: '/TransactionStatistics/GetBalanceStatistics',
method: 'get',
params
})
}
/**
* 获取指定周范围的每天的消费统计
* @deprecated 请使用 getDailyStatisticsByRange

2
Web/src/components/GlassBottomNav.vue
View File

@@ -41,7 +41,7 @@ const props = defineProps({
type: Array,
default () {
return [
{ name: 'calendar', label: '日历', icon: 'notes', path: '/calendar' },
{ name: 'calendar', label: '日历', icon: 'notes', path: '/calendar-v2' },
{ name: 'statistics', label: '统计', icon: 'chart-trending-o', path: '/' },
{ name: 'balance', label: '账单', icon: 'balance-list', path: '/balance' },
{ name: 'budget', label: '预算', icon: 'bill-o', path: '/budget-v2' },

49
Web/src/router/index.js
View File

@@ -1,6 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useVersionStore } from '@/stores/version'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -29,12 +28,6 @@ const router = createRouter({
component: () => import('../views/SettingView.vue'),
meta: { requiresAuth: true }
},
{
path: '/calendar',
name: 'calendar',
component: () => import('../views/CalendarView.vue'),
meta: { requiresAuth: true }
},
{
path: '/calendar-v2',
name: 'calendar-v2',
@@ -65,12 +58,6 @@ const router = createRouter({
component: () => import('../views/ClassificationNLP.vue'),
meta: { requiresAuth: true }
},
{
path: '/',
name: 'statistics',
component: () => import('../views/statisticsV1/Index.vue'),
meta: { requiresAuth: true }
},
{
path: '/statistics-v2',
name: 'statistics-v2',
@@ -101,12 +88,6 @@ const router = createRouter({
component: () => import('../views/LogView.vue'),
meta: { requiresAuth: true }
},
{
path: '/budget',
name: 'budget',
component: () => import('../views/BudgetView.vue'),
meta: { requiresAuth: true }
},
{
path: '/budget-v2',
name: 'budget-v2',
@@ -132,7 +113,6 @@ const router = createRouter({
// 路由守卫
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
const versionStore = useVersionStore()
const requiresAuth = to.meta.requiresAuth !== false // 默认需要认证
if (requiresAuth && !authStore.isAuthenticated) {
@@ -140,35 +120,8 @@ router.beforeEach((to, from, next) => {
next({ name: 'login', query: { redirect: to.fullPath } })
} else if (to.name === 'login' && authStore.isAuthenticated) {
// 已登录用户访问登录页，跳转到首页
next({ name: 'transactions' })
next({ name: 'statistics-v2' })
} else {
// 版本路由处理
if (versionStore.isV2()) {
// 如果当前选择 V2，尝试跳转到 V2 路由
const routeName = to.name?.toString()
if (routeName && !routeName.endsWith('-v2')) {
const v2RouteName = `${routeName}-v2`
const v2Route = router.getRoutes().find(route => route.name === v2RouteName)
if (v2Route) {
next({ name: v2RouteName, query: to.query, params: to.params })
return
}
}
} else {
// 如果当前选择 V1，且访问的是 V2 路由，跳转到 V1
const routeName = to.name?.toString()
if (routeName && routeName.endsWith('-v2')) {
const v1RouteName = routeName.replace(/-v2$/, '')
const v1Route = router.getRoutes().find(route => route.name === v1RouteName)
if (v1Route) {
next({ name: v1RouteName, query: to.query, params: to.params })
return
}
}
}
next()
}
})

12
Web/src/stores/version.js
View File

@@ -2,14 +2,18 @@ import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useVersionStore = defineStore('version', () => {
const currentVersion = ref(localStorage.getItem('app-version') || 'v1')
// V1 已下线，强制使用 V2
const currentVersion = ref('v2')
const setVersion = (version) => {
currentVersion.value = version
localStorage.setItem('app-version', version)
// 仅接受 v2，忽略 v1 设置
if (version === 'v2') {
currentVersion.value = version
localStorage.setItem('app-version', version)
}
}
const isV2 = () => currentVersion.value === 'v2'
const isV2 = () => true // 始终返回 true
return {
currentVersion,

1006
Web/src/views/BudgetView.vue
View File

File diff suppressed because it is too large Load Diff

343
Web/src/views/CalendarView.vue
View File

@@ -1,343 +0,0 @@
<template>
<div class="page-container calendar-container">
<van-calendar
title="日历"
:poppable="false"
:show-confirm="false"
:formatter="formatterCalendar"
:min-date="minDate"
:max-date="maxDate"
@month-show="onMonthShow"
@select="onDateSelect"
/>
<!-- 底部安全距离 -->
<div style="height: calc(95px + env(safe-area-inset-bottom, 0px))" />
<!-- 日期交易列表弹出层 -->
<PopupContainer
v-model="listVisible"
:title="selectedDateText"
:subtitle="getBalance(dateTransactions)"
height="75%"
>
<template #header-actions>
<SmartClassifyButton
ref="smartClassifyButtonRef"
:transactions="dateTransactions"
@save="onSmartClassifySave"
/>
</template>
<TransactionList
:transactions="dateTransactions"
:loading="listLoading"
:finished="true"
:show-delete="true"
@click="viewDetail"
@delete="handleDateTransactionDelete"
/>
</PopupContainer>
<!-- 交易详情组件 -->
<TransactionDetail
v-model:show="detailVisible"
:transaction="currentTransaction"
@save="onDetailSave"
/>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { showToast } from 'vant'
import request from '@/api/request'
import { getTransactionDetail, getTransactionsByDate } from '@/api/transactionRecord'
import TransactionList from '@/components/TransactionList.vue'
import TransactionDetail from '@/components/TransactionDetail.vue'
import SmartClassifyButton from '@/components/SmartClassifyButton.vue'
import PopupContainer from '@/components/PopupContainer.vue'
const dailyStatistics = ref({})
const listVisible = ref(false)
const detailVisible = ref(false)
const dateTransactions = ref([])
const currentTransaction = ref(null)
const listLoading = ref(false)
const selectedDate = ref(null)
const selectedDateText = ref('')
// 设置日历可选范围（例如：过去1年到当前月底
const minDate = new Date(new Date().getFullYear() - 1, 0, 1) // 1年前的1月1日
let maxDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0) // 当前月的最后一天
// 如果当前日超过20号，则将最大日期设置为下个月月底，方便用户查看和选择
if (new Date().getDate() > 20) {
maxDate = new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
}
// 获取日历统计数据
const fetchDailyStatistics = async (year, month) => {
try {
const response = await request.get('/TransactionRecord/GetDailyStatistics', {
params: { year, month }
})
if (response.success && response.data) {
// 将数组转换为对象，key为日期
const statsMap = {}
response.data.forEach((item) => {
statsMap[item.date] = {
count: item.count,
amount: (item.income - item.expense).toFixed(1)
}
})
dailyStatistics.value = {
...dailyStatistics.value,
...statsMap
}
}
} catch (error) {
console.error('获取日历统计数据失败:', error)
}
}
const smartClassifyButtonRef = ref(null)
// 获取指定日期的交易列表
const fetchDateTransactions = async (date) => {
try {
listLoading.value = true
const dateStr = date
.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
.replace(/\//g, '-')
const response = await getTransactionsByDate(dateStr)
if (response.success && response.data) {
// 根据金额从大到小排序
dateTransactions.value = response.data.sort((a, b) => b.amount - a.amount)
// 重置智能分类按钮
smartClassifyButtonRef.value?.reset()
} else {
dateTransactions.value = []
showToast(response.message || '获取交易列表失败')
}
} catch (error) {
console.error('获取日期交易列表失败:', error)
dateTransactions.value = []
showToast('获取交易列表失败')
} finally {
listLoading.value = false
}
}
const getBalance = (transactions) => {
let balance = 0
transactions.forEach((tx) => {
if (tx.type === 1) {
balance += tx.amount
} else if (tx.type === 0) {
balance -= tx.amount
}
})
if (balance >= 0) {
return `结余收入 ${balance.toFixed(1)} 元`
} else {
return `结余支出 ${(-balance).toFixed(1)} 元`
}
}
// 当月份显示时触发
const onMonthShow = ({ date }) => {
const year = date.getFullYear()
const month = date.getMonth() + 1
fetchDailyStatistics(year, month)
}
// 日期选择事件
const onDateSelect = (date) => {
selectedDate.value = date
selectedDateText.value = formatSelectedDate(date)
fetchDateTransactions(date)
listVisible.value = true
}
// 格式化选中的日期
const formatSelectedDate = (date) => {
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
})
}
// 查看详情
const viewDetail = async (transaction) => {
try {
const response = await getTransactionDetail(transaction.id)
if (response.success) {
currentTransaction.value = response.data
detailVisible.value = true
} else {
showToast(response.message || '获取详情失败')
}
} catch (error) {
console.error('获取详情出错:', error)
showToast('获取详情失败')
}
}
// 详情保存后的回调
const onDetailSave = async (saveData) => {
const item = dateTransactions.value.find((tx) => tx.id === saveData.id)
if (!item) {
return
}
// 如果分类发生了变化 移除智能分类的内容，防止被智能分类覆盖
if (item.classify !== saveData.classify) {
// 通知智能分类按钮组件移除指定项
smartClassifyButtonRef.value?.removeClassifiedTransaction(saveData.id)
item.upsetedClassify = ''
}
// 更新当前日期交易列表中的数据
Object.assign(item, saveData)
// 重新加载当前月份的统计数据
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}
// 处理删除事件：从当前日期交易列表中移除，并刷新当日和当月统计
const handleDateTransactionDelete = async (transactionId) => {
dateTransactions.value = dateTransactions.value.filter((t) => t.id !== transactionId)
// 刷新当前日期以及当月的统计数据
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}
// 智能分类保存回调
const onSmartClassifySave = async () => {
// 保存完成后重新加载数据
if (selectedDate.value) {
await fetchDateTransactions(selectedDate.value)
}
// 重新加载统计数据
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}
const formatterCalendar = (day) => {
const dayCopy = { ...day }
if (dayCopy.date.toDateString() === new Date().toDateString()) {
dayCopy.text = '今天'
}
// 格式化日期为 yyyy-MM-dd
const dateKey = dayCopy.date
.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
})
.replace(/\//g, '-')
const stats = dailyStatistics.value[dateKey]
if (stats) {
dayCopy.topInfo = `${stats.count}笔` // 展示消费笔数
dayCopy.bottomInfo = `${stats.amount}元` // 展示消费金额
}
return dayCopy
}
// 初始加载当前月份数据
const now = new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
// 全局删除事件监听，确保日历页面数据一致
const onGlobalTransactionDeleted = () => {
if (selectedDate.value) {
fetchDateTransactions(selectedDate.value)
}
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}
window.addEventListener &&
window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
onBeforeUnmount(() => {
window.removeEventListener &&
window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
})
// 当有交易被新增/修改/批量更新时刷新
const onGlobalTransactionsChanged = () => {
if (selectedDate.value) {
fetchDateTransactions(selectedDate.value)
}
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
}
window.addEventListener &&
window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
onBeforeUnmount(() => {
window.removeEventListener &&
window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
})
</script>
<style scoped>
:deep(.van-calendar__header-title){
display: none;
}
.van-calendar {
background: transparent !important;
}
.calendar-container {
/* 使用准确的视口高度减去 TabBar 高度（50px）和安全区域 */
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--van-background);
}
.calendar-container :deep(.van-calendar) {
height: calc(auto + 40px) !important;
flex: 1;
overflow: auto;
margin: 0;
padding: 0;
}
/* 移除日历组件可能的底部 padding */
.calendar-container :deep(.van-calendar__body) {
padding-bottom: 0 !important;
}
.calendar-container :deep(.van-calendar__months) {
padding-bottom: 0 !important;
}
/* 设置页面容器背景色 */
:deep(.van-calendar__header-title) {
background: transparent !important;
}
/* Add margin to bottom of heatmap to separate from tabbar */
:deep(.heatmap-card) {
flex-shrink: 0; /* Prevent heatmap from shrinking */
}
</style>

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

@@ -1,4 +1,4 @@
<template>
<template>
<div class="page-container login-container">
<div class="login-box">
<h1 class="login-title">
@@ -55,7 +55,7 @@ const handleLogin = async () => {
try {
await authStore.login(password.value)
showToast({ type: 'success', message: '登录成功' })
router.push('/calendar')
router.push('/statistics-v2')
} catch (error) {
showToast({ type: 'fail', message: error.message || '登录失败' })
} finally {

68
Web/src/views/SettingView.vue
View File

@@ -115,12 +115,6 @@
is-link
@click="handleScheduledTasks"
/>
<van-cell
title="切换版本"
is-link
:value="versionStore.currentVersion.toUpperCase()"
@click="handleVersionSwitch"
/>
</van-cell-group>
<div
@@ -145,16 +139,14 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog, showDialog } from 'vant'
import { showLoadingToast, showSuccessToast, showToast, closeToast, showConfirmDialog } from 'vant'
import { uploadBillFile } from '@/api/billImport'
import { useAuthStore } from '@/stores/auth'
import { useVersionStore } from '@/stores/version'
import { getVapidPublicKey, subscribe, testNotification } from '@/api/notification'
import { updateServiceWorker } from '@/registerServiceWorker'
const router = useRouter()
const authStore = useAuthStore()
const versionStore = useVersionStore()
const fileInputRef = ref(null)
const currentType = ref('')
@@ -390,64 +382,6 @@ const handleReloadFromNetwork = async () => {
const handleScheduledTasks = () => {
router.push({ name: 'scheduled-tasks' })
}
/**
* 处理版本切换
*/
const handleVersionSwitch = async () => {
try {
await showDialog({
title: '选择版本',
message: '请选择要使用的版本',
showCancelButton: true,
confirmButtonText: 'V2',
cancelButtonText: 'V1'
}).then(() => {
// 选择 V2
versionStore.setVersion('v2')
showSuccessToast('已切换到 V2')
// 尝试跳转到当前路由的 V2 版本
redirectToVersionRoute()
}).catch(() => {
// 选择 V1
versionStore.setVersion('v1')
showSuccessToast('已切换到 V1')
// 尝试跳转到当前路由的 V1 版本
redirectToVersionRoute()
})
} catch (error) {
console.error('版本切换失败:', error)
}
}
/**
* 根据当前版本重定向路由
*/
const redirectToVersionRoute = () => {
const currentRoute = router.currentRoute.value
const currentRouteName = currentRoute.name
if (versionStore.isV2()) {
// 尝试跳转到 V2 路由
const v2RouteName = `${currentRouteName}-v2`
const v2Route = router.getRoutes().find(route => route.name === v2RouteName)
if (v2Route) {
router.push({ name: v2RouteName })
}
// 如果没有 V2 路由，保持当前路由
} else {
// V1 版本：如果当前在 V2 路由，跳转到 V1
if (currentRouteName && currentRouteName.toString().endsWith('-v2')) {
const v1RouteName = currentRouteName.toString().replace(/-v2$/, '')
const v1Route = router.getRoutes().find(route => route.name === v1RouteName)
if (v1Route) {
router.push({ name: v1RouteName })
}
}
}
}
</script>
<style scoped>

1688
Web/src/views/statisticsV1/Index.vue
View File

File diff suppressed because it is too large Load Diff

407
Web/src/views/statisticsV1/modules/ExpenseCategoryCard.vue
View File

@@ -1,407 +0,0 @@
<template>
<!-- 支出分类统计 -->
<div
class="common-card"
style="padding-bottom: 10px;"
>
<div class="card-header">
<h3 class="card-title">
支出分类
</h3>
<van-tag
type="primary"
size="medium"
>
{{ expenseCategoriesView.length }}类
</van-tag>
</div>
<!-- 环形图区域 -->
<div
v-if="expenseCategoriesView.length > 0"
class="chart-container"
>
<div class="ring-chart">
<div
ref="pieChartRef"
style="width: 100%; height: 100%"
/>
</div>
</div>
<!-- 分类列表 -->
<div class="category-list">
<div
v-for="category in expenseCategoriesSimpView"
:key="category.classify"
class="category-item clickable"
@click="$emit('category-click', category.classify, 0)"
>
<div class="category-info">
<div
class="category-color"
:style="{ backgroundColor: category.color }"
/>
<div class="category-name-with-count">
<span class="category-name">{{ category.classify || '未分类' }}</span>
<span class="category-count">{{ category.count }}笔</span>
</div>
</div>
<div class="category-stats">
<div class="category-amount">
¥{{ formatMoney(category.amount) }}
</div>
<div class="category-percent">
{{ category.percent }}%
</div>
</div>
<van-icon
name="arrow"
class="category-arrow"
/>
</div>
<!-- 展开/收起按钮 -->
<div
v-if="expenseCategoriesView.length > 1"
class="expand-toggle"
@click="showAllExpense = !showAllExpense"
>
<van-icon :name="showAllExpense ? 'arrow-up' : 'arrow-down'" />
</div>
</div>
<ModernEmpty
v-if="!expenseCategoriesView || !expenseCategoriesView.length"
type="chart"
theme="blue"
title="暂无支出"
description="本期还没有支出记录"
size="small"
/>
</div>
</template>
<script setup>
import { ref, computed, onBeforeUnmount, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { getCssVar } from '@/utils/theme'
import ModernEmpty from '@/components/ModernEmpty.vue'
const props = defineProps({
categories: {
type: Array,
default: () => []
},
totalExpense: {
type: Number,
default: 0
},
colors: {
type: Array,
default: () => []
}
})
defineEmits(['category-click'])
const pieChartRef = ref(null)
let pieChartInstance = null
const showAllExpense = ref(false)
// 格式化金额
const formatMoney = (value) => {
if (!value && value !== 0) {
return '0'
}
return Number(value)
.toFixed(0)
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
// 计算属性
const expenseCategoriesView = computed(() => {
const list = [...props.categories]
const unclassifiedIndex = list.findIndex((c) => !c.classify)
if (unclassifiedIndex !== -1) {
const [unclassified] = list.splice(unclassifiedIndex, 1)
list.unshift(unclassified)
}
return list
})
const expenseCategoriesSimpView = computed(() => {
const list = expenseCategoriesView.value
if (showAllExpense.value) {
return list
}
// 只展示未分类
const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify)
if (unclassified.length > 0) {
return [...unclassified]
}
return []
})
// 渲染饼图
const renderPieChart = () => {
if (!pieChartRef.value) {
return
}
if (expenseCategoriesView.value.length === 0) {
return
}
// 尝试获取DOM上的现有实例
const existingInstance = echarts.getInstanceByDom(pieChartRef.value)
if (pieChartInstance && pieChartInstance !== existingInstance) {
if (!pieChartInstance.isDisposed()) {
pieChartInstance.dispose()
}
pieChartInstance = null
}
if (pieChartInstance && pieChartInstance.getDom() !== pieChartRef.value) {
pieChartInstance.dispose()
pieChartInstance = null
}
if (!pieChartInstance && existingInstance) {
pieChartInstance = existingInstance
}
if (!pieChartInstance) {
pieChartInstance = echarts.init(pieChartRef.value)
}
// 使用 Top N + Other 的数据逻辑，确保图表不会太拥挤
const list = [...expenseCategoriesView.value]
let chartData = []
// 按照金额排序
list.sort((a, b) => b.amount - a.amount)
const MAX_SLICES = 8 // 最大显示扇区数，其余合并为"其他"
if (list.length > MAX_SLICES) {
const topList = list.slice(0, MAX_SLICES - 1)
const otherList = list.slice(MAX_SLICES - 1)
const otherAmount = otherList.reduce((sum, item) => sum + item.amount, 0)
chartData = topList.map((item, index) => ({
value: item.amount,
name: item.classify || '未分类',
itemStyle: { color: props.colors[index % props.colors.length] }
}))
chartData.push({
value: otherAmount,
name: '其他',
itemStyle: { color: getCssVar('--van-gray-6') } // 使用灰色表示其他
})
} else {
chartData = list.map((item, index) => ({
value: item.amount,
name: item.classify || '未分类',
itemStyle: { color: props.colors[index % props.colors.length] }
}))
}
const option = {
title: {
text: '¥' + formatMoney(props.totalExpense),
subtext: '总支出',
left: 'center',
top: 'center',
textStyle: {
color: getCssVar('--chart-text-muted'), // 适配深色模式
fontSize: 20,
fontWeight: 'bold'
},
subtextStyle: {
color: getCssVar('--chart-text-muted'),
fontSize: 13
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
return `${params.name}: ¥${formatMoney(params.value)} (${params.percent.toFixed(1)}%)`
}
},
series: [
{
name: '支出分类',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: true,
minAngle: 5, // 最小扇区角度，防止扇区太小看不见
itemStyle: {
borderRadius: 5,
borderColor: getCssVar('--van-background-2'),
borderWidth: 2
},
label: {
show: false
},
labelLine: {
show: false
},
data: chartData
}
]
}
pieChartInstance.setOption(option)
}
// 监听数据变化重新渲染图表
watch(() => [props.categories, props.totalExpense, props.colors], () => {
nextTick(() => {
renderPieChart()
})
}, { deep: true, immediate: true })
// 组件销毁时清理图表实例
onBeforeUnmount(() => {
if (pieChartInstance && !pieChartInstance.isDisposed()) {
pieChartInstance.dispose()
}
})
</script>
<style scoped lang="scss">
@import '@/assets/theme.css';
// 通用卡片样式
.common-card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
}
.card-title {
font-size: var(--font-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
}
/* 环形图 */
.chart-container {
padding: 0;
}
.ring-chart {
position: relative;
width: 100%;
height: 200px;
margin: 0 auto;
}
/* 分类列表 */
.category-list {
padding: 0;
}
.category-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--van-border-color);
transition: background-color 0.2s;
gap: 12px;
}
.category-item:last-child {
border-bottom: none;
}
.category-item.clickable {
cursor: pointer;
}
.category-item.clickable:active {
background-color: var(--van-background);
}
.category-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.category-name-with-count {
display: flex;
align-items: center;
gap: 8px;
}
.category-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.category-name {
font-size: 14px;
color: var(--van-text-color);
}
.category-count {
font-size: 12px;
color: var(--van-text-color-3);
}
.category-stats {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.category-arrow {
margin-left: 8px;
color: var(--van-text-color-3);
font-size: 16px;
flex-shrink: 0;
}
.expand-toggle {
display: flex;
justify-content: center;
align-items: center;
padding-top: 0;
color: var(--van-text-color-3);
font-size: 20px;
cursor: pointer;
}
.expand-toggle:active {
opacity: 0.7;
}
.category-amount {
font-size: 15px;
font-weight: 600;
color: var(--van-text-color);
}
.category-percent {
font-size: 12px;
color: var(--van-text-color-3);
background: var(--van-background);
padding: 2px 8px;
border-radius: 10px;
}
</style>

272
Web/src/views/statisticsV1/modules/IncomeNoneCategoryCard.vue
View File

@@ -1,272 +0,0 @@
<template>
<!-- 收支和不计收支并列显示 -->
<div class="side-by-side-cards">
<!-- 收入分类统计 -->
<div class="common-card half-card">
<div class="card-header">
<h3 class="card-title">
收入
<span
class="income-text"
style="font-size: 13px; margin-left: 4px"
>
¥{{ formatMoney(totalIncome) }}
</span>
</h3>
<van-tag
type="success"
size="medium"
>
{{ incomeCategories.length }}
</van-tag>
</div>
<div
v-if="incomeCategories.length > 0"
class="category-list"
>
<div
v-for="category in incomeCategories"
:key="category.classify"
class="category-item clickable"
@click="$emit('category-click', category.classify, 1)"
>
<div class="category-info">
<div class="category-color income-color" />
<span class="category-name text-ellipsis">{{ category.classify || '未分类' }}</span>
</div>
<div class="category-amount income-text">
¥{{ formatMoney(category.amount) }}
</div>
</div>
</div>
<ModernEmpty
v-else
type="finance"
theme="green"
title="暂无收入"
description="本期还没有收入记录"
size="small"
/>
</div>
<!-- 不计收支分类统计 -->
<div class="common-card half-card">
<div class="card-header">
<h3 class="card-title">
不计收支
</h3>
<van-tag
type="warning"
size="medium"
>
{{ noneCategories.length }}
</van-tag>
</div>
<div
v-if="noneCategories.length > 0"
class="category-list"
>
<div
v-for="category in noneCategories"
:key="category.classify"
class="category-item clickable"
@click="$emit('category-click', category.classify, 2)"
>
<div class="category-info">
<div class="category-color none-color" />
<span class="category-name text-ellipsis">{{ category.classify || '未分类' }}</span>
</div>
<div class="category-amount none-text">
¥{{ formatMoney(category.amount) }}
</div>
</div>
</div>
<ModernEmpty
v-else
type="inbox"
theme="gray"
title="暂无数据"
description="本期没有不计收支记录"
size="small"
/>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import ModernEmpty from '@/components/ModernEmpty.vue'
const props = defineProps({
incomeCategories: {
type: Array,
default: () => []
},
noneCategories: {
type: Array,
default: () => []
},
totalIncome: {
type: Number,
default: 0
}
})
defineEmits(['category-click'])
// 格式化金额
const formatMoney = (value) => {
if (!value && value !== 0) {
return '0'
}
return Number(value)
.toFixed(0)
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
// 处理未分类排序
const incomeCategories = computed(() => {
const list = [...props.incomeCategories]
const unclassifiedIndex = list.findIndex((c) => !c.classify)
if (unclassifiedIndex !== -1) {
const [unclassified] = list.splice(unclassifiedIndex, 1)
list.unshift(unclassified)
}
return list
})
const noneCategories = computed(() => {
const list = [...props.noneCategories]
const unclassifiedIndex = list.findIndex((c) => !c.classify)
if (unclassifiedIndex !== -1) {
const [unclassified] = list.splice(unclassifiedIndex, 1)
list.unshift(unclassified)
}
return list
})
</script>
<style scoped lang="scss">
@import '@/assets/theme.css';
// 通用卡片样式
.common-card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
}
.card-title {
font-size: var(--font-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
}
/* 并列显示卡片 */
.side-by-side-cards {
display: flex;
gap: 12px;
margin: 0 12px 16px;
}
.side-by-side-cards .common-card {
margin: 0;
flex: 1;
min-width: 0; /* 允许内部元素缩小 */
padding: 12px;
}
.card-header {
margin-bottom: 0;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
/* 分类列表 */
.category-list {
padding: 0;
}
.category-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--van-border-color);
transition: background-color 0.2s;
gap: 12px;
}
.category-item:last-child {
border-bottom: none;
}
.category-item.clickable {
cursor: pointer;
}
.category-item.clickable:active {
background-color: var(--van-background);
}
.category-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.category-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.category-name {
font-size: 14px;
color: var(--van-text-color);
}
.category-amount {
font-size: 15px;
font-weight: 600;
color: var(--van-text-color);
flex-shrink: 0;
}
.income-color {
background-color: var(--van-success-color);
}
.income-text {
color: var(--van-success-color);
}
/* 不计收支颜色 */
.none-color {
background-color: var(--van-gray-6);
}
.none-text {
color: var(--van-gray-6);
}
</style>