diff --git a/Web/package.json b/Web/package.json index be1767c..e4d485b 100644 --- a/Web/package.json +++ b/Web/package.json @@ -1,4 +1,4 @@ -{ +{ "name": "email-bill", "version": "1.0.0", "private": true, diff --git a/Web/src/views/StatisticsView.vue b/Web/src/views/StatisticsView.vue index abb82e7..87ea9a2 100644 --- a/Web/src/views/StatisticsView.vue +++ b/Web/src/views/StatisticsView.vue @@ -153,7 +153,10 @@ -
+

支出分类 @@ -179,18 +182,13 @@

+ +
+ +
@@ -241,14 +247,10 @@
@@ -266,10 +268,18 @@
+ +
+ +
@@ -291,14 +301,10 @@
@@ -316,10 +322,18 @@
+ +
+ +
@@ -498,21 +512,16 @@ const noneCategories = ref([]) const expenseCategoriesSimpView = computed(() => { const list = expenseCategoriesView.value - if (showAllExpense.value || list.length <= 7) { + if (showAllExpense.value) { return list } - const top = list.slice(0, 6) - const rest = list.slice(6) - top.push({ - classify: '其他', - amount: rest.reduce((s, c) => s + c.amount, 0), - count: rest.reduce((s, c) => s + c.count, 0), - percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)), - color: '#AAB7B8', - isOther: true - }) - return top + // 只展示未分类 + const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify) + if (unclassified.length > 0) { + return [...unclassified] + } + return [] }) const expenseCategoriesView = computed(() => { @@ -526,6 +535,21 @@ const expenseCategoriesView = computed(() => { return list }) +const incomeCategoriesSimpView = computed(() => { + const list = incomeCategoriesView.value + + if (showAllIncome.value) { + return list + } + + // 只展示未分类 + const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify) + if (unclassified.length > 0) { + return [...unclassified] + } + return [] +}) + const incomeCategoriesView = computed(() => { const list = [...incomeCategories.value] const unclassifiedIndex = list.findIndex((c) => !c.classify) @@ -534,20 +558,22 @@ const incomeCategoriesView = computed(() => { list.unshift(unclassified) } - if (showAllIncome.value || list.length <= 7) { + return list +}) + +const noneCategoriesSimpView = computed(() => { + const list = noneCategoriesView.value + + if (showAllNone.value) { return list } - const top = list.slice(0, 6) - const rest = list.slice(6) - top.push({ - classify: '其他', - amount: rest.reduce((s, c) => s + c.amount, 0), - count: rest.reduce((s, c) => s + c.count, 0), - percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)), - isOther: true - }) - return top + // 只展示未分类 + const unclassified = list.filter((c) => c.classify === '未分类' || !c.classify) + if (unclassified.length > 0) { + return [...unclassified] + } + return [] }) const noneCategoriesView = computed(() => { @@ -558,20 +584,7 @@ const noneCategoriesView = computed(() => { list.unshift(unclassified) } - if (showAllNone.value || list.length <= 7) { - return list - } - - const top = list.slice(0, 6) - const rest = list.slice(6) - top.push({ - classify: '其他', - amount: rest.reduce((s, c) => s + c.amount, 0), - count: rest.reduce((s, c) => s + c.count, 0), - percent: parseFloat(rest.reduce((s, c) => s + c.percent, 0).toFixed(1)), - isOther: true - }) - return top + return list }) // 趋势数据 @@ -1701,6 +1714,20 @@ onBeforeUnmount(() => { flex-shrink: 0; } +.expand-toggle { + display: flex; + justify-content: center; + align-items: center; + padding-top: 10px; + 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;