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

design+client: 抽 .view-body/PageBody 统一桌面内容页宽度(600/wide 840)——stats·contact 补约束,settings·contact 560→600,九页收口

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P9G7E3wmAYL9KeYCVZVsqu
This commit is contained in:
wangjia
2026-07-13 09:46:57 +08:00
parent b88921a030
commit fa9a5c2d5e
22 changed files with 87 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/prototype/atoms.css
+10
View File
@@ -92,6 +92,16 @@
.btn-block { width: 100%; }
/* =============================================================
VIEW BODY · .view-body (+ .is-wide)
桌面客户端内容视图统一宽度容器 —— 对齐 Flutter PageBody(client/lib/widgets/page_body.dart)。
默认 600px 居中(单栏内容页：账户/设置/联系我们/统计/订单/通知/邀请)；
.is-wide 840px(多列网格页：购买套餐)。宽度标量本身无对应 token，字面写死属正常。
============================================================= */
.view-body{ max-width:600px; margin:0 auto; padding:var(--space-5) var(--space-6) var(--space-6); }
.view-body.is-wide{ max-width:840px; }
/* =============================================================
CARD · .card
surface 底 + border + radius-lg + shadow-sm
design/prototype/index.html
+24
View File
@@ -189,6 +189,7 @@
<div class="dgroup">组件 Atoms</div>
<a class="dnav" data-s="a-btn">按钮 .btn</a>
<a class="dnav" data-s="a-card">卡片 .card</a>
<a class="dnav" data-s="a-viewbody">内容容器 .view-body</a>
<a class="dnav" data-s="a-input">输入 .input</a>
<a class="dnav" data-s="a-pill">胶囊 .pill / .badge</a>
<a class="dnav" data-s="a-lang">语言下拉 .langsel</a>
@@ -433,6 +434,29 @@
</div></div>
</section>
<section class="section" id="a-viewbody">
<h2>内容容器 · .view-body</h2>
<p class="desc">桌面客户端内容视图统一宽度容器：默认居中 <code>600px</code>（账户/设置/联系我们/统计/订单/通知/邀请等单栏页），<code>.is-wide</code> 修饰 <code>840px</code>（购买套餐等多列网格页）。padding 固定 <code>space-5 space-6 space-6</code>。对齐 Flutter <code>PageBody</code>(<code>client/lib/widgets/page_body.dart</code>)。</p>
<div class="pcard"><div class="pcard-h"><h3>默认 · 600px</h3><span class="tk">.view-body</span></div><div class="pcard-b col">
<div style="border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-subtle)">
<div class="view-body" style="border:1px solid var(--accent-border); background:var(--surface); border-radius:var(--radius-md)">
<div class="t-overline" style="color:var(--fg3)">.view-body</div>
<div class="t-h3" style="margin:var(--space-2) 0 var(--space-1)">单栏内容视图</div>
<div class="t-sm" style="color:var(--fg2)">max-width:600px · margin:0 auto 居中 · padding 5/6/6</div>
</div>
</div>
</div></div>
<div class="pcard"><div class="pcard-h"><h3>宽 · 840px</h3><span class="tk">.view-body.is-wide</span></div><div class="pcard-b col">
<div style="border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-subtle)">
<div class="view-body is-wide" style="border:1px solid var(--accent-border); background:var(--surface); border-radius:var(--radius-md)">
<div class="t-overline" style="color:var(--fg3)">.view-body.is-wide</div>
<div class="t-h3" style="margin:var(--space-2) 0 var(--space-1)">多列网格页（购买套餐）</div>
<div class="t-sm" style="color:var(--fg2)">max-width:840px · padding 沿用默认 5/6/6</div>
</div>
</div>
</div></div>
</section>
<section class="section" id="a-input">
<h2>输入 · .input / .field / .flabel</h2>
<p class="desc">强描边 + radius-md + focus clay 光环。状态 <code>.is-focused</code> / <code>.is-error</code> / <code>:disabled</code>。</p>
design/prototype/screens/ui-desktop.html
+10 -17
View File
@@ -125,7 +125,6 @@
.searchbar input::placeholder{ color:var(--fg3); }
/* ---- 统计视图 ---- */
.stats-view{ padding:var(--space-5) var(--space-6) var(--space-6); }
/* 顶行:标题左 + 设备筛选下拉右(对齐线上 stats_page.dart 的 _DeviceDropdown) */
.stats-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.stats-head .sh-t{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--fg1); }
@@ -155,7 +154,6 @@
.sc-g1{ stop-color:var(--accent); stop-opacity:0; }
/* ---- 账户视图 ---- */
.account-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:600px; margin:0 auto; }
.account-view .plan-banner{ margin-bottom:var(--space-5); }
.st-change{ font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--accent); }
@@ -176,11 +174,9 @@
.dv-menu .menu-item.is-danger:hover{ background:var(--danger-subtle); }
/* ---- 设置视图 ---- */
.settings-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:600px; margin:0 auto; }
.side .plan-badge{ width:100%; }
/* ---- 联系视图 ---- */
.contact-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:none; }
.contact-intro{ font-size:13px; color:var(--fg2); line-height:var(--leading-relaxed); margin:0 0 var(--space-4); }
.icon-box.is-plain{ background:var(--bg-subtle); color:var(--fg2); }
.hours-card{ display:flex; align-items:center; gap:10px; background:var(--bg-subtle);
@@ -190,7 +186,7 @@
.hours-card .hc-s{ font-family:var(--font-mono); font-size:12px; color:var(--fg3); margin-top:2px; }
/* ---- 购买视图（兑换 & 购买流程，接入主框架内容区） ---- */
.purchase-view{ padding:var(--space-5) var(--space-6) var(--space-8); max-width:840px; margin:0 auto; }
.purchase-view{ padding:var(--space-5) var(--space-6) var(--space-8); }
.pv-back{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent;
color:var(--accent); font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer;
padding:6px 12px 6px 8px; margin-bottom:var(--space-4); border-radius:var(--radius-full);
@@ -242,7 +238,6 @@
.pv-qr-cap{ font-size:var(--text-sm); font-weight:600; color:var(--fg1); }
/* ---- 我的订单视图（列表 → 详情，接入主框架内容区） ---- */
.orders-view{ padding:var(--space-5) var(--space-6) var(--space-8); max-width:600px; margin:0 auto; }
.od-screen{ display:none; }
.od-screen.is-active{ display:block; }
/* 订单详情 = 一张「收据」卡：顶部渐变条 + 摘要头(金额左/状态右) + 虚线撕裂线 + 明细 */
@@ -346,7 +341,6 @@
background:var(--danger); border:1.5px solid var(--bg); }
/* ---- 通知收件箱视图 ---- */
.notif-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:600px; margin:0 auto; }
.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); }
@@ -359,7 +353,6 @@
.notif-s{ font-size:12.5px; color:var(--fg3); margin-top:2px; line-height:var(--leading-normal); }
/* ---- 邀请好友视图 ---- */
.invite-view{ padding:var(--space-5) var(--space-6) var(--space-6); max-width:600px; margin:0 auto; }
.invite-code-card{ margin-bottom:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.inv-lead{ font-size:13px; color:var(--fg2); line-height:var(--leading-relaxed); }
.inv-code-box, .inv-link-box{ display:flex; align-items:center; gap:var(--space-2);
@@ -531,7 +524,7 @@
<!-- 统计视图 -->
<section class="view" data-view="stats">
<div class="stats-view">
<div class="view-body stats-view">
<div class="stats-head">
<span class="sh-t" data-i18n="nav.stats">统计</span>
<span class="langsel stats-dd" id="devSel">
@@ -583,7 +576,7 @@
<!-- 账户视图 -->
<section class="view" data-view="account">
<div class="account-view">
<div class="view-body account-view">
<div class="plan-banner" id="planBanner">
<div class="pbn-row">
<span class="pbn-badge" id="pbnBadge"><svg id="pbnIcon"><use href="#i-user"/></svg></span>
@@ -656,7 +649,7 @@
<!-- 设备管理视图（自账户页下钻） -->
<section class="view" data-view="devices">
<div class="account-view">
<div class="view-body account-view">
<button class="pv-back" id="dvBack"><svg><use href="#i-arrow-left"/></svg><span data-i18n="dev.back">返回</span></button>
<div class="sec-label"><span data-i18n="acc.devices">设备管理</span> · <span id="devHeaderCount">1 / 5</span></div>
<div class="card card-flush" id="deviceList" style="margin-bottom:var(--space-5)"></div>
@@ -665,7 +658,7 @@
<!-- 设置视图 -->
<section class="view" data-view="settings">
<div class="settings-view">
<div class="view-body settings-view">
<div class="sec-label" data-i18n="set.grpConn">连接</div>
<div class="card card-flush" style="margin-bottom:var(--space-5)">
<div class="setting-row">
@@ -734,7 +727,7 @@
<!-- 联系视图 -->
<section class="view" data-view="contact">
<div class="contact-view">
<div class="view-body">
<p class="contact-intro" data-i18n="contact.intro">遇到问题？通过以下任一渠道联系我们，通常数分钟内回复。</p>
<div class="card card-flush" style="margin-bottom:var(--space-3)">
<div class="setting-row is-tap">
@@ -765,7 +758,7 @@
<!-- 购买视图（兑换 & 购买流程，接入主框架内容区） -->
<section class="view" data-view="purchase">
<div class="purchase-view">
<div class="view-body is-wide purchase-view">
<button class="pv-back" id="pvBack"><svg><use href="#i-arrow-left"/></svg><span data-i18n="pur.back">返回</span></button>
<!-- ① 档位选择：特性统一置顶 + 3 档精简卡 -->
@@ -871,7 +864,7 @@
<!-- 我的订单视图（列表 → 详情，接入主框架内容区） -->
<section class="view" data-view="orders">
<div class="orders-view">
<div class="view-body orders-view">
<button class="pv-back" id="odBack"><svg><use href="#i-arrow-left"/></svg><span data-i18n="ord.back">返回</span></button>
<!-- 列表 -->
@@ -899,7 +892,7 @@
<!-- 通知收件箱视图（占位 · Spec ③） -->
<section class="view" data-view="notifications">
<div class="notif-view">
<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">
@@ -933,7 +926,7 @@
<!-- 邀请好友视图（占位 · Spec ②） -->
<section class="view" data-view="invite">
<div class="invite-view">
<div class="view-body invite-view">
<button class="pv-back" id="invBack"><svg><use href="#i-arrow-left"/></svg><span data-i18n="inv.back">返回</span></button>
<div class="sec-label" data-i18n="inv.title">邀请好友</div>
<div class="card invite-code-card">