fix(mobile): 修复全站排查发现的移动端布局问题

全站排查各页面移动端表现,修复以下确认会溢出/挤压的布局:

- 分组用户倍率/RPM 上限弹窗:7 列宽表滚动容器补横向滚动(min-w-max)
- 设置页联盟自定义用户表:容器 overflow-hidden 改为 overflow-x-auto
- 模型/分组/端点分布、消费排行、用户仪表盘 5 处甜甜圈图例表:
  移动端纵向堆叠(flex-col sm:flex-row),图例表全宽并支持横向滚动
- 安装向导:步骤指示器移动端只显示序号圆点(hidden sm:inline)避免
  硬溢出,表单两列栅格移动端折叠为单列
- 设置页:支付商品名三列、Beta 策略与帮助图片两列输入行移动端折叠
- 分组创建/编辑弹窗:三个 time 输入的三列行移动端折叠(时间控件有
  固有宽度,窄屏弹窗内会硬溢出)
- 密钥页分组选择浮层:min-w-[380px] 改为视口限宽 + JS 夹取 left,
  对齐 AccountGroupsCell 的定位收敛做法

桌面端布局均保持不变。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
J606yandClaude Fable 5 committed 2026-07-20 22:10:19 +08:00
1 parent 0df490961b
commit 64ab08e4aa
10 files changed
+38 -35

No files matched your search

@@ -27,12 +27,12 @@
<LoadingSpinner size="md" />
</div>
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">{{ t('dashboard.modelDistribution') }}</h3>
<div class="flex items-center gap-6">
<div class="h-48 w-48">
<div class="flex flex-col items-center gap-4 sm:flex-row sm:gap-6">
<div class="h-48 w-48 shrink-0">
<Doughnut v-if="modelData" :data="modelData" :options="doughnutOptions" />
<div v-else class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400">{{ t('dashboard.noDataAvailable') }}</div>
</div>
<div class="max-h-48 flex-1 overflow-y-auto">
<div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
<table class="w-full text-xs">
<thead>
<tr class="text-gray-500 dark:text-gray-400">