feat(web): connect quick share flow

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

web/src/features/share/ShareView.tsx

@@ -0,0 +1,82 @@
+import { lazy, Suspense, useCallback, useState } from 'react';
+import { CompactRow } from '@/features/item/CompactRow';
+import { useDownload } from '@/features/item/download';
+import { formatRemaining } from '@/lib/format';
+import { useShareSession } from '@/store/shareSession';
+import { Button } from '@/ui/Button';
+import { CopyButton } from '@/ui/CopyButton';
+import { Icon } from '@/ui/Icon';
+import { QrCode } from '@/ui/QrCode';
+import { ShareBar } from './ShareBar';
+import styles from './ShareView.module.css';
+
+const PreviewSheet = lazy(() => import('@/features/item/PreviewSheet'));
+
+const noop = () => {};
+
+/** 已封存的分享:只读。访客与创建者看到的清单相同,创建者多一张「分享给别人」卡片 */
+export function ShareView() {
+  const share = useShareSession((s) => s.share);
+  const ids = useShareSession((s) => s.order);
+  const download = useDownload();
+  const [sheetId, setSheetId] = useState<string>();
+  const [showQr, setShowQr] = useState(true);
+  const closeSheet = useCallback(() => setSheetId(undefined), []);
+
+  if (!share) return null;
+  const remaining = formatRemaining(share.createdAt + share.ttlSeconds * 1000);
+
+  async function downloadAll() {
+    const { byId } = useShareSession.getState();
+    for (const id of ids) {
+      const item = byId[id];
+      if (item) await download(item);
+      await new Promise((r) => setTimeout(r, 300)); // 浏览器会拦截太密集的多文件下载
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <ShareBar
+        title={share.mine ? '我的分享' : '收到的分享'}
+        badge={<span className={styles.badge}><Icon name="lock" size={12} /> 已封存 · 只读</span>}
+      />
+      <main className={styles.main}>
+        {share.mine ? (
+          <section className={styles.share} aria-label="分享给别人">
+            <h2 className={styles.h}>分享给别人</h2>
+            <code className={styles.link}>{share.link}</code>
+            <div className={styles.row}>
+              <CopyButton text={share.link} variant="primary" label="复制链接" />
+              <Button variant="ghost" icon="scan" aria-expanded={showQr} onClick={() => setShowQr((v) => !v)}>
+                {showQr ? '收起二维码' : '二维码'}
+              </Button>
+            </div>
+            {showQr ? <QrCode text={share.link} label="分享链接二维码" /> : null}
+            <p className={styles.dim}>
+              访客只能预览和下载。内容已封存,你也不能再修改或删除,{remaining}后自动清除。持有链接的人都能下载。
+            </p>
+          </section>
+        ) : (
+          <p className={styles.note}>
+            这是一个只读分享:内容不会再被修改,{remaining}后自动清除。
+          </p>
+        )}
+
+        <div className={styles.head}>
+          <span>{ids.length} 项内容</span>
+          <Button variant="primary" icon="download" onClick={() => void downloadAll()} disabled={ids.length === 0}>全部下载</Button>
+        </div>
+        <ul className={styles.list}>
+          {ids.map((id) => (
+            <CompactRow key={id} id={id} selected={false} onSelect={setSheetId} />
+          ))}
+        </ul>
+      </main>
+
+      <Suspense fallback={null}>
+        {sheetId ? <PreviewSheet id={sheetId} onClose={closeSheet} readOnly onDelete={noop} /> : null}
+      </Suspense>
+    </div>
+  );
+}