feat: 视觉方向与背景图素材（章节场景图、重构 CSS、界面布局）

src/ui/report/ShareCard.tsx

@@ -27,31 +27,30 @@ export function ShareCard({ badgeDimension, scores }: Props) {
     const badge = BADGE_MAP[badgeDimension] ?? { title: '档案采集员', flavor: '' };
     const dim = PROFILE_DIMENSIONS.find((d) => d.id === badgeDimension);
 
-    // 背景渐变（美术占位）
-    const bg = ctx.createLinearGradient(0, 0, W, H);
-    bg.addColorStop(0, '#1a1626');
-    bg.addColorStop(1, '#3a2a4a');
-    ctx.fillStyle = bg;
+    ctx.fillStyle = '#14231d';
     ctx.fillRect(0, 0, W, H);
+    ctx.strokeStyle = '#8ba58e';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(32, 32, W - 64, H - 64);
 
     ctx.textAlign = 'center';
-    ctx.fillStyle = '#c9b48a';
+    ctx.fillStyle = '#d0dfcd';
     ctx.font = '28px serif';
     ctx.fillText('苍梧疑冢 · 人格画像', W / 2, 80);
 
-    // 勋章圆
     ctx.beginPath();
     ctx.arc(W / 2, 220, 70, 0, Math.PI * 2);
-    ctx.fillStyle = '#d4a96a';
-    ctx.fill();
-    ctx.fillStyle = '#1a1626';
+    ctx.strokeStyle = '#bfa47c';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    ctx.fillStyle = '#eed6aa';
     ctx.font = 'bold 44px serif';
     ctx.fillText('勋', W / 2, 236);
 
-    ctx.fillStyle = '#f0e6d2';
+    ctx.fillStyle = '#f1eee4';
     ctx.font = 'bold 40px serif';
     ctx.fillText(badge.title, W / 2, 360);
-    ctx.fillStyle = '#b0a490';
+    ctx.fillStyle = '#b3c6b4';
     ctx.font = '22px serif';
     ctx.fillText(badge.flavor, W / 2, 400);
     if (dim) {
@@ -63,19 +62,19 @@ export function ShareCard({ badgeDimension, scores }: Props) {
     ctx.textAlign = 'left';
     scores.forEach((s, i) => {
       const y = 510 + i * 56;
-      ctx.fillStyle = '#d8ccb8';
+      ctx.fillStyle = '#dce7d9';
       ctx.font = '22px serif';
       ctx.fillText(s.label, 80, y);
-      ctx.fillStyle = '#4a3f5a';
+      ctx.fillStyle = '#385044';
       ctx.fillRect(260, y - 16, 240, 18);
-      ctx.fillStyle = '#d4a96a';
+      ctx.fillStyle = '#a8c1a3';
       ctx.fillRect(260, y - 16, (240 * s.score) / s.max, 18);
-      ctx.fillStyle = '#d8ccb8';
+      ctx.fillStyle = '#dce7d9';
       ctx.fillText(s.score.toFixed(1), 520, y);
     });
 
     ctx.textAlign = 'center';
-    ctx.fillStyle = '#8a7f6a';
+    ctx.fillStyle = '#acc0af';
     ctx.font = '18px serif';
     ctx.fillText('每个选择都是实测，没有自报。', W / 2, H - 40);
     return canvas;