From 4ee294b20800dce3e3155df993d47e69038f134e Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Mon, 31 Aug 2026 13:28:50 +0800
Subject: [PATCH] fix(frontend): improve mobile layout sizing

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/views/accounts/index.vue                     | 8 ++++----
 frontend/src/views/usage/components/UsageCostCard.vue     | 2 +-
 frontend/src/views/usage/components/UsageHealthCard.vue   | 2 +-
 .../src/views/usage/components/UsagePerformanceCard.vue   | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index 2b5bc9d8b..1d0b3f510 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -157,7 +157,7 @@ const {
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 w-full flex-col overflow-hidden">
+  <div class="flex min-h-0 w-full flex-col xl:h-full xl:overflow-hidden">
     <BasePageHeader
       class="h-17"
       title="账号管理"
@@ -167,7 +167,7 @@ const {
     <AccountOverviewCards :summary="accountSummary" />
 
     <BaseCard
-      class="mt-4 flex h-[calc(100dvh-250px)] min-h-125 flex-col"
+      class="mt-4 flex flex-col xl:h-[calc(100dvh-250px)] xl:min-h-125"
     >
       <template #header>
         <AccountFilters
@@ -188,9 +188,9 @@ const {
       </template>
 
       <template #body>
-        <div class="flex h-full min-h-0 flex-col">
+        <div class="flex min-h-0 flex-col xl:h-full">
           <BaseTable
-            class="min-h-0 flex-1 [--cp-table-row-height:72px]"
+            class="h-100! min-h-100 flex-none [--cp-table-row-height:72px] xl:h-auto! xl:min-h-0 xl:flex-1"
             :columns="accountColumns"
             :rows="accounts"
             :loading="loading"
diff --git a/frontend/src/views/usage/components/UsageCostCard.vue b/frontend/src/views/usage/components/UsageCostCard.vue
index b7d6251d9..33c07cc95 100644
--- a/frontend/src/views/usage/components/UsageCostCard.vue
+++ b/frontend/src/views/usage/components/UsageCostCard.vue
@@ -236,7 +236,7 @@ function costAmount(value: string | null, pointIndex: number) {
     as="article"
     title="成本效率"
     description="实际费用、缓存节省、服务层溢价与单位成本"
-    class="h-full min-h-90"
+    class="min-h-90 xl:h-full"
   >
     <template #actions>
       <BaseSegmented v-model="activeView" label="成本视图" :options="viewOptions" :disabled="loading" class="w-50" />
diff --git a/frontend/src/views/usage/components/UsageHealthCard.vue b/frontend/src/views/usage/components/UsageHealthCard.vue
index 6a66fc898..7e5ce7668 100644
--- a/frontend/src/views/usage/components/UsageHealthCard.vue
+++ b/frontend/src/views/usage/components/UsageHealthCard.vue
@@ -163,7 +163,7 @@ function formatTooltip(params: unknown) {
     as="article"
     title="请求健康"
     :description="`按${granularityText}区分服务结果、取消、未完成与调用方错误`"
-    class="h-full min-h-90"
+    class="min-h-90 xl:h-full"
   >
     <template #body>
       <div class="grid min-h-66" :class="hasData ? 'gap-3' : 'h-full'">
diff --git a/frontend/src/views/usage/components/UsagePerformanceCard.vue b/frontend/src/views/usage/components/UsagePerformanceCard.vue
index 2c83f81f9..4963554d7 100644
--- a/frontend/src/views/usage/components/UsagePerformanceCard.vue
+++ b/frontend/src/views/usage/components/UsagePerformanceCard.vue
@@ -239,7 +239,7 @@ function formatThroughput(value: number | null) {
     as="article"
     title="响应速度"
     description="延迟、吞吐与调度分位"
-    class="h-full min-h-90"
+    class="min-h-90 xl:h-full"
   >
     <template #actions>
       <BaseSegmented v-model="activeView" label="性能指标" :options="viewOptions" :disabled="loading" class="w-68" />