improve(ui):优化移动端显示效果

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;
+  }
+}
 </style>

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 撑满可用高度，自身不滚动 */

web/admin/src/views/ai/ChannelsPage.vue

@@ -500,7 +500,7 @@ const { exporting, exportFile } = useExport({
 
     <!-- Filters -->
     <ACard :bordered="false" class="mb-4">
-      <ASpace>
+      <ASpace wrap>
         <AInputNumber v-model="filterID" placeholder="渠道 ID" :min="1" allow-clear style="width: 120px" @change="handleFilter" @clear="handleFilter" />
         <ASelect v-model="filterType" :options="[{ label: '全部类型', value: '' }, ...providerTypeOptions]" placeholder="供应商类型" allow-clear allow-search style="width: 180px" @change="handleFilter" />
         <AInput v-model="filterModel" placeholder="搜索模型名..." allow-clear style="width: 160px" @keydown.enter="handleFilter" @clear="handleFilter" />

web/admin/src/views/ai/ModelGroupsPage.vue

@@ -245,6 +245,9 @@ onMounted(() => {
 <template>
   <div class="page-table">
     <PageHeader title="模型分组" description="通过分组批量管理租户可用的模型，新增模型加入分组后自动对组内租户生效">
+      <template #actions>
+        <AButton type="primary" @click="openCreate">创建分组</AButton>
+      </template>
     </PageHeader>
 
     <AAlert v-if="!loading && !hasDefaultGroup" type="warning" class="mb-4" closable>
@@ -252,23 +255,14 @@ onMounted(() => {
     </AAlert>
 
     <ACard :bordered="false" class="mb-4">
-      <ARow :gutter="16" align="center">
-        <ACol :span="8">
-          <AInput v-model="filterSearch" placeholder="搜索分组名称或标识" allow-clear @clear="resetFilter" @press-enter="() => { pagination.current = 1; fetchData() }" />
-        </ACol>
-        <ACol :span="4">
-          <ASelect v-model="filterStatus" placeholder="全部状态" allow-clear @change="() => { pagination.current = 1; fetchData() }">
-            <AOption value="active">启用</AOption>
-            <AOption value="disabled">禁用</AOption>
-          </ASelect>
-        </ACol>
-        <ACol :span="4">
-          <AButton @click="() => { pagination.current = 1; fetchData() }">查询</AButton>
-        </ACol>
-        <ACol :span="8" style="text-align: right">
-          <AButton type="primary" @click="openCreate">创建分组</AButton>
-        </ACol>
-      </ARow>
+      <ASpace wrap>
+        <AInput v-model="filterSearch" placeholder="搜索分组名称或标识" allow-clear style="width: 220px" @clear="resetFilter" @press-enter="() => { pagination.current = 1; fetchData() }" />
+        <ASelect v-model="filterStatus" placeholder="全部状态" allow-clear style="width: 140px" @change="() => { pagination.current = 1; fetchData() }">
+          <AOption value="active">启用</AOption>
+          <AOption value="disabled">禁用</AOption>
+        </ASelect>
+        <AButton @click="() => { pagination.current = 1; fetchData() }">查询</AButton>
+      </ASpace>
     </ACard>
 
     <ACard :bordered="false">

web/admin/src/views/ai/ModelsPage.vue

@@ -617,7 +617,7 @@ function resetImport() {
 
     <!-- Filters -->
     <ACard :bordered="false" class="mb-4">
-      <ASpace>
+      <ASpace wrap>
         <ASelect
           v-model="filterCategory"
           :options="categoryOptions"

web/admin/src/views/finance/PaymentSettingsPage.vue

@@ -163,7 +163,7 @@ onMounted(() => {
 			<!-- 全局支付设置 -->
 			<ACard :bordered="false" :loading="settingsLoading" title="全局设置">
 				<AForm :model="settingsForm" :auto-label-width="true">
-					<AGrid :cols="2" :col-gap="24" :row-gap="0">
+					<AGrid :cols="{ xs: 1, sm: 1, md: 2 }" :col-gap="24" :row-gap="0">
 						<AGridItem>
 							<AFormItem label="金额选项" extra="预设充值金额，用逗号分隔">
 								<AInput v-model="settingsForm.amount_options" placeholder="10,20,50,100,200,500" />
@@ -218,7 +218,7 @@ onMounted(() => {
 					</div>
 				</template>
 				<AForm :model="epayForm" :auto-label-width="true">
-					<AGrid :cols="2" :col-gap="24" :row-gap="0">
+					<AGrid :cols="{ xs: 1, sm: 1, md: 2 }" :col-gap="24" :row-gap="0">
 						<AGridItem>
 							<AFormItem label="启用">
 								<ASwitch v-model="epayForm.is_enabled" />

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;
+	}
+}
 </style>

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%;
+	}
+}
 </style>

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;