chore(design): stats-overhaul 设计 WIP — CONTRACT + ui_kits 统计页规格

stats-overhaul 的设计稿(CONTRACT.md + mobile/tablet/desktop ui_kits)。

注:这批 ui_kits 描述的是统计页「上聚合·下分设备」原方案;统计页后续已
重设计为「月/周/日 周期卡 + 设备下拉 + 两周折线」(见 client/lib/screens/
stats_page.dart)。设计稿与新页布局有出入,待更新到新布局(单列 TODO 跟踪)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design/ui_kits/tablet/tabapp.jsx

@@ -23,6 +23,8 @@ const TSTR = {
   statTime:   { zh: '本月时长', en: 'Time this month' },
   weekTraffic:{ zh: '本周流量 (GB)', en: 'This week (GB)' },
   days:       { zh: ['周一','周二','周三','周四','周五','周六','周日'], en: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
+  byDevice:   { zh: '设备明细', en: 'By device' },
+  noDeviceUsage:{ zh: '暂无设备用量', en: 'No device usage yet' },
   acctEmail:  { zh: '邮箱', en: 'Email' },
   language:   { zh: '语言', en: 'Language' },
   darkMode:   { zh: '深色外观', en: 'Dark appearance' },
@@ -220,6 +222,11 @@ function TabStats({ tt, lang }) {
   const days = TSTR.days[lang];
   const max = Math.max(...vals);
   const card = { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };
+  const devs = [
+    { name: 'iPhone 15', icon: 'smartphone', gb: '11.3', h: '5.2', frac: 1.0 },
+    { name: 'MacBook Pro', icon: 'laptop', gb: '6.0', h: '3.1', frac: 0.53 },
+    { name: 'Pixel 8', icon: 'smartphone', gb: '1.6', h: '1.1', frac: 0.14 },
+  ];
   return (
     <div style={{ padding: '6px 28px 24px', overflow: 'auto', height: '100%', boxSizing: 'border-box' }}>
       <div style={{ display: 'flex', gap: 14, marginBottom: 20 }}>
@@ -242,6 +249,26 @@ function TabStats({ tt, lang }) {
           ))}
         </div>
       </div>
+      <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg1)', margin: '20px 0 12px 2px' }}>{tt('byDevice')}</div>
+      <div style={{ ...card, overflow: 'hidden' }}>
+        {devs.map((d, i) => (
+          <div key={d.name} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 18px', borderBottom: i < devs.length - 1 ? '1px solid var(--border)' : 'none' }}>
+            <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-md)', background: 'var(--accent-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+              <Icon name={d.icon} size={19} color="var(--accent)" stroke={2.2} />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
+              <div style={{ marginTop: 8, height: 4, borderRadius: 999, background: 'var(--border)', overflow: 'hidden' }}>
+                <div style={{ width: `${d.frac * 100}%`, height: '100%', background: 'var(--accent)', opacity: 0.85, borderRadius: 999 }} />
+              </div>
+            </div>
+            <div style={{ textAlign: 'right', flexShrink: 0 }}>
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 500, color: 'var(--fg1)' }}>{d.gb}<span style={{ fontSize: 11.5, color: 'var(--fg3)' }}> GB</span></div>
+              <div style={{ fontSize: 11.5, color: 'var(--fg3)', marginTop: 2 }}>{d.h} h</div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }