From bd90d2099f09e3ac1739de1de581cddd8d5632df Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Sun, 1 Nov 2026 22:28:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(pl):=20=E5=B0=86=E7=BB=9F=E8=AE=A1=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E5=86=85=E5=AE=B9=E7=BA=A6=E6=9D=9F=E5=88=B0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=8F=AF=E8=A7=86=E5=AE=BD=E5=BA=A6=E5=B9=B6=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81=E5=B7=A6=E5=AF=B9=E9=BD=90=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-admin/scripts/quota-statistics.test.ts    | 26 ++++++++++++++++++-
 .../pl/quota-statistics/StatisticsPanel.vue   | 20 +++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/web-admin/scripts/quota-statistics.test.ts b/web-admin/scripts/quota-statistics.test.ts
index 84bea97fe..d343719f3 100644
--- a/web-admin/scripts/quota-statistics.test.ts
+++ b/web-admin/scripts/quota-statistics.test.ts
@@ -64,6 +64,7 @@ function deferred() {
   return { promise, resolve, reject }
 }
 function harness(fixed?: string) {
+  const viewportWidth = vue.ref(1120)
   const calls: any[] = [],
     permissions: any[] = [],
     unmount: Function[] = []
@@ -97,6 +98,7 @@ function harness(fixed?: string) {
       permissions.push(p)
       return p.promise
     },
+    useElementSize: () => ({ width: viewportWidth }),
     useListTableViewportHeight: () => ({ tableHeight: vue.ref(400) }),
     usePersistedListColumns,
     useServerColumnFilters,
@@ -126,11 +128,12 @@ function harness(fixed?: string) {
   const state = scope.run(() =>
     new Function(
       ...Object.keys(env),
-      `${code}; return { rows, fixedDetail, details, load, loadDetail, allowed, canEdit, keyword, setFilterState, page, total }`
+      `${code}; return { rows, fixedDetail, details, load, loadDetail, allowed, canEdit, keyword, setFilterState, page, total, expansionStyle }`
     )(...Object.values(env))
   )
   return {
     state,
+    viewportWidth,
     calls,
     permissions,
     props,
@@ -632,6 +635,7 @@ for (const wrapper of [
         usePersistedListColumns,
         useServerColumnFilters,
         createStatisticsLoader,
+        useElementSize: () => ({ width: vue.ref(1120) }),
         useListTableViewportHeight: () => ({ tableHeight: vue.ref(400) }),
         statusLabel: statisticsLabels.statusLabel,
         contractTypeLabel: statisticsLabels.contractTypeLabel
@@ -669,3 +673,23 @@ for (const wrapper of [
       app.unmount()
     })
 }
+
+test('expanded content follows the table viewport width and keeps alignment local', () => {
+  const h = harness()
+  assert.equal(h.state.expansionStyle.value.width, '1120px')
+  h.viewportWidth.value = 760
+  assert.equal(h.state.expansionStyle.value.width, '760px')
+  const sfc = parse(
+    readFileSync(
+      new URL('../src/views/pl/quota-statistics/StatisticsPanel.vue', import.meta.url),
+      'utf8'
+    )
+  ).descriptor
+  assert.match(
+    sfc.template!.content,
+    /class="view-section statistics-expansion"\s+:style="expansionStyle"/
+  )
+  assert.equal(sfc.styles[0].scoped, true)
+  assert.match(sfc.styles[0].content, /text-align: left/)
+  h.stop()
+})
diff --git a/web-admin/src/views/pl/quota-statistics/StatisticsPanel.vue b/web-admin/src/views/pl/quota-statistics/StatisticsPanel.vue
index 096fb9f31..7951f18e2 100644
--- a/web-admin/src/views/pl/quota-statistics/StatisticsPanel.vue
+++ b/web-admin/src/views/pl/quota-statistics/StatisticsPanel.vue
@@ -67,7 +67,11 @@
         >
           <el-table-column type="expand"
             ><template #default="{ row }">
-              <div v-loading="details[row.id]?.loading" class="view-section">
+              <div
+                v-loading="details[row.id]?.loading"
+                class="view-section statistics-expansion"
+                :style="expansionStyle"
+              >
                 <el-alert
                   v-if="details[row.id]?.error"
                   title="详情加载失败"
@@ -138,6 +142,7 @@
   </section>
 </template>
 <script setup lang="ts">
+  import { useElementSize } from '@vueuse/core'
   import { Edit, Refresh, RefreshLeft } from '@element-plus/icons-vue'
   import { fetchGetMenuCodes } from '@/api/auth'
   import { useUserStore } from '@/store/modules/user'
@@ -345,6 +350,10 @@
   const tableWrapRef = ref<HTMLElement | null>(null),
     pagerRef = ref<HTMLElement | null>(null),
     tableRef = ref()
+  const { width: tableViewportWidth } = useElementSize(tableWrapRef)
+  const expansionStyle = computed(() => ({
+    width: tableViewportWidth.value > 0 ? `${tableViewportWidth.value}px` : undefined
+  }))
   const { tableHeight } = useListTableViewportHeight({
     tableEl: tableWrapRef,
     pagerEl: pagerRef,
@@ -352,3 +361,12 @@
     enabled: computed(() => !props.embedded)
   })
 </script>
+
+<style scoped>
+  .statistics-expansion {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 16px;
+    text-align: left;
+  }
+</style>