45 lines
2.5 KiB
TypeScript
45 lines
2.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { accountApi, type AccountDevice } from '@/core-bridge/account';
|
|
import { useAccount } from '@/store/account';
|
|
import { Button } from '@/ui/Button';
|
|
import styles from './AccountPanel.module.css';
|
|
|
|
export function AccountDevices() {
|
|
const [devices, setDevices] = useState<AccountDevice[]>([]);
|
|
const [names, setNames] = useState<Record<string, string>>({});
|
|
const [error, setError] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const refreshAccount = useAccount((s) => s.refresh);
|
|
async function refresh() { setDevices(await accountApi.devices()); }
|
|
useEffect(() => { void refresh().catch(() => setError('设备清单读取失败')); }, []);
|
|
async function change(device: AccountDevice, revoke: boolean) {
|
|
setBusy(true); setError('');
|
|
try {
|
|
if (revoke) {
|
|
await accountApi.revokeDevice(device.id); await refreshAccount();
|
|
} else await accountApi.renameDevice(device.id, names[device.id] ?? device.name);
|
|
await refresh();
|
|
} catch (cause) { setError(cause instanceof Error ? cause.message : '设备更新失败'); }
|
|
finally { setBusy(false); }
|
|
}
|
|
return <section aria-label="账号设备">
|
|
<div className={styles.sectionHeader}><strong>我的设备</strong>
|
|
<Button variant="ghost" disabled={busy} onClick={() => { void refresh().catch(() => setError('设备清单读取失败')); }}>刷新设备</Button>
|
|
</div>
|
|
<p className={styles.note}>同一账号可登录多台设备。移除设备会撤销它的登录与空间席位，保留账号的空间成员资格。</p>
|
|
{devices.map((device) => <div className={styles.deviceRow} key={device.id}>
|
|
<label className={styles.deviceName}>
|
|
<input aria-label={`${device.name} 的设备名称`} maxLength={80} value={names[device.id] ?? device.name} onChange={(e) => setNames((values) => ({ ...values, [device.id]: e.target.value }))} />
|
|
<span className={styles.deviceType}>{device.current ? '本机' : '其他设备'}</span>
|
|
</label>
|
|
<div className={styles.deviceActions}>
|
|
<Button disabled={busy} onClick={() => { void change(device, false); }}>重命名</Button>
|
|
<Button variant="ghost" disabled={busy || device.current} onClick={() => {
|
|
if (window.confirm(`移除设备「${device.name}」并撤销它的登录？`)) void change(device, true);
|
|
}}>移除设备</Button>
|
|
</div>
|
|
</div>)}
|
|
{error ? <p className={styles.error} role="alert">{error}</p> : null}
|
|
</section>;
|
|
}
|