root/financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新capp-eden依赖至0.0.21，优化资产详情页面的记录展示和分页控制逻辑

Browse Source
This commit is contained in:
Seven
2026-01-19 05:01:22 +07:00
parent 9cc2b2bea1
commit 3a405cae93
3 changed files with 197 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pnpm-lock.yaml generated
View File

@@ -52,8 +52,8 @@ catalogs:
specifier: 8.0.0
version: 8.0.0
'@capp/eden':
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz
version: 0.0.19
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz
version: 0.0.21
'@cloudflare/workers-types':
specifier: ^4.20260113.0
version: 4.20260116.0
@@ -298,7 +298,7 @@ importers:
version: 8.0.0(@capacitor/core@8.0.0)
'@capp/eden':
specifier: 'catalog:'
version: http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
version: http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
'@elysiajs/eden':
specifier: 'catalog:'
version: 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
@@ -1182,9 +1182,9 @@ packages:
'@capacitor/synapse@1.0.4':
resolution: {integrity: sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==}
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz':
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz}
version: 0.0.19
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz':
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz}
version: 0.0.21
peerDependencies:
'@elysiajs/eden': ^1.4.6
@@ -6903,7 +6903,7 @@ snapshots:
'@capacitor/synapse@1.0.4': {}
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
dependencies:
'@elysiajs/eden': 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))

2
pnpm-workspace.yaml
View File

@@ -18,7 +18,7 @@ catalog:
'@capacitor/keyboard': 8.0.0
'@capacitor/share': ^8.0.0
'@capacitor/status-bar': 8.0.0
'@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.19.tgz
'@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.21.tgz
'@cloudflare/workers-types': ^4.20260113.0
'@elysiajs/eden': ^1.4.6
'@faker-js/faker': ^10.2.0

305
src/views/asset_details/index.vue
View File

