feat: enhance mobile layout and accessibility across components

- Added mobile layout support in AdminPage, SecurityDevicesPage, SendsPage, and VaultPage.
- Implemented responsive design adjustments including mobile sidebar and panel transitions.
- Updated table structures to include data labels for better accessibility.
- Introduced new translations for mobile-specific UI elements.
- Enhanced styles for mobile views, including button adjustments and sidebar behaviors.
This commit is contained in:
shuaiplus
2026-03-08 17:07:21 +08:00
parent 0e1152a0b9
commit 68583821fe
7 changed files with 1139 additions and 153 deletions
+9 -9
View File
@@ -56,11 +56,11 @@ export default function AdminPage(props: AdminPageProps) {
<tbody>
{props.users.map((user) => (
<tr key={user.id}>
<td>{user.email}</td>
<td>{user.name || t('txt_dash')}</td>
<td>{roleText(user.role)}</td>
<td>{statusText(user.status)}</td>
<td>
<td data-label={t('txt_email')}>{user.email}</td>
<td data-label={t('txt_name')}>{user.name || t('txt_dash')}</td>
<td data-label={t('txt_role')}>{roleText(user.role)}</td>
<td data-label={t('txt_status')}>{statusText(user.status)}</td>
<td data-label={t('txt_actions')}>
<div className="actions">
<button
type="button"
@@ -126,10 +126,10 @@ export default function AdminPage(props: AdminPageProps) {
<tbody>
{pagedInvites.map((invite) => (
<tr key={invite.code}>
<td>{invite.code}</td>
<td>{statusText(invite.status)}</td>
<td>{formatExpiresAt(invite.expiresAt)}</td>
<td>
<td data-label={t('txt_code')}>{invite.code}</td>
<td data-label={t('txt_status')}>{statusText(invite.status)}</td>
<td data-label={t('txt_expires_at')}>{formatExpiresAt(invite.expiresAt)}</td>
<td data-label={t('txt_actions')}>
<div className="actions invite-row-actions">
<button
type="button"