GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收口个人中心泥点账单弹窗壳层

Browse Source 
RpgEntryHomeView 的 WalletLedgerModal 改用 UnifiedModal 并保留渐变面板与关闭语义
账单弹窗测试改为断言具名 dialog 与关闭卸载路径
更新 PlatformUiKit 收口计划与 .hermes 决策记录
This commit is contained in:
kdletters
2026-06-10 17:31:56 +08:00
parent 488c69aecc
commit f5536a14e6
4 changed files with 109 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/rpg-entry/RpgEntryHomeView.tsx
View File

@@ -3418,8 +3418,22 @@ function WalletLedgerModal({
const entries = walletLedgerPresentation.entries;
return (
<div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/48 px-3 py-5">
<div className="relative max-h-[min(92vh,42rem)] w-full max-w-[30rem] overflow-hidden rounded-[1.35rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_38%,#f8fafc_100%)] text-zinc-950 shadow-2xl">
<UnifiedModal
open
title="泥点账单"
onClose={onClose}
showHeader={false}
showCloseButton={false}
closeOnBackdrop={false}
closeOnEscape={false}
portal={false}
size="sm"
zIndexClassName="z-[80]"
overlayClassName="!items-center !bg-black/48 !px-3 !py-5 !backdrop-blur-none"
panelClassName="relative !max-h-[min(92vh,42rem)] !max-w-[30rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_38%,#f8fafc_100%)] text-zinc-950 shadow-2xl !rounded-[1.35rem] sm:!rounded-[1.35rem]"
bodyClassName="!p-0"
>
<div className="relative max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5">
<PlatformModalCloseButton
label="关闭泥点账单"
variant="floating"
@@ -3427,94 +3441,89 @@ function WalletLedgerModal({
className="bg-white/78"
icon="×"
/>
<div className="max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5">
<div className="pr-10">
<div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
LEDGER
</div>
<div className="mt-1 text-2xl font-black">泥点账单</div>
<PlatformPillBadge
tone="profile"
icon={<Coins className="h-3.5 w-3.5 text-[#ff4056]" />}
className="mt-3 bg-white/70"
>
{walletLedgerPresentation.balanceLabel}
</PlatformPillBadge>
<div className="pr-10">
<div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
LEDGER
</div>
{error ? (
<PlatformStatusMessage
tone="error"
className="mt-4 rounded-xl py-3"
>
<div>{error}</div>
<PlatformActionButton
surface="profile"
shape="pill"
size="xs"
className="mt-3"
onClick={onRetry}
>
重新加载
</PlatformActionButton>
</PlatformStatusMessage>
) : isLoading ? (
<div className="mt-5 space-y-3">
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
className="h-16 animate-pulse rounded-xl bg-zinc-100"
/>
))}
</div>
) : entries.length === 0 ? (
<PlatformEmptyState
surface="subpanel"
size="inline"
className="mt-5 py-8"
>
暂无账单记录
</PlatformEmptyState>
) : (
<div className="mt-5 space-y-2.5">
{entries.map((entry) => {
return (
<PlatformSubpanel
as="div"
key={entry.id}
surface="flat"
radius="xs"
padding="none"
className="flex items-center justify-between gap-3 px-3 py-3 shadow-sm"
>
<div className="min-w-0">
<div className="truncate text-sm font-black text-zinc-900">
{entry.sourceLabel}
</div>
<div className="mt-1 text-xs font-semibold text-zinc-500">
{formatPlatformWorldTime(entry.createdAt)}
</div>
</div>
<div className="shrink-0 text-right">
<div
className={`text-base font-black ${
entry.isIncome ? 'text-emerald-600' : 'text-rose-500'
}`}
>
{entry.amountLabel}
</div>
<div className="mt-1 text-[11px] font-semibold text-zinc-400">
{entry.balanceLabel}
</div>
</div>
</PlatformSubpanel>
);
})}
</div>
)}
<div className="mt-1 text-2xl font-black">泥点账单</div>
<PlatformPillBadge
tone="profile"
icon={<Coins className="h-3.5 w-3.5 text-[#ff4056]" />}
className="mt-3 bg-white/70"
>
{walletLedgerPresentation.balanceLabel}
</PlatformPillBadge>
</div>
{error ? (
<PlatformStatusMessage tone="error" className="mt-4 rounded-xl py-3">
<div>{error}</div>
<PlatformActionButton
surface="profile"
shape="pill"
size="xs"
className="mt-3"
onClick={onRetry}
>
重新加载
</PlatformActionButton>
</PlatformStatusMessage>
) : isLoading ? (
<div className="mt-5 space-y-3">
{Array.from({ length: 5 }).map((_, index) => (
<div
key={index}
className="h-16 animate-pulse rounded-xl bg-zinc-100"
/>
))}
</div>
) : entries.length === 0 ? (
<PlatformEmptyState
surface="subpanel"
size="inline"
className="mt-5 py-8"
>
暂无账单记录
</PlatformEmptyState>
) : (
<div className="mt-5 space-y-2.5">
{entries.map((entry) => {
return (
<PlatformSubpanel
as="div"
key={entry.id}
surface="flat"
radius="xs"
padding="none"
className="flex items-center justify-between gap-3 px-3 py-3 shadow-sm"
>
<div className="min-w-0">
<div className="truncate text-sm font-black text-zinc-900">
{entry.sourceLabel}
</div>
<div className="mt-1 text-xs font-semibold text-zinc-500">
{formatPlatformWorldTime(entry.createdAt)}
</div>
</div>
<div className="shrink-0 text-right">
<div
className={`text-base font-black ${
entry.isIncome ? 'text-emerald-600' : 'text-rose-500'
}`}
>
{entry.amountLabel}
</div>
<div className="mt-1 text-[11px] font-semibold text-zinc-400">
{entry.balanceLabel}
</div>
</div>
</PlatformSubpanel>
);
})}
</div>
)}
</div>
</div>
</UnifiedModal>
);
}