feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/ui/QrCode.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { encodeQr } from '@/lib/qr';
+import styles from './QrCode.module.css';
+
+const QUIET = 4; // 码周围的静区(模块数),规范要求 ≥ 4
+
+export function QrCode({ text, label }: { text: string; label: string }) {
+  const grid = useMemo(() => {
+    try {
+      return encodeQr(text);
+    } catch {
+      return null;
+    }
+  }, [text]);
+
+  if (!grid) return <p className={styles.fail}>内容太长,无法生成二维码。</p>;
+
+  const n = grid.length + QUIET * 2;
+  const path = grid
+    .flatMap((row, y) => row.map((dark, x) => (dark ? `M${x + QUIET} ${y + QUIET}h1v1h-1z` : '')))
+    .join('');
+
+  return (
+    <svg className={styles.qr} viewBox={`0 0 ${n} ${n}`} role="img" aria-label={label} shapeRendering="crispEdges">
+      <rect width={n} height={n} className={styles.bg} />
+      <path d={path} className={styles.fg} />
+    </svg>
+  );
+}