39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
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 channel = useWorkspace((s) => s.channel);
|
|
|
|
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="已加入席位 / 总席位">
|
|
{channel?.seatsUsed ?? '—'}/{channel?.seats ?? '—'}
|
|
<span className={styles.countLabel}>席位</span>
|
|
</span>
|
|
<Button variant="ghost" icon="share" label="分享" onClick={onToggle} />
|
|
</aside>
|
|
);
|
|
}
|