feat(web): connect quick share flow

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

web/src/features/channel/SideRail.tsx

@@ -0,0 +1,39 @@
+import { useWorkspace } from '@/store/workspace';
+import { Button } from '@/ui/Button';
+import { DevicePanel } from './DevicePanel';
+import styles from './SideRail.module.css';
+
+interface Props {
+  open: boolean;
+  qrOpen: boolean;
+  onToggle: () => void;
+}
+
+/** 电脑右侧的设备与分享:低频,默认收成窄栏,需要时展开 */
+export function SideRail({ open, qrOpen, onToggle }: Props) {
+  const online = useWorkspace((s) => s.devices.filter((d) => d.online).length);
+  const seats = useWorkspace((s) => s.channel?.seats);
+
+  if (open) {
+    return (
+      <aside className={styles.open}>
+        <div className={styles.head}>
+          <span className={styles.heading}>设备与分享</span>
+          <Button variant="ghost" icon="chevronRight" label="收起" onClick={onToggle} />
+        </div>
+        <DevicePanel qrOpen={qrOpen} />
+      </aside>
+    );
+  }
+
+  return (
+    <aside className={styles.rail}>
+      <Button variant="ghost" icon="chevronLeft" label="展开设备与分享" onClick={onToggle} />
+      <span className={styles.count} title="在线设备">
+        <span className={styles.dot} />
+        {online}/{seats}
+      </span>
+      <Button variant="ghost" icon="share" label="分享" onClick={onToggle} />
+    </aside>
+  );
+}