skycurtain/new-api-key-usage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): 支付表列与表单语义校准

Browse Source 
充值金额/实付金额文案与 dataIndex；期间两行；备注列收窄；
选用弹层 booting 不闪登录；订阅 paid_at 不默认当前时间。
This commit is contained in:
skycurtain
2026-10-09 22:41:04 +08:00
parent 00c08b37ff
commit c32548e598
10 changed files with 157 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/admin/payments-view.vue
+31 -7
View File
@@ -57,7 +57,7 @@ const topRows = computed(() => {
});
const subColumns = [
{ title: "订阅 ID", key: "subscription_id", width: 100 },
{ title: "订阅 ID", dataIndex: "subscription_id", key: "subscription_id", width: 100 },
{ title: "期间", key: "period", width: 200 },
{ title: "额度", key: "quota", width: 160 },
{ title: "付款", key: "paid", width: 140 },
@@ -68,17 +68,24 @@ const subColumns = [
const topColumns = [
{ title: "时间", key: "paid_at", width: 150 },
{ title: "计费单位", key: "amount", width: 100 },
{ title: "实付", key: "money", width: 100 },
{
title: "充值金额",
dataIndex: "amount",
key: "amount",
width: 100,
},
{ title: "实付金额", dataIndex: "money", key: "money", width: 100 },
{ title: "交易号 / 渠道", key: "trade", width: 180 },
{ title: "派生额度", key: "quota", width: 150 },
{ title: "备注", key: "remark" },
{ title: "操作", key: "actions", width: 120 },
];
function periodText(s: SubscriptionItem): string {
const end = s.period_end == null ? "进行中" : formatDateTime(s.period_end);
return `${formatDateTime(s.period_start)} ~ ${end}`;
function periodLines(s: SubscriptionItem): { start: string; end: string } {
return {
start: formatDateTime(s.period_start),
end: s.period_end == null ? "进行中" : formatDateTime(s.period_end),
};
}
function onCreateSub() {
@@ -226,7 +233,10 @@ watch(
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'period'">
{{ periodText(record) }}
<div class="pay-period">
<span>{{ periodLines(record).start }}</span>
<span class="pay-period__end">~ {{ periodLines(record).end }}</span>
</div>
</template>
<template v-else-if="column.key === 'quota'">
<QuotaText :quota="record.quota_granted" :quota-usd="record.quota_usd" />
@@ -282,6 +292,9 @@ watch(
<template v-if="column.key === 'paid_at'">
{{ formatDateTime(record.paid_at) }}
</template>
<template v-else-if="column.key === 'amount'">
{{ formatPaidAmount(record.amount) }}
</template>
<template v-else-if="column.key === 'money'">
{{ formatPaidAmount(record.money) }}
</template>
@@ -324,6 +337,17 @@ watch(
</template>
<style scoped>
.pay-period {
display: flex;
flex-direction: column;
line-height: 20px;
font-variant-numeric: tabular-nums;
}
.pay-period__end {
color: rgba(0, 0, 0, 0.65);
}
.pay-missing__tags {
display: flex;
flex-wrap: wrap;
apps/web/src/views/member/payments-view.vue
+48 -13
View File
@@ -28,28 +28,46 @@ const extraPresets = computed(() =>
.slice(0, 4),
);
function periodText(p: {
function periodLines(p: {
period_start: number;
period_end: number | null;
}): string {
const end = p.period_end == null ? "进行中" : formatDateTime(p.period_end);
return `${formatDateTime(p.period_start)} ~ ${end}`;
}): { start: string; end: string } {
return {
start: formatDateTime(p.period_start),
end: p.period_end == null ? "进行中" : formatDateTime(p.period_end),
};
}
const subColumns = [
{ title: "订阅 ID", key: "subscription_id", width: 100 },
{
title: "订阅 ID",
dataIndex: "subscription_id",
key: "subscription_id",
width: 100,
},
{ title: "期间", key: "period", width: 200 },
{ title: "额度", key: "quota", width: 160 },
{ title: "付款", key: "paid", width: 140 },
{ title: "备注", key: "remark" },
{ title: "付款", key: "paid", width: 150 },
{ title: "备注", dataIndex: "remark", key: "remark", width: 140, ellipsis: true },
];
const topColumns = [
{ title: "时间", key: "paid_at", width: 150 },
{ title: "计费单位 / 实付", key: "money", width: 140 },
{
title: "充值金额",
dataIndex: "amount",
key: "amount",
width: 100,
},
{
title: "实付金额",
dataIndex: "money",
key: "money",
width: 100,
},
{ title: "交易号 / 渠道", key: "trade", width: 180 },
{ title: "派生额度", key: "quota", width: 150 },
{ title: "备注", key: "remark" },
{ title: "备注", dataIndex: "remark", key: "remark", width: 140, ellipsis: true },
];
</script>
@@ -101,11 +119,14 @@ const topColumns = [
:row-key="(r: { id: number }) => r.id"
size="middle"
:pagination="false"
:scroll="{ x: 800 }"
:scroll="{ x: 760 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'period'">
{{ periodText(record) }}
<div class="mv-period">
<span>{{ periodLines(record).start }}</span>
<span class="mv-period__end">~ {{ periodLines(record).end }}</span>
</div>
</template>
<template v-else-if="column.key === 'quota'">
<QuotaText :quota="record.quota_granted" :quota-usd="record.quota_usd" />
@@ -132,14 +153,17 @@ const topColumns = [
:row-key="(r: { id: number }) => r.id"
size="middle"
:pagination="false"
:scroll="{ x: 760 }"
:scroll="{ x: 840 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'paid_at'">
{{ formatDateTime(record.paid_at) }}
</template>
<template v-else-if="column.key === 'amount'">
{{ formatPaidAmount(record.amount) }}
</template>
<template v-else-if="column.key === 'money'">
{{ record.amount }} · {{ formatPaidAmount(record.money) }}
{{ formatPaidAmount(record.money) }}
</template>
<template v-else-if="column.key === 'trade'">
{{ record.trade_no || "—" }}
@@ -164,6 +188,17 @@ const topColumns = [
</template>
<style scoped>
.mv-period {
display: flex;
flex-direction: column;
line-height: 20px;
font-variant-numeric: tabular-nums;
}
.mv-period__end {
color: rgba(0, 0, 0, 0.65);
}
.mv-range-label {
font-size: 13px;
color: rgba(0, 0, 0, 0.65);