feat(web): space roles, upload queue with pipelined frames, background resume and faster sending

web/src/features/item/TransferProgress.tsx

@@ -0,0 +1,22 @@
+import { formatSize, formatTransferProgress, type TransferState } from '@/lib/format';
+import styles from './TransferProgress.module.css';
+
+interface Props {
+  state: TransferState & { sentBytes?: number; totalBytes?: number };
+  /** 排队中或上传中的文件可以取消 */
+  onCancel?: () => void;
+}
+
+/** 文件上传的进度:一行状态文字,一条进度条,可取消 */
+export function TransferProgress({ state, onCancel }: Props) {
+  const queued = state.phase === 'queued';
+  const detail = state.sentBytes !== undefined && state.totalBytes ? `${formatSize(state.sentBytes)} / ${formatSize(state.totalBytes)}` : '';
+  return <div className={styles.transfer} role="status">
+    <div className={styles.line}>
+      <span>{formatTransferProgress(state)}</span>
+      {detail && !queued ? <small>{detail}</small> : null}
+      {onCancel ? <button type="button" className={styles.cancel} onClick={onCancel}>取消</button> : null}
+    </div>
+    {queued ? null : <progress max={1} value={state.progress} aria-label="上传进度" />}
+  </div>;
+}