feat: enhance navigation layout and improve mobile settings UI

This commit is contained in:
shuaiplus
2026-07-12 23:16:01 +08:00
parent b093c01fd7
commit e25ec159bb
13 changed files with 111 additions and 183 deletions
+30 -22
View File
@@ -210,9 +210,19 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
return (
<Switch>
<Route path="/security/password-health">
<Suspense fallback={<RouteContentFallback />}>
<PasswordSecurityPage ciphers={props.decryptedCiphers} loading={props.ciphersLoading} />
</Suspense>
<div className="stack">
{props.mobileLayout && (
<div className="mobile-settings-subhead">
<button type="button" className="btn btn-secondary small mobile-settings-back" onClick={() => props.onNavigate(props.settingsHomeRoute)}>
<span className="btn-icon" aria-hidden="true">{"<"}</span>
{t('txt_back')}
</button>
</div>
)}
<Suspense fallback={<RouteContentFallback />}>
<PasswordSecurityPage ciphers={props.decryptedCiphers} loading={props.ciphersLoading} />
</Suspense>
</div>
</Route>
<Route path="/generator">
<Suspense fallback={<RouteContentFallback />}>
@@ -333,6 +343,19 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
<Route path="/settings">
{props.profile ? (
<section className="card mobile-settings-card settings-home-card">
<div className="settings-home-section">
<h3>{t('nav_group_tools')}</h3>
<div className="mobile-settings-links">
<Link href="/security/password-health" className="mobile-settings-link">
<ShieldCheck size={18} />
<span>{t('nav_password_security')}</span>
</Link>
<Link href={props.importRoute} className="mobile-settings-link">
<ArrowUpDown size={18} />
<span>{t('nav_import_export')}</span>
</Link>
</div>
</div>
<div className="settings-home-section">
<h3>{t('txt_settings')}</h3>
<div className="mobile-settings-links">
@@ -340,10 +363,6 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
<SettingsIcon size={18} />
<span>{t('nav_account_settings')}</span>
</Link>
<Link href="/security/password-health" className="mobile-settings-link">
<ShieldCheck size={18} />
<span>{t('nav_password_security')}</span>
</Link>
<Link href="/settings/security/device-management" className="mobile-settings-link">
<Shield size={18} />
<span>{t('nav_device_management')}</span>
@@ -354,25 +373,14 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
</Link>
</div>
</div>
<div className="settings-home-section">
<h3>{t('nav_group_data_backup')}</h3>
<div className="mobile-settings-links">
<Link href={props.importRoute} className="mobile-settings-link">
<ArrowUpDown size={18} />
<span>{t('nav_import_export')}</span>
</Link>
{isAdmin && (
{isAdmin && (
<div className="settings-home-section">
<h3>{t('nav_group_system_management')}</h3>
<div className="mobile-settings-links">
<Link href="/backup" className="mobile-settings-link">
<Cloud size={18} />
<span>{t('nav_backup_strategy')}</span>
</Link>
)}
</div>
</div>
{isAdmin && (
<div className="settings-home-section">
<h3>{t('nav_group_management')}</h3>
<div className="mobile-settings-links">
<Link href="/admin" className="mobile-settings-link">
<ShieldUser size={18} />
<span>{t('nav_admin_panel')}</span>