diff --git a/web/admin/src/components/PageHeader.vue b/web/admin/src/components/PageHeader.vue index 3235296..72900be 100644 --- a/web/admin/src/components/PageHeader.vue +++ b/web/admin/src/components/PageHeader.vue @@ -22,6 +22,7 @@ defineProps<{ display: flex; align-items: flex-start; justify-content: space-between; + gap: 12px; margin-bottom: 20px; } @@ -43,4 +44,16 @@ defineProps<{ font-size: 14px; color: var(--ta-text-tertiary); } + +/* 移动端:标题与操作区纵向堆叠,操作按钮自动换行,避免横向溢出 */ +@media (max-width: 768px) { + .page-header { + flex-direction: column; + align-items: stretch; + } + .page-header__actions { + width: 100%; + flex-wrap: wrap; + } +} diff --git a/web/admin/src/styles/main.css b/web/admin/src/styles/main.css index 56a536f..b395bc8 100644 --- a/web/admin/src/styles/main.css +++ b/web/admin/src/styles/main.css @@ -338,6 +338,24 @@ body { border-radius: 8px; } +/* 移动端:Arco RangePicker 弹层双日历纵向堆叠,避免横向超出屏幕。 + 弹层 teleport 到 body,scoped / :deep 均无法触达,必须用全局样式。 + .arco-picker-range-wrapper(display:flex) 默认横向并排两个 DatePanel, + 强制换行 + 每个面板各占满宽,即可在窄屏纵向堆叠成单列。 */ +@media (max-width: 768px) { + .arco-picker-range-wrapper { + flex-wrap: wrap; + } + .arco-picker-range-wrapper > * { + flex: 1 0 100%; + width: 100%; + } + /* 选择器输入框移动端撑满,避免固定宽度(如 340px)在小屏横向溢出 */ + .arco-picker { + width: 100% !important; + } +} + /* ===== Table Page Layout (内部滚动 + 左上统计 + 右下分页) ===== */ /* 页面根:纵向 flex 撑满可用高度,自身不滚动 */ diff --git a/web/admin/src/views/ai/ChannelsPage.vue b/web/admin/src/views/ai/ChannelsPage.vue index 8bf5ceb..5072d93 100644 --- a/web/admin/src/views/ai/ChannelsPage.vue +++ b/web/admin/src/views/ai/ChannelsPage.vue @@ -500,7 +500,7 @@ const { exporting, exportFile } = useExport({ - + diff --git a/web/admin/src/views/ai/ModelGroupsPage.vue b/web/admin/src/views/ai/ModelGroupsPage.vue index fb8397f..6477058 100644 --- a/web/admin/src/views/ai/ModelGroupsPage.vue +++ b/web/admin/src/views/ai/ModelGroupsPage.vue @@ -245,6 +245,9 @@ onMounted(() => { - + diff --git a/web/admin/src/views/system/SettingsPage.vue b/web/admin/src/views/system/SettingsPage.vue index 3703997..f57313d 100644 --- a/web/admin/src/views/system/SettingsPage.vue +++ b/web/admin/src/views/system/SettingsPage.vue @@ -149,4 +149,41 @@ onMounted(() => { gap: 8px; margin-top: 16px; } + +/* 移动端:左侧分类菜单转为顶部横向滚动条,内容区下沉为单列,避免 200px 固定侧栏挤压内容 */ +@media (max-width: 768px) { + .settings-layout { + flex-direction: column; + gap: 12px; + } + .settings-sidebar { + width: 100%; + position: sticky; + top: 0; + z-index: 5; + } + .settings-sidebar :deep(.arco-menu-inner) { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + padding: 4px; + /* 隐藏横向滚动条,保留可滑动 */ + scrollbar-width: none; + } + .settings-sidebar :deep(.arco-menu-inner)::-webkit-scrollbar { + display: none; + } + .settings-sidebar :deep(.arco-menu-item) { + flex-shrink: 0; + white-space: nowrap; + margin: 0 2px; + } + .settings-footer { + /* 底部按钮在移动端填满整行,便于拇指触达 */ + justify-content: flex-start; + } + .settings-footer :deep(.arco-btn) { + flex: 1; + } +} diff --git a/web/admin/src/views/system/settings/PerformanceTab.vue b/web/admin/src/views/system/settings/PerformanceTab.vue index 0b8083a..8dc2cd0 100644 --- a/web/admin/src/views/system/settings/PerformanceTab.vue +++ b/web/admin/src/views/system/settings/PerformanceTab.vue @@ -161,4 +161,19 @@ function set(key: string, v: number | undefined): void { .compact-row :deep(.arco-input-number) { width: 160px; } + +/* 移动端:3 列分组降为单列,行内输入框收窄并允许换行,避免横向溢出 */ +@media (max-width: 768px) { + .perf-grid { + grid-template-columns: 1fr; + gap: 12px; + } + .compact-row { + flex-wrap: wrap; + } + .compact-row :deep(.arco-input-number) { + width: 140px; + max-width: 60%; + } +} diff --git a/web/admin/src/views/system/settings/common.css b/web/admin/src/views/system/settings/common.css index b3ff97f..64bafc7 100644 --- a/web/admin/src/views/system/settings/common.css +++ b/web/admin/src/views/system/settings/common.css @@ -23,6 +23,14 @@ grid-column: 1 / -1; } +/* 移动端:表单字段单列堆叠,避免双列在窄屏被挤压 */ +@media (max-width: 768px) { + .section-grid { + grid-template-columns: 1fr; + gap: 12px; + } +} + .switch-row { display: flex; align-items: center;