mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-02 19:00:49 +08:00
fix(ui): optimize mobile layout for header and settings page
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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')}>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user