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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P9G7E3wmAYL9KeYCVZVsqu

design/prototype/index.html

@@ -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>