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/desktop/dapp.jsx

@@ -135,6 +135,11 @@ function DServers({ t, lang, current, onPick }) {
 
 function DStats({ t, lang }) {
   const vals=[2.1,3.4,1.8,4.6,5.2,6.1,3.0]; const labels=t('days'); const max=6.1;
+  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:'8px 32px 24px' }}>
       <div style={{ display:'flex', gap:14, marginBottom:22 }}>
@@ -157,6 +162,26 @@ function DStats({ t, lang }) {
           ))}
         </div>
       </div>
+      <div style={{ fontSize:13, fontWeight:600, color:'var(--fg1)', margin:'22px 0 12px 2px' }}>{t('byDevice')}</div>
+      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
+        {devs.map((d,i)=>(
+          <div key={d.name} style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 16px', 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 }}>
+              <DIcon name={d.icon} size={19} stroke={2.2} color="var(--accent)" />
+            </div>
+            <div style={{ flex:1, minWidth:0 }}>
+              <div style={{ fontSize:14.5, 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:14.5, fontWeight:500, color:'var(--fg1)' }}>{d.gb}<span style={{ fontSize:11, color:'var(--fg3)' }}> GB</span></div>
+              <div style={{ fontSize:11, color:'var(--fg3)', marginTop:2 }}>{d.h} h</div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

design/ui_kits/desktop/dparts.jsx

@@ -70,6 +70,7 @@ const DSTRINGS = {
   search:{zh:'搜索国家 / 城市',en:'Search country / city'},
   trafficMonth:{zh:'本月流量',en:'Traffic'}, avgPing:{zh:'平均延迟',en:'Avg ping'}, durMonth:{zh:'本月时长',en:'Time'},
   weekTraffic:{zh:'本周流量 (GB)',en:'This week (GB)'},
+  byDevice:{zh:'设备明细',en:'By device'}, noDeviceUsage:{zh:'暂无设备用量',en:'No device usage yet'},
   autostart:{zh:'开机自启动',en:'Launch at login'}, autostartSub:{zh:'登录系统时自动启动穿山甲',en:'Start Pangolin when you log in'},
   smartRoute:{zh:'智能分流',en:'Smart routing'}, smartRouteSub:{zh:'海外应用加速,本地直连',en:'Accelerate overseas apps, keep local direct'},
   killSwitch:{zh:'Kill Switch',en:'Kill Switch'}, killSwitchSub:{zh:'断线时阻断网络,防止 IP 泄露',en:'Block all traffic if connection drops'},