feat: MVP 工程脚手架——剧情引擎、Act 1 三章内容、Jev 服务层、画像报告与分享卡、Tauri 壳

src/ui/report/ShareCard.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import { BADGE_MAP, PROFILE_DIMENSIONS } from './badges';
+import type { DimensionScore } from './ReportPage';
+
+interface Props {
+  badgeDimension: string;
+  scores: DimensionScore[];
+}
+
+/** 分享卡：canvas 生成 PNG 下载（勋章 + 7 维分数） */
+export function ShareCard({ badgeDimension, scores }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    draw();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scores, badgeDimension]);
+
+  function draw(): HTMLCanvasElement {
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
+    const W = 640;
+    const H = 960;
+    canvas.width = W;
+    canvas.height = H;
+
+    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.fillRect(0, 0, W, H);
+
+    ctx.textAlign = 'center';
+    ctx.fillStyle = '#c9b48a';
+    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.font = 'bold 44px serif';
+    ctx.fillText('勋', W / 2, 236);
+
+    ctx.fillStyle = '#f0e6d2';
+    ctx.font = 'bold 40px serif';
+    ctx.fillText(badge.title, W / 2, 360);
+    ctx.fillStyle = '#b0a490';
+    ctx.font = '22px serif';
+    ctx.fillText(badge.flavor, W / 2, 400);
+    if (dim) {
+      ctx.font = '20px serif';
+      ctx.fillText(`—— 实测维度：${dim.label} ——`, W / 2, 440);
+    }
+
+    // 7 维分数条
+    ctx.textAlign = 'left';
+    scores.forEach((s, i) => {
+      const y = 510 + i * 56;
+      ctx.fillStyle = '#d8ccb8';
+      ctx.font = '22px serif';
+      ctx.fillText(s.label, 80, y);
+      ctx.fillStyle = '#4a3f5a';
+      ctx.fillRect(260, y - 16, 240, 18);
+      ctx.fillStyle = '#d4a96a';
+      ctx.fillRect(260, y - 16, (240 * s.score) / s.max, 18);
+      ctx.fillStyle = '#d8ccb8';
+      ctx.fillText(`${s.score}`, 520, y);
+    });
+
+    ctx.textAlign = 'center';
+    ctx.fillStyle = '#8a7f6a';
+    ctx.font = '18px serif';
+    ctx.fillText('每个选择都是实测，没有自报。', W / 2, H - 40);
+    return canvas;
+  }
+
+  function download() {
+    const canvas = draw();
+    const a = document.createElement('a');
+    a.href = canvas.toDataURL('image/png');
+    a.download = '苍梧疑冢-勋章分享卡.png';
+    a.click();
+  }
+
+  return (
+    <div className="share-card">
+      <canvas ref={canvasRef} className="share-canvas" width={640} height={960} />
+      <button className="primary" onClick={download}>
+        下载分享卡 PNG
+      </button>
+    </div>
+  );
+}