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

design(prototype): 通知视图两端统一(pill式)+ reward/version/promo 示例与展开态

Browse Source
This commit is contained in:
wangjia
2026-07-13 13:36:16 +08:00
parent 21a30aa4c8
commit 542954e4ea
2 changed files with 124 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/prototype/screens/ui-desktop.html
+42 -2
View File
@@ -354,6 +354,12 @@
.notif-time{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg3); }
.notif-t{ font-size:14px; font-weight:600; color:var(--fg1); }
.notif-s{ font-size:12.5px; color:var(--fg3); margin-top:2px; line-height:var(--leading-normal); }
.notif-row.is-expandable{ cursor:pointer; }
.notif-full{ display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--fg2); line-height:var(--leading-normal); }
.notif-row.is-open .notif-full{ display:block; }
.notif-actions{ margin-top:8px; }
.notif-action{ flex:none; padding:4px var(--space-3); border-radius:var(--radius-full); border:1px solid var(--border-strong); background:transparent; color:var(--fg2); font-family:var(--font-sans); font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
.notif-action:hover{ border-color:var(--accent); color:var(--accent); }
/* ---- 邀请好友视图 ---- */
.invite-code-card{ margin-bottom:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
@@ -898,13 +904,14 @@
<div class="view-body notif-view">
<button class="pv-back" id="ntBack"><svg><use href="#i-arrow-left"/></svg><span data-i18n="nt.back">返回</span></button>
<div class="sec-label" data-i18n="nt.title">通知</div>
<div class="card card-flush">
<div class="notif-row is-unread">
<div class="card card-flush" id="notifList">
<div class="notif-row is-unread is-expandable" id="ntRow1">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt.tImportant">重要</span><span class="notif-time">2h</span></div>
<div class="notif-t" data-i18n="nt.n1t">服务条款与隐私政策更新</div>
<div class="notif-s" data-i18n="nt.n1s">我们更新了服务条款，请查阅最新内容。</div>
<div class="notif-full" data-i18n="nt.n1full">本次更新新增数据留存与第三方共享条款说明，不影响现有账户与订阅权益，建议登录网页用户中心查看完整版本。</div>
</div>
</div>
<div class="notif-row is-unread">
@@ -923,6 +930,31 @@
<div class="notif-s" data-i18n="nt.n3s">邀请好友注册，双方都可获得会员天数。</div>
</div>
</div>
<div class="notif-row is-unread">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt.tReward">奖励</span><span class="notif-time">6h</span></div>
<div class="notif-t" data-i18n="nt.n4t">邀请奖励 +3 天已到账</div>
<div class="notif-s" data-i18n="nt.n4s">好友已完成注册，会员天数已计入你的账户。</div>
</div>
</div>
<div class="notif-row">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt.tVersion">版本</span><span class="notif-time">2d</span></div>
<div class="notif-t" data-i18n="nt.n5t">v1.0.73 已发布</div>
<div class="notif-s" data-i18n="nt.n5s">修复已知问题，建议尽快更新。</div>
<div class="notif-actions"><button class="notif-action" data-i18n="nt.updateBtn">去更新</button></div>
</div>
</div>
<div class="notif-row">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt.tPromo">优惠</span><span class="notif-time">4d</span></div>
<div class="notif-t" data-i18n="nt.n6t">¥6 月付优惠上线</div>
<div class="notif-s" data-i18n="nt.n6s">限时活动，PRO 月付低至 ¥6，先到先得。</div>
</div>
</div>
</div>
</div>
</section>
@@ -1126,6 +1158,11 @@ var I18N = {
'nt.n1t':{zh:'服务条款与隐私政策更新',en:'Terms & privacy policy updated'}, 'nt.n1s':{zh:'我们更新了服务条款，请查阅最新内容。',en:'We have updated our terms — please review the latest version.'},
'nt.n2t':{zh:'新增日本 · 大阪加速线路',en:'New Japan · Osaka lines added'}, 'nt.n2s':{zh:'三条低延迟线路已上线，欢迎体验。',en:'Three low-latency lines are now live.'},
'nt.n3t':{zh:'邀请好友活动进行中',en:'Invite-a-friend event is live'}, 'nt.n3s':{zh:'邀请好友注册，双方都可获得会员天数。',en:'Invite friends to sign up — both sides earn membership days.'},
'nt.tReward':{zh:'奖励',en:'Reward'}, 'nt.tVersion':{zh:'版本',en:'Version'}, 'nt.tPromo':{zh:'优惠',en:'Promo'},
'nt.n1full':{zh:'本次更新新增数据留存与第三方共享条款说明，不影响现有账户与订阅权益，建议登录网页用户中心查看完整版本。',en:'This update adds details on data retention and third-party sharing. It does not affect your existing account or subscription — please review the full version in the web user center.'},
'nt.n4t':{zh:'邀请奖励 +3 天已到账',en:'Referral reward: +3 days credited'}, 'nt.n4s':{zh:'好友已完成注册，会员天数已计入你的账户。',en:'Your friend has completed sign-up — the days have been added to your account.'},
'nt.n5t':{zh:'v1.0.73 已发布',en:'v1.0.73 is out'}, 'nt.n5s':{zh:'修复已知问题，建议尽快更新。',en:'Bug fixes included — update is recommended.'}, 'nt.updateBtn':{zh:'去更新',en:'Update now'},
'nt.n6t':{zh:'¥6 月付优惠上线',en:'¥6/mo promo is live'}, 'nt.n6s':{zh:'限时活动，PRO 月付低至 ¥6，先到先得。',en:'Limited-time offer — PRO monthly as low as ¥6, while it lasts.'},
'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'},
@@ -1824,6 +1861,9 @@ var _accDevices=document.getElementById('accDevicesRow'); if(_accDevices) _accDe
var _dvBack=document.getElementById('dvBack'); if(_dvBack) _dvBack.addEventListener('click', function(){ setView('account'); });
var _tbBell=document.getElementById('tbBell'); if(_tbBell) _tbBell.addEventListener('click', function(){ if(S.view!=='notifications'){ S.notifFrom=S.view; } setView('notifications'); });
var _ntBack=document.getElementById('ntBack'); if(_ntBack) _ntBack.addEventListener('click', function(){ setView(S.notifFrom||'connect'); });
document.querySelectorAll('.notif-row.is-expandable').forEach(function(row){
row.addEventListener('click', function(e){ if(e.target.closest('.notif-action')) return; row.classList.toggle('is-open'); });
});
var _invBack=document.getElementById('invBack'); if(_invBack) _invBack.addEventListener('click', function(){ setView('account'); });
var _rdBack=document.getElementById('rdBack'); if(_rdBack) _rdBack.addEventListener('click', function(){ setView('account'); });
document.querySelectorAll('.js-inv-copy').forEach(function(b){ b.addEventListener('click', function(){ pvToast((S.lang==='zh'?'已复制：':'Copied: ')+b.dataset.copy); }); });
design/prototype/screens/ui-mobile.html
+82 -30
View File
@@ -341,10 +341,23 @@
.sub-stack > *:last-child{ margin-bottom:0; }
.sub-note{ font-size:var(--text-caption); color:var(--fg3); line-height:var(--leading-relaxed); text-align:center; }
/* 通知收件箱 · 未读点 */
.noti-dot{ width:8px; height:8px; border-radius:var(--radius-full); background:var(--danger); flex:none; display:block; }
.noti-item.is-read .noti-dot{ background:var(--border-strong); }
.noti-item.is-read .st-title{ color:var(--fg2); font-weight:600; }
/* 通知收件箱 · 与桌面同构（pill 类型 + 标题 + 相对时间 + 未读点） */
.notif-row{ display:flex; align-items:flex-start; gap:var(--space-3); padding:14px 16px; border-top:1px solid var(--border); }
.notif-row:first-child{ border-top:none; }
.notif-dot{ flex:none; width:8px; height:8px; margin-top:6px; border-radius:var(--radius-full); background:var(--danger); }
.notif-row:not(.is-unread) .notif-dot{ background:transparent; border:1.5px solid var(--border-strong); }
.notif-row:not(.is-unread) .notif-t{ color:var(--fg2); }
.notif-body{ flex:1; min-width:0; }
.notif-head{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:4px; }
.notif-time{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg3); }
.notif-t{ font-size:14px; font-weight:600; color:var(--fg1); }
.notif-s{ font-size:12.5px; color:var(--fg3); margin-top:2px; line-height:var(--leading-normal); }
.notif-row.is-expandable{ cursor:pointer; }
.notif-full{ display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--fg2); line-height:var(--leading-normal); }
.notif-row.is-open .notif-full{ display:block; }
.notif-actions{ margin-top:8px; }
.notif-action{ flex:none; padding:4px var(--space-3); border-radius:var(--radius-full); border:1px solid var(--border-strong); background:transparent; color:var(--fg2); font-family:var(--font-sans); font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
.notif-action:hover{ border-color:var(--accent); color:var(--accent); }
/* 邀请好友 */
.inv-hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); }
@@ -929,29 +942,59 @@
</div>
</section>
<!-- 通知收件箱（占位·mockup 级） -->
<!-- 通知收件箱（与桌面同构 · pill 式六类示例） -->
<section class="sub-screen" data-sub="notifications">
<div class="sub-scr sub-stack">
<div class="card card-flush">
<div class="setting-row noti-item">
<span class="icon-box"><svg><use href="#i-zap"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="noti1">新增日本 · 大阪加速线路</div><div class="st-sub" data-i18n="noti1sub">功能 · 2 小时前</div></div>
<div class="st-trail"><span class="noti-dot"></span></div>
<div class="card card-flush" id="notifList">
<div class="notif-row is-unread is-expandable" id="ntRow1">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt1Type">重要</span><span class="notif-time">2h</span></div>
<div class="notif-t" data-i18n="nt1Title">服务条款与隐私政策更新</div>
<div class="notif-s" data-i18n="nt1Sub">我们更新了服务条款，请查阅最新内容。</div>
<div class="notif-full" data-i18n="nt1Full">本次更新新增数据留存与第三方共享条款说明，不影响现有账户与订阅权益，建议登录网页用户中心查看完整版本。</div>
</div>
</div>
<div class="setting-row noti-item">
<span class="icon-box"><svg><use href="#i-shield"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="noti2">安全提示：请及时更新到 v1.1.0</div><div class="st-sub" data-i18n="noti2sub">重要 · 昨天</div></div>
<div class="st-trail"><span class="noti-dot"></span></div>
<div class="notif-row is-unread">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt2Type">功能</span><span class="notif-time">1d</span></div>
<div class="notif-t" data-i18n="nt2Title">新增日本 · 大阪加速线路</div>
<div class="notif-s" data-i18n="nt2Sub">三条低延迟线路已上线，欢迎体验。</div>
</div>
</div>
<div class="setting-row noti-item is-read">
<span class="icon-box"><svg><use href="#i-gift"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="noti3">邀请好友活动上线，双方得会员</div><div class="st-sub" data-i18n="noti3sub">新闻 · 3 天前</div></div>
<div class="st-trail"><span class="noti-dot"></span></div>
<div class="notif-row">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt3Type">新闻</span><span class="notif-time">3d</span></div>
<div class="notif-t" data-i18n="nt3Title">邀请好友活动进行中</div>
<div class="notif-s" data-i18n="nt3Sub">邀请好友注册，双方都可获得会员天数。</div>
</div>
</div>
<div class="setting-row noti-item is-read">
<span class="icon-box"><svg><use href="#i-check-circle"/></svg></span>
<div class="st-body"><div class="st-title" data-i18n="noti4">欢迎使用穿山甲，体验期 7 天已开启</div><div class="st-sub" data-i18n="noti4sub">新闻 · 1 周前</div></div>
<div class="st-trail"><span class="noti-dot"></span></div>
<div class="notif-row is-unread">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt4Type">奖励</span><span class="notif-time">6h</span></div>
<div class="notif-t" data-i18n="nt4Title">邀请奖励 +3 天已到账</div>
<div class="notif-s" data-i18n="nt4Sub">好友已完成注册，会员天数已计入你的账户。</div>
</div>
</div>
<div class="notif-row">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt5Type">版本</span><span class="notif-time">2d</span></div>
<div class="notif-t" data-i18n="nt5Title">v1.0.73 已发布</div>
<div class="notif-s" data-i18n="nt5Sub">修复已知问题，建议尽快更新。</div>
<div class="notif-actions"><button class="notif-action" data-i18n="nt5Btn">去更新</button></div>
</div>
</div>
<div class="notif-row">
<span class="notif-dot"></span>
<div class="notif-body">
<div class="notif-head"><span class="pill pill-outline" data-i18n="nt6Type">优惠</span><span class="notif-time">4d</span></div>
<div class="notif-t" data-i18n="nt6Title">¥6 月付优惠上线</div>
<div class="notif-s" data-i18n="nt6Sub">限时活动，PRO 月付低至 ¥6，先到先得。</div>
</div>
</div>
</div>
<p class="sub-note" data-i18n="notiFoot">仅显示最近通知（演示占位）</p>
@@ -1276,10 +1319,13 @@ const I18N = {
setGrpAppr:'外观', setGrpAbout:'关于', setCheckUpdate:'检查更新',
contactEmail:'邮箱', contactWeb:'官网', contactHours:'服务时间', contactHoursVal:'每日 9:00–24:00 (GMT+8)',
navNotifications:'通知', notiFoot:'仅显示最近通知（演示占位）',
noti1:'新增日本 · 大阪加速线路', noti1sub:'功能 · 2 小时前',
noti2:'安全提示：请及时更新到 v1.1.0', noti2sub:'重要 · 昨天',
noti3:'邀请好友活动上线，双方得会员', noti3sub:'新闻 · 3 天前',
noti4:'欢迎使用穿山甲，体验期 7 天已开启', noti4sub:'新闻 · 1 周前',
nt1Type:'重要', nt1Title:'服务条款与隐私政策更新', nt1Sub:'我们更新了服务条款，请查阅最新内容。',
nt1Full:'本次更新新增数据留存与第三方共享条款说明，不影响现有账户与订阅权益，建议登录网页用户中心查看完整版本。',
nt2Type:'功能', nt2Title:'新增日本 · 大阪加速线路', nt2Sub:'三条低延迟线路已上线，欢迎体验。',
nt3Type:'新闻', nt3Title:'邀请好友活动进行中', nt3Sub:'邀请好友注册，双方都可获得会员天数。',
nt4Type:'奖励', nt4Title:'邀请奖励 +3 天已到账', nt4Sub:'好友已完成注册，会员天数已计入你的账户。',
nt5Type:'版本', nt5Title:'v1.0.73 已发布', nt5Sub:'修复已知问题，建议尽快更新。', nt5Btn:'去更新',
nt6Type:'优惠', nt6Title:'¥6 月付优惠上线', nt6Sub:'限时活动，PRO 月付低至 ¥6，先到先得。',
inviteTitle:'邀请好友', inviteHeadline:'邀请好友得会员', inviteLede:'好友注册、首购、加入社区，双方都各得订阅天数。',
inviteCode:'邀请码', inviteLink:'邀请链接', inviteRewards:'奖励规则',
inviteR1:'好友注册 · 双方各得 3 天', inviteR2:'好友首次购买 · 双方各得 7 天', inviteR3:'加入 TG 频道 · 获得 3 天',
@@ -1354,10 +1400,13 @@ const I18N = {
setGrpAppr:'Appearance', setGrpAbout:'About', setCheckUpdate:'Check for updates',
contactEmail:'Email', contactWeb:'Website', contactHours:'Service hours', contactHoursVal:'Daily 9:00–24:00 (GMT+8)',
navNotifications:'Notifications', notiFoot:'Recent notifications only (demo)',
noti1:'New node: Japan · Osaka', noti1sub:'Feature · 2h ago',
noti2:'Please update to v1.1.0', noti2sub:'Important · yesterday',
noti3:'Referral program is live', noti3sub:'News · 3d ago',
noti4:'Welcome — your 7-day trial is on', noti4sub:'News · 1w ago',
nt1Type:'Important', nt1Title:'Terms & privacy policy updated', nt1Sub:'We have updated our terms — please review the latest version.',
nt1Full:'This update adds details on data retention and third-party sharing. It does not affect your existing account or subscription — please review the full version in the web user center.',
nt2Type:'Feature', nt2Title:'New Japan · Osaka lines added', nt2Sub:'Three low-latency lines are now live.',
nt3Type:'News', nt3Title:'Invite-a-friend event is live', nt3Sub:'Invite friends to sign up — both sides earn membership days.',
nt4Type:'Reward', nt4Title:'Referral reward: +3 days credited', nt4Sub:'Your friend has completed sign-up — the days have been added to your account.',
nt5Type:'Version', nt5Title:'v1.0.73 is out', nt5Sub:'Bug fixes included — update is recommended.', nt5Btn:'Update now',
nt6Type:'Promo', nt6Title:'¥6/mo promo is live', nt6Sub:'Limited-time offer — PRO monthly as low as ¥6, while it lasts.',
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 · +7 days each', inviteR3:'Join TG channel · earn 3 days',
@@ -2011,6 +2060,9 @@ function subLangSync(){ if(subOverlay && subOverlay.classList.contains('is-open'
// 顶栏铃铛 → 通知收件箱
$('#bellBtn').addEventListener('click', ()=>subOpen('notifications'));
document.querySelectorAll('.notif-row.is-expandable').forEach(function(row){
row.addEventListener('click', function(e){ if(e.target.closest('.notif-action')) return; row.classList.toggle('is-open'); });
});
// 账户入口
$('#rowSettings').addEventListener('click', ()=>subOpen('settings'));
$('#rowContact').addEventListener('click', ()=>subOpen('contact'));