wangjia/pangolin
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases 19 Wiki Activity

design(prototype): 回填邀请屏——战绩三格+TG任务卡两态+具体天数(镜像 invite_page.dart,补原型先行欠账)

Browse Source
This commit is contained in:
wangjia
2026-07-13 09:23:14 +08:00
parent 559fd38a52
commit a48e38cac0
2 changed files with 120 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/prototype/screens/ui-desktop.html
+60 -18
View File
@@ -368,6 +368,18 @@
.inv-prog-row + .inv-prog-row{ border-top:1px solid var(--border); }
.inv-prog-k{ font-size:13px; color:var(--fg2); }
.inv-prog-v{ font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--accent); }
/* 战绩三格统计卡（镜像 invite_page.dart _StatCell 横排三格） */
.inv-stats{ display:flex; }
.inv-stat-cell{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
padding:var(--space-4) var(--space-2); }
.inv-stat-cell + .inv-stat-cell{ border-left:1px solid var(--border); }
.inv-stat-v{ font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--fg1); }
.inv-stat-k{ font-size:11.5px; color:var(--fg3); }
/* TG 任务卡（镜像 invite_page.dart _TgTaskCard，待验证 / 已领取两态） */
.inv-tg-card{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-3); }
.inv-tg-head{ display:flex; align-items:center; gap:var(--space-3); }
.inv-tg-actions{ display:flex; flex-direction:column; gap:var(--space-2); }
.inv-tg-demo-tag{ font-size:11px; color:var(--fg3); font-style:italic; }
</style>
</head>
<body>
@@ -937,31 +949,57 @@
<div class="card card-flush" style="margin-bottom:var(--space-5)">
<div class="setting-row">
<span class="icon-box"><svg><use href="#i-user"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="inv.r1">好友注册</div><div class="st-sub" data-i18n="inv.r1s">双方各得会员天数</div></div>
<div class="st-body"><div class="st-title" data-i18n="inv.r1">好友注册</div><div class="st-sub" data-i18n="inv.r1s">双方各得 3 天</div></div>
<span class="st-trail"><span class="pill pill-outline">+3d</span></span>
</div>
<div class="setting-row">
<span class="icon-box"><svg><use href="#i-crown"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="inv.r2">好友首次购买</div><div class="st-sub" data-i18n="inv.r2s">双方各得更多天数</div></div>
<span class="st-trail"><span class="pill pill-outline">+30d</span></span>
<div class="st-body"><div class="st-title" data-i18n="inv.r2">好友首次购买</div><div class="st-sub" data-i18n="inv.r2s">双方各得 7 天</div></div>
<span class="st-trail"><span class="pill pill-outline">+7d</span></span>
</div>
<div class="setting-row">
<span class="icon-box"><svg><use href="#i-send"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="inv.r3">加入 TG 频道</div><div class="st-sub" data-i18n="inv.r3s">额外获得会员天数</div></div>
<span class="st-trail"><span class="pill pill-outline">+7d</span></span>
<div class="st-body"><div class="st-title" data-i18n="inv.r3">加入 TG 频道</div><div class="st-sub" data-i18n="inv.r3s">获得 3 天</div></div>
<span class="st-trail"><span class="pill pill-outline">+3d</span></span>
</div>
</div>
<div class="sec-label" data-i18n="inv.progHead">奖励进度</div>
<div class="card">
<div class="inv-prog-row">
<span class="inv-prog-k" data-i18n="inv.invited">已邀请好友</span>
<span class="inv-prog-v">3</span>
<div class="sec-label" data-i18n="inv.progHead">我的奖励</div>
<div class="card card-flush" style="margin-bottom:var(--space-5)">
<div class="inv-stats">
<div class="inv-stat-cell"><span class="inv-stat-v">3</span><span class="inv-stat-k" data-i18n="inv.invited">已邀请</span></div>
<div class="inv-stat-cell"><span class="inv-stat-v">1</span><span class="inv-stat-k" data-i18n="inv.converted">已转化</span></div>
<div class="inv-stat-cell"><span class="inv-stat-v">16</span><span class="inv-stat-k" data-i18n="inv.earned">累计获赠(天)</span></div>
</div>
<div class="inv-prog-row">
<span class="inv-prog-k" data-i18n="inv.earned">累计获得会员</span>
<span class="inv-prog-v">+42d</span>
</div>
<div class="sec-label" data-i18n="inv.tasksHead">更多得会员</div>
<div class="card inv-tg-card">
<div class="inv-tg-head">
<span class="icon-box"><svg><use href="#i-send"/></svg></span>
<div class="st-body">
<div class="st-title" data-i18n="inv.tgTitle">加入 Telegram 频道</div>
<div class="st-sub" data-i18n="inv.tgSub">+3 天</div>
</div>
</div>
<div class="inv-tg-actions">
<button class="btn btn-subtle btn-block"><svg><use href="#i-send"/></svg><span data-i18n="inv.tgJoinBtn">加入频道</span></button>
<button class="btn btn-primary btn-block"><span data-i18n="inv.tgVerifyBtn">验证领取</span></button>
</div>
<div class="inv-tg-demo-tag" data-i18n="inv.tgDemoPending">演示态 · 待验证</div>
</div>
<div class="card inv-tg-card" style="margin-bottom:0">
<div class="inv-tg-head">
<span class="icon-box"><svg><use href="#i-send"/></svg></span>
<div class="st-body">
<div class="st-title" data-i18n="inv.tgTitle">加入 Telegram 频道</div>
<div class="st-sub" data-i18n="inv.tgSub">+3 天</div>
</div>
</div>
<div class="inv-tg-actions">
<button class="btn btn-subtle btn-block is-disabled" disabled><svg><use href="#i-check-circle"/></svg><span data-i18n="inv.tgDoneBtn">已领 +3 天</span></button>
</div>
<div class="inv-tg-demo-tag" data-i18n="inv.tgDemoDone">演示态 · 已领取</div>
</div>
</div>
</section>
@@ -1076,11 +1114,15 @@ var I18N = {
'inv.back':{zh:'返回',en:'Back'}, 'inv.title':{zh:'邀请好友',en:'Invite friends'},
'inv.lead':{zh:'分享你的邀请码或链接，好友注册后双方都得会员天数。',en:'Share your code or link — when a friend signs up, both of you earn membership days.'},
'inv.rewardsHead':{zh:'奖励说明 · 双方都得',en:'Rewards · both sides earn'},
'inv.r1':{zh:'好友注册',en:'Friend signs up'}, 'inv.r1s':{zh:'双方各得会员天数',en:'Both earn membership days'},
'inv.r2':{zh:'好友首次购买',en:'Friend first purchase'}, 'inv.r2s':{zh:'双方各得更多天数',en:'Both earn more days'},
'inv.r3':{zh:'加入 TG 频道',en:'Join the TG channel'}, 'inv.r3s':{zh:'额外获得会员天数',en:'Earn extra days'},
'inv.progHead':{zh:'奖励进度',en:'Reward progress'},
'inv.invited':{zh:'已邀请好友',en:'Friends invited'}, 'inv.earned':{zh:'累计获得会员',en:'Membership earned'},
'inv.r1':{zh:'好友注册',en:'Friend signs up'}, 'inv.r1s':{zh:'双方各得 3 天',en:'Both earn 3 days each'},
'inv.r2':{zh:'好友首次购买',en:'Friend first purchase'}, 'inv.r2s':{zh:'双方各得 7 天',en:'Both earn 7 days each'},
'inv.r3':{zh:'加入 TG 频道',en:'Join the TG channel'}, 'inv.r3s':{zh:'获得 3 天',en:'Earn 3 days'},
'inv.progHead':{zh:'我的奖励',en:'My rewards'},
'inv.invited':{zh:'已邀请',en:'Friends invited'}, 'inv.converted':{zh:'已转化',en:'Converted'}, 'inv.earned':{zh:'累计获赠(天)',en:'Days earned'},
'inv.tasksHead':{zh:'更多得会员',en:'More ways to earn'},
'inv.tgTitle':{zh:'加入 Telegram 频道',en:'Join Telegram channel'}, 'inv.tgSub':{zh:'+3 天',en:'+3 days'},
'inv.tgJoinBtn':{zh:'加入频道',en:'Join channel'}, 'inv.tgVerifyBtn':{zh:'验证领取',en:'Verify & claim'}, 'inv.tgDoneBtn':{zh:'已领 +3 天',en:'Claimed +3 days'},
'inv.tgDemoPending':{zh:'演示态 · 待验证',en:'Demo · pending'}, 'inv.tgDemoDone':{zh:'演示态 · 已领取',en:'Demo · claimed'},
'set.orders':{zh:'我的订单',en:'My orders'}, 'set.ordersSub':{zh:'查看订单记录',en:'View order history'},
'ord.back':{zh:'返回',en:'Back'}, 'ord.details':{zh:'明细',en:'Details'},
'ord.kOrderNo':{zh:'订单号',en:'Order No.'}, 'ord.kPlan':{zh:'套餐',en:'Plan'}, 'ord.kAmount':{zh:'金额',en:'Amount'},
design/prototype/screens/ui-mobile.html
+60 -9
View File
@@ -359,6 +359,18 @@
.inv-bar{ height:8px; border-radius:var(--radius-full); background:var(--bg-subtle); overflow:hidden; }
.inv-bar > i{ display:block; height:100%; border-radius:var(--radius-full);
background:linear-gradient(90deg,var(--clay-500),var(--clay-800)); }
/* 战绩三格统计卡（镜像 invite_page.dart _StatCell 横排三格） */
.inv-stats{ display:flex; }
.inv-stat-cell{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
padding:var(--space-4) var(--space-2); }
.inv-stat-cell + .inv-stat-cell{ border-left:1px solid var(--border); }
.inv-stat-v{ font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--fg1); }
.inv-stat-k{ font-size:11px; color:var(--fg3); }
/* TG 任务卡（镜像 invite_page.dart _TgTaskCard，待验证 / 已领取两态） */
.inv-tg-card + .inv-tg-card{ margin-top:var(--space-3); }
.inv-tg-head{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.inv-tg-actions{ display:flex; flex-direction:column; gap:var(--space-2); }
.inv-tg-demo-tag{ font-size:11px; color:var(--fg3); font-style:italic; margin-top:var(--space-2); }
/* 子屏 toast */
.sub-toast{ position:absolute; left:50%; bottom:var(--space-6); transform:translate(-50%, 12px);
@@ -970,14 +982,45 @@
<div class="pur-feat-h" data-i18n="inviteRewards">奖励规则</div>
<div class="plan-feats" style="margin:0">
<div class="plan-feat"><svg><use href="#i-check"/></svg><span data-i18n="inviteR1">好友注册 · 双方各得 3 天</span></div>
<div class="plan-feat"><svg><use href="#i-check"/></svg><span data-i18n="inviteR2">好友首次购买 · 双方各得 30 天</span></div>
<div class="plan-feat"><svg><use href="#i-check"/></svg><span data-i18n="inviteR3">加入 Telegram 社区 · 各得 2 天</span></div>
<div class="plan-feat"><svg><use href="#i-check"/></svg><span data-i18n="inviteR2">好友首次购买 · 双方各得 7 天</span></div>
<div class="plan-feat"><svg><use href="#i-check"/></svg><span data-i18n="inviteR3">加入 TG 频道 · 获得 3 天</span></div>
</div>
</div>
<div class="card">
<div class="inv-prog-row"><span class="st-title" data-i18n="inviteProgress">邀请进度</span><span class="inv-prog-v">2 · +6d</span></div>
<div class="inv-bar"><i style="width:40%"></i></div>
<p class="sub-note" style="text-align:left;margin-top:var(--space-2)" data-i18n="inviteProgressSub">已邀请 2 位好友，累计获得 6 天会员（演示占位）</p>
<div class="pur-feat-h" data-i18n="inviteProgress">我的奖励</div>
<div class="inv-stats">
<div class="inv-stat-cell"><span class="inv-stat-v">3</span><span class="inv-stat-k" data-i18n="inviteStatInvited">已邀请</span></div>
<div class="inv-stat-cell"><span class="inv-stat-v">1</span><span class="inv-stat-k" data-i18n="inviteStatConverted">已转化</span></div>
<div class="inv-stat-cell"><span class="inv-stat-v">16</span><span class="inv-stat-k" data-i18n="inviteStatDays">累计获赠(天)</span></div>
</div>
</div>
<div class="pur-feat-h" style="margin-top:var(--space-2)" data-i18n="inviteTasksTitle">更多得会员</div>
<div class="card inv-tg-card">
<div class="inv-tg-head">
<span class="icon-box"><svg><use href="#i-send"/></svg></span>
<div class="st-body">
<div class="st-title" data-i18n="inviteJoinTgTitle">加入 Telegram 频道</div>
<div class="st-sub" data-i18n="inviteTgSub">+3 天</div>
</div>
</div>
<div class="inv-tg-actions">
<button class="btn btn-subtle btn-block"><svg><use href="#i-send"/></svg><span data-i18n="inviteJoinTgBtn">加入频道</span></button>
<button class="btn btn-primary btn-block"><span data-i18n="inviteVerifyBtn">验证领取</span></button>
</div>
<div class="inv-tg-demo-tag" data-i18n="inviteTgDemoPending">演示态 · 待验证</div>
</div>
<div class="card inv-tg-card">
<div class="inv-tg-head">
<span class="icon-box"><svg><use href="#i-send"/></svg></span>
<div class="st-body">
<div class="st-title" data-i18n="inviteJoinTgTitle">加入 Telegram 频道</div>
<div class="st-sub" data-i18n="inviteTgSub">+3 天</div>
</div>
</div>
<div class="inv-tg-actions">
<button class="btn btn-subtle btn-block is-disabled" disabled><svg><use href="#i-check-circle"/></svg><span data-i18n="inviteTaskDone">已领 +3 天</span></button>
</div>
<div class="inv-tg-demo-tag" data-i18n="inviteTgDemoDone">演示态 · 已领取</div>
</div>
<button class="btn btn-primary btn-block btn-lg sub-copy" data-copy="pangolin.app/i/8F3A2K"><svg><use href="#i-send"/></svg><span data-i18n="inviteShare">分享邀请链接</span></button>
</div>
@@ -1239,8 +1282,12 @@ const I18N = {
noti4:'欢迎使用穿山甲，体验期 7 天已开启', noti4sub:'新闻 · 1 周前',
inviteTitle:'邀请好友', inviteHeadline:'邀请好友得会员', inviteLede:'好友注册、首购、加入社区，双方都各得订阅天数。',
inviteCode:'邀请码', inviteLink:'邀请链接', inviteRewards:'奖励规则',
inviteR1:'好友注册 · 双方各得 3 天', inviteR2:'好友首次购买 · 双方各得 30 天', inviteR3:'加入 Telegram 社区 · 各得 2 天',
inviteProgress:'邀请进度', inviteProgressSub:'已邀请 2 位好友，累计获得 6 天会员（演示占位）', inviteShare:'分享邀请链接',
inviteR1:'好友注册 · 双方各得 3 天', inviteR2:'好友首次购买 · 双方各得 7 天', inviteR3:'加入 TG 频道 · 获得 3 天',
inviteProgress:'我的奖励', inviteProgressSub:'已邀请 2 位好友，累计获得 6 天会员（演示占位）', inviteShare:'分享邀请链接',
inviteStatInvited:'已邀请', inviteStatConverted:'已转化', inviteStatDays:'累计获赠(天)',
inviteTasksTitle:'更多得会员', inviteJoinTgTitle:'加入 Telegram 频道', inviteTgSub:'+3 天',
inviteJoinTgBtn:'加入频道', inviteVerifyBtn:'验证领取', inviteTaskDone:'已领 +3 天',
inviteTgDemoPending:'演示态 · 待验证', inviteTgDemoDone:'演示态 · 已领取',
redeemLabel:'兑换码', redeemPh:'输入兑换 / 激活码', redeemBtn:'立即兑换', redeemHint:'输入卡密即可激活对应时长，激活后立即生效。'
},
en:{
@@ -1313,8 +1360,12 @@ const I18N = {
noti4:'Welcome — your 7-day trial is on', noti4sub:'News · 1w ago',
inviteTitle:'Invite friends', inviteHeadline:'Invite friends, earn membership', inviteLede:'When friends sign up, buy, or join the community, both of you earn plan days.',
inviteCode:'Invite code', inviteLink:'Invite link', inviteRewards:'How rewards work',
inviteR1:'Friend signs up · +3 days each', inviteR2:'Friend first purchase · +30 days each', inviteR3:'Join Telegram · +2 days each',
inviteProgress:'Your progress', inviteProgressSub:'Invited 2 friends · earned 6 days (demo)', inviteShare:'Share invite link',
inviteR1:'Friend signs up · +3 days each', inviteR2:'Friend first purchase · +7 days each', inviteR3:'Join TG channel · earn 3 days',
inviteProgress:'My rewards', inviteProgressSub:'Invited 2 friends · earned 6 days (demo)', inviteShare:'Share invite link',
inviteStatInvited:'Invited', inviteStatConverted:'Converted', inviteStatDays:'Days earned',
inviteTasksTitle:'More ways to earn', inviteJoinTgTitle:'Join Telegram channel', inviteTgSub:'+3 days',
inviteJoinTgBtn:'Join channel', inviteVerifyBtn:'Verify & claim', inviteTaskDone:'Claimed +3 days',
inviteTgDemoPending:'Demo · pending', inviteTgDemoDone:'Demo · claimed',
redeemLabel:'Redemption code', redeemPh:'Enter your code', redeemBtn:'Redeem now', redeemHint:'Enter a code to instantly activate plan time.'
}
};