fix(ui): optimize mobile layout for header and settings page

This commit is contained in:
Supra4E8C
2025-12-15 18:53:03 +08:00
parent a993299cb5
commit 8d606aa456
4 changed files with 58 additions and 17 deletions

View File

@@ -300,9 +300,6 @@ export function MainLayout() {
<span className="brand-full">{fullBrandName}</span>
<span className="brand-abbr">{abbrBrandName}</span>
</div>
<Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
{headerIcons.menu}
</Button>
</div>
<div className="right">
@@ -320,6 +317,9 @@ export function MainLayout() {
</div>
<div className="header-actions">
<Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
{headerIcons.menu}
</Button>
<Button variant="ghost" size="sm" onClick={handleRefreshAll} title={t('header.refresh_all')}>
{headerIcons.refresh}
</Button>

View File

@@ -105,3 +105,33 @@
display: flex;
gap: $spacing-sm;
}
.retryRow {
display: flex;
align-items: flex-end;
gap: $spacing-md;
flex-wrap: wrap;
:global(.form-group) {
margin-bottom: 0;
}
@include mobile {
flex-direction: column;
align-items: stretch;
}
}
.retryInput {
width: 140px;
@include mobile {
width: 100%;
}
}
.retryButton {
@include mobile {
width: 100%;
}
}

View File

@@ -266,18 +266,27 @@ export function SettingsPage() {
</Card>
<Card title={t('basic_settings.retry_title')}>
<Input
label={t('basic_settings.retry_count_label')}
type="number"
value={retryValue}
onChange={(e) => setRetryValue(Number(e.target.value))}
disabled={disableControls || loading}
rightElement={
<Button onClick={handleRetryUpdate} loading={pending.retry} disabled={disableControls || loading}>
{t('basic_settings.retry_update')}
</Button>
}
/>
<div className={styles.retryRow}>
<Input
label={t('basic_settings.retry_count_label')}
type="number"
inputMode="numeric"
min={0}
step={1}
value={retryValue}
onChange={(e) => setRetryValue(Number(e.target.value))}
disabled={disableControls || loading}
className={styles.retryInput}
/>
<Button
className={styles.retryButton}
onClick={handleRetryUpdate}
loading={pending.retry}
disabled={disableControls || loading}
>
{t('basic_settings.retry_update')}
</Button>
</div>
</Card>
<Card title={t('basic_settings.quota_title')}>

View File

@@ -139,8 +139,10 @@
// 移动端:禁用动画,只显示缩写
@media (max-width: $breakpoint-mobile) {
margin-right: $spacing-sm;
cursor: default;
flex-shrink: 1;
min-width: 0;
margin-right: 0;
.brand-full,
.brand-abbr {
@@ -168,7 +170,7 @@
flex-shrink: 0;
@media (max-width: $breakpoint-mobile) {
display: flex;
display: inline-flex;
}
}