@@ -1,50 +1,115 @@
<script lang='ts' setup>
import dayjs from "dayjs";
import { arrowDownCircleOutline, arrowUpCircleOutline, listOutline, walletOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";
const walletStore = useWalletStore();
const balanceWallet = await walletStore.getWalletByType("balance");
const profitWallet = await walletStore.getWalletByType("profit");
const { data } = await safeClient(client.api.ledger.entries.get());
const [allQuery] = useResetRef<any>({
pageIndex: 1,
pageSize: 10,
});
const [incomeQuery] = useResetRef<any>({
entryType: "subscription_unlock",
pageIndex: 1,
pageSize: 10,
});
const [investmentQuery] = useResetRef<any>({
entryType: "subscription_purchase",
pageIndex: 1,
pageSize: 10,
});
const { data: allRecords, execute: executeAll } = safeClient(() => client.api.ledger.entries.get({ query: { ...allQuery.value } }));
const { data: incomeRecords, execute: executeIncome } = safeClient(() => client.api.ledger.entries.get({ query: { ...incomeQuery.value } }));
const { data: investmentRecords, execute: executeInvestment } = safeClient(() => client.api.ledger.entries.get({ query: { ...investmentQuery.value } }));
// 当前选中的标签
const selectedTab = ref<"all" | "income" | "investment">("all");
interface TransactionRecord {
id: number;
type: "income" | "investment" | "withdraw" | "recharge";
title: string;
amount: number;
time: string;
status: "success" | "pending" | "failed";
description?: string;
// 获取当前标签对应的数据源和执行函数
const currentData = computed(() => {
switch (selectedTab.value) {
case "all":
return allRecords;
case "income":
return incomeRecords;
case "investment":
return investmentRecords;
default:
return allRecords;
}
});
const currentExecute = computed(() => {
switch (selectedTab.value) {
case "all":
return executeAll;
case "income":
return executeIncome;
case "investment":
return executeInvestment;
default:
return executeAll;
}
});
const currentQuery = computed(() => {
switch (selectedTab.value) {
case "all":
return allQuery;
case "income":
return incomeQuery;
case "investment":
return investmentQuery;
default:
return allQuery;
}
});
// 当前标签的记录列表（API返回的已分页数据）
const filteredRecords = computed(() => {
return currentData.value.value?.data || [];
});
// 全部记录数量
const totalRecords = computed(() => {
return currentData.value.value?.pagination.total || 0;
});
// 总页数
const totalPages = computed(() => {
return Math.ceil(totalRecords.value / currentQuery.value.value.pageSize);
});
// 当前页码
const currentPage = computed(() => {
return currentQuery.value.value.pageIndex;
});
function handleTabChange(event: CustomEvent) {
selectedTab.value = event.detail.value;
// 切换标签时重置到第一页
currentQuery.value.value.pageIndex = 1;
currentExecute.value();
}
// 筛选后的记录
const filteredRecords = computed(() => {
if (selectedTab.value === "all") {
return allRecords.value;
async function goToPage(page: number) {
if (page >= 1 && page <= totalPages.value) {
currentQuery.value.value.pageIndex = page;
await currentExecute.value();
}
else if (selectedTab.value === "income") {
return allRecords.value.filter(r => r.type === "income" || r.type === "recharge");
}
else {
return allRecords.value.filter(r => r.type === "investment" || r.type === "withdraw");
}
});
}
// 统计数据
const totalIncome = computed(() => {
return allRecords.value
.filter(r => r.amount > 0)
.reduce((sum, r) => sum + r.amount, 0);
});
function prevPage() {
goToPage(currentPage.value - 1);
}
const totalInvestment = computed(() => {
return Math.abs(allRecords.value
.filter(r => r.amount < 0)
.reduce((sum, r) => sum + r.amount, 0));
});
function nextPage() {
goToPage(currentPage.value + 1);
}
function getRecordIcon(type: string) {
if (type === "income" || type === "recharge") {
@@ -70,8 +135,9 @@ function getTypeName(type: string) {
return names[type] || type;
}
function formatAmount(amount: number) {
return amount >= 0 ? `+${amount.toFixed(2)}` : amount.toFixed(2);
function formatAmount(amount: string) {
const num = Number.parseFloat(amount);
return num >= 0 ? `+${num.toFixed(2)}` : num.toFixed(2);
}
</script>
@@ -100,58 +166,26 @@ function formatAmount(amount: number) {
</div>
</div>
</div>
<div class="stats-section">
<div class="stat-item">
<div class="stat-label">
累计收益
</div>
<div class="stat-value income">
+¥{{ totalIncome.toFixed(2) }}
</div>
</div>
<div class="stat-divider" />
<div class="stat-item">
<div class="stat-label">
累计投资
</div>
<div class="stat-value investment">
-¥{{ totalInvestment.toFixed(2) }}
</div>
</div>
</div>
</div>
<!-- 标签切换 -->
<div class="tabs-container">
<div class="tabs">
<div
class="tab"
:class="{ active: selectedTab === 'all' }"
@click="selectedTab = 'all'"
>
全部记录
</div>
<div
class="tab"
:class="{ active: selectedTab === 'income' }"
@click="selectedTab = 'income'"
>
收益记录
</div>
<div
class="tab"
:class="{ active: selectedTab === 'investment' }"
@click="selectedTab = 'investment'"
>
投资记录
</div>
</div>
<ion-segment :value="selectedTab" class="tab-segment" @ion-change="handleTabChange">
<ion-segment-button value="all">
<ion-label>全部记录</ion-label>
</ion-segment-button>
<ion-segment-button value="income">
<ion-label>收益记录</ion-label>
</ion-segment-button>
<ion-segment-button value="investment">
<ion-label>投资记录</ion-label>
</ion-segment-button>
</ion-segment>
</div>
<!-- 记录列表 -->
<div class="records-list">
<div v-if="data?.data.length === 0" class="empty-state">
<div v-if="filteredRecords.length === 0" class="empty-state">
<empty title="暂无记录">
<template #icon>
<ion-icon :icon="listOutline" class="empty-icon" />
@@ -160,41 +194,57 @@ function formatAmount(amount: number) {
</div>
<div v-else class="ion-padding-horizontal">
<div
v-for="record in data?.data"
v-for="record in filteredRecords"
:key="record.id"
class="record-item"
>
<div class="record-left">
<ion-icon
:icon="getRecordIcon(record.type)"
class="record-icon"
:class="getRecordColor(record.type)"
/>
<div class="record-info">
<div class="record-title">
{{ record.title }}
{{ record.memo || '无标题' }}
</div>
<div class="record-desc">
{{ record.description }}
{{ record.walletType.name }}
</div>
<div class="record-time">
{{ record.time }}
{{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm') }}
</div>
</div>
</div>
<div class="record-right">
<div
class="record-amount"
:class="record.amount >= 0 ? 'income' : 'expense'"
>
{{ formatAmount(record.amount) }}
</div>
<div class="record-type">
{{ getTypeName(record.type) }}
</div>
</div>
</div>
</div>
<!-- 分页控制 -->
<div v-if="totalRecords > 0 && totalPages > 1" class="pagination-section">
<div class="pagination-info">
共 {{ totalRecords }} 条，第 {{ currentPage }}/{{ totalPages }} 页
</div>
<div class="pagination-buttons">
<ion-button
fill="outline"
size="small"
:disabled="currentPage === 1"
@click="prevPage"
>
上一页
</ion-button>
<ion-button
fill="outline"
size="small"
:disabled="currentPage === totalPages"
@click="nextPage"
>
下一页
</ion-button>
</div>
</div>
</div>
</ion-content>
</ion-page>
@@ -277,35 +327,20 @@ function formatAmount(amount: number) {
z-index: 10;
}
.tabs {
display: flex;
gap: 8px;
.tab-segment {
margin-bottom: 16px;
--background: #f5f5f5;
border-radius: 12px;
padding: 4px;
}
.tab {
flex: 1;
text-align: center;
padding: 12px 16px;
font-size: 15px;
.tab-segment ion-segment-button {
--indicator-color: #c41e3a;
--color: #666;
--color-checked: white;
min-height: 36px;
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.tab.active {
color: #c41e3a;
}
.tab.active::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #c41e3a;
}
.records-list {
@@ -393,4 +428,42 @@ function formatAmount(amount: number) {
font-size: 80px;
color: #ddd;
}
.pagination-section {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e8e8e8;
}
.pagination-info {
text-align: center;
font-size: 13px;
color: #666;
margin-bottom: 12px;
}
.pagination-buttons {
display: flex;
justify-content: center;
gap: 12px;
}
.pagination-buttons ion-button {
--border-color: #c41e3a;
--color: #c41e3a;
--border-radius: 8px;
font-size: 14px;
font-weight: 500;
min-width: 80px;
}
.pagination-buttons ion-button:not([disabled]):hover {
--background: rgba(196, 30, 58, 0.05);
}
.pagination-buttons ion-button[disabled] {
--border-color: #ddd;
--color: #999;
opacity: 0.5;
}
</style>